/* ════════════════════════════════════════════════════════════════════
   AI-Novel-System v3.0 - Visualization Styles
   图谱、进度环、揭秘度色板、剧情节点、故事结构等专用样式
   ════════════════════════════════════════════════════════════════════ */

/* ─── 通用 ─────────────────────────────────────────────────────── */
.page-header {
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 20px;
}
.page-header h2 { margin: 0 0 4px; }
.page-desc { color: var(--text-secondary); font-size: var(--fs-base); margin: 0; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.hidden { display: none !important; }

.input-small, .input {
  background: var(--canvas);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: var(--fs-base);
  font-family: inherit;
}
.input-small:focus, .input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 197, 61, 0.1);
}
.btn-block { width: 100%; margin-top: 16px; }
.filter-toolbar {
  padding: 12px;
  background: var(--surface-1);
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
}

/* ─── 统计卡片 ─────────────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.stat-num { font-size: 28px; font-weight: 600; color: var(--text-primary); }
.stat-label { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 4px; }
.stat-card.stat-blue { border-left: 3px solid var(--semantic-info); }
.stat-card.stat-orange { border-left: 3px solid var(--semantic-warning); }
.stat-card.stat-red { border-left: 3px solid var(--semantic-error); }
.stat-card.stat-green { border-left: 3px solid var(--semantic-success); }
.stat-card.stat-yellow { border-left: 3px solid #eab308; }

/* ─── 图谱画布 ─────────────────────────────────────────────────── */
.graph-view {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px;
}
.network-canvas {
  width: 100%;
  flex: 1;
  min-height: 500px;
  background: var(--canvas);
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  display: block;
}
.graph-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.graph-legend {
  display: flex;
  gap: 24px;
  margin-top: 12px;
  padding: 12px;
  background: var(--canvas);
  border-radius: 8px;
  flex-wrap: wrap;
}
.legend-section h4 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
  letter-spacing: 0.05em;
}
.legend-section > div {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.legend-color {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}
.legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}
.legend-star { color: var(--semantic-warning); font-size: var(--fs-lg); }

/* ─── 卡片网格（角色/谜团） ───────────────────────────────────── */
.card-view {
  width: 100%;
  display: block;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  width: 100%;
}

/* 角色设定页双栏排版 */
#characters-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: start !important;
  width: 100% !important;
}
@media (max-width: 992px) {
  #characters-list {
    grid-template-columns: 1fr !important;
  }
}
.card.character-card, .card.mystery-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--rounded-lg);
  padding: 0;
  overflow: hidden;
  transition: border-color 160ms var(--transition-fast), background 160ms var(--transition-fast);
  /* 质感修复：卡片用「一圈极弱的顶部内高光」建立物理厚度。
     这是 Vercel/Linear 的做法 —— 光从上方来，上边缘比下边缘亮一点点。
     注意必须极弱（4% 白），否则在深色背景上会变成一条白线。 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.card.character-card:hover, .card.mystery-card:hover {
  border-color: var(--border-default);
  background: var(--surface-2);
}
.character-card.is-transmigrator {
  border-left: 3px solid var(--semantic-warning);
}
/* 字段：从「一堆贴在一起的文字」改为「有呼吸的列表」
   原实现 8px 行距 + 11px 大写标签，导致 7 个字段糊成一片。
   改为 14px 行距 + 标签/值分两行的视觉节奏。 */
.char-field { margin-bottom: 14px; }
.char-field:last-child { margin-bottom: 0; }
/* ★v6.9 主辅关联：角色卡顶部一行"规划中出现：第X卷"。纯派生视图，不占数据字段。
   用左边框而非整块底色 —— 作者要求"密集排版不要给每一项都画框，效果放 hover"。 */
.char-plan-link {
  display: inline-block;
  margin-bottom: 14px;
  padding: 2px 8px 2px 8px;
  border-left: 2px solid var(--primary-border);
  background: var(--primary-subtle);
  border-radius: var(--rounded-xs);
  font-size: var(--fs-xs);
  color: var(--primary-text);
  line-height: var(--lh-snug);
}
.char-field-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  margin-bottom: 4px;
  letter-spacing: 0;
}
.char-field-value {
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: 1.75;
  white-space: normal;
  word-break: break-word;
}
.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
}
.card-header h4 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-tight);
}
.card-body { padding: 16px 18px; }
.card-actions { display: flex; gap: 6px; flex-shrink: 0; }

