/* --- DARK THEME VARIABLES --- */
:root {
    --dark-bg: #1e1e1e; 
    --dark-surface: #2a2a2a; 
    --dark-surface-light: #333333; 
    --dark-text-primary: #e0e0e0; 
    --dark-text-secondary: #b0b0b0; 
    --dark-border: #444444; 
    --dark-accent: #4a90e2; 
    --dark-accent-hover: #3a7bc8; 
    --dark-selected-bg: #004a8e; 
    --dark-field-text: #4a90e2; 
    --dark-remarks-border: #00DFD8; 
    --dark-remarks-text: #bdbdbd; 
    --dark-input-bg: #3a3a3a; 
    --dark-input-border: #555555; 
    --dark-pre-bg: #1c1c1c; 
    --dark-pre-border: #383838; 
    
    /* --- 定义小说风格的字体变量 --- */
    --font-family-novel: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--dark-text-primary);
    line-height: 1.6;
    
    /* === 修改背景：极光风格 === */
    background-color: #121212; 
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(0, 223, 216, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(121, 40, 202, 0.06) 0%, transparent 30%);
    background-attachment: fixed;
}

/* --- Header & Controls --- */
header {
    text-align: center;              
    padding: 20px 0 5px 0;
    margin: 0 auto;
    position: relative;
    max-width: 1200px;
}

/* --- Logo Styles --- */
.logo-container {
    position: absolute;
    top: 1px;
    left: 20px;
    z-index: 20;
    display: flex;
    align-items: center; 
    justify-content: center;
}
.logo-container img {
    height: 70px;
    width: auto;
    border-radius: 5px;
}

/* 标题样式：艺术字体 + 流光渐变 */
h1 {
    font-family: 'Playfair Display', 'Ma Shan Zheng', cursive, serif; 
    text-align: center;
    margin-top: 30px;
    margin-bottom: 5px;
    font-size: 2.8em;
    font-weight: 400;
    letter-spacing: 1.5px;
    line-height: 1.3;
    background: linear-gradient(
        90deg,               
        #00DFD8, /* 亮青色 */
        #7928CA  /* 紫色 */
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: colorWave 7s linear infinite;
    -webkit-animation: colorWave 7s linear infinite;
}

.top-right-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10;
}

  /* --- 统一的圆形图标按钮样式 --- */
  .icon-btn {
      width: 40px;  /* 固定宽度 */
      height: 40px; /* 固定高度，确保正圆 */
      border-radius: 50%; /* 变成圆形 */
      /* === 新增：PC端防止被拉伸的关键 === */
      flex: 0 0 40px;        /* 强制 flex 占用空间 */
      min-width: 40px; /* 绝对不准小于 40px (防挤扁) */
      max-width: 40px; /* 绝对不准大于 40px (防拉伸) */     
      /* ================================ */
      
      background-color: rgba(255, 255, 255, 0.05); /* 极淡背景 */
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: var(--dark-text-secondary);
      
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none; /* 去掉链接下划线 */
      font-size: 1.1rem; /* 图标稍微大一点 */
      padding: 0; /* 移除内边距 */
      position: relative; /* 为语言下拉框定位做准备 */
      /* === 新增这行：防止被压缩 === */
      flex-shrink: 0; 
      flex-grow: 0
  }

 /* 悬停效果 */
  .icon-btn:hover {
      color: #fff;
      background-color: var(--dark-accent); /* 悬停变亮色 */
      border-color: var(--dark-accent);
      box-shadow: 0 0 15px var(--dark-accent); /* 发光 */
      transform: rotate(15deg); /* 增加一点俏皮的旋转 */
  }
  
  /* --- 语言选择器的特殊处理 (核心修改) --- */
  .language-wrapper select {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0; /* 关键：完全透明，但仍然可以点击 */
      cursor: pointer;
      appearance: none; /* 移除默认样式 */
      -webkit-appearance: none;
      z-index: 2; /* 确保在图标之上 */
  }
  
  /* --- 修复下拉菜单看不清的问题 --- */
  /* 这里强制设置下拉选项的背景色和文字颜色 */
  #languageSelector {
      color-scheme: dark; /* 告诉浏览器这是暗色控件，滚动条和箭头会自动变黑底 */
  }
  
  #languageSelector option {
      background-color: #1e1e1e; /* 下拉菜单背景：深灰 */
      color: #f0f0f0;            /* 下拉菜单文字：亮白 */
      padding: 10px;
  }

  /* --- 界面风格选择器的特殊处理 (新增，与上面完全对称) --- */
  .style-wrapper select {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      z-index: 2;
  }
  
  #uiStyle {
      color-scheme: dark;
  }
  
  #uiStyle option {
      background-color: #1e1e1e;
      color: #f0f0f0;
      padding: 10px;
  }
  
  .about-us-button:hover, 
  .settings-link:hover, 
  .language-selector:hover {
      color: #fff;
      border-color: var(--dark-accent);
      background-color: rgba(74, 144, 226, 0.15); /* 悬停微蓝 */
      box-shadow: 0 0 10px rgba(74, 144, 226, 0.2); /* 悬停微发光 */
      transform: translateY(-1px);
  }

  .settings-link .fa-cog {
      margin-right: 6px;
  }    

/* --- Modal Styles --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    animation: fadeIn 0.3s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* === 通用模态框内容样式 === */
.modal-content {
    background-color: var(--dark-surface);
    margin: 15% auto;
    padding: 30px;
    border: 1px solid var(--dark-border);
    width: 90%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    position: relative;
}

/* === 宣言/天使模式模态框：水晶铭牌风格 === */
.manifesto-modal .modal-content {
    background: rgba(25, 25, 25, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.8), 
        0 0 0 1px rgba(0, 223, 216, 0.1); 
    border-radius: 12px;
    max-width: 600px; /* 稍微宽一点以容纳长文本 */
    margin: 3% auto;
    padding: 6px 40px 40px;
    /* --- 核心修复！去掉父容器的滚动条，否则滚动条会压住关闭按钮 --- */
    overflow: visible; 
    position: relative;
}

