// ==UserScript==
// @name         交互式悬浮面板 (紫色主题)
// @namespace    http://tampermonkey.net/  // Optional: Change to your namespace (e.g., your website or GitHub)
// @version      2.0
// @description  在页面上添加一个可拖动、可折叠、带标签切换和新控件的紫色主题交互式面板。
// @author       Your Name // CHANGE THIS
// @match        *://*/*  // VERY IMPORTANT: Change this to the specific websites you want the panel on! E.g., *://*.example.com/*
// @icon         data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzhiNWNmNiI+PHBhdGggZD0iTTIxLjkyIDEyLjEzYy0uMS0uMjUtLjI1LS40OC0uNDMtLjY4bC04LTlhMSAxIDAgMCAwLTEuNDggMEwxMiA0LjAxbC0xLjAxLTEuMTRhMSAxIDAgMCAwLTEuNDggMEwyLjc4IDExLjQ0YS45ODUuOTg1IDAgMCAwLS40My42OCAxIDEgMCAwIDAgLjU0IDEuMDhsNi4xLjY4di45M2MwIC41NS40NSAxIDEgMWgzYzEuMSAwIDItLjkgMi0ydi0uNzVsNi4wNy0uNjhhMSAxIDAgMCAwIC41NC0xLjA3ek0xNyA5bDQtNWExIDEgMCAwIDAtMS40MS0xLjQxTDExIDhsMy4yNy0zLjY5YTEgMSAwIDAgMSAxLjQxIDBMxNyA1em0tOSA3djJjMCAuNTUtLjQ1IDEtMSAxcy0xLS40NS0xLTF2LTJoLTJ2MmMwIDEuNjYgMS4zNCAzIDMgM2gyYzEuNjYgMCAzLTEuMzQgMy0zdi0yaDJ2Mi4wMWMwIDEuNjYgMS4zNCAzIDMgM2gxYTkgOSAwIDAgMC0xOCAwYzAgLjU1LjQ1IDEgMSAxaDEzLjU5Yy0uMzYtLjU5LS40MS0xLjI5LS4xMy0xLjk3TDE3IDE2LjgxVjE2aC05em0yLTEyLjM0TDE4Ljk5IDlsLS4wMS4wMS0zLjI3IDMuNjktNC43MS01LjM0ek00IDVhMSA5IDAgMCAwIDE4IDBoLTJhNyA3IDAgMCAxLTE0IDBWNUg0eiIvPjwvc3ZnPg== // Optional icon
// @grant        GM_addStyle
// @license      MIT // Optional: Choose a license (e.g., MIT, CC0)
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // 1. CSS Styles (Copied from the <style> tag)
    const panelCSS = `
        /* --- Base Styles --- */
        /* Avoid styling html, body directly in userscripts if possible, */
        /* unless absolutely necessary and tested. */
        /* Instead, focus styles on the panel itself. */

        /* --- Panel Container --- */
        .interactive-panel-userscript { /* Added -userscript suffix to avoid potential conflicts */
          position: fixed;
          top: 60px;
          left: 60px;
          width: 420px; /* Initial width */
          max-height: 650px; /* Max height */
          background: rgba(250, 245, 255, 0.75); /* Adjusted alpha */
          backdrop-filter: blur(14px);
          border-radius: 18px;
          box-shadow: 0 8px 25px rgba(109, 40, 217, 0.15); /* Slightly stronger default shadow */
          display: flex;
          flex-direction: column;
          overflow: hidden;
          resize: both;
          transition: box-shadow 0.3s ease, opacity 0.3s ease; /* Added opacity transition */
          z-index: 99999; /* Ensure high z-index */
          min-width: 250px;
          min-height: 50px;
          border: 1px solid rgba(167, 139, 250, 0.3);
          color: #374151; /* Default text color */
          font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          font-size: 14px; /* Base font size for content */
        }
        .interactive-panel-userscript:hover {
          box-shadow: 0 12px 30px rgba(109, 40, 217, 0.22);
        }

        /* --- Collapsed State --- */
        .interactive-panel-userscript.panel-collapsed {
          overflow: hidden !important;
          resize: none !important;
          opacity: 0.9;
          /* height is set by JS */
        }
        .interactive-panel-userscript.panel-collapsed .tab-navigation,
        .interactive-panel-userscript.panel-collapsed .tab-content {
          display: none;
        }

        /* --- Panel Header --- */
        .interactive-panel-userscript .panel-header {
          background: linear-gradient(to right, #6d28d9, #8b5cf6);
          color: #fff;
          padding: 10px 15px;
          cursor: move;
          display: flex;
          align-items: center;
          justify-content: space-between;
          user-select: none;
          font-size: 1rem; /* 16px */
          font-weight: 600;
          box-sizing: border-box;
          min-height: 48px;
          flex-shrink: 0;
        }
        .interactive-panel-userscript .panel-title-area {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-grow: 1;
            flex-shrink: 1;
            min-width: 50px;
            overflow: hidden;
        }
        .interactive-panel-userscript .panel-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .interactive-panel-userscript .panel-status-display {
          font-size: 0.8rem;
          font-weight: 400;
          padding: 2px 6px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 4px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100px;
          transition: background-color 0.3s ease; /* Smooth transition for status */
        }
         .interactive-panel-userscript .panel-status-display:empty {
             display: none; /* Hide status if empty */
         }
        .interactive-panel-userscript .panel-controls {
            display: flex;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
        }
        .interactive-panel-userscript .panel-header-button {
          background: transparent;
          border: none;
          color: #ede9fe;
          font-size: 1.1rem;
          cursor: pointer;
          transition: transform 0.2s ease, color 0.2s ease;
          padding: 0 5px;
          line-height: 1;
          border-radius: 4px;
        }
        .interactive-panel-userscript .panel-header-button:hover {
          transform: scale(1.15);
          color: #ffffff;
        }
        .interactive-panel-userscript .panel-header-button:active {
            transform: scale(1.05);
        }

        /* --- Tab Navigation --- */
        .interactive-panel-userscript .tab-navigation {
          display: flex;
          background: rgba(237, 233, 254, 0.8);
          border-bottom: 1px solid #c4b5fd;
          flex-shrink: 0;
          padding: 3px 5px 0;
        }
        .interactive-panel-userscript .tab-button {
          flex: 1;
          padding: 9px 5px;
          background: transparent;
          border: none;
          font-size: 0.875rem; /* 14px */
          cursor: pointer;
          transition: background 0.3s, color 0.3s, border-color 0.3s;
          color: #5b21b6;
          white-space: nowrap;
          border-bottom: 3px solid transparent;
          margin: 0 2px;
          border-radius: 6px 6px 0 0;
          outline: none; /* Remove default focus outline */
        }
         .interactive-panel-userscript .tab-button:focus-visible {
             box-shadow: 0 0 0 2px rgba(109, 40, 217, 0.4); /* Custom focus style */
         }
        .interactive-panel-userscript .tab-button:hover {
          background: rgba(196, 181, 253, 0.4);
          color: #4c1d95;
        }
        .interactive-panel-userscript .tab-button.active {
          background: linear-gradient(to right, #a78bfa, #c4b5fd);
          color: #3730a3;
          font-weight: 600;
          border-bottom-color: #6d28d9;
        }

        /* --- Tab Content --- */
        .interactive-panel-userscript .tab-content {
          flex: 1;
          overflow-y: auto;
          padding: 15px 20px;
          background: transparent; /* Let panel background show through */
          min-height: 100px;
          color: #374151;
        }
        .interactive-panel-userscript .tab-panel {
          display: none;
          animation: ipFadeIn 0.4s ease forwards; /* Prefixed animation name */
        }
        .interactive-panel-userscript .tab-panel.active {
          display: block;
        }
        @keyframes ipFadeIn { /* Prefixed animation name */
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }

        /* --- Content Specific Styles (Purple Theme) --- */
        .interactive-panel-userscript .tab-panel h2 {
          color: #6d28d9;
          margin-top: 0;
          margin-bottom: 15px;
          border-bottom: 1px solid #ddd6fe;
          padding-bottom: 5px;
          font-size: 1.1rem; /* Slightly larger heading */
        }
        .interactive-panel-userscript .tab-panel strong {
          color: #7c3aed;
          font-weight: 600; /* Ensure strong is bold */
        }

        .interactive-panel-userscript .memory-area ol { position: relative; margin-left: 15px; padding-left: 25px; list-style: none; }
        .interactive-panel-userscript .memory-area ol::before { content: ""; position: absolute; left: 8px; top: 5px; bottom: 5px; width: 2px; background: #a78bfa; border-radius: 1px; }
        .interactive-panel-userscript .memory-area ol li { position: relative; padding: 10px 0; font-size: 0.9em; }
        .interactive-panel-userscript .memory-area ol li::before { content: ""; position: absolute; left: -21px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: #8b5cf6; border-radius: 50%; border: 2px solid #f3e8ff; }

        .interactive-panel-userscript .status-bar ul { padding-left: 20px; margin: 10px 0; list-style-type: none; /* Remove default bullets */ }
        .interactive-panel-userscript .status-bar ul ul { padding-left: 20px; }
        .interactive-panel-userscript .status-bar li { margin-bottom: 6px; position: relative; padding-left: 15px; font-size: 0.9em;}
         .interactive-panel-userscript .status-bar li::before { /* Custom bullet */
            content: '•';
            position: absolute;
            left: 0;
            color: #a78bfa;
            font-weight: bold;
            font-size: 1.1em;
            line-height: 1;
         }

        .interactive-panel-userscript .options-area ol { list-style: none; padding: 0; margin: 0; }
        .interactive-panel-userscript .options-area li {
          background: rgba(167, 139, 250, 0.15);
          margin-bottom: 10px;
          padding: 12px 15px;
          border-radius: 8px;
          cursor: pointer;
          transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
          border-left: 4px solid #a78bfa;
          color: #4c1d95;
          font-size: 0.9em;
        }
        .interactive-panel-userscript .options-area li:hover {
          background: rgba(167, 139, 250, 0.25);
          transform: translateY(-2px);
          box-shadow: 0 3px 8px rgba(109, 40, 217, 0.08);
          border-left-color: #8b5cf6;
        }

        .interactive-panel-userscript .thinking-area ul { list-style: none; margin: 0; padding: 0 0 0 15px; color: #5b21b6; }
        .interactive-panel-userscript .thinking-area li { margin-bottom: 8px; position: relative; padding-left: 18px; font-size: 0.9em;}
        .interactive-panel-userscript .thinking-area li::before { /* Custom thinking bullet */
            content: '💡'; /* Or '🤔' */
            position: absolute;
            left: 0;
            top: 1px;
        }


        .interactive-panel-userscript .text-body p { margin: 10px 0; line-height: 1.6; }
        .interactive-panel-userscript .speech { color: #7c3aed; font-weight: bold; }
        .interactive-panel-userscript .mentality { color: #9333ea; font-style: italic; }
        .interactive-panel-userscript .closeup { color: #5b21b6; text-decoration: underline; text-decoration-color: #a78bfa; text-decoration-thickness: 1px; text-underline-offset: 2px; }

        /* Scrollbar styling */
        .interactive-panel-userscript .tab-content::-webkit-scrollbar {
            width: 8px;
        }
        .interactive-panel-userscript .tab-content::-webkit-scrollbar-track {
            background: rgba(237, 233, 254, 0.5); /* Light violet track */
            border-radius: 4px;
        }
        .interactive-panel-userscript .tab-content::-webkit-scrollbar-thumb {
            background-color: #c4b5fd;
            border-radius: 4px;
            border: 2px solid transparent; /* Make thumb seem smaller */
            background-clip: content-box;
        }
        .interactive-panel-userscript .tab-content::-webkit-scrollbar-thumb:hover {
            background-color: #a78bfa;
        }
    `; // End of CSS

    // 2. Inject CSS
    GM_addStyle(panelCSS);

    // 3. Panel HTML Structure (Copied from the <body>, inside the main div)
    const panelHTML = `
      <div class="panel-header">
        <div class="panel-title-area">
            <div class="panel-title">交互面板</div>
            <span class="panel-status-display" id="panelStatusUserscript">就绪</span> <!-- Changed ID -->
        </div>
        <div class="panel-controls">
            <button class="panel-header-button panel-refresh" title="刷新" aria-label="刷新">🔄</button>
            <button class="panel-header-button panel-simplify" title="简化回复" aria-label="简化回复">✨</button>
            <button class="panel-header-button panel-toggle" title="折叠/展开" aria-label="折叠/展开">–</button>
        </div>
      </div>
      <div class="tab-navigation">
        <button class="tab-button active" data-tab-target="text">文本内容</button>
        <button class="tab-button" data-tab-target="thinking">思考区</button>
        <button class="tab-button" data-tab-target="status">状态信息</button>
        <button class="tab-button" data-tab-target="memory">记忆</button>
        <button class="tab-button" data-tab-target="options">选项</button>
      </div>
      <div class="tab-content">
         <div class="tab-panel active" data-tab-panel="text" role="tabpanel">
          <div class="text-body">
            <h2>文章标题示例</h2>
            <p>这是一段示例文本内容，展示了基础的段落样式。您可以根据需要填充实际内容。</p>
            <p>这是一个对话：<span class="speech">“你好，沈小姐。这块玉佩似乎对你很重要？”</span></p>
            <p>这是一个心理活动：<span class="mentality">（他怎么会知道这玉佩... 难道是母亲那边的人？）</span></p>
            <p>这是一个特写：<span class="closeup">「玉佩在月光下泛着温润的光泽，奇特的纹样若隐若现。」</span></p>
            <p>更多内容可以添加在这里，滚动条会在内容超出时出现。</p>
          </div>
        </div>
        <div class="tab-panel" data-tab-panel="thinking" role="tabpanel">
           <div class="thinking-area">
               <h2>思考过程</h2>
               <ul>
                   <li>目标：与沈知微交互，探查玉佩信息。</li>
                   <li>初步观察：她对玉佩反应强烈，可能认识。</li>
                   <li>风险评估：直接询问可能引起警惕，甚至冲突。</li>
                   <li>策略1：试探性询问，观察反应。</li>
                   <li>策略2：若遇危险，利用环境脱身（假山、水域）。</li>
                   <li>当前决定：采用策略1，言语温和，保持距离。</li>
               </ul>
           </div>
        </div>
        <div class="tab-panel" data-tab-panel="status" role="tabpanel">
           <div class="status-bar">
               <h2>场景信息</h2>
               <ul>
                   <li><strong>时间：</strong> 永昌七年四月初三，戌时三刻</li>
                   <li><strong>地点：</strong> 沈府西园·漱玉水榭</li>
                   <li><strong>环境：</strong> 月光明亮，微风，水声潺潺，垂柳依依</li>
               </ul>
               <h2>用户状态</h2>
               <ul>
                   <li><strong>身份：</strong> 未知潜入者</li>
                   <li><strong>位置与姿势：</strong> 立于水榭栏杆旁，面向垂柳下的沈知微</li>
                   <li><strong>当前着装：</strong> 深青色劲装，腰间悬空剑鞘</li>
                   <li><strong>持有物：</strong> 特殊纹样玉佩（右手）</li>
               </ul>
               <h2>主要交互角色</h2>
               <ul>
                   <li><strong>姓名：</strong> 沈知微（沈府三小姐）</li>
                   <li><strong>当前状态：</strong> 惊疑不定，强作镇定，略带警惕</li>
                   <li><strong>位置与姿势：</strong> 站在垂柳下，左手提灯笼，右手微握</li>
                   <li><strong>着装细节：</strong>
                       <ul>
                           <li><strong>外衣/上装：</strong> 鹅黄纱衫</li>
                           <li><strong>下装/裙：</strong> 月白百褶裙</li>
                           <li><strong>内衣裤：</strong> 杏色主腰（可见领缘）</li>
                           <li><strong>配饰：</strong> 珍珠耳环，发间碧玉簪</li>
                       </ul>
                   </li>
               </ul>
           </div>
        </div>
        <div class="tab-panel" data-tab-panel="memory" role="tabpanel">
           <div class="memory-area">
               <h2>短期记忆</h2>
               <ol>
                   <li><strong>刚刚 | 水榭 | 沈知微：</strong> 她看到玉佩后明显愣住，眼神复杂。</li>
                   <li><strong>片刻前 | 西园：</strong> 避开巡逻护卫，潜入水榭区域。</li>
               </ol>
               <h2>长期记忆</h2>
               <ol>
                   <li><strong>永昌年间 | 任务简报：</strong> 沈家与某个失落的组织有关联，关键信物是特殊纹样玉佩。</li>
                   <li><strong>数年前 | 师门：</strong> 师傅曾提及玉佩的重要性，关系重大。</li>
                   <li><strong>童年 | 模糊印象：</strong> 似乎见过类似的纹样，但记忆不清。</li>
               </ol>
           </div>
        </div>
        <div class="tab-panel" data-tab-panel="options" role="tabpanel">
           <div class="options-area">
               <h2>当前选项</h2>
               <ol>
                   <li>[将玉佩收入怀中，压低声音："姑娘认错人了"]</li>
                   <li>[举起玉佩逼近："你认识这物件？说说它的来历"]</li>
                   <li>[突然揽住她的腰跃入假山后，耳语："别出声，有人来了"]</li>
                   <li>[温和询问："姑娘深夜在此，可是遗落了什么？在下或可帮忙。"]</li>
               </ol>
           </div>
        </div>
      </div>
    `; // End of HTML

    // 4. Create and Inject Panel HTML Element
    const panelDiv = document.createElement('div');
    panelDiv.className = 'interactive-panel-userscript'; // Use the suffixed class name
    panelDiv.innerHTML = panelHTML;
    document.body.appendChild(panelDiv);

    // 5. JavaScript Logic (Copied from the <script> tag and adapted)
    //    Use 'panelDiv' as the main container reference.

    const panel = panelDiv; // Use the dynamically created div
    const header = panel.querySelector('.panel-header');
    const toggleButton = panel.querySelector('.panel-toggle');
    const refreshButton = panel.querySelector('.panel-refresh');
    const simplifyButton = panel.querySelector('.panel-simplify');
    const panelStatusDisplay = panel.querySelector('#panelStatusUserscript'); // Use updated ID
    const tabButtons = panel.querySelectorAll('.tab-button');
    const tabPanels = panel.querySelectorAll('.tab-panel');
    const tabNavigation = panel.querySelector('.tab-navigation');
    const tabContent = panel.querySelector('.tab-content');
    const optionsList = panel.querySelector('.options-area ol'); // Get options list for delegation

    const animationDuration = 300;
    let statusTimeout = null; // To manage status reset timer

    // --- Status Update Function ---
    function updateStatus(message, duration = 2000) {
        if (!panelStatusDisplay) return; // Guard clause
        panelStatusDisplay.textContent = message;
        // Clear previous timer if any
        if (statusTimeout) {
            clearTimeout(statusTimeout);
        }
        // Optionally reset status after a delay
        if (duration > 0) {
            statusTimeout = setTimeout(() => {
                // Reset only if the current message is the one we set
                if (panelStatusDisplay.textContent === message) {
                    panelStatusDisplay.textContent = '就绪';
                }
                statusTimeout = null;
            }, duration);
        }
    }

    // --- Dragging Logic ---
    let isDragging = false, startX, startY, startLeft, startTop;
    if (header) { // Check if header exists
        header.addEventListener('mousedown', (e) => {
            if (e.target.closest('.panel-header-button')) return; // Ignore button clicks

            isDragging = true;
            startX = e.clientX;
            startY = e.clientY;
            const rect = panel.getBoundingClientRect();
            startLeft = rect.left;
            startTop = rect.top;
            // Prevent text selection during drag
            document.body.style.userSelect = 'none';
            document.body.style.cursor = 'move';
            panel.style.willChange = 'top, left';
            panel.style.transition = 'none'; // Disable transitions during drag for smoothness
        });
    } // End if(header)

    // Attach mousemove and mouseup to document to capture events outside the panel
    document.addEventListener('mousemove', (e) => {
        if (!isDragging || !panel) return;
        const dx = e.clientX - startX;
        const dy = e.clientY - startY;
        // Boundary checks using viewport dimensions
        const newLeft = Math.max(0, Math.min(window.innerWidth - panel.offsetWidth, startLeft + dx));
        const newTop = Math.max(0, Math.min(window.innerHeight - panel.offsetHeight, startTop + dy));
        panel.style.left = `${newLeft}px`;
        panel.style.top = `${newTop}px`;
    });

    document.addEventListener('mouseup', () => {
        if (isDragging) {
            isDragging = false;
            document.body.style.userSelect = '';
            document.body.style.cursor = '';
            if (panel) { // Check panel exists
                 panel.style.willChange = 'auto';
                 panel.style.transition = ''; // Re-enable CSS transitions
            }
        }
    });

    // --- Collapse/Expand Logic ---
    if (toggleButton && panel && header) { // Check elements exist
        toggleButton.addEventListener('click', () => {
            const isCollapsed = panel.classList.contains('panel-collapsed');
            const headerHeight = header.offsetHeight;

            panel.style.transition = `height ${animationDuration}ms ease, opacity ${animationDuration}ms ease`;
            panel.style.willChange = 'height, opacity';

            if (isCollapsed) {
                // --- Expand ---
                const originalWidth = panel.dataset.originalWidth || '420px';
                const originalHeight = panel.dataset.originalHeight || '500px';

                panel.style.width = originalWidth;
                panel.style.height = originalHeight;
                // Opacity handled by class removal below

                panel.classList.remove('panel-collapsed');
                toggleButton.textContent = '–';
                toggleButton.title = '折叠';
                toggleButton.setAttribute('aria-label', '折叠面板');

                setTimeout(() => {
                    panel.style.transition = '';
                    panel.style.resize = 'both';
                    panel.style.willChange = 'auto';
                    // Remove fixed height if it was a default, allow content flow
                     if (!panel.dataset.originalHeight) panel.style.height = '';
                }, animationDuration);
                 updateStatus('已展开', 1500);

            } else {
                // --- Collapse ---
                panel.dataset.originalWidth = `${panel.offsetWidth}px`;
                panel.dataset.originalHeight = `${panel.offsetHeight}px`;

                panel.style.width = `${panel.offsetWidth}px`; // Fix width explicitly
                panel.style.height = `${headerHeight}px`;
                panel.style.resize = 'none';
                panel.classList.add('panel-collapsed'); // Opacity handled by class

                toggleButton.textContent = '+';
                toggleButton.title = '展开';
                toggleButton.setAttribute('aria-label', '展开面板');

                setTimeout(() => {
                    panel.style.transition = '';
                    panel.style.willChange = 'auto';
                }, animationDuration);
                 updateStatus('已折叠', 1500);
            }
        });
    } // End if(toggleButton)

    // --- Button Click Handlers ---
    if (refreshButton) {
        refreshButton.addEventListener('click', () => {
            console.log('Refresh button clicked');
            updateStatus('刷新中...', 1000);
            // Add actual refresh logic here
            setTimeout(() => {
                updateStatus('刷新完成', 1500);
            }, 1000);
        });
    }
    if (simplifyButton) {
        simplifyButton.addEventListener('click', () => {
            console.log('Simplify button clicked');
            updateStatus('简化中...', 1000);
            // Add actual simplify logic here
            setTimeout(() => {
                updateStatus('简化完成', 1500);
            }, 1000);
        });
    }

    // --- Option Click Handler (using event delegation) ---
     if (optionsList) {
         optionsList.addEventListener('click', (e) => {
             // Check if the clicked element is an LI directly inside the OL
             if (e.target.tagName === 'LI' && e.target.parentElement === optionsList) {
                 // Try to find the option number (if they follow a pattern like starting with '[')
                 const text = e.target.textContent.trim();
                 const match = text.match(/^\[(\d+)\]/); // Example: Check for "[1] Option text"
                 const optionNumber = match ? match[1] : text.substring(0, 20) + '...'; // Fallback to text snippet

                 console.log(`Option clicked: ${text}`);
                 updateStatus(`选择: ${optionNumber}`, 2000);
                 // Add logic to handle the selected option here
                 // You might want to pass 'e.target' or 'text' to another function
             }
         });
     } else {
         // Fallback or alternative if optionsList isn't found or structure changes
         // Could add listeners to individual items if needed, but delegation is better.
         const optionItems = panel.querySelectorAll('.options-area li');
          optionItems.forEach((item, index) => {
              item.addEventListener('click', () => handleOptionClickFallback(index + 1, item.textContent));
          });
     }

     function handleOptionClickFallback(optionNumber, text) {
         console.log(`Option ${optionNumber} clicked: ${text}`);
         updateStatus(`选择选项 ${optionNumber}`, 2000);
     }

    // --- Tab Switching Logic ---
    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            if (!panel || panel.classList.contains('panel-collapsed')) {
                return;
            }
            const target = button.getAttribute('data-tab-target');

            tabButtons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');

            tabPanels.forEach(p => {
                p.classList.remove('active');
                p.style.display = 'none';
            });

            const targetPanel = panel.querySelector(`.tab-panel[data-tab-panel="${target}"]`);
            if (targetPanel) {
                targetPanel.style.display = 'block';
                void targetPanel.offsetWidth; // Force reflow for animation
                targetPanel.classList.add('active');
            }
        });
    });

    // --- Initial State Setup Function ---
    function initializePanel() {
         if (!panel || !header) return; // Ensure elements exist before setup

         const initialActiveButton = panel.querySelector('.tab-button.active');
         if (initialActiveButton) {
             const initialTarget = initialActiveButton.getAttribute('data-tab-target');
             const initialActivePanel = panel.querySelector(`.tab-panel[data-tab-panel="${initialTarget}"]`);
             if (initialActivePanel) {
                 tabPanels.forEach(p => p.style.display = 'none');
                 initialActivePanel.style.display = 'block';
                 initialActivePanel.classList.add('active');
             }
         } else {
            // Default to first tab if none are active
            const firstButton = panel.querySelector('.tab-button');
            const firstPanel = panel.querySelector('.tab-panel');
            if(firstButton && firstPanel){
                tabButtons.forEach(btn => btn.classList.remove('active'));
                tabPanels.forEach(p => { p.classList.remove('active'); p.style.display = 'none'; });
                firstButton.classList.add('active');
                firstPanel.classList.add('active');
                firstPanel.style.display = 'block';
            }
         }

         if (panel.classList.contains('panel-collapsed')) {
             panel.style.resize = 'none';
             panel.style.height = `${header.offsetHeight}px`;
             if(toggleButton) {
                 toggleButton.textContent = '+';
                 toggleButton.title = '展开';
                 toggleButton.setAttribute('aria-label', '展开面板');
             }
         } else {
             panel.style.resize = 'both';
             if(toggleButton) {
                 toggleButton.textContent = '–';
                 toggleButton.title = '折叠';
                 toggleButton.setAttribute('aria-label', '折叠面板');
             }
             // Don't set initial height unless collapsed, let CSS/content decide
             // panel.style.height = '';
         }

         updateStatus('面板已加载', 2500); // Slightly longer initial message
    }

    // --- Run Initialization ---
    // User scripts often run after DOMContentLoaded by default,
    // but wrapping in a check or small delay can sometimes help ensure
    // the target page's styles/scripts are settled.
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        initializePanel();
    } else {
        document.addEventListener('DOMContentLoaded', initializePanel);
    }

})(); // End of IIFE wrapper