.role-badge {
  background: rgba(255, 197, 61, 0.15);
  color: var(--primary-text);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-left: 6px;
}
.transmigrator-badge {
  background: rgba(245, 158, 11, 0.15);
  color: var(--semantic-warning);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-left: 6px;
}

.char-section {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border-subtle);
}
.char-section:last-child { border-bottom: none; }
.char-section.reality {
  background: rgba(245, 158, 11, 0.05);
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}
.char-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  font-weight: 500;
}
.char-section p { margin: 4px 0; font-size: var(--fs-base); line-height: 1.5; color: var(--text-primary); }
.char-section .muted { color: var(--text-secondary); font-size: var(--fs-sm); }

.reveal-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.reveal-label { font-size: var(--fs-xs); color: var(--text-muted); }
.reveal-pill {
  background: var(--canvas);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  width: 30px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-md);
  transition: all 150ms;
}
.reveal-pill:hover { border-color: var(--primary); }
.reveal-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* ─── 谜团卡片（进度环） ─────────────────────────────────────── */
.mystery-cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-top: 6px;
}
.progress-ring-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--canvas);
  border-radius: 8px;
}
.progress-ring { flex-shrink: 0; }
.progress-info { flex: 1; }
.progress-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; }
.progress-pct { font-size: var(--fs-3xl); font-weight: 600; color: var(--text-primary); }

.mystery-section {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 6px;
}
.mystery-section h5 {
  font-size: var(--fs-sm);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mystery-section.revealed { background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.2); }
.mystery-section.revealed h5 { color: var(--semantic-info); }
.mystery-section.hidden { background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.2); }
.mystery-section.hidden h5 { color: var(--semantic-warning); }
.mystery-section.plan { background: rgba(255, 197, 61, 0.05); border: 1px solid var(--border-subtle); }
.mystery-section.plan h5 { color: var(--primary-hover); }
.author-only { font-size: var(--fs-2xs); color: var(--text-muted); font-weight: normal; }
.mystery-section ul { margin: 0; padding-left: 20px; }
.mystery-section li { font-size: var(--fs-base); line-height: 1.6; color: var(--text-primary); margin-bottom: 4px; }
.mystery-section p { font-size: var(--fs-base); margin: 0; color: var(--text-primary); }

.mystery-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.mystery-actions input[type="range"] { flex: 1; }
.mystery-pct-inline { font-size: var(--fs-base); color: var(--text-secondary); min-width: 40px; }

/* ─── 时间轴（剧情节点列表） ─────────────────────────────────── */
.timeline-view {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
}
.timeline-card {
  background: var(--canvas);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  border-left: 4px solid #3f3f46;
  display: flex;
  gap: 16px;
}
.timeline-card.state-planned { border-left-color: #52525b; }
.timeline-card.state-planted { border-left-color: var(--semantic-info); }
.timeline-card.state-developing { border-left-color: var(--semantic-warning); }
.timeline-card.state-climaxed { border-left-color: var(--semantic-error); }
.timeline-card.state-resolved { border-left-color: var(--semantic-success); }
.timeline-card.importance-critical { background: linear-gradient(90deg, rgba(239, 68, 68, 0.05), var(--canvas) 30%); }

.timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  gap: 4px;
}
.timeline-chapter {
  background: var(--surface-2);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.timeline-chapter.timeline-resolve { background: rgba(16, 185, 129, 0.15); color: var(--semantic-success); }
.timeline-arrow { color: var(--text-muted); font-size: var(--fs-lg); }

.timeline-body { flex: 1; }
.timeline-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.timeline-header h4 { margin: 0; font-size: var(--fs-md); }
.timeline-type {
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.timeline-state { font-size: var(--fs-xs); color: var(--text-muted); }
.timeline-importance { font-size: var(--fs-xs); color: var(--semantic-warning); }
.timeline-author {
  font-size: var(--fs-sm);
  color: var(--semantic-warning);
  background: rgba(245, 158, 11, 0.05);
  padding: 6px 10px;
  border-radius: 4px;
  margin: 6px 0;
}
.timeline-reader {
  font-size: var(--fs-sm);
  color: var(--semantic-info);
  background: rgba(59, 130, 246, 0.05);
  padding: 6px 10px;
  border-radius: 4px;
  margin: 6px 0;
}
.timeline-actions { display: flex; gap: 6px; margin-top: 10px; }

/* ─── 故事结构骨架 ────────────────────────────────────────────── */
.structure-tree {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.act-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  border-left: 4px solid var(--primary);
}
.act-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--canvas);
  border-bottom: 1px solid var(--border-subtle);
}
.act-header h3 { margin: 0; font-size: var(--fs-xl); }
.act-chapter-range {
  background: var(--primary);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.act-actions { margin-left: auto; display: flex; gap: 6px; }
.act-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }

.beat-card {
  background: var(--canvas);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 16px;
}
.beat-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.beat-header h4 { margin: 0; font-size: var(--fs-md); }
.beat-chapter {
  background: rgba(255, 197, 61, 0.15);
  color: var(--primary-text);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.beat-node-link {
  background: rgba(16, 185, 129, 0.15);
  color: var(--semantic-success);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-2xs);
  font-family: 'JetBrains Mono', monospace;
}
.beat-node-empty {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-style: italic;
}
.beat-desc { font-size: var(--fs-base); color: var(--text-secondary); margin: 6px 0; line-height: 1.5; }
.beat-actions { display: flex; gap: 6px; margin-top: 8px; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface-1);
  border: 1px dashed var(--border-default);
  border-radius: 12px;
}
.empty-state .big-emoji { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { margin: 0 0 8px; }
.empty-state p { color: var(--text-secondary); margin-bottom: 20px; }

/* ─── 表单（modal 内） ────────────────────────────────────────── */
.form-stacked { display: flex; flex-direction: column; gap: 12px; }
.form-row { display: flex; flex-direction: column; gap: 4px; }
.form-row label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: 500;
}
.form-row .input { width: 100%; box-sizing: border-box; }
.form-row-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; background: var(--surface-2); border-radius: 6px; }
.checkbox-label span { font-size: var(--fs-base); }

/* ─── 一致性体检结果 ─────────────────────────────────────────── */
.consistency-result .big-emoji { font-size: 64px; text-align: center; }
.consistency-result.all-pass { text-align: center; padding: 30px; }
.issue-card {
  background: var(--canvas);
  border-left: 4px solid #3f3f46;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.issue-card.sev-critical { border-left-color: var(--semantic-error); background: rgba(239, 68, 68, 0.05); }
.issue-card.sev-high { border-left-color: var(--semantic-warning); background: rgba(245, 158, 11, 0.05); }
.issue-card.sev-normal { border-left-color: var(--semantic-info); }
.issue-card.sev-low { border-left-color: #52525b; }
.issue-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.issue-header h4 { margin: 0; font-size: var(--fs-md); flex: 1; }
.issue-sev {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-primary);
  font-weight: 500;
}
.issue-cat { font-size: var(--fs-xs); color: var(--text-muted); }
.issue-card p { margin: 4px 0; font-size: var(--fs-base); color: var(--text-secondary); }
.evidence { border-left: 2px solid var(--border-default); padding-left: 10px; font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; }

/* ─── 编辑器集成：一致性面板 ─────────────────────────────────── */
.consistency-panel {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.consistency-panel .panel-title {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.consistency-panel .panel-info {
  font-size: var(--fs-base);
  color: var(--text-primary);
  flex: 1;
}
.consistency-panel .panel-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.consistency-panel .panel-badge.ok { background: rgba(16, 185, 129, 0.15); color: var(--semantic-success); }
.consistency-panel .panel-badge.warn { background: rgba(245, 158, 11, 0.15); color: var(--semantic-warning); }
.consistency-panel .panel-badge.bad { background: rgba(239, 68, 68, 0.15); color: var(--semantic-error); }

.chapter-goals {
  background: rgba(255, 197, 61, 0.05);
  border: 1px solid rgba(255, 197, 61, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: var(--fs-sm);
}
.chapter-goals .goals-title { color: var(--primary-hover); font-weight: 500; margin-bottom: 6px; }
.chapter-goals .goal-item { color: var(--text-secondary); padding: 2px 0; }

/* ─── v3.0 写作引擎：场景化 AI 工具栏 ─────────────────── */
.scene-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(90deg, var(--surface-1), var(--canvas));
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.scene-toolbar-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-right: 4px;
}
.scene-btn {
  background: var(--canvas);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all 150ms;
}
.scene-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  transform: translateY(-1px);
}

/* 选区悬浮操作菜单 */
.selection-menu {
  position: fixed;
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  gap: 2px;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.selection-menu-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 120ms;
}
.selection-menu-btn:hover {
  background: var(--primary);
}
.selection-menu-btn.btn-close { color: var(--text-muted); }

/* 工具栏新按钮适配 */
.editor-toolbar .toolbar-actions .btn-secondary[data-action="check"] { color: var(--semantic-warning); }
.editor-toolbar .toolbar-actions .btn-secondary[data-action="context"] { color: var(--primary-hover); }

/* ─── v5.0 工作台（永远可见 + 写作中心） ─────────────────── */

/* 快速行动栏：永远显示在 dashboard 顶部 */
.quick-action-bar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}
@media (max-width: 900px) {
  .quick-action-bar { grid-template-columns: 1fr 1fr; }
}

.qa-primary, .qa-secondary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 200ms;
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: inherit;
}
.qa-primary {
  background: linear-gradient(135deg, rgba(255, 197, 61, 0.2), rgba(255, 197, 61, 0.08));
  border-color: rgba(255, 197, 61, 0.4);
}
.qa-primary:hover, .qa-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(255, 197, 61, 0.15);
}
.qa-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.qa-text { display: flex; flex-direction: column; gap: 2px; }
.qa-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}
.qa-sub {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* 引导说明卡 */
.dashboard-hint { margin-top: 24px; }
.hint-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  gap: 16px;
}
.hint-icon { font-size: var(--fs-3xl); flex-shrink: 0; }
.hint-card h3 { margin: 0 0 12px; font-size: var(--fs-md); }
.hint-card ul { margin: 0; padding-left: 20px; line-height: 1.9; font-size: var(--fs-base); color: var(--text-secondary); }
.hint-card ul strong { color: var(--text-primary); }