/* 标题样式 */
.manifesto-modal h2 {
    font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
    font-size: 2em;
    text-align: center;
    font-weight: 700;
    margin-top: 6px;
    margin-bottom: 25px;
    line-height: 1.3;
    background: linear-gradient(90deg, #00DFD8, #7928CA);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 5px rgba(0, 223, 216, 0.3));
    animation: colorWave 7s linear infinite;
}

/* 正文样式 */
.manifesto-modal .manifesto-text {
    font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
    color: #e0e0e0;
    font-size: 1.15em;
    line-height: 1.9;
    text-align: justify;
    /* --- 修改点：滚动条加在这里 --- */
    max-height: 65vh;   /* 限制高度 */
    overflow-y: auto;   /* 允许内部滚动 */  
    padding: 0 10px;    /* --- 增加一点内边距，让文字离滚动条有点距离 --- */       
   
}

.manifesto-modal p {
    margin-bottom: 1.5em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 结语 */
.manifesto-modal p.conclusion {
    text-align: center;
    font-style: normal;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 1.4em;
    color: var(--dark-accent);
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 天使模式列表优化 */
.manifesto-modal ul {
    padding-left: 0;
}
.manifesto-modal li blockquote {
     border-left: 3px solid var(--dark-accent);
     margin: 10px 0;
     padding-left: 15px;
     font-style: italic;
     color: #d0d0d0;
     background: rgba(255,255,255,0.03);
     padding: 10px 15px;
     border-radius: 0 6px 6px 0;
}

 /* 关闭按钮优化 */
.close-button {
    color: rgba(255, 255, 255, 0.5);
    font-size: 32px;
    top: 15px;
    right: 20px;
    transition: all 0.3s;
}
.close-button:hover {
    color: var(--dark-accent); /* 悬停变青色 */
    transform: rotate(90deg);  /* 旋转动效 */
}

/* 滚动条美化 (模态框内) */
.manifesto-text::-webkit-scrollbar { width: 6px; }
.manifesto-text::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 3px; }
.manifesto-text::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
.manifesto-text::-webkit-scrollbar-thumb:hover { background: var(--dark-accent); }

.settings-form .form-group {
    margin-bottom: 20px;
}
.settings-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--dark-text-primary);
}
.settings-form select, .settings-form input[type="password"] {
    width: 100%;
    padding: 10px;
    background-color: var(--dark-input-bg);
    border: 1px solid var(--dark-input-border);
    border-radius: 4px;
    color: var(--dark-text-primary);
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.settings-form select:focus, .settings-form input[type="password"]:focus {
    outline: none;
    border-color: var(--dark-accent);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3);
}

.settings-form .save-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    background-color: var(--dark-accent);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.settings-form .save-btn:hover {
    background-color: var(--dark-accent-hover);
}

/* === 设置模态框样式重构 === */       
/* ===#apiSettingsModal (API设置) 样式重构，与整体保持一致=== */
/* 1. 容器：深色磨砂玻璃 + 呼吸感光晕 */
#apiSettingsModal .modal-content {
    /* 背景：深色高模糊 */
    background: rgba(25, 25, 25, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* 边框：极细光环 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    
    /* 阴影 */
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.8), 
        0 0 0 1px rgba(0, 223, 216, 0.1); 
        
    border-radius: 12px;
    
    /* 尺寸与布局 */
    max-width: 500px; /* 设置不需要太宽，精致一点 */
    margin: 3% auto;  /* 垂直位置 */
    padding: 6px 40px 40px; /* 内部留白 */
    position: relative;
}

/* 2. 标题 H2：流光渐变艺术字 */
#apiSettingsModal h2 {
    font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
    font-size: 1.6em; /* 设置里标题不需要太大 */
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    
    /* 渐变流光 */
    background: linear-gradient(90deg, #00DFD8, #7928CA);
    background-size: 200% auto;
    
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 发光滤镜 */
    filter: drop-shadow(0 0 5px rgba(0, 223, 216, 0.4));
    animation: colorWave 7s linear infinite;
    
    /* 确保图标也垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
/* 让标题里的图标也能吃到渐变色 */
#apiSettingsModal h2 i {
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 3. 表单标签：优雅的宋体/衬线体 */
#apiSettingsModal label {
    font-family: 'Noto Serif SC', 'Playfair Display', serif;
    font-size: 1.1em;
    color: #d0d0d0; /* 稍微柔和的灰白 */
    margin-bottom: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
}
#apiSettingsModal label i {
    color: var(--dark-accent); /* 图标用主题蓝/青色 */
    width: 20px; /* 固定宽度保证对齐 */
    text-align: center;
}

/* 4. 输入框与下拉菜单：深邃凹陷感 */
#apiSettingsModal input[type="text"],
#apiSettingsModal input[type="password"],
#apiSettingsModal select {
    width: 100%;
    padding: 12px 15px;
    box-sizing: border-box;
    
    /* 字体保持一致 */
    font-family: 'Noto Serif SC', sans-serif; /* 输入内容用宋体也很有质感 */
    font-size: 1rem;
    color: #fff;
    
    /* 背景：半透明深色 */
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    
    transition: all 0.3s ease;
    outline: none;
}

/* 聚焦状态：边框变青色，微弱发光 */
#apiSettingsModal input:focus,
#apiSettingsModal select:focus {
    border-color: #00DFD8;
    box-shadow: 0 0 10px rgba(0, 223, 216, 0.15);
    background-color: rgba(0, 0, 0, 0.5);
}

/* 下拉菜单选项的样式 (浏览器兼容性有限，但在Chrome下有效) */
#apiSettingsModal select option {
    background-color: #1e1e1e;
    color: #fff;
    padding: 10px;
}

/* 5. 设为默认模型 (Checkbox) 区域 */
#apiSettingsModal .form-group:last-of-type label {
    cursor: pointer;
    transition: color 0.3s;
    background: rgba(255,255,255,0.03); /* 给这一行加个淡淡的底色 */
    padding: 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.05);
}
#apiSettingsModal .form-group:last-of-type label:hover {
    border-color: var(--dark-accent);
    color: #fff;
}
#apiSettingsModal input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--dark-accent); /* 设置勾选颜色 */
    cursor: pointer;
}

/* 6. 保存按钮：青蓝渐变，药丸形状 */
#apiSettingsModal .save-btn {
    width: 100%;
    margin-top: 15px;
    padding: 12px;
    
    /* 渐变背景 */
    background: linear-gradient(135deg, #00DFD8 0%, #4a90e2 100%);
    
    color: #000; /* 亮背景配深色字 */
    font-weight: 700;
    font-size: 1.1em;
    font-family: 'Playfair Display', sans-serif;
    letter-spacing: 1px;
    
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 223, 216, 0.3);
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#apiSettingsModal .save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 223, 216, 0.5); /* 悬停更亮 */
    filter: brightness(1.1);
}

/* 7. 关闭按钮位置微调 */
#apiSettingsModal .close-button {
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: 300;
    color: rgba(255,255,255,0.4);
}
#apiSettingsModal .close-button:hover {
    color: #00DFD8;
    transform: rotate(90deg);
}

@keyframes colorWave {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* === 主容器：磨砂玻璃风格 === */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 20px auto;
    padding: 20px;
    background: rgba(30, 30, 30, 0.6); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 223, 216, 0.05);
    color: var(--dark-text-primary);
}

/* 标签栏 */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
    padding-bottom: 8px;
    margin-bottom: 15px;
}

.tab-button {
    padding: 5px 20px;
    cursor: pointer;
    background-color: transparent;
    color: var(--dark-text-secondary);
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.tab-button:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
}

.tab-button.active {
    color: #fff;
    font-weight: 600;
    background: linear-gradient(90deg, rgba(0, 223, 216, 0.15) 0%, rgba(74, 144, 226, 0.15) 100%);
    border-color: var(--dark-accent);
    box-shadow: 0 0 12px rgba(0, 223, 216, 0.15);
    border-bottom: 1px solid var(--dark-accent); 
}

.tab-content { display: none; }
.tab-content.active { display: block; }

.tab-content h2, 
.interaction-area h2 {
    color: var(--dark-accent);
    margin-top: 0;
    margin-bottom: 20px;
    font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
    font-size: 1.3em;
    font-weight: 600;
    letter-spacing: 1px;
}

