/* ════════════════════════════════════════════════════════════════════
   AI-Novel-System —— 主题布局层
   ════════════════════════════════════════════════════════════════════

   【重要变更 v7.0】
   本文件原先在 :root 里重新定义了一整套色板，与 main.css 的同名 token
   冲突（52 个里冲突 27 个）。由于本文件加载顺序在 main.css 之后，
   实际生效的是本文件那套「宣纸古风」配色，DESIGN.md 记载的现代深色
   规范从未真正生效 —— 这正是「配色不行、风格不统一」的根源。

   现已将**所有色板定义移出**，统一由 tokens.css 提供（加载顺序第 1）。
   本文件只保留：侧边栏布局、设置页、滚动条、模态框、主题切换按钮等
   **结构样式**。所有颜色一律通过 var(--token) 引用，不再写死色值。

   主题切换仍通过 <body data-theme="day|night|auto"> 生效，
   但切换的是 tokens.css 中的数值，而非本文件。
   ════════════════════════════════════════════════════════════════════ */

/* 说明：色板定义已全部迁移至 tokens.css。
   此处不再声明 :root / [data-theme] 变量块，避免再次覆盖。 */

/* ─── 全局基础样式 ─────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--text-primary);
  transition: background var(--dur-slow), color var(--dur-slow);
}
body {
  overflow: hidden;
}

/* ─── 侧边栏（可伸缩） ─────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  transition: width 250ms var(--ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sidebar .nav-section,
.sidebar .nav-drawer,
.sidebar .project-selector,
.sidebar .sidebar-logo {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-color: var(--border-subtle) !important;
}
.sidebar .nav-summary,
.sidebar .nav-item,
.sidebar .qa-primary,
.sidebar .qa-secondary {
  color: var(--sidebar-text) !important;
}
/* 悬停态：改用「表面色 + 主色微染」，亮色主题下同样成立
   （旧值 rgba(255,255,255,0.08) 只在深色底可见，白天主题会失灵） */
.sidebar .nav-item:hover,
.sidebar .nav-summary:hover {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
}
/* 选中态：由「整块实心主色」改为「主色微染 + 左侧色条」。
   原因：整块 amber 实心块在深色侧栏上是一个 12:1 的高饱和色块，
   视觉重量压过了页面主体内容 —— 导航应该「指示位置」，不该「抢戏」。
   这是 VS Code / Linear / GitHub 侧栏的统一做法：
   选中 = 低饱和底色 + 一条 2–3px 主色竖条，而非反白大色块。 */
.sidebar .nav-item.active {
  background: var(--primary-soft) !important;
  color: var(--primary-text) !important;
  position: relative;
}
.sidebar .nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 2px 2px 0;
  background: var(--primary);
}
/* 侧栏主按钮（新建等）保持实心主色 —— 那里需要强引导，是刻意的对比 */
.sidebar .qa-primary {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
}
.sidebar .nav-hint {
  color: var(--text-muted) !important;
}
.sidebar label,
.sidebar .sidebar-logo h1 {
  color: var(--sidebar-text) !important;
}
.sidebar select {
  background: var(--surface-1) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}
.sidebar .btn-new-project {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border-color: var(--primary) !important;
}
.sidebar .btn-new-project:hover {
  background: var(--primary-hover) !important;
}
.sidebar .sidebar-footer {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  border-color: var(--border-subtle) !important;
}
.sidebar .sidebar-footer .model-status,
.sidebar .sidebar-footer span {
  color: var(--sidebar-text) !important;
}
.sidebar .status-indicator.online {
  background: var(--semantic-success) !important;
}
.sidebar .qa-primary,
.sidebar .qa-secondary {
  background: var(--surface-2) !important;
  border-color: var(--border-subtle) !important;
}
.sidebar .qa-primary:hover,
.sidebar .qa-secondary:hover {
  background: var(--primary-soft) !important;
  border-color: var(--primary) !important;
}
.sidebar .qa-title,
.sidebar .qa-sub {
  color: var(--sidebar-text) !important;
}
body.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width);
}
body.sidebar-collapsed .sidebar .nav-text,
body.sidebar-collapsed .sidebar .nav-summary span:not(.icon),
body.sidebar-collapsed .sidebar .project-selector label,
body.sidebar-collapsed .sidebar .project-selector select,
body.sidebar-collapsed .sidebar .btn-new-project .label,
body.sidebar-collapsed .sidebar .qa-text,
body.sidebar-collapsed .sidebar .sidebar-logo h1 {
  display: none !important;
}
body.sidebar-collapsed .sidebar .nav-item {
  justify-content: center;
  padding: 10px;
}
body.sidebar-collapsed .sidebar .nav-summary {
  justify-content: center;
}
body.sidebar-collapsed .sidebar .nav-summary::before {
  margin: 0;
}
body.sidebar-collapsed .sidebar .sidebar-logo {
  justify-content: center;
}
body.sidebar-collapsed .sidebar .btn-new-project {
  padding: 8px;
}
body.sidebar-collapsed .sidebar .project-selector {
  margin: 12px 8px;
  padding: 8px;
}