/* 续写卡片 */
.continue-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(255, 197, 61, 0.06));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 16px;
  margin-bottom: 24px;
}
.continue-info { flex: 1; }
.continue-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.continue-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.continue-meta {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.continue-project {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle);
}
.btn-continue-write {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  background: linear-gradient(135deg, var(--primary), var(--primary-pressed));
  border: none;
  border-radius: 12px;
  color: white;
  font-size: var(--fs-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms;
  box-shadow: 0 4px 12px rgba(255, 197, 61, 0.3);
}
.btn-continue-write:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 197, 61, 0.4);
}
.bcw-icon { font-size: 20px; }
.bcw-text { font-size: var(--fs-lg); }

.stats-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.stats-grid.compact .stat-card { padding: 12px; }
.stats-grid.compact .stat-value { font-size: 22px; }
.stats-grid.compact .stat-label { font-size: var(--fs-xs); }

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.section-header h3 { margin: 0; font-size: var(--fs-lg); }
.section-header a { font-size: var(--fs-base); color: var(--text-muted); }
.section-header.collapsible { cursor: pointer; padding: 8px 0; user-select: none; }
.toggle-arrow { color: var(--text-muted); font-size: var(--fs-sm); }
.small { font-size: var(--fs-sm); }

.recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.recent-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 150ms;
}
.recent-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 197, 61, 0.15);
}
.recent-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.recent-order {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
}
.recent-status {
  font-size: var(--fs-2xs);
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--text-secondary);
}
.recent-status.status-completed { background: rgba(16, 185, 129, 0.15); color: var(--semantic-success); }
.recent-status.status-writing { background: rgba(59, 130, 246, 0.15); color: var(--semantic-info); }
.recent-card h4 { margin: 0 0 6px; font-size: var(--fs-md); color: var(--text-primary); }
.recent-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.settings-summary-section { margin-top: 16px; }
.settings-panel {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.action-card.small {
  background: var(--canvas);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 150ms;
}
.action-card.small:hover {
  border-color: var(--primary);
}
.action-card.small .icon { font-size: var(--fs-2xl); margin-bottom: 4px; }
.action-card.small h4 { margin: 4px 0; font-size: var(--fs-base); color: var(--text-primary); }
.action-card.small p { margin: 0; font-size: var(--fs-xs); }

.setting-list { list-style: none; padding: 0; margin: 12px 0; }
.setting-list li { padding: 8px 12px; border-radius: 6px; display: flex; align-items: center; gap: 8px; }
.setting-list li.done { background: rgba(16, 185, 129, 0.05); }
.setting-list li a { color: var(--text-primary); text-decoration: none; }
.setting-list li.done a { color: var(--semantic-success); }
.setting-mark { font-size: var(--fs-lg); }

/* ─── v6.0 编辑器：完全重写 ──────────────────────── */
.editor-v6 {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
  min-height: 0;
  background: var(--canvas);
}
#page-editor {
  display: none;
}
#page-editor.active {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--canvas) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

#editor-main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
}
#editor-main:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
}

.editor-toolbar-v6 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-1);
  flex-shrink: 0;
}