.leader-scroll-container {
    position: relative;
    margin-bottom: 20px;
    padding: 0 40px;
}

.leader-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 20px; 
    gap: 20px;
    border-radius: 4px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.leader-grid::-webkit-scrollbar { display: none; }

.leader-card {
    background: rgba(0, 0, 0, 0.2);          
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 15px;
    color: var(--dark-text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    flex: 0 0 300px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.leader-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--dark-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* 选中卡片的样式升级 */
.leader-card.selected {
    background: linear-gradient(
        135deg, 
        rgba(0, 223, 216, 0.15) 0%,
        rgba(30, 30, 30, 0.8) 60%,
        rgba(74, 144, 226, 0.05) 100%
    );
    border-color: #00DFD8;
    box-shadow: 
        0 0 20px rgba(0, 223, 216, 0.2),
        inset 0 0 15px rgba(0, 223, 216, 0.05);
    transform: scale(1.02) translateY(-3px);
    position: relative; 
    overflow: hidden;
}

/* 右上角闪烁的天使 */
.leader-card.selected::after {
    content: "\f4ba"; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 10px;
    right: 12px;
    color: #FFD700; 
    font-size: 1.2rem;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    animation: starTwinkle 2s infinite ease-in-out;
}

@keyframes starTwinkle {
    0% { opacity: 0.6; transform: scale(0.9) rotate(0deg); text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
    50% { opacity: 1; transform: scale(1.1) rotate(5deg); text-shadow: 0 0 15px rgba(255, 215, 0, 1); }
    100% { opacity: 0.6; transform: scale(0.9) rotate(0deg); text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
}

.leader-card.selected h3 {
    color: #00DFD8;
    text-shadow: 0 0 5px rgba(0, 223, 216, 0.3);
}

.leader-card h3 {
    margin-top: 0;
    color: var(--dark-accent);
    font-size: 1.1em;
}

.leader-card p {
    font-size: 0.9em;
    margin-bottom: 8px;
    color: var(--dark-text-secondary);
    flex-grow: 1;
}
.leader-card .field {
    font-style: italic;
    color: var(--dark-field-text);
    margin-top: auto;
}
.leader-card .remarks {
    font-size: 0.8em;
    color: var(--dark-remarks-text);
    border-left: 3px solid var(--dark-remarks-border);
    padding-left: 10px;
    margin-top: 10px;
}

.scroll-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(4px);
    color: var(--dark-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.scroll-button:hover {
    background-color: var(--dark-accent);
    color: #fff;
    border-color: var(--dark-accent);
    box-shadow: 0 0 15px var(--dark-accent);
    transform: translateY(-50%) scale(1.1);
}
.scroll-button:disabled { opacity: 0.5; cursor: not-allowed; }
.scroll-button.left { left: 0px; }
.scroll-button.right { right: 0px; }

.interaction-area {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--dark-border);
}

.interaction-area h2 {
    color: var(--dark-accent);
    margin-top: 0;
    font-size: 1.5em;
}

.interaction-area textarea, 
#generatedPromptText {
    width: 100%;
    box-sizing: border-box;
    min-height: 80px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.25); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--dark-text-primary);
    transition: border-color 0.3s, box-shadow 0.3s;
    margin-bottom: 15px;
    font-size: 1em;
    font-family: var(--font-family-novel);
}
.interaction-area textarea::placeholder { color: var(--dark-text-secondary); }
.interaction-area textarea:focus {
    outline: none;
    border-color: var(--dark-accent);
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.15);
}

/* 调整提示词文本框 */
#generatedPromptText {
    min-height: 200px; 
    font-family: var(--font-family-novel);
}

.interaction-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.interaction-area button {
    padding: 12px 24px;
    background: linear-gradient(135deg, #3a7bc8 0%, #4a90e2 100%);
    color: #fff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    flex: 1 1 200px;
    max-width: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.interaction-area button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
    background: linear-gradient(135deg, #4a90e2 0%, #6ab0ff 100%);
}

/* 针对“天使模式”按钮，做差异化处理（幽灵按钮风格） */
.interaction-area button#angelModeButton {
    background: transparent;
    border: 1px solid var(--dark-accent);
    color: var(--dark-accent);
    box-shadow: none;
}
.interaction-area button#angelModeButton:hover {
    background: rgba(74, 144, 226, 0.1);
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
}

/* 针对“获取专家回复”按钮，做强调处理 */
.interaction-area button#getAIResponseButton {
    background: linear-gradient(135deg, #00DFD8 0%, #007cf0 100%);
    color: #000;
    font-weight: 700;
}
.interaction-area button#getAIResponseButton:hover {
    box-shadow: 0 6px 25px rgba(0, 223, 216, 0.5);
}

.interaction-area button:disabled {
    background: #444; color: #888; transform: none; box-shadow: none; cursor: not-allowed;
}

/* 覆盖第一个按钮样式 */
.interaction-buttons button:first-child {
    background: rgba(74, 144, 226, 0.15) !important; 
    border: 1px solid rgba(74, 144, 226, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.05) !important;
    font-weight: 600;
}
.interaction-buttons button:first-child:hover {
    background: rgba(74, 144, 226, 0.3) !important;
    border-color: #4a90e2 !important;
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.3) !important;
    transform: translateY(-2px);
}

/* 选中专家信息条 */
#selected-leader-info {
    margin-bottom: 15px;
    padding: 12px 10px;
    background: linear-gradient(90deg, rgba(0, 223, 216, 0.08) 0%, rgba(0, 0, 0, 0) 80%);
    border-radius: 0 4px 4px 0;
    border-left: 3px solid var(--dark-accent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--dark-text-secondary);
    font-size: 0.95em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#selectedLeaderName {
    color: #fff;
    font-weight: bold;
    font-family: 'Playfair Display', serif;
    margin-left: 5px;
    font-size: 1.1em;
    text-shadow: 0 0 10px rgba(0, 223, 216, 0.3);
}

.copy-leader-btn {
    cursor: pointer;
    color: var(--dark-text-secondary);
    font-size: 1.1em;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.copy-leader-btn:hover {
    color: var(--dark-accent);
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.response-display {
    margin-top: 25px;
    padding: 0;
    background-color: transparent; 
    border: none;
    border-radius: 0;
}
.response-display h4, 
.collapsible-header h4 {
    margin-top:0;
    margin-bottom: 15px;
    color: var(--dark-accent);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.1em;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 223, 216, 0.2);
    display: flex;
    align-items: center;
}

.collapsible-header { cursor: pointer; padding: 5px 0; transition: opacity 0.3s; }
.collapsible-header:hover { opacity: 0.8; }
.collapsible-header:hover #prompt-toggle-icon { color: var(--dark-accent); }
.icon-rotated { transform: rotate(180deg); }

#aiResponseText {
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: var(--dark-pre-bg);
    padding: 10px;
    border: 1px solid var(--dark-pre-border);
    border-radius: 4px;
    font-family: var(--font-family-novel);
    font-size: 1.05rem; 
    line-height: 1.7; 
    text-align: justify;
    color: var(--dark-text-primary);
    max-height: 300px;
    overflow-y: auto;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}