/* 侧边栏 logo 区 */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-logo-icon {
  font-size: 22px;
}
.sidebar-logo h1 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sidebar-text);
}

/* 伸缩按钮 */
.sidebar-toggle {
  position: absolute;
  top: 14px;
  right: -12px;
  width: 24px;
  height: 24px;
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--fs-xs);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms;
  font-family: inherit;
}
.sidebar-toggle:hover {
  background: var(--primary);
  color: white;
  transform: scale(1.1);
}

/* 主题切换按钮（顶部工具栏） */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 2px;
}
.theme-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 30px;
  height: 26px;
  border-radius: 5px;
  cursor: pointer;
  font-size: var(--fs-base);
  transition: all 150ms;
  font-family: inherit;
}
.theme-btn:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.theme-btn.active {
  background: var(--primary);
  color: white;
}

/* ─── 主内容区 ──────────────────────────────────── */
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-gradient);
  overflow: hidden;
  min-width: 0;
}
.content-area {
  flex: 1;
  overflow-y: auto;
  position: relative;
}
.page {
  display: none;
  height: 100%;
  overflow-y: auto;
  animation: pageFadeIn 300ms;
}
.page.active {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── AI 写作助手页面（v5.0 重布局） ───────────── */
#page-ai-writer {
  padding: 0;
  height: 100%;
}
.ai-writer-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  height: 100%;
  background: var(--canvas);
}
.ai-writer-input {
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  min-height: 0;
}
.ai-writer-output {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  overflow: hidden;
  min-height: 0;
}
.ai-writer-input h2 {
  margin: 0 0 16px;
  font-size: var(--fs-xl);
}
.ai-writer-output-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ai-writer-output-header h3 { margin: 0; font-size: var(--fs-md); }
.ai-writer-output-body {
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: 1.85;
  white-space: pre-wrap;
  color: var(--text-primary);
}
@media (max-width: 1100px) {
  .ai-writer-layout { grid-template-columns: 1fr; }
}

/* ─── 仪表盘占满 ──────────────────────────────── */
.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 40px;
  width: 100%;
}

/* ─── 全屏 page 布局 ──────────────────────────── */
.page-full {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 通用表单/按钮主题适配 */
.btn {
  font-family: var(--font-body);
}
.input, .input-small, textarea, select {
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--font-body);
}
.input:focus, .input-small:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}

/* ─── select / option 下拉框（覆盖浏览器默认色） ─────── */
select {
  background: var(--surface-1) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
}
select option {
  background: var(--surface-1);
  color: var(--text-primary);
  padding: 6px 10px;
}
select option:hover,
select option:checked {
  background: var(--primary) !important;
  color: #ffffff !important;
}
select:focus {
  border-color: var(--primary) !important;
  outline: none;
}
/* 兼容 Firefox */
@-moz-document url-prefix() {
  select option { background-color: var(--surface-1); color: var(--text-primary); }
}