/* ★ 主体两栏布局：写作区 + 智能面板 */
.editor-body-v6 {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.editor-main-area {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.editor-textarea-v6 {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  border: none !important;
  background: #0c0d10 !important;
  color: #f3f4f6 !important;
  caret-color: var(--primary-hover) !important;
  padding: 28px 6% !important;
  font-size: var(--fs-lg) !important;
  line-height: 1.95 !important;
  font-family: var(--font-serif) !important;
  resize: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100% !important;
}

:root[data-theme="day"] .editor-textarea-v6 {
  background: #fcfbf9 !important;
  color: #1c1917 !important;
  caret-color: #8b2c1c !important;
}

/* ★ 右侧智能面板：不再留白 */
/* 底部状态栏：紧凑一行 */
.editor-statusbar-v6 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-1);
  flex-shrink: 0;
  height: 32px;
}

/* 抽屉从右滑入，不再是覆盖整个屏幕的 fixed */
#settings-drawer,
#ai-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}
#settings-drawer.hidden,
#ai-drawer.hidden { display: none; }
.editor-toolbar-v4 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-1);
}
.editor-order-chip {
  background: rgba(255, 197, 61, 0.15);
  color: var(--primary-text);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  flex-shrink: 0;
}
.editor-title-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--fs-xl);
  font-weight: 500;
  outline: none;
  padding: 4px 0;
}
.editor-title-input::placeholder { color: var(--text-muted); }
.save-indicator {
  font-size: var(--fs-lg);
  transition: all 200ms;
}
.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-lg);
  transition: all 150ms;
}
.icon-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}
.icon-btn.primary {
  background: rgba(255, 197, 61, 0.15);
  color: var(--primary-text);
}
.icon-btn.primary:hover {
  background: rgba(255, 197, 61, 0.25);
}

.editor-textarea-v4 {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;  /* 允许 flex 子项收缩到 0 */
  border: none;
  background: var(--canvas);
  color: var(--text-primary);
  padding: 32px 8%;
  font-size: var(--fs-lg);
  line-height: 1.85;
  font-family: 'Georgia', 'Source Han Serif', serif;
  resize: none;
  outline: none;
  box-sizing: border-box;
}
.editor-textarea-v4:focus { outline: none; }

.editor-statusbar-v4 {
  display: flex;
  justify-content: space-between;
  padding: 8px 20px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-1);
}

.editor-drawer {
  flex: 0 0 360px;
  display: flex;
  background: var(--surface-1);
  border-left: 1px solid var(--border-subtle);
  overflow: hidden;
  transition: flex-basis 0.25s ease;
}
.editor-drawer.hidden {
  flex: 0 0 0 !important;
  border-left: none;
  overflow: hidden;
}
.editor-drawer.hidden > .drawer-panel,
.editor-drawer.hidden > .drawer-backdrop { display: none; }
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  animation: fade-in 200ms ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.drawer-panel {
  position: relative;
  width: 420px;
  max-width: 90vw;
  background: var(--surface-1);
  border-left: 1px solid var(--border-default);
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: slide-in 200ms ease;
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}
@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.drawer-header h3 { margin: 0; font-size: var(--fs-lg); }
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.drawer-section h4 {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}
.scene-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.scene-grid .scene-btn {
  background: var(--canvas);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  padding: 10px;
  border-radius: 6px;
  font-size: var(--fs-base);
  cursor: pointer;
}
.scene-grid .scene-btn:hover {
  border-color: var(--primary);
  color: var(--text-primary);
}

kbd {
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: 3px;
  padding: 1px 6px;
  font-family: monospace;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* 选区菜单 v4.0 紧凑版 */
.selection-menu {
  position: fixed;
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  gap: 2px;
  z-index: 999;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.selection-menu-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-md);
}
.selection-menu-btn:hover { background: var(--primary); }
.selection-menu-btn.btn-close { color: var(--text-muted); }

#editor-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
}
#editor-empty .big-emoji { font-size: 64px; margin-bottom: 16px; }
#editor-empty h3 { margin: 0 0 12px; }
#editor-empty p { margin: 0 0 24px; color: var(--text-secondary); }

/* ─── v4.0 侧边栏双层抽屉 ────────────────────── */
.nav-drawer {
  margin: 4px 8px;
}
.nav-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-secondary);
  list-style: none;
  user-select: none;
  transition: background 150ms;
}
.nav-summary::-webkit-details-marker { display: none; }
.nav-summary::before {
  content: '▶';
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  margin-right: 2px;
  transition: transform 200ms;
}
.nav-drawer[open] > .nav-summary::before {
  transform: rotate(90deg);
}
.nav-summary:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.nav-summary .icon {
  font-size: var(--fs-lg);
}
.nav-hint {
  margin-left: auto;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  font-weight: normal;
}
.nav-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0 4px 12px;
}
.nav-drawer-body .nav-item {
  padding: 7px 12px;
  font-size: var(--fs-base);
  border-radius: 6px;
}
.nav-drawer-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 6px 8px;
}