/* --- [新增] 统一输入框与答复框为小说阅读字体风格 --- */
#userQuestion, 
#generatedPromptText, 
#aiResponseText {
    font-family: var(--font-family-novel);
    font-size: 1.05rem; /* 稍大字体 */
    line-height: 1.7;   /* 更宽松的行高 */
    text-align: justify;/* 两端对齐 */
    color: var(--dark-text-primary); /* 确保文字颜色为主要文字颜色 */
}
/* Make the prompt textarea taller */
/* 调整提示词文本框，确保在展开时显示正确 */
#generatedPromptText {
    width: 100%;
    box-sizing: border-box;
    min-height: 200px; /* Increased height for better editing */
}
/* --- [新增] 结束 --- */

          /* 2. 标题 H2：复刻流光渐变艺术字 */
#angelModeModal h2 {
    font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
    font-size: 2em;
    text-align: center;
    
    /* 间距控制 */
    margin-top: 6px;
    margin-bottom: 25px;
    line-height: 1.3;
    
    font-weight: 700;
    
    /* 使用您标志性的渐变色 */
    background: linear-gradient(90deg, #00DFD8, #7928CA);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 增加文字发光，增加神圣感 */
    filter: drop-shadow(0 0 5px rgba(0, 223, 216, 0.3));
    
    animation: colorWave 7s linear infinite;
    /* 6. 防干扰：确保没有普通文字阴影干扰发光效果 */
    text-shadow: none; 
}

/* 3. 正文容器：复刻小说排版 */
#angelModeModal.manifesto-text {
    /*font-family: 'LXGW WenKai Screen', 'KaiTi', 'STKaiti', 'Playfair Display', serif;*/
    font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
    
    /* 关键：使用 300 字重，配合抗锯齿，实现“清冷”质感 */
    -webkit-font-smoothing: antialiased;
    
    color: #e0e0e0;     /* 稍微柔和的白色 */
    font-size: 1.15em;
    line-height: 1.9;   /* 大行高，呼吸感 */
    text-align: justify;
    
    /* 滚动区域控制 */
    padding: 0 10px; /* 稍微给滚动条留点位置 */
    max-height: 65vh;
    overflow-y: auto;
    
    /* 微弱文字阴影增加清晰度 */
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
}

/* 4. 强制覆盖内部段落样式 (防止被之前的 Segoe UI 权重覆盖) */
#angelModeModal.manifesto-text p {
    font-family: inherit; /* 继承上面的 Noto Serif SC */
    font-size: inherit;
    line-height: inherit;
    margin-bottom: 1.5em;
    text-align: justify;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* 增加文字立体感 */
}

/* 5. 优化引用块 (Blockquote) - 使其更具文学感 */
#angelModeModal.manifesto-text blockquote {
    /* 引用文字建议用楷体，与正文宋体区分，更有笔记感 */
    font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
    
    font-size: 1.05em; 
    line-height: 1.8; 
    text-align: left; 
    
    /* 样式：透明背景 + 左侧亮条 */
    background-color: rgba(255, 255, 255, 0.03); 
    border-left: 3px solid var(--dark-accent); 
    
    padding: 15px 20px; 
    margin: 20px 0; 
    border-radius: 0 6px 6px 0;
    color: #d0d0d0;
}

/* 6. 优化内部小标题 (H3/H4) */
#angelModeModal.manifesto-text h3,
#angelModeModal.manifesto-text h4 {
    font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
    color: var(--dark-accent);
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 400; /* 宋体标题不宜太粗 */
    font-size: 1.3em;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.loading-spinner {
    border: 4px solid #555;
    border-top: 4px solid var(--dark-accent);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

footer {
    text-align: left;
    padding: 20px 50px;
    background: rgba(0, 0, 0, 0.5);
}

/* 媒体查询，在小屏幕上调整布局 */
@media (max-width: 768px) {
     header { padding-top: 15px; }
    .logo-container { top: 15px; left: 15px; }
    .logo-container img { height: 50px; }
    h1 {
        margin-top: 64px;
        font-size: 2em; 
        margin-bottom: 1px;
        line-height: 1.25;
        text-wrap: balance;
    }
    .top-right-controls { top: 15px; right: 15px; gap: 10px; }
    
    .icon-btn { width: 34px; height: 34px; font-size: 0.95rem; }

    body { line-height: 1.55; }
    .container { width: 92%; padding: 15px; margin-top: 0px; }
    .tabs { justify-content: flex-start; margin-bottom: 15px; }
    .tab-button { padding: 5px 14px; font-size: 11px; margin-right: 4px; margin-bottom: 4px; min-width: 30px; }
    
    .tab-content h2, 
    .interaction-area h2 { 
        font-size: 1.2em; 
        margin-bottom: 15px; 
        font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
        padding-left: 2px;
    }
    .leader-scroll-container { padding: 0 35px; }
    .leader-grid { gap: 15px; }
    .leader-card { flex: 0 0 250px; min-height: 260px; padding: 12px; }
    .leader-card h3 { font-size: 1.05em; }
    .leader-card p { font-size: 0.85em; }
    .leader-card .remarks { font-size: 0.78em; }
    .scroll-button { width: 32px; height: 32px; font-size: 18px; }
    .scroll-button.left { left: 3px; }
    .scroll-button.right { right: 3px; }
    .interaction-buttons { flex-direction: column; gap: 10px; }
    .interaction-area button { width: 100%; font-size: 0.92em; padding: 12px 15px; flex-grow: 0; flex-basis: auto; max-width: none; }
    .interaction-area textarea { font-size: 0.95em; min-height: 75px; padding: 9px; }
    #selected-leader-info { font-size: 0.95em; padding: 9px; }
    #aiResponseText { font-size: 0.95em; } 

    .manifesto-modal .modal-content { margin: 5% auto; max-width: 95%; }
    .manifesto-modal h2 { font-size: 1.5em; margin-bottom: 15px; }
    .manifesto-modal .manifesto-text { font-size: 0.95em; line-height: 1.7; }
    .manifesto-modal p.conclusion { font-size: 1.05em; margin-top: 20px; }
}

@media (max-width: 480px) {
    header { padding-top: 10px; }
    .logo-container { top: 10px; left: 10px; }
    .logo-container img { height: 45px; }
    h1 {
        margin-top: 56px;
        font-size: 1.6em;
        letter-spacing: 0px;
        line-height: 1.2; 
        text-wrap: balance; 
    }
     .top-right-controls { right: 10px; gap: 8px; }
    
    .icon-btn { width: 30px; height: 30px; font-size: 0.85rem; border-width: 0.5px; }

    .container { width: 95%; padding: 10px; margin-top: 0px; }
    .tab-content h2, .interaction-area h2 { font-size: 0.9em; margin-bottom: 10px; }
    
    .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 15px; }
    .tab-button { font-size: 11px; padding: 4px 4px; margin-right: 2px; margin-bottom: 3px; min-width: 30px; flex: 0 0 auto; }
    
    /* 手机端卡片修复 */
    .scroll-button { display: none !important; }
    .leader-scroll-container { padding: 0 !important; margin-bottom: 20px; }
    .leader-grid { 
        display: flex; overflow-x: auto; gap: 15px; 
        padding: 25px 10px; scroll-padding-left: 10px; 
    }
    .leader-card { flex: 0 0 83vw; min-height: auto; padding: 10px; position: relative; }
    .leader-card h3 { font-size: 1em; }
    .leader-card p { font-size: 0.82em; }
    .leader-card .remarks { font-size: 0.75em; }
    .leader-card.selected::after { top: 8px; right: 8px; }
    
    .interaction-area button { font-size: 0.88em; padding: 10px 12px; }
    #selected-leader-info { font-size: 0.9em; padding: 8px; }
    .interaction-area textarea { min-height: 65px; font-size: 0.9em; padding: 8px; }
    .response-display { padding: 10px; }
    #aiResponseText { font-size: 0.9em; padding: 8px; } 

    .manifesto-modal .modal-content {
        width: 94%; margin: 20px auto; padding: 15px; box-sizing: border-box; 
    }
    .close-button { right: 10px; top: 5px; }
    .manifesto-modal h2 { font-size: 1.3em; }
    .manifesto-modal .manifesto-text { font-size: 0.9em; line-height: 1.6; }
    
    #apiSettingsModal .modal-content { width: 80%; margin: 3% auto; padding: 4px 20px; }
    #apiSettingsModal h2 { font-size: 1.5em; }
}

