<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>AI Intervention Agent</title>
    <link rel="icon" type="image/svg+xml" href="/icons/icon.svg" sizes="any" />
    <link rel="mask-icon" href="/icons/icon.svg" color="#8B5CF6" />
    <link rel="apple-touch-icon" href="/icons/icon.svg" />

    <!-- 0.0.0.0 访问兼容性：尽早重定向到 127.0.0.1，避免浏览器/Fetch/通知权限异常 -->
    <script nonce="{{ csp_nonce }}">
      ;(function redirectZeroHostToLoopback() {
        try {
          const url = new URL(window.location.href)
          if (url.hostname === '0.0.0.0') {
            url.hostname = '127.0.0.1'
            console.warn(
              `检测到访问地址为 0.0.0.0，已自动切换为 ${url.origin}（避免浏览器兼容性问题）`
            )
            window.location.replace(url.toString())
          }
        } catch (e) {
          // 忽略：不影响主流程
        }
      })()
    </script>

    <!-- 资源预加载优化：减少首屏渲染阻塞 -->
    <link rel="preload" href="/static/css/prism.css" as="style" />

    <!-- MathJax 数学公式支持 - 按需加载优化（1.17MB → 需要时才加载） -->
    <script src="/static/js/mathjax-loader.js" nonce="{{ csp_nonce }}"></script>

    <!-- Prism.js 代码高亮 CSS -->
    <link rel="stylesheet" href="/static/css/prism.css" />

    <!-- marked.js Markdown 渲染（defer 属性：按顺序异步加载） -->
    <script defer src="/static/js/marked.js" nonce="{{ csp_nonce }}"></script>

    <!-- Prism.js 代码高亮 JS（defer 属性：按顺序异步加载） -->
    <script defer src="/static/js/prism.js" nonce="{{ csp_nonce }}"></script>

    <style>
      /* 合规：不再打包/分发第三方字体，统一使用系统默认字体栈 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      /* CSS 变量 - 深色主题（默认） */
      :root {
        --bg-primary: #1a1a1f;
        --bg-secondary: rgba(30, 30, 40, 0.8);
        --bg-tertiary: rgba(45, 45, 60, 0.9);
        --bg-hover: rgba(255, 255, 255, 0.1);
        --text-primary: #f5f5f7;
        --text-secondary: rgba(245, 245, 247, 0.7);
        --border-color: rgba(255, 255, 255, 0.15);
        --shadow-color: rgba(0, 0, 0, 0.2);
        --accent-color: #8b5cf6;
        --accent-hover: #a78bfa;
      }

      /* CSS 变量 - 浅色主题（Anthropic 官方品牌色 - 优化版） */
      [data-theme='light'] {
        --bg-primary: #e8e6dc; /* Light Gray - 页面底层 */
        --bg-secondary: #faf9f5; /* Light - 内容卡片（浮出） */
        --bg-tertiary: #f2f1ec; /* Header */
        --bg-input: #e8e6dc; /* Light Gray - 输入区域 */
        --bg-hover: rgba(217, 119, 87, 0.12); /* Orange 淡化 */
        --text-primary: #141413; /* Dark */
        --text-secondary: #5a5955; /* Dark 淡化 */
        --border-color: rgba(176, 174, 165, 0.3); /* Mid Gray 淡化 */
        --shadow-color: rgba(20, 20, 19, 0.12); /* Dark 阴影 */
        --accent-color: #d97757; /* Orange - 主要强调色 */
        --accent-hover: #c56a4c; /* 深 Orange */
        --accent-secondary: #6a9bcc; /* Blue - 次要强调色 */
      }

      body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
          Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
        background: var(--bg-primary);
        /* 移除复杂背景渐变以提升性能 */
        color: var(--text-primary);
        min-height: 100vh;
        padding: 1rem 0;
        line-height: 1.47059;
        font-weight: 400;
        letter-spacing: -0.022em;
        overflow-x: hidden;
        box-sizing: border-box;
        /* 移除背景动画以提升性能 */
        transition: background-color 0.3s ease, color 0.3s ease;
      }

      /* 无内容状态下的特殊样式 */
      body.no-content-mode {
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 3rem 0;
        box-sizing: border-box;
      }

      /* 移除背景动画定义以提升性能 */

      .container {
        max-width: 720px;
        margin: 0 auto;
        background: var(--bg-tertiary);
        /* 移除毛玻璃效果以提升性能 */
        border: 1px solid var(--border-color);
        border-radius: 32px;
        padding: 0;
        box-shadow: 0 8px 16px var(--shadow-color);
        overflow: hidden;
        position: relative;
        /* 移除过渡动画以提升性能 */
        transition: background-color 0.3s ease, border-color 0.3s ease;
      }

      /* 无内容模式下的容器样式 */
      body.no-content-mode .container {
        margin: 0;
        width: 100%;
        max-width: 720px;
        max-height: calc(100vh - 6rem);
        overflow: hidden;
        flex-shrink: 0;
      }

      /* 移除容器悬停效果以提升性能 */

      .container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
      }

      .header {
        background: var(--bg-secondary);
        /* 移除毛玻璃效果 */
        padding: 1rem 1.75rem;
        border-bottom: 0.5px solid var(--border-color);
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background-color 0.3s ease;
      }

      .header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 1.75rem;
        right: 1.75rem;
        height: 0.5px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      }

      h1 {
        color: var(--text-primary);
        margin: 0;
        font-size: 1.375rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        display: flex;
        align-items: center;
        gap: 0.625rem;
        transition: color 0.3s ease;
      }

      .header-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* 设置按钮样式 - 简化版 */
      .settings-btn {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        color: #f5f5f7;
        padding: 0.5rem;
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        backdrop-filter: blur(8px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .settings-btn:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      .settings-btn:active {
        transform: translateY(0);
        background: rgba(255, 255, 255, 0.08);
      }

      .settings-btn:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
      }

      /* 头部按钮容器 - 确保水平排列 */
      .header-actions {
        display: flex;
        flex-direction: row; /* 强制水平排列 */
        flex-wrap: nowrap; /* 禁止换行 */
        gap: 8px;
        align-items: center;
      }

      /* 主题切换按钮样式 */
      .theme-toggle-btn {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        color: #f5f5f7;
        padding: 0.5rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        backdrop-filter: blur(8px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
      }

      .theme-toggle-btn:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      .theme-toggle-btn:active {
        transform: translateY(0);
      }

      .theme-toggle-btn:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.5);
      }

      .theme-icon {
        width: 20px;
        height: 20px;
        position: absolute;
        transition: transform 0.3s ease, opacity 0.3s ease;
      }

      /* 太阳图标（暗色主题时隐藏） */
      .theme-icon-sun {
        opacity: 0;
        transform: rotate(-90deg) scale(0.5);
      }

      /* 月亮图标（暗色主题时显示） */
      .theme-icon-moon {
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }

      /* 亮色主题时图标状态 */
      .theme-toggle-btn.is-light .theme-icon-sun {
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }

      .theme-toggle-btn.is-light .theme-icon-moon {
        opacity: 0;
        transform: rotate(90deg) scale(0.5);
      }

      /* 亮色主题适配 */
      [data-theme='light'] .settings-btn,
      [data-theme='light'] .theme-toggle-btn {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.1);
        color: #1e293b;
      }

      [data-theme='light'] .settings-btn:hover,
      [data-theme='light'] .theme-toggle-btn:hover {
        background: rgba(0, 0, 0, 0.1);
        border-color: rgba(0, 0, 0, 0.15);
      }

      /* 设置面板样式 - 简化版 */
      .settings-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        backdrop-filter: blur(8px);
        animation: fadeIn 0.2s ease-out;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .settings-content {
        background: linear-gradient(145deg, rgba(30, 30, 40, 0.98), rgba(25, 25, 35, 0.95));
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 20px;
        max-width: 800px;
        width: 100%;
        max-height: 85vh;
        overflow: hidden;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
        backdrop-filter: blur(20px);
        position: relative;
      }

      .settings-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      }

      .settings-content::-webkit-scrollbar {
        width: 6px;
      }

      .settings-content::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 3px;
      }

      .settings-content::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
        border-radius: 3px;
      }

      .settings-content::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
      }

      .settings-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2.5rem 2.5rem 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
        position: relative;
      }

      .settings-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
      }

      .settings-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 2.5rem;
        right: 2.5rem;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 122, 255, 0.3), transparent);
      }

      .settings-header h3 {
        margin: 0;
        color: #ffffff;
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .settings-close-btn {
        background: linear-gradient(135deg, rgba(255, 69, 58, 0.12), rgba(255, 69, 58, 0.08));
        border: 1.5px solid rgba(255, 69, 58, 0.25);
        border-radius: 50%;
        color: #ff453a;
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 2px 12px rgba(255, 69, 58, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
      }

      .settings-close-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 2px;
        background: currentColor;
        transform: translate(-50%, -50%) rotate(45deg);
        border-radius: 1px;
        transition: all 0.2s ease;
      }

      .settings-close-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 2px;
        background: currentColor;
        transform: translate(-50%, -50%) rotate(-45deg);
        border-radius: 1px;
        transition: all 0.2s ease;
      }

      .settings-close-btn:hover {
        background: linear-gradient(135deg, rgba(255, 69, 58, 0.2), rgba(255, 69, 58, 0.15));
        border-color: rgba(255, 69, 58, 0.4);
        transform: scale(1.08);
        box-shadow: 0 4px 20px rgba(255, 69, 58, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
        color: #ff2d20;
      }

      .settings-close-btn:hover::before,
      .settings-close-btn:hover::after {
        width: 16px;
        height: 2.5px;
      }

      .settings-close-btn:active {
        transform: scale(0.92);
        box-shadow: 0 1px 6px rgba(255, 69, 58, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.1);
        background: linear-gradient(135deg, rgba(255, 69, 58, 0.25), rgba(255, 69, 58, 0.2));
      }

      .settings-body {
        padding: 2rem;
        max-height: calc(85vh - 140px);
        overflow-y: auto;
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.005));
      }

      .settings-main-title {
        color: #ffffff;
        font-size: 1.3rem;
        font-weight: 700;
        margin: 0 0 1.5rem 0;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        letter-spacing: -0.01em;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .setting-group {
        margin-bottom: 2rem;
        background: rgba(45, 45, 60, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 24px;
        padding: 1.5rem;
        position: relative;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        overflow: hidden;
      }

      .setting-group::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
      }

      .setting-group:last-child {
        margin-bottom: 0;
      }

      .setting-group::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
        border-radius: 16px 16px 0 0;
      }

      .setting-group-title {
        color: #f5f5f7;
        font-size: 1.2rem;
        font-weight: 700;
        margin: 0 0 1.5rem 0;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        background: linear-gradient(135deg, #f5f5f7, rgba(0, 122, 255, 0.8));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        position: relative;
        letter-spacing: -0.01em;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .setting-group-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 40%;
        height: 2px;
        background: linear-gradient(90deg, #007aff, rgba(0, 122, 255, 0.4), transparent);
        border-radius: 1px;
      }

      .setting-subgroup {
        margin: 1.5rem 0;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.02);
        border-radius: 12px;
        position: relative;
      }

      .setting-subgroup-title {
        color: rgba(245, 245, 247, 0.95);
        font-size: 1rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        letter-spacing: -0.01em;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .setting-item {
        margin-bottom: 1rem;
        padding: 0.5rem 0;
        background: transparent;
        border: none;
        border-radius: 0;
        transition: none;
        position: relative;
      }

      .setting-item:last-child {
        margin-bottom: 0;
      }

      .setting-label {
        display: flex;
        align-items: center;
        gap: 1rem;
        cursor: pointer;
        margin-bottom: 0;
        padding: 0.25rem;
        border-radius: 8px;
        transition: all 0.2s ease;
      }

      .setting-label input[type='checkbox'] {
        width: 20px;
        height: 20px;
        accent-color: #007aff;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.2s ease;
        position: relative;
      }

      .setting-label input[type='checkbox']:checked {
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(0, 122, 255, 0.3);
      }

      .setting-title {
        color: #f5f5f7;
        font-size: 1rem;
        font-weight: 600;
        flex: 1;
        transition: color 0.2s ease;
        letter-spacing: -0.01em;
      }

      .setting-label:hover .setting-title {
        color: rgba(245, 245, 247, 0.9);
      }

      .setting-description {
        color: rgba(245, 245, 247, 0.65);
        font-size: 0.9rem;
        line-height: 1.5;
        margin-left: 3rem;
        font-style: italic;
        transition: color 0.2s ease;
      }

      .setting-item:hover .setting-description {
        color: rgba(245, 245, 247, 0.75);
      }

      /* 音量滑块样式 - 美化版 */
      .volume-slider {
        flex: 1;
        margin: 0 1rem;
        height: 6px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
        border-radius: 3px;
        outline: none;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
      }

      .volume-slider::-webkit-slider-thumb {
        appearance: none;
        width: 20px;
        height: 20px;
        background: linear-gradient(135deg, #007aff, #0056cc);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .volume-slider::-webkit-slider-thumb:hover {
        transform: scale(1.2);
        box-shadow: 0 4px 15px rgba(0, 122, 255, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.2),
          0 0 20px rgba(0, 122, 255, 0.2);
      }

      .volume-slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: linear-gradient(135deg, #007aff, #0056cc);
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .volume-value {
        color: #007aff;
        font-size: 1rem;
        font-weight: 700;
        min-width: 50px;
        text-align: right;
        background: linear-gradient(135deg, #007aff, rgba(0, 122, 255, 0.8));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: 0 0 10px rgba(0, 122, 255, 0.3);
      }

      /* 设置输入框样式 */
      .setting-input {
        width: 100%;
        padding: 0.75rem 1rem;
        margin-top: 0.5rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        color: #f5f5f7;
        font-size: 0.95rem;
        font-family: inherit;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
      }

      .setting-input:focus {
        outline: none;
        border-color: #007aff;
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
      }

      .setting-input::placeholder {
        color: rgba(245, 245, 247, 0.5);
      }

      /* 设置选择框样式 */
      .setting-select {
        width: 100%;
        padding: 0.75rem 1rem;
        margin-top: 0.5rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        color: #f5f5f7;
        font-size: 0.95rem;
        font-family: inherit;
        cursor: pointer;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 16px;
        padding-right: 3rem;
      }

      .setting-select:focus {
        outline: none;
        border-color: #007aff;
        background-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
      }

      .setting-select option {
        background: #1a1a1f;
        color: #f5f5f7;
        padding: 0.5rem;
      }

      /* 设置标签布局调整 */
      .setting-label.has-input {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
      }

      .setting-label.has-input .setting-title {
        margin-bottom: 0.25rem;
      }

      /* 按钮样式 - 简化版 */
      .btn {
        background: rgba(0, 122, 255, 0.8);
        border: 1px solid rgba(0, 122, 255, 0.3);
        border-radius: 10px;
        color: #ffffff;
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
      }

      .btn:hover {
        background: rgba(0, 122, 255, 0.9);
        border-color: rgba(0, 122, 255, 0.5);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
      }

      .btn:active {
        transform: translateY(0);
        background: rgba(0, 122, 255, 0.7);
      }

      .btn-secondary {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #f5f5f7;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
      }

      .btn-secondary:hover {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
        border-color: rgba(255, 255, 255, 0.25);
        color: #ffffff;
      }

      /* 状态信息样式 - 美化版 */
      .status-info {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;
        padding: 1.75rem;
        position: relative;
        backdrop-filter: blur(15px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .status-info::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        border-radius: 16px 16px 0 0;
      }

      .status-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding: 0.75rem 1rem;
        border-radius: 10px;
        transition: all 0.2s ease;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.005));
        border: 1px solid rgba(255, 255, 255, 0.05);
      }

      /* ===== 浅色主题 - 设置面板覆盖 ===== */
      [data-theme='light'] .settings-panel {
        background: rgba(0, 0, 0, 0.4);
      }

      [data-theme='light'] .settings-content {
        background: #faf9f5 !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1) !important;
      }

      [data-theme='light'] .settings-content::before {
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent) !important;
      }

      [data-theme='light'] .settings-header {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        background: #f2f1ec !important;
      }

      [data-theme='light'] .settings-header::before,
      [data-theme='light'] .settings-header::after {
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent) !important;
      }

      [data-theme='light'] .settings-header h3,
      [data-theme='light'] #settings-title {
        color: #141413 !important;
      }

      [data-theme='light'] .settings-close-btn {
        background: rgba(0, 0, 0, 0.08) !important;
        color: #bf4d43 !important;
        border-color: rgba(191, 77, 67, 0.3) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      }

      [data-theme='light'] .settings-close-btn:hover {
        background: rgba(191, 77, 67, 0.15) !important;
        border-color: rgba(191, 77, 67, 0.5) !important;
      }

      [data-theme='light'] .settings-body {
        background: #faf9f5 !important;
      }

      [data-theme='light'] .settings-main-title {
        color: #141413 !important;
      }

      [data-theme='light'] .setting-group {
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
      }

      [data-theme='light'] .setting-subgroup {
        background: #f8f8f5 !important;
      }

      [data-theme='light'] .setting-subgroup-title {
        color: #141413 !important;
        border-bottom-color: rgba(0, 0, 0, 0.1) !important;
      }

      [data-theme='light'] .setting-item {
        border-bottom-color: rgba(0, 0, 0, 0.06) !important;
      }

      [data-theme='light'] .setting-label {
        color: #141413 !important;
      }

      [data-theme='light'] .status-row {
        background: rgba(0, 0, 0, 0.02) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
        color: #141413 !important;
      }

      /* 浅色主题 - 状态行内部 span 元素颜色覆盖 */
      [data-theme='light'] .status-row span:first-child {
        color: rgba(20, 20, 19, 0.85) !important;
      }

      [data-theme='light'] .status-row span:last-child {
        color: #141413 !important;
      }

      /* 浅色主题 - 设置描述文字颜色（预防性修复） */
      [data-theme='light'] .setting-description {
        color: rgba(20, 20, 19, 0.65) !important;
      }

      [data-theme='light'] .setting-item:hover .setting-description {
        color: rgba(20, 20, 19, 0.75) !important;
      }

      [data-theme='light'] .setting-label:hover .setting-title {
        color: rgba(20, 20, 19, 0.9) !important;
      }

      [data-theme='light'] .setting-input::placeholder {
        color: rgba(20, 20, 19, 0.5) !important;
      }

      [data-theme='light'] .section-icon {
        color: #141413 !important;
      }

      [data-theme='light'] .settings-content::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05) !important;
      }

      [data-theme='light'] .settings-content::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1)) !important;
      }

      [data-theme='light'] .settings-content::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.15)) !important;
      }

      [data-theme='light'] .setting-input {
        background: #ffffff !important;
        border-color: rgba(0, 0, 0, 0.15) !important;
        color: #141413 !important;
      }

      [data-theme='light'] .setting-input:focus {
        border-color: #d97757 !important;
        box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.1) !important;
      }

      [data-theme='light'] .setting-select {
        background: #ffffff !important;
        border-color: rgba(0, 0, 0, 0.15) !important;
        color: #141413 !important;
      }

      [data-theme='light'] .volume-slider::-webkit-slider-track {
        background: rgba(0, 0, 0, 0.1) !important;
      }

      [data-theme='light'] .volume-slider::-webkit-slider-thumb {
        background: linear-gradient(135deg, #d97757, #c06647) !important;
      }

      [data-theme='light'] .volume-value {
        background: linear-gradient(135deg, #d97757, rgba(217, 119, 87, 0.8)) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
      }

      .status-row:last-child {
        margin-bottom: 0;
      }

      .status-row span:first-child {
        color: rgba(245, 245, 247, 0.85);
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: -0.01em;
      }

      .status-row span:last-child {
        color: #f5f5f7;
        font-size: 0.9rem;
        font-weight: 600;
        padding: 0.4rem 0.75rem;
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
      }

      .content {
        padding: 1.75rem;
      }

      .feedback-group {
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
      }

      .description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        padding: 1.5rem 1.75rem;
        background: linear-gradient(
          135deg,
          rgba(0, 122, 255, 0.08) 0%,
          rgba(88, 86, 214, 0.06) 50%,
          rgba(175, 82, 222, 0.05) 100%
        );
        border: 1px solid rgba(0, 122, 255, 0.25);
        border-radius: 24px;
        color: #f5f5f7;
        line-height: 1.6;
        letter-spacing: -0.022em;
        position: relative;
        /* 移除毛玻璃效果 */
        box-shadow: 0 4px 8px rgba(0, 122, 255, 0.1);
      }

      .description::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        border-radius: 24px 24px 0 0;
      }

      .options-container {
        margin-bottom: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 1rem; /* 增加选项间距 */
      }

      .option-item {
        display: flex;
        align-items: center;
        padding: 1.25rem 1.5rem;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.06) 0%,
          rgba(255, 255, 255, 0.03) 50%,
          rgba(255, 255, 255, 0.05) 100%
        );
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
        transition: all 0.15s ease;
        cursor: pointer;
        position: relative;
        margin-bottom: 0.75rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        user-select: none;
      }

      .option-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
        border-radius: 20px 20px 0 0;
      }

      .option-item:hover {
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.1) 0%,
          rgba(255, 255, 255, 0.06) 50%,
          rgba(255, 255, 255, 0.08) 100%
        );
        border-color: rgba(0, 122, 255, 0.4);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
      }

      .option-item:active {
        transform: translateY(0);
        transition: all 0.05s ease;
      }

      .option-item input[type='checkbox'] {
        margin-right: 1rem;
        width: 20px;
        height: 20px;
        accent-color: #007aff;
        cursor: pointer;
        flex-shrink: 0;
        position: relative;
      }

      .option-item input[type='checkbox']::before {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        cursor: pointer;
      }

      .option-item label {
        font-size: 1rem;
        cursor: pointer;
        color: #f5f5f7;
        flex: 1;
        font-weight: 400;
        letter-spacing: -0.022em;
        line-height: 1.5;
        padding: 0.5rem 0;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
      }

      .separator {
        height: 0.5px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        margin: 1.25rem 0;
      }

      .textarea-container {
        position: relative;
        margin-bottom: 1rem;
      }

      .feedback-textarea {
        width: 100%;
        min-height: 180px;
        padding: 1.5rem 1.75rem;
        font-size: 1rem;
        font-family: 'MonoLisaNerdFont', 'SF Mono', ui-monospace, SFMono-Regular, Monaco, Consolas,
          'Liberation Mono', 'Courier New', monospace;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.06) 0%,
          rgba(255, 255, 255, 0.03) 50%,
          rgba(255, 255, 255, 0.05) 100%
        );
        color: #f5f5f7;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 24px;
        resize: vertical;
        margin-bottom: 1rem;
        /* 移除过渡动画 */
        line-height: 1.6;
        letter-spacing: -0.022em;
        /* 移除毛玻璃效果 */
        position: relative;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .feedback-textarea:focus {
        outline: none;
        border-color: rgba(0, 122, 255, 0.5);
        box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
        background: rgba(255, 255, 255, 0.08);
        /* 移除transform效果 */
      }

      .feedback-textarea::placeholder {
        color: rgba(245, 245, 247, 0.6);
        font-weight: 400;
      }

      .button-container {
        display: flex;
        gap: 0.625rem;
        justify-content: flex-end;
        margin-top: 1.25rem;
      }

      .btn {
        padding: 1rem 1.75rem;
        font-size: 0.9375rem;
        font-weight: 600;
        font-family: inherit;
        border: none;
        border-radius: 20px;
        cursor: pointer;
        /* 移除过渡动画 */
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 130px;
        justify-content: center;
        letter-spacing: -0.022em;
        position: relative;
        /* 移除毛玻璃效果 */
        overflow: hidden;
      }

      .btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        border-radius: 20px 20px 0 0;
      }

      .btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
        border-radius: 20px;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .btn:hover::after {
        opacity: 1;
      }

      .btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: #f5f5f7;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
        /* 移除transform效果 */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
      }

      .btn-primary {
        background: #007aff;
        color: white;
        border: 1px solid rgba(0, 122, 255, 0.3);
        box-shadow: 0 4px 8px rgba(0, 122, 255, 0.2);
      }

      .btn-primary:hover {
        background: #0056cc;
        /* 移除transform效果 */
        box-shadow: 0 6px 12px rgba(0, 122, 255, 0.3);
      }

      .btn:disabled {
        background: rgba(255, 255, 255, 0.03);
        color: rgba(245, 245, 247, 0.3);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
        border-color: rgba(255, 255, 255, 0.05);
      }

      .status-message {
        margin-top: 1rem;
        padding: 0.875rem 1.125rem;
        border-radius: 12px;
        text-align: center;
        display: none;
        font-size: 0.9375rem;
        font-weight: 500;
        letter-spacing: -0.022em;
        /* 移除毛玻璃效果 */
        position: relative;
      }

      .status-message::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0.5px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        border-radius: 12px 12px 0 0;
      }

      .status-success {
        background: rgba(52, 199, 89, 0.08);
        color: #34c759;
        border: 0.5px solid rgba(52, 199, 89, 0.2);
      }

      .status-error {
        background: rgba(255, 69, 58, 0.08);
        color: #ff453a;
        border: 0.5px solid rgba(255, 69, 58, 0.2);
      }

      .shortcut-hint {
        position: relative;
        bottom: auto;
        left: auto;
        display: flex; /* 默认显示 */
        align-items: center;
        gap: 0.25rem;
        font-size: 0.625rem;
        color: rgba(245, 245, 247, 0.7);
        font-weight: 400;
        letter-spacing: -0.022em;
        cursor: help;
        padding: 0.3rem 0.5rem;
        border-radius: 6px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        user-select: none;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 10;
        opacity: 0.8;
        width: fit-content;
      }

      .shortcut-hint:hover {
        color: rgba(245, 245, 247, 1);
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
        opacity: 1;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
      }

      .shortcut-hint .keyboard-icon {
        font-size: 0.75rem;
        opacity: 0.6;
      }

      .shortcut-tooltip {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 8px;
        background: linear-gradient(
          135deg,
          rgba(30, 41, 59, 0.95) 0%,
          rgba(15, 23, 42, 0.98) 50%,
          rgba(8, 15, 35, 0.96) 100%
        );
        color: rgba(248, 250, 252, 0.95);
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 11px;
        line-height: 1.4;
        white-space: pre;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        z-index: 1000;
        width: fit-content;
        text-align: left;
        border: 1px solid rgba(148, 163, 184, 0.3);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 4px 15px rgba(0, 0, 0, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
        font-weight: 500;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
          monospace;
        backdrop-filter: blur(16px) saturate(1.2);
        -webkit-backdrop-filter: blur(16px) saturate(1.2);
      }

      .shortcut-hint:hover .shortcut-tooltip {
        opacity: 1;
        visibility: visible;
      }

      .shortcut-hint::before {
        content: '';
        position: absolute;
        top: 100%;
        left: 16px;
        margin-top: 2px;
        border: 6px solid transparent;
        border-bottom-color: rgb(17, 24, 39);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        z-index: 1001;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
      }

      .shortcut-hint:hover::before {
        opacity: 1;
        visibility: visible;
      }

      /* 图片预览区域样式 */
      .image-preview-container {
        margin-bottom: 1.5rem;
        padding: 1.5rem;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.06) 0%,
          rgba(255, 255, 255, 0.03) 50%,
          rgba(255, 255, 255, 0.05) 100%
        );
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
        position: relative;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .image-preview-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .image-count-text {
        font-size: 0.875rem;
        color: rgba(245, 245, 247, 0.8);
        font-weight: 500;
      }

      .clear-all-images-btn {
        background: rgba(255, 69, 58, 0.1);
        color: #ff453a;
        border: 1px solid rgba(255, 69, 58, 0.2);
        border-radius: 12px;
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .clear-all-images-btn:hover {
        background: rgba(255, 69, 58, 0.15);
        border-color: rgba(255, 69, 58, 0.3);
      }

      .image-previews {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 1rem;
        max-height: 300px;
        overflow-y: auto;
      }

      .image-preview-item {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        /* 移除cursor: pointer和hover动效 */
      }

      .image-preview-thumbnail {
        width: 100%;
        height: 80px;
        object-fit: cover;
        display: block;
        /* 保留cursor: pointer用于点击放大功能 */
        cursor: pointer;
      }

      .image-preview-info {
        padding: 0.5rem;
        background: rgba(0, 0, 0, 0.3);
        color: #f5f5f7;
        font-size: 0.75rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .image-preview-remove {
        position: absolute;
        top: 4px;
        right: 4px;
        background: rgba(255, 69, 58, 0.9);
        color: white;
        border: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        cursor: pointer;
        font-size: 12px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.8;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transform: scale(1);
      }

      .image-preview-remove:hover {
        opacity: 1;
        background: rgba(255, 69, 58, 1);
        transform: scale(1.1);
        box-shadow: 0 2px 8px rgba(255, 69, 58, 0.4);
      }

      /* 移除图片缩略图的hover动效 */

      /* 图片放大预览模态框 */
      .image-modal {
        display: none;
        position: fixed;
        z-index: 10000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(5px);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      .image-modal.show {
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.3s ease-out;
      }

      .image-modal-content {
        position: relative;
        max-width: 90%;
        max-height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .image-modal img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
      }

      .image-modal-close {
        position: absolute;
        top: -40px;
        right: -40px;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: white;
        font-size: 24px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
      }

      .image-modal-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
      }

      .image-modal-info {
        position: absolute;
        bottom: -50px;
        left: 0;
        right: 0;
        text-align: center;
        color: white;
        background: rgba(0, 0, 0, 0.5);
        padding: 8px;
        border-radius: 4px;
        font-size: 14px;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      /* 移动设备优化 */
      @media (max-width: 768px) {
        .image-preview-container {
          margin: 1rem 0;
        }

        .image-previews {
          gap: 0.75rem;
          grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        }

        .image-preview-item {
          min-height: 80px;
        }

        .image-preview-thumbnail {
          max-height: 60px;
        }

        .image-preview-remove {
          width: 22px;
          height: 22px;
          font-size: 12px;
          top: 2px;
          right: 2px;
        }

        .image-modal-close {
          top: 10px;
          right: 10px;
          width: 40px;
          height: 40px;
          font-size: 20px;
        }

        .image-modal-info {
          bottom: 10px;
          left: 10px;
          right: 10px;
          font-size: 12px;
        }

        /* 触摸友好的按钮大小 */
        .btn {
          min-height: 44px;
          padding: 0.75rem 1rem;
        }

        /* 拖拽提示优化 */
        .drag-overlay-content {
          padding: 1.5rem;
          max-width: 300px;
        }

        .drag-icon {
          font-size: 3rem;
        }

        .drag-text {
          font-size: 1.25rem;
        }
      }

      /* 触摸设备优化 - 已移除所有hover动效，无需特殊处理 */

      /* 拖拽覆盖层样式 */
      .drag-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
      }

      .drag-overlay-content {
        text-align: center;
        color: #f5f5f7;
        padding: 2rem;
        border: 2px dashed rgba(0, 122, 255, 0.5);
        border-radius: 20px;
        background: rgba(0, 122, 255, 0.1);
        max-width: 400px;
      }

      .drag-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.8;
      }

      .drag-text {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
      }

      .drag-subtext {
        font-size: 1rem;
        opacity: 0.7;
      }

      /* 拖拽区域高亮效果 */
      .textarea-drag-over {
        border-color: rgba(0, 122, 255, 0.6) !important;
        background: rgba(0, 122, 255, 0.05) !important;
        box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3) !important;
      }

      /* 加载状态样式 */
      .image-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        color: rgba(245, 245, 247, 0.6);
        font-size: 0.875rem;
      }

      .loading-spinner {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top: 2px solid #007aff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-right: 0.5rem;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      /* 错误状态样式 */
      .image-error {
        background: rgba(255, 69, 58, 0.1);
        border-color: rgba(255, 69, 58, 0.3);
        color: #ff453a;
      }

      .error-icon {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
      }

      /* 高性能Markdown渲染样式 */
      .markdown-content {
        line-height: 1.5;
        color: #f5f5f7;
        /* 优化渲染性能 */
        contain: layout style;
        will-change: auto;
        transform: translateZ(0); /* 启用硬件加速 */
      }

      .markdown-content h1,
      .markdown-content h2,
      .markdown-content h3,
      .markdown-content h4,
      .markdown-content h5,
      .markdown-content h6 {
        color: #f5f5f7;
        font-weight: 600;
        margin: 1rem 0 0.5rem 0;
      }

      .markdown-content h1 {
        font-size: 1.5rem;
      }
      .markdown-content h2 {
        font-size: 1.25rem;
      }
      .markdown-content h3 {
        font-size: 1.125rem;
      }
      .markdown-content h4 {
        font-size: 1rem;
      }

      .markdown-content p {
        margin: 0.75rem 0;
        color: #f5f5f7;
      }

      /* 简洁稳健的列表样式 - 使用标准CSS */
      .markdown-content ul,
      .markdown-content ol {
        margin: 0.75rem 0;
        padding-left: 1.5rem;
        color: #f5f5f7;
        line-height: 1.6;
      }

      .markdown-content ul {
        list-style-type: disc;
        list-style-position: outside;
      }

      .markdown-content ol {
        list-style-type: decimal;
        list-style-position: outside;
      }

      .markdown-content li {
        margin: 0.375rem 0;
        color: #f5f5f7;
        line-height: 1.6;
      }

      /* 自定义列表标记颜色 */
      .markdown-content ul li::marker {
        color: #f5f5f7;
        font-size: 1.1em;
      }

      .markdown-content ol li::marker {
        color: #f5f5f7;
        font-weight: 600;
      }

      /* 嵌套列表样式 */
      .markdown-content ul ul {
        list-style-type: circle;
        margin: 0.25rem 0;
        padding-left: 1.25rem;
      }

      .markdown-content ul ul ul {
        list-style-type: square;
      }

      .markdown-content ol ol {
        list-style-type: lower-alpha;
        margin: 0.25rem 0;
        padding-left: 1.25rem;
      }

      .markdown-content ol ol ol {
        list-style-type: lower-roman;
      }

      /* 列表项内容样式 */
      .markdown-content li p {
        margin: 0.25rem 0;
      }

      .markdown-content li > *:first-child {
        margin-top: 0;
      }

      .markdown-content li > *:last-child {
        margin-bottom: 0;
      }

      .markdown-content blockquote {
        margin: 1rem 0;
        padding: 0.75rem 1rem;
        background: rgba(0, 122, 255, 0.08);
        border-left: 3px solid #007aff;
        color: #f5f5f7;
      }

      /* 内联代码样式 */
      .markdown-content code {
        background: rgba(255, 255, 255, 0.12);
        color: #ff453a;
        padding: 0.125rem 0.375rem;
        font-family: 'MonoLisaNerdFont', monospace;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.08);
      }

      /* 代码块容器样式 - 现代化设计 */
      .code-block-container {
        position: relative;
        margin: 1.5rem 0;
        border-radius: 20px;
        background: linear-gradient(
          135deg,
          rgba(15, 15, 25, 0.95) 0%,
          rgba(25, 25, 40, 0.9) 50%,
          rgba(20, 20, 35, 0.95) 100%
        );
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
        overflow: hidden;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
      }

      .code-block-container:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        border-color: rgba(0, 122, 255, 0.3);
      }

      /* 移除代码块装饰线以简化样式 */

      /* 代码块样式 - 优化版 */
      .markdown-content pre {
        background: transparent;
        border: none;
        padding: 1.5rem 1.75rem;
        margin: 0;
        overflow-x: auto;
        border-radius: 20px;
        font-size: 0.9rem;
        line-height: 1.6;
        position: relative;
      }

      .markdown-content pre code {
        background: none;
        color: #f5f5f7;
        padding: 0;
        font-family: 'MonoLisaNerdFont', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono',
          'Consolas', monospace;
        font-size: inherit;
        font-weight: 400;
        letter-spacing: 0.025em;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        text-decoration: none !important;
      }

      /* 强制覆盖代码高亮背景 */
      .markdown-content .highlight,
      .markdown-content div[style*='background'] {
        background: transparent !important;
      }

      /* 移除代码块内所有文本装饰 */
      .markdown-content pre *,
      .markdown-content code *,
      .markdown-content pre,
      .markdown-content code {
        text-decoration: none !important;
        text-decoration-line: none !important;
        text-decoration-style: none !important;
        text-decoration-color: transparent !important;
        text-decoration-thickness: 0 !important;
        text-underline-offset: 0 !important;
        border-bottom: none !important;
        border-top: none !important;
        outline: none !important;
        box-shadow: none !important;
      }

      /* 强制移除所有代码相关元素的下划线 */
      .code-block-container *,
      .code-block-container,
      pre *,
      pre,
      code *,
      code,
      .highlight *,
      .highlight {
        text-decoration: none !important;
        text-decoration-line: none !important;
        text-decoration-style: none !important;
        text-decoration-color: transparent !important;
        text-decoration-thickness: 0 !important;
        text-underline-offset: 0 !important;
        border-bottom: none !important;
        border-top: none !important;
      }

      /* 完全隐藏代码块滚动条但保持滚动功能 */
      .markdown-content pre::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
      }

      .code-block-container pre::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
      }

      /* 对于Firefox浏览器隐藏滚动条 */
      .markdown-content pre {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
      }

      .code-block-container pre {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
      }

      /* 代码工具栏样式 - 现代化设计 */
      .code-toolbar {
        position: absolute;
        top: 16px;
        right: 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 10;
        opacity: 0.8;
        transition: opacity 0.3s ease;
      }

      .code-block-container:hover .code-toolbar {
        opacity: 1;
      }

      /* 语言标识样式 - 精美设计 */
      .language-label {
        background: linear-gradient(135deg, rgba(0, 122, 255, 0.25), rgba(88, 86, 214, 0.2));
        border: 1px solid rgba(0, 122, 255, 0.4);
        border-radius: 8px;
        padding: 5px 10px;
        font-size: 0.7rem;
        color: #4fc3f7;
        font-weight: 700;
        font-family: inherit;
        backdrop-filter: blur(15px);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
        transition: all 0.3s ease;
      }

      .language-label:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
        border-color: rgba(0, 122, 255, 0.6);
      }

      /* 复制按钮样式 - 精美设计 */
      .copy-button {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 10px;
        padding: 7px 12px;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-family: inherit;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 5px;
        backdrop-filter: blur(15px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        position: relative;
        overflow: hidden;
      }

      .copy-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s ease;
      }

      .copy-button:hover::before {
        left: 100%;
      }

      .copy-button:hover {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.12));
        border-color: rgba(255, 255, 255, 0.4);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
      }

      .copy-button:active {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }

      .copy-button.copied {
        background: linear-gradient(135deg, rgba(52, 199, 89, 0.25), rgba(52, 199, 89, 0.15));
        border-color: rgba(52, 199, 89, 0.5);
        color: #4caf50;
        box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
      }

      .markdown-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
        background: rgba(255, 255, 255, 0.03);
      }

      .markdown-content th,
      .markdown-content td {
        padding: 0.75rem;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #f5f5f7;
      }

      .markdown-content th {
        background: rgba(0, 122, 255, 0.1);
        font-weight: 600;
      }

      .markdown-content a {
        color: #007aff;
        text-decoration: none;
      }

      .markdown-content a:hover {
        text-decoration: underline;
      }

      /* 删除线样式 */
      .markdown-content del,
      .markdown-content s,
      .markdown-content .strikethrough {
        text-decoration: line-through;
        color: rgba(245, 245, 247, 0.6);
        text-decoration-color: rgba(245, 245, 247, 0.6);
        text-decoration-thickness: 2px;
      }

      .markdown-content hr {
        border: none;
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
        margin: 1.5rem 0;
      }

      /* 加载动画 */
      @keyframes loading {
        0% {
          transform: translateX(-100%);
        }
        50% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(100%);
        }
      }

      /* 移除所有动画定义以提升性能 */

      /* 移除浮动动画以提升性能 */

      /* 移动端适配 */
      @media (max-width: 768px) {
        /* 移动端隐藏快捷键提示 */
        .shortcut-hint {
          display: none !important;
        }

        /* 移动端隐藏快捷键部分 */
        .shortcuts-section {
          display: none !important;
        }

        body {
          padding: 0;
          font-size: 16px; /* 防止iOS缩放 */
          min-height: 100vh;
          min-height: 100dvh; /* 使用动态视口高度 */
          max-height: 100vh;
          max-height: 100dvh;
          overflow-y: auto;
        }

        body.no-content-mode {
          padding: 0;
          height: 100vh;
          height: 100dvh; /* 使用动态视口高度 */
          overflow: hidden;
        }

        .container {
          max-width: 100%;
          margin: 0;
          border-radius: 0;
          box-shadow: none;
          border: none;
          background: transparent;
          min-height: 100vh;
          min-height: 100dvh;
          display: flex;
          flex-direction: column;
        }

        body.no-content-mode .container {
          margin: 0;
          height: 100vh;
          height: 100dvh;
          max-height: 100vh;
          max-height: 100dvh;
          background: transparent;
          overflow: hidden;
        }

        .header {
          padding: 0.75rem 1.25rem;
          /* 添加iOS安全区域支持，确保标题不被状态栏遮挡 */
          padding-top: max(0.75rem, env(safe-area-inset-top));
          background: transparent;
          border-bottom: none;
          flex-shrink: 0;
        }

        h1 {
          font-size: 1.25rem;
        }

        .content {
          padding: 1rem 1.25rem;
          background: transparent;
          flex: 1;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
        }

        .feedback-group {
          display: flex;
          flex-direction: column;
          height: 100%;
        }

        .description {
          padding: 1rem 1.25rem;
          border-radius: 20px;
          font-size: 0.95rem;
          margin-bottom: 1rem;
          flex-shrink: 0;
        }

        .option-item {
          padding: 1rem 1.25rem;
          border-radius: 16px;
          margin-bottom: 0.5rem;
        }

        .option-item input[type='checkbox'] {
          width: 20px;
          height: 20px;
          margin-right: 0.75rem;
        }

        .option-item label {
          font-size: 0.95rem;
          line-height: 1.4;
        }

        .feedback-textarea {
          min-height: 100px;
          max-height: 30vh;
          padding: 1rem 1.25rem;
          border-radius: 20px;
          font-size: 16px; /* 防止iOS缩放 */
          line-height: 1.5;
          flex-shrink: 0;
        }

        .button-container {
          flex-direction: column;
          gap: 0.75rem;
          margin-top: 1rem;
          flex-shrink: 0;
        }

        .btn {
          padding: 0.875rem 1.5rem;
          font-size: 0.9rem;
          border-radius: 16px;
          min-width: auto;
          width: 100%;
        }

        .shortcut-hint:hover,
        .shortcut-hint:active {
          color: rgba(245, 245, 247, 1);
          background: rgba(255, 255, 255, 0.08);
          border-color: rgba(255, 255, 255, 0.15);
          opacity: 1;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
          transform: translateY(-1px);
        }

        .shortcut-tooltip {
          top: 100%;
          left: 0;
          margin-top: 6px;
          width: fit-content;
          font-size: 0.6rem;
          padding: 6px 10px;
          border-radius: 5px;
          line-height: 1.3;
        }

        .keyboard-icon {
          font-size: 0.45rem;
          opacity: 0.3;
        }

        .status-message {
          margin-top: 0.75rem;
          padding: 0.75rem 1rem;
          border-radius: 10px;
          font-size: 0.9rem;
        }

        /* 无有效内容页面移动端适配 */
        #no-content-container {
          padding: 2rem 1.25rem !important;
          min-height: 300px !important;
        }

        #no-content-container h2 {
          font-size: 1.5rem !important;
          margin-bottom: 0.75rem !important;
        }

        #no-content-container p {
          font-size: 0.95rem !important;
          margin-bottom: 1.5rem !important;
        }

        #no-content-container .button-container {
          margin-top: 1.5rem !important;
        }

        /* 进度条适配 */
        #no-content-container > div:nth-child(4) {
          width: 200px !important;
        }

        /* Markdown内容移动端适配 */
        .markdown-content {
          font-size: 0.95rem;
        }

        .markdown-content h1 {
          font-size: 1.3rem;
        }

        .markdown-content h2 {
          font-size: 1.15rem;
        }

        .markdown-content h3 {
          font-size: 1.05rem;
        }

        .code-block-container {
          border-radius: 16px;
          margin: 1rem 0;
          transform: none !important; /* 禁用移动端悬停效果 */
        }

        .code-block-container:hover {
          transform: none !important;
        }

        .markdown-content pre {
          padding: 1rem 1.25rem;
          font-size: 0.85rem;
          overflow-x: auto;
          border-radius: 16px;
        }

        .markdown-content code {
          font-size: 0.8rem;
          padding: 0.1rem 0.3rem;
          border-radius: 4px;
        }

        .code-toolbar {
          top: 10px;
          right: 10px;
          gap: 8px;
          opacity: 1; /* 移动端始终显示 */
        }

        .language-label {
          padding: 4px 8px;
          font-size: 0.65rem;
          border-radius: 6px;
        }

        .copy-button {
          padding: 5px 10px;
          font-size: 0.7rem;
          border-radius: 8px;
        }

        /* 移动端也完全隐藏滚动条 */
        .markdown-content pre::-webkit-scrollbar,
        .code-block-container pre::-webkit-scrollbar {
          display: none !important;
          width: 0 !important;
          height: 0 !important;
        }

        .markdown-content pre,
        .code-block-container pre {
          scrollbar-width: none !important;
          -ms-overflow-style: none !important;
        }

        .markdown-content table {
          font-size: 0.85rem;
        }

        .markdown-content th,
        .markdown-content td {
          padding: 0.5rem;
        }

        /* 移动端列表样式优化 */
        .markdown-content ul,
        .markdown-content ol {
          padding-left: 1.5rem;
          margin: 0.5rem 0;
        }

        .markdown-content ul li,
        .markdown-content ol li {
          margin: 0.375rem 0;
          padding-left: 1rem;
          font-size: 0.95rem;
        }

        .markdown-content ul li::before {
          font-size: 1.1em;
        }

        .markdown-content ul ul,
        .markdown-content ol ol,
        .markdown-content ul ol,
        .markdown-content ol ul {
          padding-left: 1rem;
        }

        /* 设置面板中等屏幕优化 */
        .settings-content {
          max-width: 90%;
          width: 90%;
        }

        .settings-header {
          padding: 1.25rem 1.25rem 1rem;
        }

        .settings-body {
          padding: 1.25rem;
        }

        .setting-label {
          min-height: 40px;
        }

        .setting-label input[type='checkbox'] {
          width: 18px;
          height: 18px;
        }

        .btn {
          min-height: 40px;
          padding: 0.625rem 1rem;
        }

        .settings-close-btn {
          min-width: 40px;
          min-height: 40px;
        }
      }

      /* 小屏幕手机适配 */
      @media (max-width: 480px) {
        body {
          padding: 0;
          min-height: 100vh;
          min-height: 100dvh; /* 使用动态视口高度 */
          max-height: 100vh;
          max-height: 100dvh;
          overflow-y: auto;
        }

        body.no-content-mode {
          padding: 0;
          height: 100vh;
          height: 100dvh; /* 使用动态视口高度 */
          overflow: hidden;
        }

        .container {
          margin: 0;
          border-radius: 0;
          box-shadow: none;
          border: none;
          background: transparent;
          min-height: 100vh;
          min-height: 100dvh;
          display: flex;
          flex-direction: column;
        }

        body.no-content-mode .container {
          margin: 0;
          height: 100vh;
          height: 100dvh;
          max-height: 100vh;
          max-height: 100dvh;
          background: transparent;
          overflow: hidden;
        }

        .header {
          padding: 0.75rem 1rem;
          /* 添加iOS安全区域支持，确保标题不被状态栏遮挡 */
          padding-top: max(0.75rem, env(safe-area-inset-top));
          background: transparent;
          border-bottom: none;
          flex-shrink: 0;
        }

        h1 {
          font-size: 1.125rem;
        }

        .content {
          padding: 0.75rem 1rem;
          background: transparent;
          flex: 1;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
        }

        .feedback-group {
          display: flex;
          flex-direction: column;
          height: 100%;
        }

        .description {
          padding: 1rem 1.25rem;
          font-size: 0.9rem;
        }

        .feedback-textarea {
          min-height: 80px;
          max-height: 25vh;
          padding: 0.875rem 1rem;
          font-size: 16px;
          flex-shrink: 0;
        }

        .btn {
          padding: 0.75rem 1.25rem;
          font-size: 0.85rem;
        }

        #no-content-container {
          padding: 1.5rem 1rem !important;
          min-height: 250px !important;
        }

        #no-content-container h2 {
          font-size: 1.25rem !important;
        }

        #no-content-container p {
          font-size: 0.9rem !important;
        }

        /* 进度条适配 */
        #no-content-container > div:nth-child(4) {
          width: 160px !important;
          height: 4px !important;
        }

        /* 小屏幕列表样式优化 */
        .markdown-content ul,
        .markdown-content ol {
          padding-left: 1.25rem;
          margin: 0.375rem 0;
        }

        .markdown-content ul li,
        .markdown-content ol li {
          margin: 0.3rem 0;
          padding-left: 0;
          font-size: 0.9rem;
        }

        .markdown-content ul li::before {
          font-size: 1em;
        }

        .markdown-content ul ul,
        .markdown-content ol ol,
        .markdown-content ul ol,
        .markdown-content ol ul {
          padding-left: 1.25rem;
        }

        /* 设置面板移动端优化 */
        .settings-panel {
          padding: 0;
          align-items: stretch;
          justify-content: stretch;
        }

        .settings-content {
          max-width: 100%;
          width: 100%;
          height: 100vh;
          height: 100dvh;
          max-height: 100vh;
          max-height: 100dvh;
          margin: 0;
          border-radius: 0;
          border: none;
          background: rgba(30, 30, 40, 0.98);
          display: flex;
          flex-direction: column;
        }

        .settings-header {
          padding: 1rem 1rem 0.75rem;
          position: sticky;
          top: 0;
          background: rgba(30, 30, 40, 0.98);
          z-index: 10;
        }

        .settings-header h3 {
          font-size: 1.1rem;
        }

        .settings-close-btn {
          width: 40px;
          height: 40px;
          min-width: 40px;
          min-height: 40px;
          border-radius: 50%;
        }

        .settings-close-btn::before,
        .settings-close-btn::after {
          width: 16px;
          height: 2.5px;
        }

        .settings-body {
          padding: 1rem;
          padding-bottom: max(1rem, env(safe-area-inset-bottom));
          flex: 1;
          overflow-y: auto;
          max-height: none !important;
          height: auto;
        }

        .settings-main-title {
          font-size: 1.1rem;
          margin-bottom: 1rem;
          padding-bottom: 0.5rem;
        }

        .setting-group {
          margin-bottom: 1.5rem;
          padding: 1rem;
          border-radius: 12px;
        }

        .setting-group-title {
          font-size: 0.95rem;
          margin-bottom: 1rem;
          padding-bottom: 0.5rem;
        }

        .setting-subgroup {
          margin: 1rem 0;
          padding: 0.75rem;
          border-radius: 8px;
          background: rgba(255, 255, 255, 0.01);
        }

        .setting-subgroup-title {
          font-size: 0.85rem;
          margin-bottom: 0.75rem;
          padding-bottom: 0.25rem;
        }

        .setting-item {
          margin-bottom: 0.75rem;
          padding: 0.5rem 0;
          border-radius: 0;
          background: transparent;
          border: none;
        }

        .setting-label {
          gap: 0.75rem;
          margin-bottom: 0;
          min-height: 44px;
          align-items: center;
          padding: 0;
        }

        .setting-label input[type='checkbox'] {
          width: 20px;
          height: 20px;
          min-width: 20px;
          min-height: 20px;
        }

        .setting-title {
          font-size: 1rem;
          line-height: 1.4;
        }

        .setting-description {
          font-size: 0.9rem;
          line-height: 1.4;
          margin-left: 3rem;
        }

        .volume-slider {
          margin: 0 1rem;
          min-height: 44px;
        }

        .btn {
          min-height: 44px;
          padding: 0.75rem 1rem;
          font-size: 0.95rem;
          border-radius: 12px;
        }

        .status-info {
          padding: 0.75rem;
        }

        .status-row {
          margin-bottom: 0.75rem;
          min-height: 44px;
          align-items: center;
        }

        .status-row span {
          font-size: 0.95rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>
          <div class="header-icon">
            <svg width="32" height="32" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <linearGradient id="masterBg" x1="50%" y1="0%" x2="50%" y2="100%">
                  <stop offset="0%" class="svg-stop-1" />
                  <stop offset="100%" class="svg-stop-2" />
                </linearGradient>
                <radialGradient id="aiFluidCore" cx="50%" cy="50%" r="70%" fx="52%" fy="48%">
                  <stop offset="0%" class="svg-stop-3" />
                  <stop offset="30%" class="svg-stop-4" />
                  <stop offset="60%" class="svg-stop-5" />
                  <stop offset="100%" class="svg-stop-6" />
                </radialGradient>
                <linearGradient id="interventionControl" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" class="svg-stop-7" />
                  <stop offset="30%" class="svg-stop-8" />
                  <stop offset="70%" class="svg-stop-9" />
                  <stop offset="100%" class="svg-stop-10" />
                </linearGradient>
              </defs>
              <g>
                <rect
                  x="10"
                  y="10"
                  width="100"
                  height="100"
                  rx="22.5"
                  ry="22.5"
                  fill="url(#masterBg)"
                />
              </g>
              <g transform="translate(60,60) scale(0.95)">
                <g>
                  <path
                    id="aiShape"
                    d="M 0 -35
                           Q 30 -35, 30 0
                           Q 30 35, 0 35
                           Q -30 35, -30 0
                           Q -30 -35, 0 -35 Z
                           M 0 -25
                           Q 20 -25, 20 0
                           Q 20 25, 0 25
                           Q -20 25, -20 0
                           Q -20 -25, 0 -25 Z"
                    fill-rule="evenodd"
                    fill="url(#aiFluidCore)"
                    transform="rotate(15)"
                  />
                </g>
                <g transform="translate(0, -1)">
                  <path
                    d="M -15 -22
                           L -7 -22
                           C -5.5 -22, -4.5 -21, -4.5 -19.5
                           L -4.5 19.5
                           C -4.5 21, -5.5 22, -7 22
                           L -15 22
                           C -16.5 22, -17.5 21, -17.5 19.5
                           L -17.5 -19.5
                           C -17.5 -21, -16.5 -22, -15 -22 Z"
                    fill="url(#interventionControl)"
                  />
                  <path
                    d="M 4.5 -22
                           L 12.5 -22
                           C 14 -22, 15 -21, 15 -19.5
                           L 15 19.5
                           C 15 21, 14 22, 12.5 22
                           L 4.5 22
                           C 3 22, 2 21, 2 19.5
                           L 2 -19.5
                           C 2 -21, 3 -22, 4.5 -22 Z"
                    fill="url(#interventionControl)"
                  />
                </g>
              </g>
            </svg>
          </div>
          AI Intervention Agent
        </h1>
        <div class="header-actions">
          <button
            class="theme-toggle-btn"
            id="theme-toggle-btn"
            title="切换主题"
            aria-label="切换主题"
          >
            <!-- Claude 风格太阳图标（浅色模式）- 精致线条版 -->
            <svg
              class="theme-icon theme-icon-sun"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <!-- 太阳中心圆 -->
              <circle cx="10" cy="10" r="3" />
              <!-- 光芒射线 -->
              <line x1="10" y1="2" x2="10" y2="4" />
              <line x1="10" y1="16" x2="10" y2="18" />
              <line x1="2" y1="10" x2="4" y2="10" />
              <line x1="16" y1="10" x2="18" y2="10" />
              <line x1="4.2" y1="4.2" x2="5.8" y2="5.8" />
              <line x1="14.2" y1="14.2" x2="15.8" y2="15.8" />
              <line x1="4.2" y1="15.8" x2="5.8" y2="14.2" />
              <line x1="14.2" y1="5.8" x2="15.8" y2="4.2" />
            </svg>
            <!-- Claude 风格月亮图标（深色模式）- 精致线条版 -->
            <svg
              class="theme-icon theme-icon-moon"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <!-- 新月形状 -->
              <path
                d="M17.5 10.5C17.5 14.642 14.142 18 10 18C5.858 18 2.5 14.642 2.5 10.5C2.5 6.358 5.858 3 10 3C10.2 3 10.4 3.01 10.6 3.02C8.4 3.9 7 6.1 7 8.7C7 12.1 9.9 15 13.3 15C14.9 15 16.3 14.3 17.3 13.2C17.4 12.3 17.5 11.4 17.5 10.5Z"
              />
            </svg>
          </button>
          <button
            class="settings-btn"
            id="settings-btn"
            title="通知设置"
            aria-label="打开通知设置"
            aria-haspopup="dialog"
            aria-controls="settings-panel"
          >
            <!-- Claude 风格设置/齿轮图标 - 精致线条版 -->
            <svg
              class="btn-icon"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <!-- 齿轮中心圆 -->
              <circle cx="12" cy="12" r="3" />
              <!-- 齿轮外形 -->
              <path
                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
              />
            </svg>
          </button>
        </div>
      </div>

      <!-- 任务标签页 -->
      <div
        class="task-tabs-container hidden"
        id="task-tabs-container"
        role="tablist"
        aria-label="任务列表"
      >
        <div class="task-tabs" id="task-tabs">
          <!-- 标签页将由 JS 动态生成 -->
        </div>
      </div>

      <!-- 无有效内容页面 -->
      <div id="no-content-container" class="no-content-container">
        <div class="no-content-icon" id="hourglass-lottie"></div>
        <h2 class="no-content-title">暂无交互反馈请求</h2>
        <p class="no-content-description">等待新的交互反馈请求…</p>
        <div class="no-content-progress">
          <div class="no-content-progress-bar"></div>
        </div>
        <div class="button-container no-content-buttons" id="no-content-buttons">
          <button class="btn btn-secondary" id="close-btn" aria-label="关闭 Web UI">
            <!-- Claude 风格关闭图标（X）- 精致线条版 -->
            <svg
              class="btn-icon"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
              style="width: 18px; height: 18px; margin-right: 6px"
            >
              <!-- 交叉线条 -->
              <line x1="5" y1="5" x2="15" y2="15" />
              <line x1="15" y1="5" x2="5" y2="15" />
            </svg>
            关闭 Web UI
          </button>
        </div>
        <!-- 无内容页面的状态消息显示区域 -->
        <div class="status-message no-content-status" id="no-content-status-message"></div>
      </div>

      <!-- 正常内容页面 -->
      <div id="content-container" class="content">
        <div class="feedback-group">
          <!-- 任务 ID 和倒计时显示区域 -->
          <div class="header-info-container">
            <div class="task-id-container hidden" id="task-id-container">
              <span class="task-id-label">
                <!-- Claude 官方文档图标 -->
                <svg
                  class="section-icon"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M3 4.5C3 3.67157 3.67157 3 4.5 3H11C11.1326 3 11.2598 3.05268 11.3536 3.14645L16.8536 8.64645C16.9473 8.74021 17 8.86739 17 9V15.5C17 16.3284 16.3284 17 15.5 17H4.5C3.67157 17 3 16.3284 3 15.5V4.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5V15.5C4 15.7761 4.22386 16 4.5 16H15.5C15.7761 16 16 15.7761 16 15.5V9.20711L11.2929 4.5H11H4.5Z"
                  />
                </svg>
                任务：
              </span>
              <span class="task-id-text" id="task-id-text"></span>
            </div>

            <div class="countdown-container hidden" id="countdown-container">
              <span class="countdown-label">⏰</span>
              <span class="countdown-text" id="countdown-text">0 秒后自动重调</span>
            </div>
          </div>

          <div class="description markdown-content" id="description">加载中…</div>

          <div class="options-container hidden" id="options-container">
            <!-- 预定义选项将在这里动态加载 -->
          </div>

          <div class="separator hidden" id="separator"></div>

          <!-- 图片预览区域 -->
          <div class="image-preview-container hidden" id="image-preview-container">
            <div class="image-preview-header">
              <span class="image-count-text">已选择 <span id="image-count">0</span> 张图片</span>
              <button class="clear-all-images-btn" id="clear-all-images-btn" title="清除所有图片">
                <!-- Claude 官方垃圾箱图标 -->
                <svg
                  class="btn-icon"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M7 3C7 2.44772 7.44772 2 8 2H12C12.5523 2 13 2.44772 13 3V4H16C16.2761 4 16.5 4.22386 16.5 4.5C16.5 4.77614 16.2761 5 16 5H15V16C15 16.5523 14.5523 17 14 17H6C5.44772 17 5 16.5523 5 16V5H4C3.72386 5 3.5 4.77614 3.5 4.5C3.5 4.22386 3.72386 4 4 4H7V3ZM8 4H12V3H8V4ZM6 5V16H14V5H6Z"
                  />
                  <path
                    d="M8.5 7C8.77614 7 9 7.22386 9 7.5V14.5C9 14.7761 8.77614 15 8.5 15C8.22386 15 8 14.7761 8 14.5V7.5C8 7.22386 8.22386 7 8.5 7Z"
                  />
                  <path
                    d="M11.5 7C11.7761 7 12 7.22386 12 7.5V14.5C12 14.7761 11.7761 15 11.5 15C11.2239 15 11 14.7761 11 14.5V7.5C11 7.22386 11.2239 7 11.5 7Z"
                  />
                </svg>
                清除全部
              </button>
            </div>
            <div class="image-previews" id="image-previews">
              <!-- 图片预览缩略图将在这里动态添加 -->
            </div>
          </div>

          <!-- 拖拽提示覆盖层 -->
          <div class="drag-overlay hidden" id="drag-overlay">
            <div class="drag-overlay-content">
              <div class="drag-icon">📁</div>
              <div class="drag-text">拖放图片到这里</div>
              <div class="drag-subtext">支持 JPG、PNG、GIF、WEBP 格式</div>
            </div>
          </div>

          <!-- 图片放大预览模态框 -->
          <div class="image-modal" id="image-modal">
            <div class="image-modal-content">
              <img id="modal-image" src="" alt="" />
              <button class="image-modal-close" onclick="closeImageModal()">×</button>
              <div class="image-modal-info" id="modal-info"></div>
            </div>
          </div>

          <!-- 代码粘贴模态框（iOS/HTTP 等场景无法读取剪贴板时的降级方案） -->
          <div
            class="settings-panel hidden"
            id="code-paste-panel"
            role="dialog"
            aria-modal="true"
            aria-labelledby="code-paste-title"
          >
            <div class="settings-content" style="max-width: 720px">
              <div class="settings-header">
                <h3 id="code-paste-title" class="settings-title">
                  <svg
                    class="section-icon"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <polyline points="16 18 22 12 16 6"></polyline>
                    <polyline points="8 6 2 12 8 18"></polyline>
                    <line x1="14" y1="4" x2="10" y2="20"></line>
                  </svg>
                  插入代码
                </h3>
                <button class="settings-close-btn" id="code-paste-close-btn" type="button" aria-label="关闭"></button>
              </div>
              <div class="settings-body">
                <div class="setting-group">
                  <div
                    id="code-paste-hint"
                    style="margin-bottom: 0.75rem; color: rgba(245, 245, 247, 0.8); font-size: 0.9rem"
                  >
                    由于浏览器安全限制无法自动读取剪贴板，请在下方粘贴代码（iOS 可长按→粘贴），然后点击“插入”。
                  </div>
                  <textarea
                    id="code-paste-textarea"
                    class="code-paste-textarea"
                    placeholder="在此粘贴代码…"
                    spellcheck="false"
                    autocapitalize="off"
                    autocomplete="off"
                    autocorrect="off"
                  ></textarea>
                  <div class="code-paste-actions">
                    <button class="btn btn-secondary" id="code-paste-cancel-btn" type="button">取消</button>
                    <button class="btn btn-primary" id="code-paste-insert-btn" type="button">插入</button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 隐藏的文件上传input -->
          <input type="file" id="file-upload-input" multiple accept="image/*" class="hidden" />

          <div class="textarea-container">
            <textarea
              class="feedback-textarea"
              id="feedback-text"
              placeholder="请输入反馈内容…"
            ></textarea>
          </div>

          <div class="button-container">
            <button type="button" class="btn btn-secondary" id="insert-code-btn">
              <!-- Claude 风格代码图标（线条版） -->
              <svg
                class="btn-icon"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <polyline points="16 18 22 12 16 6"></polyline>
                <polyline points="8 6 2 12 8 18"></polyline>
                <line x1="14" y1="4" x2="10" y2="20"></line>
              </svg>
              插入代码
            </button>
            <button type="button" class="btn btn-secondary" id="upload-image-btn">
              <!-- Claude 风格图片图标（线条版） -->
              <svg
                class="btn-icon"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                <polyline points="21 15 16 10 5 21"></polyline>
              </svg>
              上传图片
            </button>
            <button type="button" class="btn btn-primary" id="submit-btn">
              <!-- Claude 风格发送图标（双箭头） -->
              <svg
                class="btn-icon"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M3.29289 3.29289C3.68342 2.90237 4.31658 2.90237 4.70711 3.29289L10.7071 9.29289C11.0976 9.68342 11.0976 10.3166 10.7071 10.7071L4.70711 16.7071C4.31658 17.0976 3.68342 17.0976 3.29289 16.7071C2.90237 16.3166 2.90237 15.6834 3.29289 15.2929L8.58579 10L3.29289 4.70711C2.90237 4.31658 2.90237 3.68342 3.29289 3.29289ZM9.29289 3.29289C9.68342 2.90237 10.3166 2.90237 10.7071 3.29289L16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L14.5858 10L9.29289 4.70711C8.90237 4.31658 8.90237 3.68342 9.29289 3.29289Z"
                />
              </svg>
              提交反馈
            </button>
          </div>

          <div class="status-message" id="status-message"></div>
        </div>
      </div>

      <!-- 设置面板 -->
      <div
        class="settings-panel hidden"
        id="settings-panel"
        role="dialog"
        aria-modal="true"
        aria-labelledby="settings-title"
      >
        <div class="settings-content">
          <div class="settings-header">
            <h3 id="settings-title">
              <!-- Claude 风格设置/齿轮图标 - 精致线条版 -->
              <svg
                class="section-icon"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <!-- 齿轮中心圆 -->
                <circle cx="12" cy="12" r="3" />
                <!-- 齿轮外形 -->
                <path
                  d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
                />
              </svg>
              设置
            </h3>
            <button
              class="settings-close-btn"
              id="settings-close-btn"
              aria-label="关闭设置"
            ></button>
          </div>

          <div class="settings-body">
            <!-- 通知标题 -->
            <h4 class="settings-main-title">
              <!-- Claude 风格铃铛图标 -->
              <svg
                class="section-icon"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M10 2C7.23858 2 5 4.23858 5 7V11.5858L3.29289 13.2929C3.00693 13.5789 2.92134 14.009 3.07612 14.3827C3.2309 14.7564 3.59554 15 4 15H16C16.4045 15 16.7691 14.7564 16.9239 14.3827C17.0787 14.009 16.9931 13.5789 16.7071 13.2929L15 11.5858V7C15 4.23858 12.7614 2 10 2ZM6 7C6 4.79086 7.79086 3 10 3C12.2091 3 14 4.79086 14 7V12C14 12.2652 14.1054 12.5196 14.2929 12.7071L15.5858 14H4.41421L5.70711 12.7071C5.89464 12.5196 6 12.2652 6 12V7ZM8.26756 16C8.61337 17.1825 9.70948 18 11 18C12.2905 18 13.3866 17.1825 13.7324 16H8.26756Z"
                />
              </svg>
              通知
            </h4>

            <!-- 通知设置 -->
            <div class="setting-group">
              <!-- 通知总开关 -->
              <div class="setting-item">
                <label class="setting-label">
                  <input type="checkbox" id="notification-enabled" checked />
                  <span class="setting-title">启用通知功能</span>
                </label>
              </div>

              <!-- 桌面通知设置 -->
              <div class="setting-subgroup">
                <h5 class="setting-subgroup-title">
                  <svg
                    class="section-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <circle cx="12" cy="12" r="10" />
                    <line x1="2" y1="12" x2="22" y2="12" />
                    <path
                      d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
                    />
                  </svg>
                  桌面通知（浏览器）
                </h5>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="web-notification-enabled" checked />
                    <span class="setting-title">启用桌面通知</span>
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="auto-request-permission" checked />
                    <span class="setting-title">自动请求浏览器通知权限</span>
                  </label>
                </div>
              </div>

              <!-- 声音通知设置 -->
              <div class="setting-subgroup">
                <h5 class="setting-subgroup-title">
                  <svg
                    class="section-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
                    <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
                  </svg>
                  声音通知
                </h5>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="sound-notification-enabled" checked />
                    <span class="setting-title">声音通知</span>
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="sound-mute" />
                    <span class="setting-title">静音模式</span>
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label">
                    <span class="setting-title">音量调节</span>
                    <input
                      type="range"
                      id="sound-volume"
                      min="0"
                      max="100"
                      value="80"
                      class="volume-slider"
                    />
                    <span class="volume-value">80%</span>
                  </label>
                </div>
              </div>

              <!-- 移动设备通知设置 -->
              <div class="setting-subgroup">
                <h5 class="setting-subgroup-title">
                  <svg
                    class="section-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
                    <line x1="12" y1="18" x2="12.01" y2="18" />
                  </svg>
                  移动设备
                </h5>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="mobile-optimized" checked />
                    <span class="setting-title">移动设备优化</span>
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="mobile-vibrate" checked />
                    <span class="setting-title">震动提醒</span>
                  </label>
                </div>
              </div>

              <!-- Bark 通知设置 -->
              <div class="setting-subgroup">
                <h5 class="setting-subgroup-title">
                  <svg
                    class="section-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path
                      d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06z"
                    />
                    <path d="M10 2c1 .5 2 2 2 5" />
                  </svg>
                  Bark 通知（iOS）
                </h5>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="bark-notification-enabled" />
                    <span class="setting-title">启用 Bark 通知</span>
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label has-input">
                    <span class="setting-title">Bark URL</span>
                    <input
                      type="url"
                      id="bark-url"
                      class="setting-input"
                      placeholder="https://api.day.app/push"
                      value=""
                    />
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label has-input">
                    <span class="setting-title">Device Key</span>
                    <input
                      type="text"
                      id="bark-device-key"
                      class="setting-input"
                      placeholder="请输入 Bark Device Key"
                      value=""
                    />
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label has-input">
                    <span class="setting-title">图标 URL（可选）</span>
                    <input
                      type="url"
                      id="bark-icon"
                      class="setting-input"
                      placeholder="https://example.com/icon.png"
                      value=""
                    />
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label has-input">
                    <span class="setting-title">点击行为</span>
                    <select id="bark-action" class="setting-select">
                      <option value="none">无操作</option>
                      <option value="url">打开链接</option>
                      <option value="copy">复制内容</option>
                    </select>
                  </label>
                </div>
                <div class="setting-item">
                  <button class="btn btn-secondary" id="test-bark-notification-btn">
                    <svg
                      class="btn-icon"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path
                        d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
                      />
                      <polyline points="14 2 14 8 20 8" />
                      <line x1="9" y1="15" x2="15" y2="15" />
                    </svg>
                    测试 Bark 通知
                  </button>
                </div>
              </div>

              <!-- 通知状态信息 -->
              <div class="setting-subgroup">
                <h5 class="setting-subgroup-title">
                  <svg
                    class="section-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <circle cx="12" cy="12" r="10" />
                    <line x1="12" y1="16" x2="12" y2="12" />
                    <line x1="12" y1="8" x2="12.01" y2="8" />
                  </svg>
                  状态信息
                </h5>
                <div class="status-row">
                  <span>浏览器通知支持：</span>
                  <span id="browser-support-status">检测中…</span>
                </div>
                <div class="status-row">
                  <span>安全上下文：</span>
                  <span id="notification-secure-context-status">检测中…</span>
                </div>
                <div class="status-row">
                  <span>通知权限：</span>
                  <span id="notification-permission-status">检测中…</span>
                </div>
                <div class="status-row">
                  <span>音频状态：</span>
                  <span id="audio-status">检测中…</span>
                </div>
              </div>

              <!-- 测试功能 -->
              <div class="setting-subgroup">
                <h5 class="setting-subgroup-title">
                  <svg
                    class="section-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path
                      d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
                    />
                    <polyline points="14 2 14 8 20 8" />
                    <line x1="9" y1="15" x2="15" y2="15" />
                  </svg>
                  测试功能
                </h5>
                <div class="setting-item">
                  <button class="btn btn-secondary" id="test-notification-btn">
                    <svg
                      class="btn-icon"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
                      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
                    </svg>
                    测试桌面通知
                  </button>
                </div>
                <div class="setting-item">
                  <button class="btn btn-secondary" id="reset-settings-btn">
                    <svg
                      class="btn-icon"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <polyline points="1 4 1 10 7 10" />
                      <polyline points="23 20 23 14 17 14" />
                      <path
                        d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"
                      />
                    </svg>
                    重置设置
                  </button>
                </div>
              </div>
            </div>

            <!-- 配置文件信息（用于明确“当前实际读取的 config.jsonc 是哪一份”） -->
            <h4 class="settings-main-title shortcuts-section">
              <svg
                class="section-icon"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M20 7H4" />
                <path d="M20 12H4" />
                <path d="M20 17H4" />
              </svg>
              配置
            </h4>
            <div class="setting-group">
              <div class="setting-item">
                <label class="setting-label has-input">
                  <span class="setting-title">当前配置文件路径</span>
                  <input
                    type="text"
                    id="config-file-path"
                    class="setting-input"
                    value="加载中…"
                    readonly
                  />
                </label>
                <div style="margin-top: 0.5rem; color: rgba(245, 245, 247, 0.7); font-size: 0.85rem">
                  开发模式默认优先使用工作目录的 <code>./config.jsonc</code>。如需强制指向
                  <code>~/.config/ai-intervention-agent/config.jsonc</code>，请在启动前设置环境变量：
                  <code>AI_INTERVENTION_AGENT_CONFIG_FILE=/path/to/config.jsonc</code>。
                </div>
              </div>
            </div>

            <!-- 常用快捷键 -->
            <h4 class="settings-main-title shortcuts-section">
              <svg
                class="section-icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <rect x="2" y="4" width="20" height="16" rx="2" ry="2" />
                <path
                  d="M6 8h.001M10 8h.001M14 8h.001M18 8h.001M8 12h.001M12 12h.001M16 12h.001M6 16h12"
                />
              </svg>
              常用快捷键
            </h4>
            <div class="setting-group shortcuts-section">
              <div class="status-row">
                <span>提交反馈：</span>
                <span id="shortcut-submit">Ctrl+Enter</span>
              </div>
              <div class="status-row">
                <span>插入代码：</span>
                <span id="shortcut-code">Alt+C</span>
              </div>
              <div class="status-row">
                <span>粘贴图片：</span>
                <span id="shortcut-paste">Ctrl+V</span>
              </div>
              <div class="status-row">
                <span>上传图片：</span>
                <span id="shortcut-upload">Ctrl+U</span>
              </div>
              <div class="status-row">
                <span>清除图片：</span>
                <span id="shortcut-delete">Delete</span>
              </div>
            </div>

            <!-- 版本信息 -->
            <div class="version-info">
              <div class="version-text">
                <span class="version-name">AI Intervention Agent</span>
                <span class="version-number">v{{ version }}</span>
              </div>
              <a
                href="{{ github_url }}"
                target="_blank"
                rel="noopener noreferrer"
                class="github-link"
                title="在 GitHub 上查看项目"
              >
                <!-- GitHub 图标 - 明确设置尺寸以确保正确渲染 -->
                <svg
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  class="github-icon"
                  width="14"
                  height="14"
                  style="width: 14px; height: 14px; flex-shrink: 0"
                >
                  <path
                    d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
                  />
                </svg>
                <span>GitHub</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 验证工具类：统一验证和缓存功能 -->
    <script defer src="/static/js/validation-utils.js" nonce="{{ csp_nonce }}"></script>

    <!-- 🎬 Lottie 动画库（defer 属性：按顺序异步加载） -->
    <script defer src="/static/js/lottie.min.js" nonce="{{ csp_nonce }}"></script>

    <!-- 🎨 主题切换模块（defer 属性：按顺序异步加载） -->
    <script defer src="/static/js/theme.js" nonce="{{ csp_nonce }}"></script>

    <!-- ⌨️ 键盘快捷键模块（defer 属性：按顺序异步加载） -->
    <script defer src="/static/js/keyboard-shortcuts.js" nonce="{{ csp_nonce }}"></script>

    <!-- DOM 安全工具：防止 XSS 攻击（defer 属性：按顺序异步加载） -->
    <script defer src="/static/js/dom-security.js" nonce="{{ csp_nonce }}"></script>

    <!-- 📋 多任务管理模块（defer 属性：按顺序异步加载，依赖内联脚本中的函数） -->
    <script defer src="/static/js/multi_task.js" nonce="{{ csp_nonce }}"></script>

    <!-- 主应用脚本（依赖: mathjax-loader, multi_task, theme, dom-security 等） -->
    <script defer src="/static/js/app.js" nonce="{{ csp_nonce }}"></script>
  </body>
</html>