/* ─── v5.0 项目选择器（侧边栏顶部，永远可见） ───────── */
.project-selector {
  margin: 16px 16px 8px;
  padding: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-selector label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.project-selector select {
  width: 100%;
  background: var(--canvas);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: var(--fs-base);
  font-family: inherit;
  cursor: pointer;
}
.project-selector select:focus {
  outline: none;
  border-color: var(--primary);
}
.btn-new-project {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  background: linear-gradient(135deg, rgba(255, 197, 61, 0.2), rgba(255, 197, 61, 0.08));
  border: 1px solid rgba(255, 197, 61, 0.4);
  color: var(--primary-text);
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 500;
  transition: all 150ms;
  font-family: inherit;
}
.btn-new-project:hover {
  background: rgba(255, 197, 61, 0.3);
  transform: translateY(-1px);
}
.btn-new-project .icon { font-size: var(--fs-md); }
.btn-new-project .label { font-size: var(--fs-base); }

/* ─── v5.0 主内容区与侧栏间距优化 ───────────────── */
.dashboard-container {
  max-width: 100%;
  width: 100%;
  padding: 24px 32px;
}

#page-reader.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.immersive-reader-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  background: var(--sreader-bg, var(--canvas));
  color: var(--sreader-color, var(--text-secondary));
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  position: relative;
  transition: background 0.3s ease, color 0.3s ease;
}

.immersive-reader-container:fullscreen,
.immersive-reader-container.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  border-radius: 0;
  border: none;
}
/* ─── v4.2 历史版本分栏面板 ─────────────────────── */
.revision-panel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-right: 1px solid var(--border-subtle);
  overflow: hidden;
}
.revision-panel.hidden { display: none !important; }
.rev-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-2);
  flex-shrink: 0;
}
.rev-list {
  width: 260px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 8px;
  border-right: 1px solid var(--border-subtle);
}
.rev-item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 6px;
  background: var(--canvas);
  border: 1px solid var(--border-subtle);
  transition: all 150ms;
}
.rev-item:hover { border-color: var(--primary); }
.rev-item.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.rev-item-title { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); }
.rev-item-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 3px; }
.rev-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rev-viewer.hidden { display: none !important; }
.rev-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.rev-viewer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 6%;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: 1.9;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}
/* 没有历史列表时的纯查看模式（列表隐藏） */
.revision-panel .rev-list.hidden + .rev-viewer { flex: 1; }

/* ══════════════════════════════════════════════════════════════════
   ★v5.0 草稿/版本 双层模型 UI
   · 顶栏"未发布"标识 + 保存版本按钮
   · 历史版本真正的左右并排对比（左：列表+版本全文 / 右：当前编辑）
   ══════════════════════════════════════════════════════════════════ */

/* 顶栏"未发布"徽标 */
.draft-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--semantic-warning);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.45);
  animation: draftPulse 2.4s ease-in-out infinite;
  white-space: nowrap;
}
.draft-badge.hidden { display: none !important; }
@keyframes draftPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* 并排对比：分栏打开时左右各占一半 */
.editor-body-v6.rev-split .revision-panel {
  flex: 0 0 50%;
  max-width: 50%;
}
.editor-body-v6.rev-split .editor-main-area {
  flex: 1 1 0;
  border-left: 2px solid rgba(255, 197, 61, 0.45);
}

/* 分栏内部改为纵向：上=版本列表，下=选中版本全文 */
.revision-panel {
  flex-direction: column;
}
.revision-panel .rev-list {
  width: auto;
  flex: 0 0 auto;
  max-height: 32%;
  border-right: none;
  border-bottom: 1px solid var(--border-subtle);
}
.revision-panel .rev-viewer {
  flex: 1 1 0;
  min-height: 0;
}