/* === 全局滚动条美化 === */
::-webkit-scrollbar { width: 10px; height: 10px; }     
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 5px; }
::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    border: 2px solid transparent; 
    background-clip: content-box; 
}
::-webkit-scrollbar-thumb:hover { background-color: var(--dark-accent); border-width: 1px; }
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }

/* --- 音乐播放器样式 --- */
/* 1. 音乐按钮容器 */
.music-wrapper {
    position: relative; /* 为绝对定位的小标记做参照 */
    overflow: visible;  /* 允许小标记超出圆圈边界 */
}        
/* 2. 随机播放小标记 (右上角的小圆点) */
.random-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    
    /* === 修改 1: 暂时隐藏 (如需隐藏请取消下一行的注释) === */
    display: none; 

    /* === 修改 2: 优化颜色 (未来启用时请使用下方样式，替代原来的金色渐变) === */
    /* 原来的金色太亮，改为深色半透明风格，更显高级且不抢眼 */
    background: rgba(255, 255, 255, 0.15); /* 低调的半透明白 */
    backdrop-filter: blur(2px);            /* 磨砂感 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);       /* 文字颜色柔和一点 */
    /* ------------------------------------------------------- */

    border-radius: 50%;
    /* display: flex; <--- 未来启用时，记得把上面的 display: none 去掉，恢复这行 display: flex */
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 5;
    cursor: pointer;
    transition: all 0.2s;
}

.random-badge:hover {
    transform: scale(1.1);
    /* 悬停时稍微亮一点，提示可点击 */
    background: var(--dark-accent); 
    color: #fff;
    border-color: var(--dark-accent);
}
/* 3. 播放时的动画效果 */
.music-playing .main-music-icon {
    animation: musicRotate 3s linear infinite; /* 图标旋转 */
    color: var(--dark-accent); /* 变成主题色 */
}        

/* === 新增修复：强制修正播放时的背景色 === */
/* 解释：同时适配 ".music-playing" 加在按钮本身 或 加在父容器上的情况 */
.icon-btn.music-playing, 
.music-wrapper.music-playing .icon-btn {
    /* 关键：使用 !important 覆盖掉导致变蓝的默认样式 */
    background: rgba(255, 255, 255, 0.05) !important; /* 保持低调的半透明背景 */    
    /* 或者是完全透明，根据你的喜好选择下面这一行： */
    /* background: transparent !important; */    
    border-color: var(--dark-accent) !important;      /* 边框变成主题色 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);          /* 可选：加一点柔和的阴影 */
}