/* ─── AI Provider 设置页 v4.0 ───────────────────── */
/* v4.0 顶部 callout 提示卡 */
.callout-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  margin-bottom: 16px;
}
.callout-banner strong {
  display: block;
  font-size: var(--fs-md);
  color: var(--text-primary);
}
.callout-banner .small { font-size: var(--fs-sm); }
.callout-banner .btn { flex-shrink: 0; }
.settings-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px;
}
.settings-section {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.settings-section h3 {
  margin: 0 0 12px;
  font-size: var(--fs-md);
  color: var(--text-primary);
}
.provider-status-card {
  background: var(--canvas);
  border-radius: 8px;
  padding: 16px 20px;
}
.provider-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.provider-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--canvas);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms;
}
.provider-option:hover { border-color: var(--primary); }
.provider-option input[type="radio"] {
  margin-top: 4px;
  flex-shrink: 0;
}
.provider-option-content { flex: 1; }
.provider-option-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.provider-option-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}
.provider-option-desc code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: var(--fs-xs);
}
.provider-option-desc a { color: var(--primary); }
.provider-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* 顶部 Provider 角标 */
.provider-badge {
  font-size: var(--fs-sm);
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-secondary);
}
/* 徽标：统一走语义 token，不再各写一套 hex
   （旧值 var(--semantic-success)/var(--semantic-warning)/var(--semantic-info) 均为规范外色，且在三处文件中重复定义） */
.provider-badge.provider-ok {
  background: rgba(34, 197, 94, 0.15);
  color: var(--semantic-success);
}
.provider-badge.provider-warn {
  background: rgba(245, 158, 11, 0.15);
  color: var(--semantic-warning);
}
.provider-badge.provider-info {
  background: rgba(59, 130, 246, 0.15);
  color: var(--semantic-info);
}

/* ─── 滚动条主题化（接近主题色，不高反差） ──────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
  background-clip: padding-box;
  border: 2px solid transparent;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

/* ─── modal 主题适配 ───────────────────────────── */
.modal-overlay {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.modal-container {
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-modal);
}
:root[data-theme="day"] .modal-overlay {
  background: rgba(75, 60, 40, 0.45);
}
:root[data-theme="day"] body {
  background: var(--canvas);
}

/* ─── 抽屉主题适配 ─────────────────────────────── */
.drawer-panel {
  background: var(--surface-1);
  color: var(--text-primary);
}
.drawer-header {
  border-bottom: 1px solid var(--border-subtle);
}
.drawer-body {
  background: var(--surface-1);
}

/* ─── 编辑器（白天主题更书卷气） ─────────────── */
:root[data-theme="day"] .editor-textarea-v4 {
  background: var(--canvas);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: 2;
  color: var(--text-primary);
}

/* ─── 顶部工具栏（top-bar） ────────────────────── */
.top-bar {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* ─── 流畅过渡 ──────────────────────────────────── */
.theme-transition, .theme-transition *,
.theme-transition *::before, .theme-transition *::after {
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease !important;
}
/* ─── v5.1 首页项目选择条 ─────────────────────────── */
.home-project-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.home-project-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  flex-shrink: 0;
}
.home-project-bar select {
  min-width: 220px;
}
.home-project-genre { font-size: var(--fs-base); }
.btn-new-project {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  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: 8px;
  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); }

/* ─── v5.1 首页写作健康区 ─────────────────────────── */
.dashboard-bottom-quick { margin-top: 32px; }
.dashboard-health-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.health-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 150ms;
  font-family: inherit;
}
.health-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.hc-icon { font-size: 28px; flex-shrink: 0; }
.hc-text { display: flex; flex-direction: column; gap: 2px; }
.hc-text strong { font-size: var(--fs-md); color: var(--text-primary); }
.hc-text .muted { font-size: var(--fs-sm); }

.ch-status-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:16px;}
.ch-status-card{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:12px;cursor:pointer;transition:all 150ms;}
.ch-status-card:hover{border-color:var(--primary);transform:translateY(-1px);}
.csc-icon{font-size:26px;flex-shrink:0;}
.csc-body{flex:1;min-width:0;}
.csc-label{font-size: var(--fs-xs);color:var(--text-muted);text-transform:uppercase;}
.csc-title{font-size: var(--fs-md);font-weight:600;color:var(--text-primary);margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.csc-sub{font-size: var(--fs-sm);color:var(--text-secondary);}
.csc-arrow{font-size:20px;color:var(--text-muted);}