/* 差异统计条 */
.rev-diff-info {
  padding: 8px 14px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  background: rgba(255, 197, 61, 0.07);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.rev-diff-info:empty { display: none; }

/* 版本列表项可点选 */
.rev-item { user-select: none; }

/* 版本全文区加"只读历史"的视觉区分 */
.rev-viewer-body { background: rgba(0, 0, 0, 0.18); }

/* ══════════════════════════════════════════════════════════════════
   ★v5.3 编辑器「AI 智能写」分栏
   与 .revision-panel 共用左栏位置；两者互斥（同时只显示一个）
   ══════════════════════════════════════════════════════════════════ */
.editor-ai-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
  background: rgba(18, 18, 22, 0.96);
  border-right: 2px solid rgba(255, 139, 92, 0.45);
  overflow: hidden;
}
.editor-ai-panel.hidden { display: none !important; }

.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 139, 92, 0.08);
  flex-shrink: 0;
}
.ai-panel-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.eai-tab {
  font-size: var(--fs-sm);
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #a1a1aa;
  font-weight: 600;
  transition: all .15s;
}
.eai-tab.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-pressed));
  color: #fff;
  border-color: transparent;
}

.eai-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.eai-panel.hidden { display: none !important; }

/* ★v6.0 写作目标锚点条 */
.eai-target {
  flex-shrink: 0;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--primary-text);
  background: rgba(255, 197, 61, 0.13);
  border-bottom: 1px solid rgba(255, 197, 61, 0.3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.eai-target-lbl { color: var(--primary-hover); font-weight: 700; }
.eai-target b { color: #fff; }
.eai-target-wc {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9px; padding: 1px 7px; color: var(--primary-hover);
}
.eai-target-note {
  margin-left: auto;
  color: var(--semantic-success); font-size: var(--fs-xs); opacity: .85;
}
.eai-target-warn {
  background: rgba(245, 158, 11, 0.15);
  border-bottom-color: rgba(245, 158, 11, 0.4);
  color: var(--semantic-warning);
}

/* ── 自由对话 ─────────────────────────────────────────────── */
.eai-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eai-msg { display: flex; gap: 8px; max-width: 94%; }
.eai-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.eai-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-lg); flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-pressed));
}
.eai-msg.user .eai-avatar { background: linear-gradient(135deg, var(--semantic-success), var(--semantic-success)); }
.eai-bubble {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-primary);
  font-size: var(--fs-md);
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
  min-width: 0;
}
.eai-msg.user .eai-bubble {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}
.eai-bubble-tools {
  display: flex; gap: 6px; margin-top: 7px; padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.eai-mini {
  font-size: var(--fs-xs); padding: 2px 7px; border-radius: 5px; cursor: pointer;
  background: rgba(255, 255, 255, 0.07); color: var(--accent-purple);
  border: 1px solid rgba(255, 139, 92, 0.3);
}
.eai-mini:hover { background: rgba(255, 139, 92, 0.25); }

.eai-composer {
  flex-shrink: 0;
  border-top: 1px solid var(--border-subtle);
  padding: 10px;
  background: rgba(28, 28, 36, 0.9);
}
.eai-composer textarea, .eai-form textarea, .eai-out {
  width: 100%;
  box-sizing: border-box;
  background: rgba(12, 12, 15, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 9px 11px;
  color: #fff;
  font-size: var(--fs-md);
  line-height: 1.65;
  resize: vertical;
  outline: none;
  font-family: inherit;
}
.eai-composer textarea:focus, .eai-form textarea:focus { border-color: rgba(255, 139, 92, 0.6); }
.eai-composer-actions {
  display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}
.eai-chk {
  font-size: var(--fs-sm); color: #a1a1aa; display: flex; align-items: center;
  gap: 4px; margin-right: auto; cursor: pointer; user-select: none;
}

/* ── 定向写作 / Spark 表单 ────────────────────────────────── */
.eai-form {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
}
.eai-label {
  display: block; font-size: var(--fs-sm); color: #a1a1aa;
  margin-bottom: 5px; font-weight: 600;
}
.eai-row { display: flex; gap: 10px; margin-top: 10px; }
.eai-col { flex: 1 1 0; min-width: 0; }
.eai-form select {
  width: 100%; box-sizing: border-box;
  background: rgba(12, 12, 15, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px; padding: 8px 10px; color: #fff; font-size: var(--fs-base);
  outline: none;
}
.eai-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.eai-out-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--primary-hover); margin-bottom: 6px; font-weight: 600;
  gap: 8px; flex-wrap: wrap;
}
.eai-out-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.eai-out { min-height: 160px; }

/* ★v6.1 生成结果区：占满剩余高度，不再需要手动拖拽 */
#eai-tpl-out-wrap, #eai-spark-out-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 10px;
}
.eai-out-tall {
  flex: 1 1 auto;
  min-height: 300px;      /* 足够看清整段，避免每次手动放大 */
  height: 100%;
  resize: vertical;
  font-family: Georgia, "Songti SC", serif;
  font-size: var(--fs-md);
  line-height: 1.85;
}