/* 确保图标颜色正确（这部分你已有，但建议确保优先级） */
.icon-btn.music-playing .main-music-icon,
.music-wrapper.music-playing .main-music-icon {
    color: var(--dark-accent) !important;
}
/* 音乐图标旋转动画 */
@keyframes musicRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}        
/* 手机端适配：防止小标记被切掉 */
@media (max-width: 480px) {
     /* 1. 确保右上角控制区不换行、不压缩 */
    .top-right-controls { 
        right: 10px; 
        gap: 8px;
        flex-wrap: nowrap; /* 禁止换行 */
        z-index: 100; /* 提高层级，防止被背景遮挡 */
    }

    /* 2. 强制设定按钮尺寸和样式 */
    .icon-btn {
        width: 32px !important;  /* 稍微给大一点点触控面积 */
        height: 32px !important;
        font-size: 0.9rem !important; /* 字体大小适配 */
        border-width: 1px !important; /* 边框清晰化 */
        flex-shrink: 0 !important;    /* 核心：禁止压缩 */
        display: flex !important;     /* 确保 Flex 居中生效 */
        align-items: center;
        justify-content: center;
    }        
    /* 3. 手机端取消 Hover 旋转特效 (防止点击后图标卡住) */
    .icon-btn:hover {
        transform: none !important; 
        background-color: rgba(255, 255, 255, 0.05); /* 保持背景微亮，但不要旋转 */
    }
}

  /* === [新增] Begin 优雅阅读模式 (Celestial Manuscript Mode) === */
  /* 1. 模态框背景：极深色，高模糊，营造专注感 */
  .elegant-modal {
      background-color: rgba(10, 10, 10, 0.95); /* 比普通模态框更黑 */
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      display: none; /* 默认隐藏 */
      opacity: 0;
      transition: opacity 0.4s ease; /* 淡入淡出 */
  }
  
  .elegant-modal.show {
      opacity: 1;
  }
  
  /* 2. 核心容器：模拟悬浮的手稿/卡片 */
  .elegant-container {
      width: 90%;
      max-width: 800px; /* 类似A4纸或书籍宽度 */
      height: 85vh;     /* 占据大部分屏幕高度 */
      margin: 5vh auto; /* 垂直居中 */
      
      /* 核心质感：深色磨砂 + 极细光边 */
      background: linear-gradient(145deg, rgba(30, 30, 30, 0.9), rgba(20, 20, 20, 0.95));
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 
          0 20px 60px rgba(0, 0, 0, 0.8),         /* 深邃投影 */
          0 0 0 1px rgba(0, 223, 216, 0.1),       /* 极细青色外框 */
          inset 0 0 30px rgba(0, 223, 216, 0.05); /* 内部微光 */
          
      border-radius: 12px;
      position: relative;
      overflow: hidden; /* 裁剪内部溢出 */
      transform: scale(0.95);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性放大效果 */
  }
  
  .elegant-modal.show .elegant-container {
      transform: scale(1);
  }
  
  /* 3. 关闭按钮：特殊设计，位于右上角 */
  .elegant-close {
      position: absolute;
      top: 15px;
      right: 20px;
      font-size: 32px;
      color: rgba(255, 255, 255, 0.3);
      z-index: 10;
      transition: all 0.3s;
  }
  .elegant-close:hover {
      color: var(--dark-accent);
      transform: rotate(90deg);
  }
  
  /* 4. 内容滚动区 */
  .elegant-content {
      height: 100%;
      overflow-y: auto;
      padding: 60px 50px; /* 宽敞的内边距，类似书籍留白 */
      box-sizing: border-box;
      
      /* 隐藏滚动条但保留功能 */
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.1) transparent;
  }
  .elegant-content::-webkit-scrollbar { width: 6px; }
  .elegant-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
  
  /* 5. 装饰星号 */
  .decoration-star {
      text-align: center;
      color: var(--dark-accent);
      font-size: 1.2rem;
      opacity: 0.8;
      margin-bottom: 30px;
      animation: pulseStar 3s infinite ease-in-out;
  }
  @keyframes pulseStar { 0%, 100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }
  
  /* 6. 标签小字 (Question / Insight) */
  .elegant-label {
      font-family: 'Cinzel', serif; /* 使用已引入的衬线大写字体 */
      font-size: 0.8rem;
      letter-spacing: 3px;
      color: rgba(255, 255, 255, 0.6);
      text-align: center;
      margin-bottom: 15px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      display: inline-block;
      padding-bottom: 5px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
  }
  
  /* 7. 问题文本 */
  #elegantQuestionText {
      font-family: 'Noto Serif SC', 'Playfair Display', serif; /* 宋体/衬线体 */
      font-style: italic;
      color: #e0e0e0;
      font-size: 1.1rem;
      line-height: 1.6;
      text-align: center;
      max-width: 80%;
      margin: 0 auto;
  }
  
  /* 8. 分割线 */
  .elegant-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0, 223, 216, 0.4), transparent);
      margin: 40px auto;
      width: 60%;
  }
  
  /* 9. 答案文本 (核心) */
  #elegantAnswerText {
      font-family: 'Noto Serif SC', 'Playfair Display', serif; /* 核心阅读字体 */
      font-size: 1.25rem; /* 字号较大 */
      line-height: 2;     /* 宽松行高，极大提升阅读感 */
      color: #e0e0e0;
      text-align: justify; /* 两端对齐 */
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
  
  /* 增加段落间距 */
  #elegantAnswerText p { margin-bottom: 1.5em; }
  /* 强调重点 */
  #elegantAnswerText strong { color: var(--dark-accent); font-weight: 700; }

  /* 确保公式过长时可以横向滚动，而不是撑乱布局 */
  .elegant-content #elegantAnswerText {
      overflow-x: auto; /* 允许横向滚动 */
      line-height: 1.8; /* 增加行高，避免公式上下打架 */
  }
  
  /* 针对 MathJax 生成的容器进行优化 */
  mjx-container {
      overflow-x: auto;
      overflow-y: hidden;
      max-width: 100%;
      vertical-align: middle; 
  }
  
  /* 10. 底部 Logo */
  .elegant-footer {
      margin-top: 60px;
      text-align: center;
      font-family: 'Cinzel', serif;
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.6);
  }
  
  /* === 移动端适配 === */
  @media (max-width: 768px) {
      .elegant-container {
          width: 100%;
          height: 100%;
          margin: 0;
          border-radius: 0; /* 全屏模式 */
          border: none;
      }
      .elegant-content {
          padding: 40px 20px; /* 减少内边距 */
      }
      #elegantQuestionText {
          font-size: 1rem;
          max-width: 100%;
      }
      #elegantAnswerText {
          font-size: 1.1rem;
          line-height: 1.8;
      }
      .elegant-close {
          top: 20px;
          right: 20px;
      }
  }
  /* ===END [新增] Begin 优雅阅读模式 (Celestial Manuscript Mode) === */


/* --- 对话画布 (Dialogue Canvas) v2.0 重制版 --- */

