// ==UserScript==
// @name         豆包视频&图片下载助手
// @namespace    https://www.doubao.com/
// @version      5.0.0
// @description  自动提取豆包(Doubao)网站中的视频与图片链接，支持视频/图片预览、一键复制、批量下载，带可拖拽悬浮按钮和红点提醒
// @author       Doubao Downloader
// @match        https://www.doubao.com/*
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_notification
// @run-at       document-end
// @noframes
// @supportURL   https://github.com
// @homepageURL  https://github.com
// @license MIT
//
// 免责声明：本脚本仅供学习和参考，切勿用于违法或商用，否则后果自负。
//
// ==/UserScript==

(function () {
  'use strict';

  const videoLinks = new Map();
  const imageLinks = new Map();
  const processedVideoSrcs = new Set();
  const processedImageSrcs = new Set();
  let activeTab = 'video';

  GM_addStyle(`
    #db-dl-btn, #db-dl-panel {
      --bg: #ffffff;
      --bg-sub: #f8fafc;
      --bg-elevated: #f1f5f9;
      --bg-hover: #f1f5f9;
      --border: #e2e8f0;
      --border-strong: #cbd5e1;
      --text: #0f172a;
      --text-sub: #475569;
      --text-muted: #94a3b8;
      --primary: #2563eb;
      --primary-hover: #1d4ed8;
      --primary-soft: #eff6ff;
      --danger: #ef4444;
      --danger-soft: #fef2f2;
      --danger-hover: #dc2626;
      --success: #10b981;
      --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
      --shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
      --shadow-lg: -8px 0 32px rgba(15, 23, 42, 0.12);
    }

    #db-dl-panel, #db-dl-btn, #db-dl-toast {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    #db-dl-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 2147483646;
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
      cursor: move;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border: 1px solid var(--border);
      outline: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    #db-dl-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25); }
    #db-dl-btn:active { transform: translateY(0); cursor: grabbing; }
    #db-dl-btn img { width: 32px; height: 32px; pointer-events: none; border-radius: 6px; }
    #db-dl-btn .badge {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #ef4444;
      box-shadow: 0 0 0 2px #ffffff, 0 2px 8px rgba(239, 68, 68, 0.5);
      pointer-events: none;
      transition: transform 0.2s ease;
      z-index: 10;
    }
    #db-dl-btn .badge.hidden { display: none; }
    #db-dl-btn .badge.pulse { animation: db-badge-pulse 1.6s ease-in-out infinite; }
    @keyframes db-badge-pulse {
      0%,100% { box-shadow: 0 0 0 2px #ffffff, 0 2px 6px rgba(239, 68, 68, 0.4); transform: scale(1); }
      50% { box-shadow: 0 0 0 2px #ffffff, 0 0 0 8px rgba(239, 68, 68, 0.15), 0 2px 8px rgba(239, 68, 68, 0.5); transform: scale(1.05); }
    }

    #db-dl-overlay {
      position: fixed;
      inset: 0;
      z-index: 2147483647;
      background: rgba(15, 23, 42, 0.4);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    #db-dl-overlay.show { opacity: 1; pointer-events: auto; }

    #db-dl-panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 480px;
      max-width: 92vw;
      z-index: 2147483648;
      background: var(--bg);
      color: var(--text);
      box-shadow: var(--shadow-lg);
      transform: translateX(105%);
      transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
      display: flex;
      flex-direction: column;
      font-size: 14px;
    }
    #db-dl-panel.open { transform: translateX(0); }

    .db-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 16px 0 20px;
      flex-shrink: 0;
      background: var(--bg);
    }
    .db-panel-header .title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: -0.01em;
      flex: 1;
      min-width: 0;
    }
    .db-panel-header .title svg { width: 22px; height: 22px; flex-shrink: 0; border-radius: 5px; }
    .db-panel-header .title-text { flex-shrink: 0; }
    .db-panel-header .count-tag {
      background: var(--primary);
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 10px;
      min-width: 24px;
      text-align: center;
      flex-shrink: 0;
    }
    .db-panel-header .close-btn {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-sub);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      line-height: 1;
      font-size: 18px;
      flex-shrink: 0;
    }
    .db-panel-header .close-btn:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

    .db-panel-tabs {
      display: flex;
      gap: 4px;
      padding: 12px 20px 0;
      flex-shrink: 0;
      background: var(--bg);
    }
    .db-panel-tabs button {
      flex: 1;
      padding: 8px 12px;
      border: none;
      background: transparent;
      color: var(--text-sub);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      border-radius: 8px 8px 0 0;
      font-family: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-bottom: 2px solid transparent;
    }
    .db-panel-tabs button svg { width: 14px; height: 14px; fill: currentColor; }
    .db-panel-tabs button:hover { color: var(--text); background: var(--bg-hover); }
    .db-panel-tabs button.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }
    .db-panel-tabs .tab-count {
      background: var(--bg-elevated);
      color: var(--text-sub);
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 8px;
      min-width: 18px;
      text-align: center;
    }
    .db-panel-tabs button.active .tab-count {
      background: var(--primary-soft);
      color: var(--primary);
    }

    .db-panel-toolbar {
      display: flex;
      gap: 6px;
      padding: 10px 16px;
      flex-shrink: 0;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
    }
    .db-panel-toolbar button {
      flex: 1;
      padding: 7px 0;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-sub);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s ease;
      font-weight: 500;
      font-family: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .db-panel-toolbar button svg { width: 12px; height: 12px; fill: currentColor; }
    .db-panel-toolbar button:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
    .db-panel-toolbar button.primary {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
      box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
    }
    .db-panel-toolbar button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

    .db-panel-list {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      overscroll-behavior: contain;
      background: var(--bg-sub);
    }
    .db-panel-list::-webkit-scrollbar { width: 6px; }
    .db-panel-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
    .db-panel-list::-webkit-scrollbar-track { background: transparent; }

    .db-disclaimer {
      flex-shrink: 0;
      padding: 10px 16px;
      border-top: 1px solid var(--border);
      font-size: 11px;
      color: var(--text-muted);
      text-align: center;
      line-height: 1.5;
      background: var(--bg);
    }

    .db-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: var(--text-muted);
      text-align: center;
      padding: 40px 20px;
      gap: 6px;
    }
    .db-empty-state .icon-wrap {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      background: var(--bg);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
    }
    .db-empty-state .icon-wrap svg { width: 28px; height: 28px; fill: var(--primary); opacity: 0.5; }
    .db-empty-state .hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

    .db-video-card, .db-image-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 10px;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
      animation: db-card-in 0.3s ease;
      position: relative;
    }
    @keyframes db-card-in {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes db-card-out {
      to { opacity: 0; transform: translateX(40px); height: 0; padding: 0; margin: 0; border-width: 0; }
    }
    .db-video-card:hover, .db-image-card:hover { border-color: var(--primary); box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08); }

    .db-card-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .db-thumb {
      width: 80px;
      height: 60px;
      border-radius: 6px;
      background: var(--bg-elevated);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid var(--border);
    }
    .db-thumb.video { height: 45px; }
    .db-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
    .db-thumb svg { width: 22px; height: 22px; fill: var(--primary); opacity: 0.5; }

    .db-card-info { flex: 1; min-width: 0; }
    .db-card-info .meta {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .db-card-info .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
    .db-card-info .meta .badge-mini {
      background: var(--primary-soft);
      color: var(--primary);
      font-size: 10px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 4px;
    }
    .db-card-info .filename {
      font-size: 12px;
      color: var(--text);
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
      line-height: 1.4;
    }

    .db-delete-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 22px;
      height: 22px;
      border-radius: 5px;
      border: none;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.15s ease;
    }
    .db-video-card:hover .db-delete-btn, .db-image-card:hover .db-delete-btn { opacity: 1; }
    .db-delete-btn:hover { background: var(--danger-soft); color: var(--danger); }
    .db-delete-btn svg { width: 12px; height: 12px; fill: currentColor; }

    .db-card-actions { display: flex; gap: 6px; }
    .db-card-actions button {
      flex: 1;
      padding: 7px 0;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-sub);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-family: inherit;
    }
    .db-card-actions button svg { width: 13px; height: 13px; fill: currentColor; }
    .db-card-actions button.copy-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
    .db-card-actions button.dl-btn {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }
    .db-card-actions button.dl-btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
    .db-card-actions button.copied {
      background: var(--success) !important;
      border-color: var(--success) !important;
      color: #fff !important;
    }

    #db-dl-toast {
      position: fixed;
      bottom: 88px;
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      z-index: 2147483649;
      background: var(--text);
      color: var(--bg);
      padding: 9px 18px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      opacity: 0;
      pointer-events: none;
      transition: all 0.2s ease;
      white-space: nowrap;
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.2);
    }
    #db-dl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    #db-preview-modal {
      position: fixed;
      inset: 0;
      z-index: 2147483650;
      background: rgba(0, 0, 0, 0.85);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 32px;
      backdrop-filter: blur(8px);
    }
    #db-preview-modal.show { display: flex; animation: db-modal-in 0.25s ease; }
    @keyframes db-modal-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    #db-preview-modal .preview-content {
      position: relative;
      max-width: 92vw;
      max-height: 92vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #db-preview-modal img,
    #db-preview-modal video {
      max-width: 92vw;
      max-height: 88vh;
      border-radius: 8px;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
      background: #000;
      display: block;
    }
    #db-preview-modal .preview-close {
      position: fixed;
      top: 20px;
      right: 24px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      font-size: 22px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
      z-index: 10;
      line-height: 1;
    }
    #db-preview-modal .preview-close:hover { background: rgba(255, 255, 255, 0.3); }
    #db-preview-modal .preview-info {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      padding: 10px 18px;
      border-radius: 8px;
      font-size: 12px;
      max-width: 80vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
    }
    #db-preview-modal video {
      outline: none;
    }

    .db-thumb { cursor: pointer; position: relative; }
    .db-thumb::after {
      content: '预览';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0);
      letter-spacing: 0.5px;
      transition: all 0.15s ease;
      pointer-events: none;
      border-radius: 6px;
    }
    .db-video-card:hover .db-thumb::after,
    .db-image-card:hover .db-thumb::after {
      background: rgba(15, 23, 42, 0.55);
      color: #fff;
    }
  `);

  function showToast(msg, duration) {
    let toast = document.getElementById('db-dl-toast');
    if (!toast) {
      toast = document.createElement('div');
      toast.id = 'db-dl-toast';
      document.body.appendChild(toast);
    }
    toast.textContent = msg;
    toast.classList.add('show');
    clearTimeout(toast._timer);
    toast._timer = setTimeout(() => toast.classList.remove('show'), duration || 1800);
  }

  function normalizeKey(url) {
    try {
      const u = new URL(url);
      return u.origin + u.pathname;
    } catch (e) {
      return url.split('?')[0].split('#')[0];
    }
  }

  function isVideoUrl(url) {
    if (!url) return false;
    if (url.includes('.mp4') || url.includes('.m3u8') || url.includes('.flv') || url.includes('.webm')) return true;
    if (url.includes('mime_type=video')) return true;
    if (url.includes('/video/') && url.includes('douyin')) return true;
    return false;
  }

  function isImageUrl(url) {
    if (!url) return false;
    if (/\.(png|jpg|jpeg|webp|gif|bmp|svg)(\?|$|#)/i.test(url)) return true;
    if (url.includes('mime_type=image')) return true;
    if (url.includes('imagex') || url.includes('rc_gen_image')) return true;
    if (url.includes('p1-sign') || url.includes('p3-flow-imagex') || url.includes('byteimg.com')) return true;
    return false;
  }

  function extractVideoSrc(element) {
    if (!element) return null;
    if (element.tagName === 'VIDEO') {
      if (element.src && element.src.startsWith('http')) return element.src;
      if (element.currentSrc && element.currentSrc.startsWith('http')) return element.currentSrc;
      const source = element.querySelector('source[src]');
      if (source && source.src.startsWith('http')) return source.src;
    }
    if (element.querySelectorAll) {
      const innerVid = element.querySelector('video[src]');
      if (innerVid && innerVid.src && innerVid.src.startsWith('http')) return innerVid.src;
    }
    const dataUrl = element.getAttribute && element.getAttribute('data-url');
    if (dataUrl && dataUrl.startsWith('http')) return dataUrl;
    return null;
  }

  function extractImageSrc(element) {
    if (!element) return null;
    if (element.tagName === 'IMG') {
      const src = element.src || element.currentSrc;
      if (src && src.startsWith('http')) return src;
      const dataSrc = element.getAttribute('data-src') || element.getAttribute('data-original');
      if (dataSrc && dataSrc.startsWith('http')) return dataSrc;
    }
    if (element.tagName === 'SOURCE') {
      if (element.src && element.src.startsWith('http')) return element.src;
      const srcset = element.srcset;
      if (srcset) {
        const firstUrl = srcset.split(',')[0].trim().split(' ')[0];
        if (firstUrl.startsWith('http')) return firstUrl;
      }
    }
    if (element.querySelectorAll) {
      const innerImg = element.querySelector('img[src]');
      if (innerImg) {
        const src = innerImg.src || innerImg.currentSrc;
        if (src && src.startsWith('http')) return src;
      }
    }
    const bgImg = element.style && element.style.backgroundImage;
    if (bgImg && bgImg.includes('url(')) {
      const match = bgImg.match(/url\(["']?(https?:\/\/[^"')]+)["']?\)/);
      if (match) return match[1];
    }
    return null;
  }

  function getActiveMap() { return activeTab === 'video' ? videoLinks : imageLinks; }
  function getActiveProcessed() { return activeTab === 'video' ? processedVideoSrcs : processedImageSrcs; }
  function getActiveExtractor() { return activeTab === 'video' ? extractVideoSrc : extractImageSrc; }

  function processVideo(el) {
    const src = extractVideoSrc(el);
    if (!src) return;
    const cleanSrc = src.replace(/&/g, '&');
    const key = normalizeKey(cleanSrc);
    if (processedVideoSrcs.has(key)) return;

    processedVideoSrcs.add(key);
    const timestamp = new Date().toLocaleTimeString('zh-CN', { hour12: false });
    const filename = extractFilename(cleanSrc, '.mp4');
    const resolution = extractResolution(cleanSrc);

    videoLinks.set(key, { src: cleanSrc, type: 'video', title: filename, timestamp, resolution });
    if (activeTab === 'video') addCard(key, 'video');
    updateBadge();
  }

  function processImage(src, sizeKb) {
    if (!src || !src.startsWith('http')) return;
    if (!isImageUrl(src)) return;
    const cleanSrc = src.replace(/&/g, '&');
    const key = normalizeKey(cleanSrc);
    if (processedImageSrcs.has(key)) return;

    processedImageSrcs.add(key);
    const timestamp = new Date().toLocaleTimeString('zh-CN', { hour12: false });
    const filename = extractFilename(cleanSrc, '.png');

    imageLinks.set(key, { src: cleanSrc, type: 'image', title: filename, timestamp, sizeKb });
    if (activeTab === 'image') addCard(key, 'image');
    updateBadge();
  }

  function processElement(el) {
    const url = extractImageSrc(el);
    if (url && isImageUrl(url)) {
      processImage(url);
      return;
    }
    const vidUrl = extractVideoSrc(el);
    if (vidUrl) processVideo(el);
  }

  function extractFilename(url, defaultExt) {
    try {
      const u = new URL(url);
      const pathParts = u.pathname.split('/').filter(Boolean);
      if (pathParts.length > 0) {
        const last = pathParts[pathParts.length - 1];
        if (last.includes('.')) return last;
        return last + defaultExt;
      }
    } catch (e) {}
    return 'file_' + Date.now() + defaultExt;
  }

  function extractResolution(url) {
    const match = url.match(/br=(\d+)/);
    if (match) {
      const br = parseInt(match[1]);
      return br > 1000 ? (br / 1000).toFixed(1) + ' Mbps' : br + ' kbps';
    }
    return '';
  }

  function formatSize(kb) {
    if (!kb) return '';
    if (kb > 1024) return (kb / 1024).toFixed(1) + ' MB';
    return kb + ' KB';
  }

  function scanPage() {
    document.querySelectorAll('div[class*="video-canvas-panel-player"]').forEach(processVideo);
    document.querySelectorAll('.xgplayer').forEach(processVideo);
    document.querySelectorAll('video').forEach(processVideo);

    document.querySelectorAll('img[src]').forEach(el => {
      const src = el.src || el.currentSrc;
      if (src && src.startsWith('http')) processImage(src);
    });
    document.querySelectorAll('img[data-src]').forEach(el => {
      const src = el.getAttribute('data-src');
      if (src && src.startsWith('http')) processImage(src);
    });
    document.querySelectorAll('source[srcset]').forEach(el => {
      const srcset = el.srcset;
      if (srcset) {
        const firstUrl = srcset.split(',')[0].trim().split(' ')[0];
        if (firstUrl.startsWith('http')) processImage(firstUrl);
      }
    });
  }

  function setupPerformanceObserver() {
    if (!window.PerformanceObserver) return;
    try {
      const obs = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          const url = entry.name;
          if (!url || !url.startsWith('http')) continue;
          if (!isImageUrl(url)) continue;
          const size = entry.transferSize ? Math.round(entry.transferSize / 1024) : 0;
          processImage(url, size);
        }
      });
      obs.observe({ type: 'resource', buffered: true });
    } catch (e) {}
  }

  function setupObserver() {
    const observer = new MutationObserver((mutations) => {
      let shouldScan = false;
      for (const mutation of mutations) {
        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
          for (const node of mutation.addedNodes) {
            if (node.nodeType === Node.ELEMENT_NODE) {
              if (node.querySelectorAll) {
                const matches = node.querySelectorAll('video[src], img[src], img[data-src], .xgplayer, div[class*="video-canvas-panel-player"]');
                if (matches.length > 0) { shouldScan = true; break; }
              }
              if (node.tagName === 'VIDEO' || node.tagName === 'IMG' || node.tagName === 'SOURCE') {
                shouldScan = true; break;
              }
            }
          }
        }
        if (mutation.type === 'attributes') {
          if (mutation.target.tagName === 'VIDEO' && mutation.attributeName === 'src') {
            if (mutation.target.src && mutation.target.src.startsWith('http')) processVideo(mutation.target);
          }
          if (mutation.target.tagName === 'IMG' && (mutation.attributeName === 'src' || mutation.attributeName === 'data-src')) {
            const src = mutation.target.src || mutation.target.currentSrc || mutation.target.getAttribute('data-src');
            if (src && src.startsWith('http')) processImage(src);
          }
        }
      }
      if (shouldScan) {
        clearTimeout(observer._debounce);
        observer._debounce = setTimeout(scanPage, 500);
      }
    });
    observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['src', 'data-src'] });
    return observer;
  }

  function buildUI() {
    const btn = document.createElement('button');
    btn.id = 'db-dl-btn';
    btn.title = '豆包视频&图片下载助手';
    btn.innerHTML = `
      <img src="https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/web/doubao_avatar_new.png" width="32" height="32"
           style="border-radius:6px;display:block"
           onerror="this.replaceWith(document.createElement('span'))" />
      <span class="badge hidden"></span>
    `;
    btn.addEventListener('click', togglePanel);
    setupDrag(btn);
    restorePosition(btn);
    document.body.appendChild(btn);

    const overlay = document.createElement('div');
    overlay.id = 'db-dl-overlay';
    overlay.addEventListener('click', closePanel);
    document.body.appendChild(overlay);

    const panel = document.createElement('div');
    panel.id = 'db-dl-panel';
    panel.innerHTML = `
      <div class="db-panel-header">
        <div class="title">
          <img src="https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/favicon/new-doubao/64x64.png" width="22" height="22" style="border-radius:4px;flex-shrink:0;display:block" />
          <span class="title-text">豆包视频&amp;图片下载助手</span>
        </div>
        <button class="close-btn" id="db-close-btn" aria-label="关闭">&times;</button>
      </div>
      <div class="db-panel-tabs">
        <button data-tab="video" class="active" id="db-tab-video">
          <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
          视频
          <span class="tab-count" id="db-tab-video-count">0</span>
        </button>
        <button data-tab="image" id="db-tab-image">
          <svg viewBox="0 0 24 24"><path d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
          图片
          <span class="tab-count" id="db-tab-image-count">0</span>
        </button>
      </div>
      <div class="db-panel-toolbar">
        <button id="db-scan-btn">
          <svg viewBox="0 0 24 24"><path d="M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.74 10h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
          重新扫描
        </button>
        <button id="db-copyall-btn">
          <svg viewBox="0 0 24 24"><path d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z"/></svg>
          复制全部
        </button>
        <button class="primary" id="db-dlall-btn">
          <svg viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
          下载全部
        </button>
      </div>
      <div class="db-panel-list" id="db-list-container"></div>
      <div class="db-disclaimer">
        免责声明：本脚本仅供学习和参考，切勿用于违法或商用，否则后果自负。
      </div>
    `;
    document.body.appendChild(panel);

    document.getElementById('db-close-btn').addEventListener('click', closePanel);
    document.getElementById('db-scan-btn').addEventListener('click', () => { scanPage(); showToast('扫描完成'); });
    document.getElementById('db-copyall-btn').addEventListener('click', copyAllLinks);
    document.getElementById('db-dlall-btn').addEventListener('click', downloadAll);
    document.getElementById('db-tab-video').addEventListener('click', () => switchTab('video'));
    document.getElementById('db-tab-image').addEventListener('click', () => switchTab('image'));

    renderActiveTab();
  }

  function switchTab(tab) {
    activeTab = tab;
    document.getElementById('db-tab-video').classList.toggle('active', tab === 'video');
    document.getElementById('db-tab-image').classList.toggle('active', tab === 'image');
    renderActiveTab();
  }

  function renderActiveTab() {
    const container = document.getElementById('db-list-container');
    if (!container) return;
    container.innerHTML = '';
    const items = Array.from(getActiveMap().values());
    if (items.length === 0) {
      container.innerHTML = `
        <div class="db-empty-state">
          <div class="icon-wrap">
            <svg viewBox="0 0 24 24"><path d="${activeTab === 'video' ? 'M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4h-4z' : 'M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'}"/></svg>
          </div>
          <span>暂无检测到${activeTab === 'video' ? '视频' : '图片'}</span>
          <span class="hint">${activeTab === 'video' ? '播放页面中的视频后将自动捕获' : '浏览页面或等待图片加载完成'}</span>
        </div>
      `;
      return;
    }
    items.forEach(item => addCard(null, item.type, item));
  }

  function addCard(key, type, preloadedItem) {
    const container = document.getElementById('db-list-container');
    if (!container) return;
    const emptyEl = container.querySelector('.db-empty-state');
    if (emptyEl) emptyEl.remove();

    const map = type === 'video' ? videoLinks : imageLinks;
    const item = preloadedItem || map.get(key);
    if (!item) return;

    const card = document.createElement('div');
    card.className = type === 'video' ? 'db-video-card' : 'db-image-card';
    card.dataset.src = item.src;
    card.dataset.key = key;

    const metaParts = [`<span class="badge-mini">${type === 'video' ? 'MP4' : 'IMG'}</span>`, `<span>${item.timestamp}</span>`];
    if (type === 'video' && item.resolution) metaParts.push(`<span class="dot"></span><span>${item.resolution}</span>`);
    if (type === 'image' && item.sizeKb) metaParts.push(`<span class="dot"></span><span>${formatSize(item.sizeKb)}</span>`);

    card.innerHTML = `
      <button class="db-delete-btn" title="删除">
        <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
      </button>
      <div class="db-card-row">
        <div class="db-thumb ${type === 'video' ? 'video' : 'image'}">
          <svg viewBox="0 0 24 24"><path d="${type === 'video' ? 'M8 5v14l11-7z' : 'M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'}"/></svg>
        </div>
        <div class="db-card-info">
          <div class="meta">${metaParts.join('')}</div>
          <div class="filename" title="${item.title}">${item.title}</div>
        </div>
      </div>
      <div class="db-card-actions">
        <button class="copy-btn">
          <svg viewBox="0 0 24 24"><path d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z"/></svg>
          复制
        </button>
        <button class="dl-btn">
          <svg viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
          下载
        </button>
      </div>
    `;

    card.querySelector('.copy-btn').addEventListener('click', function () {
      copyToClipboard(item.src, this);
    });
    card.querySelector('.dl-btn').addEventListener('click', function () {
      downloadFile(item.src, item.title);
    });
    card.querySelector('.db-delete-btn').addEventListener('click', function (e) {
      e.stopPropagation();
      deleteCard(key, type, card);
    });
    card.addEventListener('click', function (e) {
      if (e.target.closest('.db-card-actions') || e.target.closest('.db-delete-btn')) return;
      openPreview(item.src, type, item.src);
    });

    loadThumb(card.querySelector('.db-thumb'), item.src, type);

    container.insertBefore(card, container.firstChild);
    updateCounts();
  }

  function deleteCard(key, type, cardEl) {
    if (!cardEl) return;
    cardEl.style.animation = 'db-card-out 0.3s ease forwards';
    setTimeout(() => {
      cardEl.remove();
      if (type === 'video') {
        videoLinks.delete(key);
        processedVideoSrcs.delete(key);
      } else {
        imageLinks.delete(key);
        processedImageSrcs.delete(key);
      }
      updateCounts();
      updateBadge();
      const container = document.getElementById('db-list-container');
      if (container && container.children.length === 0) renderActiveTab();
      showToast('已删除');
    }, 280);
  }

  function loadThumb(thumbEl, src, type) {
    if (type === 'image') {
      const img = document.createElement('img');
      img.crossOrigin = 'anonymous';
      img.referrerPolicy = 'no-referrer';
      img.onload = () => {
        thumbEl.innerHTML = '';
        thumbEl.appendChild(img);
      };
      img.onerror = () => {};
      img.src = src;
    } else {
      // 视频：先用 canvas 截取第一帧
      const video = document.createElement('video');
      video.src = src;
      video.crossOrigin = 'anonymous';
      video.preload = 'metadata';
      video.muted = true;
      video.style.cssText = 'width:100%;height:100%;object-fit:cover;';

      let thumbLoaded = false;

      video.addEventListener('loadeddata', () => {
        try { video.currentTime = Math.min(0.1, video.duration * 0.05); }
        catch (e) {}
      });

      video.addEventListener('seeked', () => {
        if (thumbLoaded) return;
        thumbLoaded = true;
        try {
          const canvas = document.createElement('canvas');
          canvas.width = 160;
          canvas.height = 90;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
          const img = document.createElement('img');
          img.src = canvas.toDataURL('image/jpeg', 0.7);
          img.style.cssText = 'width:100%;height:100%;object-fit:cover;';
          thumbEl.innerHTML = '';
          thumbEl.appendChild(img);
        } catch (e) {}
        cleanup();
      });

      video.addEventListener('error', () => {
        if (thumbLoaded) return;
        thumbLoaded = true;
        cleanup();
      });

      function cleanup() {
        try { video.pause(); video.removeAttribute('src'); video.load(); } catch (e) {}
      }

      // 兜底：2秒后还没加载就用 img 标签加载视频 URL（部分浏览器支持）
      setTimeout(() => {
        if (thumbLoaded) return;
        thumbLoaded = true;
        const img = document.createElement('img');
        img.crossOrigin = 'anonymous';
        img.referrerPolicy = 'no-referrer';
        img.style.cssText = 'width:100%;height:100%;object-fit:cover;';
        img.onload = () => {
          if (img.naturalWidth > 0) {
            thumbEl.innerHTML = '';
            thumbEl.appendChild(img);
          }
        };
        img.src = src;
      }, 2500);
    }
  }

  function openPreview(src, type, title) {
    let modal = document.getElementById('db-preview-modal');
    if (!modal) {
      modal = document.createElement('div');
      modal.id = 'db-preview-modal';
      modal.innerHTML = `
        <button class="preview-close" aria-label="关闭">&times;</button>
        <div class="preview-content"></div>
        <div class="preview-info"></div>
      `;
      document.body.appendChild(modal);
      modal.addEventListener('click', (e) => {
        if (e.target === modal) closePreview();
      });
      modal.querySelector('.preview-close').addEventListener('click', closePreview);
    }
    const content = modal.querySelector('.preview-content');
    const info = modal.querySelector('.preview-info');
    content.innerHTML = '';
    info.textContent = title || '';

    if (type === 'video') {
      const video = document.createElement('video');
      video.src = src;
      video.controls = true;
      video.autoplay = true;
      video.style.cssText = 'max-width:92vw;max-height:88vh;';
      content.appendChild(video);
    } else {
      const img = document.createElement('img');
      img.src = src;
      img.alt = title || '';
      content.appendChild(img);
    }

    modal.classList.add('show');
  }

  function closePreview() {
    const modal = document.getElementById('db-preview-modal');
    if (!modal) return;
    modal.classList.remove('show');
    const content = modal.querySelector('.preview-content');
    if (content) {
      content.querySelectorAll('video').forEach(v => { try { v.pause(); v.removeAttribute('src'); v.load(); } catch (e) {} });
      content.innerHTML = '';
    }
  }

  function updateCounts() {
    const vc = videoLinks.size;
    const ic = imageLinks.size;
    document.getElementById('db-tab-video-count').textContent = vc;
    document.getElementById('db-tab-image-count').textContent = ic;
  }

  function updateBadge() {
    const badge = document.querySelector('#db-dl-btn .badge');
    if (!badge) return;
    const total = videoLinks.size + imageLinks.size;
    if (total === 0) {
      badge.classList.add('hidden');
      badge.classList.remove('pulse');
    } else {
      badge.classList.remove('hidden');
      badge.style.display = 'block';
      badge.classList.remove('pulse');
      void badge.offsetWidth;
      badge.classList.add('pulse');
    }
  }

  function togglePanel() {
    const panel = document.getElementById('db-dl-panel');
    if (panel.classList.contains('open')) closePanel(); else openPanel();
  }
  function openPanel() {
    document.getElementById('db-dl-panel').classList.add('open');
    document.getElementById('db-dl-overlay').classList.add('show');
    document.body.style.overflow = 'hidden';
    renderActiveTab();
    updateCounts();
  }
  function closePanel() {
    document.getElementById('db-dl-panel').classList.remove('open');
    document.getElementById('db-dl-overlay').classList.remove('show');
    document.body.style.overflow = '';
  }

  async function copyToClipboard(text, btnEl) {
    const originalHTML = btnEl.innerHTML;
    try {
      await navigator.clipboard.writeText(text);
      if (btnEl) {
        btnEl.classList.add('copied');
        btnEl.textContent = '✓ 已复制';
        setTimeout(() => { btnEl.classList.remove('copied'); btnEl.innerHTML = originalHTML; }, 1800);
      }
      showToast('链接已复制');
    } catch (e) {
      const ta = document.createElement('textarea');
      ta.value = text;
      ta.style.cssText = 'position:fixed;left:-9999px;';
      document.body.appendChild(ta);
      ta.select();
      document.execCommand('copy');
      document.body.removeChild(ta);
      showToast('链接已复制');
    }
  }

  function copyAllLinks() {
    const map = getActiveMap();
    if (map.size === 0) { showToast('没有可复制的链接'); return; }
    const urls = Array.from(map.values()).map(v => v.src).join('\n');
    copyToClipboard(urls, null);
    showToast(`已复制 ${map.size} 个${activeTab === 'video' ? '视频' : '图片'}链接`);
  }

  function downloadFile(src, filename) {
    const a = document.createElement('a');
    a.href = src;
    a.download = filename;
    a.target = '_blank';
    a.rel = 'noopener noreferrer';
    document.body.appendChild(a);
    a.click();
    setTimeout(() => document.body.removeChild(a), 100);
    setTimeout(() => { try { window.open(src, '_blank', 'noopener,noreferrer'); } catch (e) {} }, 500);
    showToast('开始下载');
  }

  function downloadAll() {
    const map = getActiveMap();
    if (map.size === 0) { showToast('没有可下载的资源'); return; }
    const links = Array.from(map.values()).map(v => ({ src: v.src, title: v.title }));
    showToast(`开始下载 ${links.length} 个${activeTab === 'video' ? '视频' : '图片'}`);
    links.forEach((item, i) => setTimeout(() => downloadFile(item.src, item.title), i * 800));
  }

  function setupDrag(btn) {
    let isDragging = false;
    let startX, startY, startRight, startBottom;
    let moved = false;

    const onStart = (e) => {
      if (e.button !== 0) return;
      isDragging = true;
      moved = false;
      startX = e.clientX;
      startY = e.clientY;
      const rect = btn.getBoundingClientRect();
      startRight = window.innerWidth - rect.right;
      startBottom = window.innerHeight - rect.bottom;
      btn.style.transition = 'none';
      document.body.style.userSelect = 'none';
    };

    const onMove = (e) => {
      if (!isDragging) return;
      const dx = e.clientX - startX;
      const dy = e.clientY - startY;
      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true;
      const newRight = Math.max(0, Math.min(window.innerWidth - 48, startRight - dx));
      const newBottom = Math.max(0, Math.min(window.innerHeight - 48, startBottom - dy));
      btn.style.right = newRight + 'px';
      btn.style.bottom = newBottom + 'px';
    };

    const onEnd = () => {
      if (!isDragging) return;
      isDragging = false;
      btn.style.transition = '';
      document.body.style.userSelect = '';
      if (moved) {
        savePosition(btn);
        btn._suppressClick = true;
        setTimeout(() => { btn._suppressClick = false; }, 50);
      }
    };

    btn.addEventListener('mousedown', onStart);
    document.addEventListener('mousemove', onMove);
    document.addEventListener('mouseup', onEnd);

    btn.addEventListener('click', (e) => {
      if (btn._suppressClick) { e.stopImmediatePropagation(); e.preventDefault(); }
    }, true);

    btn.addEventListener('touchstart', (e) => {
      const t = e.touches[0];
      onStart({ button: 0, clientX: t.clientX, clientY: t.clientY });
    }, { passive: true });
    btn.addEventListener('touchmove', (e) => {
      const t = e.touches[0];
      onMove({ clientX: t.clientX, clientY: t.clientY });
    }, { passive: true });
    btn.addEventListener('touchend', onEnd);
  }

  function savePosition(btn) {
    try {
      const rect = btn.getBoundingClientRect();
      localStorage.setItem('db-dl-btn-pos', JSON.stringify({
        right: window.innerWidth - rect.right,
        bottom: window.innerHeight - rect.bottom
      }));
    } catch (e) {}
  }

  function restorePosition(btn) {
    try {
      const saved = localStorage.getItem('db-dl-btn-pos');
      if (saved) {
        const pos = JSON.parse(saved);
        if (typeof pos.right === 'number') btn.style.right = pos.right + 'px';
        if (typeof pos.bottom === 'number') btn.style.bottom = pos.bottom + 'px';
      }
    } catch (e) {}
  }

  function setupKeyboard() {
    document.addEventListener('keydown', (e) => {
      if (e.ctrlKey && e.shiftKey && e.key === 'D') { e.preventDefault(); togglePanel(); }
      if (e.key === 'Escape') {
        const modal = document.getElementById('db-preview-modal');
        if (modal && modal.classList.contains('show')) {
          closePreview();
          return;
        }
        const panel = document.getElementById('db-dl-panel');
        if (panel && panel.classList.contains('open')) closePanel();
      }
    });
  }

  function init() {
    buildUI();
    setupKeyboard();
    setTimeout(scanPage, 1500);
    setupPerformanceObserver();
    setupObserver();
    setInterval(scanPage, 2000);
    console.log('[豆包下载助手] v5.0.0 已启动，支持视频&图片，快捷键 Ctrl+Shift+D');
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => setTimeout(init, 1000));
  } else {
    setTimeout(init, 1000);
  }
})();