/* ★v6.1 字数实时统计条 */
.eai-wc {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-sm); margin-bottom: 6px; padding: 5px 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #a1a1aa;
}
.eai-wc-src { color: #93c5fd; }
.eai-wc-sep { color: #52525b; }
.eai-wc-out { color: var(--semantic-success); font-weight: 700; }
.eai-wc-live { animation: eaiPulse 1.2s ease-in-out infinite; }
@keyframes eaiPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.eai-wc-target { color: #71717a; }
.eai-wc-ok { color: var(--semantic-success); margin-left: auto; }
.eai-wc-warn {
  color: var(--semantic-warning); margin-left: auto;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 5px; padding: 1px 7px;
}

/* ★v6.1 篇级规划：进度条与状态 */
.eai-plan-progress {
  margin-top: 8px; padding: 8px 10px;
  background: rgba(255, 197, 61, 0.08);
  border: 1px solid rgba(255, 197, 61, 0.25);
  border-radius: 6px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.eai-plan-progress.hidden { display: none !important; }
.eai-plan-bar {
  flex: 1 1 100%; height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
#eai-plan-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--primary), var(--primary-pressed));
  transition: width .35s ease;
}
#eai-plan-status { font-size: var(--fs-sm); color: var(--primary-hover); flex: 1 1 100%; }

/* ★v6.6 篇级规划：自动连写开关 + 控制按钮 + 章节进度清单 */
.eai-auto {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer;
  flex: 1 1 auto; user-select: none;
}
.eai-auto input { accent-color: var(--primary); cursor: pointer; }
.eai-plan-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 100%; }
.eai-plan-ctl-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.eai-plan-list { flex: 1 1 100%; max-height: 170px; overflow-y: auto; margin-top: 4px; }
.eai-pl-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-radius: 4px; font-size: var(--fs-sm);
  color: var(--text-secondary); cursor: pointer;
  transition: background .15s ease;
}
.eai-pl-row:hover { background: var(--surface-hover); }
.eai-pl-row.done { color: var(--text-primary); }
.eai-pl-row.ins { color: var(--success, #4ade80); opacity: .8; }
.eai-pl-row.writing { color: var(--primary); }
.eai-pl-row.error { color: var(--danger, #f87171); }
.eai-pl-ico { flex: 0 0 1.1em; text-align: center; }
.eai-pl-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eai-pl-wc { flex: 0 0 auto; font-size: .72rem; color: var(--text-muted); }
.eai-pl-err { flex: 0 0 auto; font-size: .72rem; color: var(--danger, #f87171); }

/* ★v6.6 草稿工作区弹窗 */
.dv-tabs { display: flex; flex-wrap: wrap; gap: 4px; max-height: 76px; overflow-y: auto; margin-bottom: 8px; }
.dv-tab {
  padding: 2px 8px; border-radius: 4px; font-size: .75rem; cursor: pointer;
  background: var(--surface-2); color: var(--text-secondary); border: 1px solid transparent;
}
.dv-tab:hover { background: var(--surface-hover); }
.dv-tab.on { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.dv-meta { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 6px; }
.dv-ins { color: var(--success, #4ade80); }
.dv-text {
  width: 100%; min-height: 320px; max-height: 46vh;
  font-family: var(--font-serif); font-size: 15px; line-height: 1.9;
  padding: 12px 14px; border-radius: 6px;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--surface-3); resize: vertical;
}
.dv-note { font-size: .75rem; color: var(--text-muted); margin-top: 6px; }
.dv-actions { flex-wrap: wrap; gap: 6px; }

/* ★v6.1 空章节引导条 */
.editor-empty-cta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 10px;
  background: rgba(255, 197, 61, 0.12);
  border: 1px dashed rgba(255, 139, 92, 0.5);
  border-radius: 8px;
  font-size: var(--fs-base); color: var(--primary-hover);
}
.editor-empty-cta span { font-weight: 600; }

/* 生成中：按钮态 */
.eai-tab .eai-spin { display: inline-block; animation: eaiSpin 1s linear infinite; }
@keyframes eaiSpin { to { transform: rotate(360deg); } }

/* 窄屏：AI 分栏占满，正文让位 */
@media (max-width: 900px) {
  .editor-ai-panel { flex: 0 0 100%; max-width: 100%; }
  .editor-body-v6.ai-split .editor-main-area { display: none; }
}