/* 1. 模态框容器：深邃宇宙背景 */
.canvas-modal {
    display: none;   /* 调试时暂时注释 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    /* 核心背景：深蓝渐变 */
    background: linear-gradient(to bottom, #02060a 0%, #0d1620 100%);
    font-family: 'Noto Serif SC', 'Cinzel', serif;
    overflow: hidden; /* 防止背景滚动溢出 */
}

/* 2. 第一层星空：背景细碎星尘 (慢速漂移) */
.canvas-modal::before {
    content: "";
    position: absolute;
    top: 0; left: 0; 
    width: 200%; height: 200%; /* 放大容器以便移动 */
    
    /* 生成细小的白色星点，锐利不模糊 */
    background-image: 
        radial-gradient(1px 1px at 10% 10%, #fff, transparent),
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 30% 15%, #fff, transparent),
        radial-gradient(1px 1px at 40% 60%, #fff, transparent),
        radial-gradient(1px 1px at 50% 30%, #fff, transparent),
        radial-gradient(1px 1px at 60% 80%, #fff, transparent),
        radial-gradient(1px 1px at 70% 50%, #fff, transparent),
        radial-gradient(1px 1px at 80% 20%, #fff, transparent),
        radial-gradient(1px 1px at 90% 70%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 25% 85%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,0.8), transparent);
    
    background-size: 500px 500px; /* 定义星图重复的单元大小 */
    background-repeat: repeat;
    opacity: 0.5;
    
    /* 动画：左上角斜向缓慢移动 */
    animation: star-drift 120s linear infinite;
    z-index: -2;
}

/* 3. 第二层星空：近处亮星 (较快漂移 + 呼吸闪烁) */
.canvas-modal::after {
    content: "";
    position: absolute;
    top: -50%; left: -50%; 
    width: 200%; height: 200%;
    
    /* 较大的亮星，更稀疏 */
    background-image: 
        radial-gradient(2px 2px at 15% 15%, #fff, transparent),
        radial-gradient(2px 2px at 45% 75%, #fff, transparent),
        radial-gradient(2px 2px at 85% 35%, #fff, transparent),
        radial-gradient(2.5px 2.5px at 50% 50%, #fff, transparent); /* 一颗特亮的主星 */
        
    background-size: 600px 600px; /* 错开背景尺寸，增加随机感 */
    background-repeat: repeat;
    
    /* 复合动画：位移 + 闪烁 */
    animation: 
        star-drift 80s linear infinite reverse, /*反向移动，制造视差立体感*/
        star-twinkle 4s ease-in-out infinite alternate; /* 呼吸闪烁 */
        
    z-index: -1;
}

/* --- 动画定义 --- */

/* 星星漂移：移动 background-position 或者 translate */
@keyframes star-drift {
    from { transform: translate(0, 0); }
    to { transform: translate(-100px, -200px); }
}

/* 星星闪烁：改变透明度 */
@keyframes star-twinkle {
    0% { opacity: 0.3; }
    50% { opacity: 0.8; }
    100% { opacity: 0.3; }
}


/* 2. 核心视口 */
.canvas-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding-bottom: 150px; /* 底部留白 */
    perspective: 1000px; /* 增加3D透视感 */
}

/* 3. 连线层：金色星轨 */
.thought-trails {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 5px rgba(197, 160, 89, 0.5)); /* 发光效果 */
}

.trail-path {
    fill: none;
    stroke: #c5a059; /* 金色 */
    stroke-width: 1.5px;
    opacity: 0.6;
    /* 不再是虚线，而是像星图连线一样的实线 */
}

/* 4. 节点流容器 */
.thought-stream {
    position: relative;
    max-width: 1100px; /* 更宽一点 */
    margin: 0 auto;
    padding: 100px 40px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* 5. 通用节点卡片样式 */
.thought-node {
    position: relative;
    max-width: 48%;
    padding: 0; /* 内部布局负责padding */
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: floatIn 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes floatIn {
    from { opacity: 0; transform: translateY(30px) rotateX(5deg); }
    to { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* 悬停效果：轻微上浮 + 发光增强 */
.thought-node:hover {
    transform: translateY(-5px);
    z-index: 10;
}

/* --- 用户提问卡片：极简便签风格 --- */
.thought-node.question-node {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.1); /* 半透明玻璃感 */
    border-left: 4px solid #fff;
    backdrop-filter: blur(10px);
    padding: 20px 25px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-radius: 0 10px 10px 0;
}

.question-node .user-avatar-mark {
    position: absolute;
    left: -20px;
    top: -15px;
    width: 40px;
    height: 40px;
    background: #fff;
    color: #0d1218;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.user-handwriting {
    font-family: 'Ma Shan Zheng', cursive; /* 手写体 */
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* --- 北极星回答卡片：古典羊皮纸风格 (修复版) --- */
.thought-node.answer-node {
    align-self: flex-end;
    background: #f4ecd8; 
    color: #2c1e12;
    
    /* 1. [核心修复] 移除原来的 clip-path (这个是造成切角生硬的元凶) */
    clip-path: none !important; 
    
    /* 2. 使用圆角：左上、右上、左下为小圆角，右下角为大圆角(模拟卷起) */
    border-radius: 4px 4px 4px 50px; 
    
    /* 3. 优化阴影：增加层次感 */
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.05),       /* 基础阴影 */
        0 15px 30px rgba(0,0,0,0.2),      /* 远距离投影 */
        inset 0 0 60px rgba(139, 90, 43, 0.1); /* 纸张旧感内发光 */
        
    border: 1px solid rgba(139, 90, 43, 0.2);
    padding: 30px 40px;
    position: relative; /* 为伪元素定位做准备 */
}

/* 4. [核心修复] 新增：使用伪元素模拟右下角的“卷起阴影”，增加立体感 */
.thought-node.answer-node::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    z-index: -1; /* 放在纸张下面 */
    
    /* 这是一个柔和的投影，模拟纸角翘起 */
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.4); 
    
    /* 配合父元素的大圆角，形成翘起感 */
    transform: skew(15deg) rotate(5deg);
    border-radius: 50%;
}

/* 5. [核心修复] 新增：模拟纸张卷起背面的高光（可选，增加精致度） */
.thought-node.answer-node::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    
    /* 线性渐变模拟纸张卷曲的折痕光影 */
    background: linear-gradient(135deg, transparent 45%, rgba(0,0,0,0.05) 50%, rgba(255,255,255,0.3) 100%);
    border-radius: 0 0 4px 50px;
    pointer-events: none;
}

/* 保持原来的悬停高亮 */
.thought-node.answer-node:hover {
    box-shadow: 
        0 20px 50px rgba(197, 160, 89, 0.15),
        inset 0 0 20px rgba(139, 90, 43, 0.1);
    transform: translateY(-2px); /* 悬停轻微上浮 */
}

/* 北极星卡片内部元素 */
.star-decoration-top {
    text-align: center;
    color: #8b5a2b;
    margin-bottom: 15px;
    font-size: 1.2rem;
    opacity: 0.7;
}

.leader-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.leader-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #3e2723;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.leader-badges {
    margin-top: 5px;
}

.badge-field {
    font-size: 0.75rem;
    font-weight: bold;
    background: transparent;
    color: #000000;
    padding: 2px 8px;
    border: 1px solid #D4AF37; 
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.leader-contribution-hint {
    font-size: 0.9rem;
    color: #6d4c41;
    font-style: italic;
    text-align: center;
    opacity: 0.8;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.node-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #8b5a2b, transparent);
    margin: 15px 0 20px 0;
    opacity: 0.4;
}

.star-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #1a1a1a;
    text-align: justify;
}

.star-decoration-bottom {
    margin-top: 25px;
    text-align: right;
    font-size: 0.8rem;
    color: #8b5a2b;
    font-family: 'Cinzel', serif;
    opacity: 0.6;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* 6. 右侧侧边栏 (保持不变或微调颜色) */
.inspiration-sidebar {
    background: #fdfbf7;
    box-shadow: -5px 0 30px rgba(0,0,0,0.5);
}

/* 7. 顶部工具栏适配深色背景 */
.canvas-title {
    color: #c5a059; /* 金色文字 */
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.4);
}

/* 默认按钮样式 (如果有其他按钮需要) */
.canvas-toolbar button {
    color: #c5a059;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(197, 160, 89, 0.3);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.canvas-toolbar button:hover {
    background: #c5a059;
    color: #0d1218;
}

/* === [核心修复] 关闭按钮样式重写 === */
/* 确保覆盖之前的通用 button 样式，去除背景和边框 */
.canvas-toolbar .canvas-close-btn,
.canvas-close-btn {
    background: transparent !important; /* 核心：去除灰色背景 */
    border: none !important;            /* 去除边框 */
    box-shadow: none !important;        /* 去除阴影框 */
    color: rgba(255, 255, 255, 0.4);    /* 默认颜色调暗，不刺眼 */
    font-size: 2rem;                    /* 图标大一点 */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 100;
}

/* 悬停效果：旋转 + 变亮 + 微弱光晕 */
.canvas-toolbar .canvas-close-btn:hover,
.canvas-close-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important; /* 悬停时极淡的背景 */
    color: var(--dark-accent, #c5a059); /* 悬停变金色或主题色 */
    transform: rotate(90deg) scale(1.1); /* 优雅旋转 */
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.5); /* 文字发光 */
}

/* 删除按钮样式 */
.node-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(255, 0, 0, 0.1);
    color: #ff4d4f;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* 默认隐藏 */
    transition: all 0.3s ease;
    z-index: 10;
}

.node-delete-btn:hover {
    background: #ff4d4f;
    color: white;
}

/* 鼠标悬停在节点上时显示删除按钮 */
.thought-node:hover .node-delete-btn {
    opacity: 1;
}

/* 确保节点定位基准 */
.thought-node {
    position: relative; /* 确保绝对定位相对于节点 */
}

/* --- 灵感手稿侧边栏 (Inspiration Sidebar) --- */
#inspirationSidebar {
    /* 1. 核心定位：必须 Fixed 才能悬浮在视口上 */
    position: fixed;
    top: 0;
    right: -350px; /* 默认隐藏在屏幕外 (宽度350px) */
    width: 350px;
    height: 100vh;
    
    /* 2. 关键层级：必须大于 canvas-modal 的 2000 */
    z-index: 3000 !important; 
    
    /* 3. 视觉样式 */
    background: #fdfbf7; /* 羊皮纸色 */
    box-shadow: -5px 0 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    
    /* 4. 动画过渡 */
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 当 JS 添加 .open 类时，滑入屏幕 */
#inspirationSidebar.open {
    right: 0;
}

/* 头部样式 */
.sidebar-header {
    padding: 20px;
    background: #f4ecd8;
    border-bottom: 2px solid #e0dcd0;
    flex-shrink: 0; /* 防止头部被压缩 */
}

.sidebar-header h3 {
    margin: 0;
    color: #8b5a2b;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-header p {
    margin: 5px 0 0 0;
    font-size: 0.8rem;
    color: #888;
}

/* 笔记容器样式 */
.notes-container {
    flex: 1; /* 占满剩余高度 */
    overflow-y: auto; /* 允许滚动 */
    padding: 20px;
    outline: none; /* 去除 contenteditable 的蓝色边框 */
    font-family: 'Noto Serif SC', serif;
    color: #4a3b32;
    line-height: 1.6;
}

/* Placeholder 占位符逻辑 (纯CSS实现) */
.notes-container[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    font-style: italic;
    pointer-events: none;
}

/* JS 动态添加进来的笔记块样式 */
.inspiration-note-block {
    background: #fff;
    border-left: 3px solid #8b5a2b;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-size: 0.95rem;
    position: relative;
    /* 防止被误删，设为不可编辑，或者设为 true 允许修改 */
    user-select: text; 
}

/* 给笔记块加个引号装饰 */
.inspiration-note-block::before {
    content: '"';
    font-family: serif;
    font-size: 2rem;
    color: rgba(139, 90, 43, 0.2);
    position: absolute;
    top: -5px;
    left: 5px;
    pointer-events: none;
}

/* --- 1. 打印替身的基础设置 --- */
#print-overlay {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 100vw;
    z-index: -1;
}

/* --- 0. 核心修正：调整页边距以容纳页眉页脚, 解决左右边距过大问题 --- */
@page {
    /* 
       语法顺序：上  右  下  左 
       将上下设为 15mm (给页眉页脚留位置)
       将左右设为 5mm (保持水平方向内容尽可能宽)
    */
    margin: 15mm 5mm; 
    size: auto;
}

/* --- 2. 打印媒体查询 (完整修正版) --- */
@media print {
    /* 1. 隐藏非打印内容 */
    body > *:not(#print-overlay) {
        display: none !important;
    }

    /* 2. Body 设置 */
    body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }
  
    /* 3. 打印容器复位 - 【核心修改：全宽 + 紧凑】 */
    #print-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        /* 强制覆盖可能的 max-width 限制 */
        max-width: 100% !important; 
        z-index: 99999 !important;
        
        /* 去除所有内边距，让 @page 控制边缘 */
        padding: 0 !important; 
        margin: 0 !important;
        
        background: #fff !important;
        
        /* 字体设置：纯黑 + 极度紧凑 */
        color: #000000 !important;
        /*font-family: "Microsoft YaHei", "Segoe UI", sans-serif;*/
        font-family: 'Noto Serif SC', 'Cinzel', serif;
        font-size: 12px !important; /* 字体稍微调小一点点以容纳更多内容 */
        line-height: 1.25 !important; /* 【关键】：进一步压缩行高 (原1.35) */
    }

    /* 4. 对话气泡容器 - 【核心修改：强制撑满宽度】 */
    #print-overlay .thought-node {
        position: relative;
        /* 关键：强制气泡宽度 100%，解决“内容宽度被压缩” */
        width: 100% !important;
        max-width: 100% !important;
        
        page-break-inside: avoid !important;
        margin-bottom: 5px !important; /* 气泡间距再压缩 */
        padding: 5px 8px !important;   /* 内边距压缩 */
        
        border-radius: 4px !important;
        border: 1px solid #ddd;       
        white-space: pre-wrap !important; 
        box-sizing: border-box !important; /* 防止边框撑破布局 */
    }

    /* --- 5. 【核心修改：暴力压缩段落与空隙】 --- */
    
    #print-overlay .thought-node * {
        margin-top: 0 !important;
        color: #000000 !important;
    }

    /* 压缩 P 标签：间距改为 1px */
    #print-overlay .thought-node p {
        margin-bottom: 1px !important; 
        text-align: justify;
        line-height: 1.25 !important;
    }
    
    /* 隐藏空段落 (Markdown解析常出现多余空行) */
    #print-overlay .thought-node p:empty {
        display: none !important;
    }
    
    /* 列表极致紧凑 */
    #print-overlay .thought-node ul, 
    #print-overlay .thought-node ol {
        margin-bottom: 1px !important;
        padding-left: 15px !important; 
    }
    #print-overlay .thought-node li {
        margin-bottom: 0px !important;
        line-height: 1.25 !important;
    }
    
    /* 标题加粗 */
    #print-overlay .thought-node h1,
    #print-overlay .thought-node h2,
    #print-overlay .thought-node strong,
    #print-overlay .thought-node b {
        font-weight: 800 !important;
        color: #000 !important;
        margin-bottom: 2px !important;
    }

    /* --- 6. 角色样式 (统一香槟色边线) --- */
    
    /* User: 浅灰底 + 香槟色线 (修改了原来的蓝色) */
    #print-overlay .question-node {
        background-color: #f0f6ff !important; /* 浅蓝底 */
        border-left: 4px solid #0056b3 !important; /* 深蓝线，更清晰 */
        border: 1px solid #eee;
        font-weight: 500 !important;
        /* --- 新增以下两行关键代码 --- */
        -webkit-print-color-adjust: exact !important; /* 针对 Chrome, Safari, Edge */
        print-color-adjust: exact !important;         /* 标准属性 */
    }
    
    /* North Star: 纯白底 + 香槟色线 */
    #print-overlay .answer-node {
       /* 使用极淡的米黄色，配合金色边框非常高级 */
        background-color: #FFFAF0 !important; 
        /* 修复了之前的语法错误 */
        border-left: 1px solid #D4AF37 !important; 
        border: 1px solid #D4AF37 !important; 
        /* 记得加上这个，否则打印时没有背景色 */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* --- 7. 隐藏无关元素 --- */
    #print-overlay .node-delete-btn,
    #print-overlay .action-bar,
    #print-overlay button {
        display: none !important;
    }
  
   /* --- 8. 北极星与领域样式修正 --- */
    /* 标志颜色 */
    #print-overlay .star-decoration-top,
    #print-overlay .star-decoration-top i,
    #print-overlay .star-decoration-bottom i {
        color: #D4AF37 !important; 
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* 领域标签优化 */
    #print-overlay .badge-field {
        background: transparent !important;
        color: #000000 !important; 
        font-weight: bold !important;
        border: 1px solid #D4AF37 !important;
        padding: 1px 5px !important; /* 稍微再紧凑一点 */
        border-radius: 4px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* 分割线 */
    #print-overlay .node-divider {
        background: linear-gradient(to right, transparent, #D4AF37, transparent) !important;
        opacity: 1 !important;
        margin: 5px 0 !important; /* 减少分割线上下间距 */
    }
}

/* 适配移动端 */
@media (max-width: 768px) {
    .thought-stream {
        padding: 60px 20px;
        gap: 50px;
    }
    .thought-node {
        max-width: 90%;
    }
    .thought-node.question-node {
        align-self: center;
        margin-right: auto;
        border-radius: 10px;
    }
    .thought-node.answer-node {
        align-self: center;
        margin-left: auto;
    }
}