/* 创作者工作台样式
 * 上半部分：页面基础与工作台外壳
 * 下半部分：从 CBPANDA AI 的 src/renderer/src/styles/global.css 抽取的组件自带样式（脚本追加）
 *
 * 主题：默认「漫画少女风」（亮色），<html data-theme="dark"> 切「黑暗少年风」（暗色）。
 * 暗色值 = 改造前的原样；亮色面板用半透明白，让 /static/img/theme-anime.jpg 从缝隙里透出来。
 * 注意：bundle 里还有一批 React 内联颜色（分镜卡片、对话框），不在本文件管辖范围。
 */

/* ================= 主题变量 ================= */
:root {
  --theme-image: url('/static/img/theme-anime.jpg');
  --theme-halo: radial-gradient(ellipse 80% 72% at 50% 38%,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.84) 30%,
      rgba(255, 255, 255, 0.50) 58%,
      rgba(255, 255, 255, 0.16) 80%,
      rgba(255, 255, 255, 0.06) 100%);

  --cbw-bg: rgba(255, 250, 252, 0.86);
  --cbw-panel: rgba(255, 255, 255, 0.90);
  --cbw-panel-2: rgba(255, 255, 255, 0.95);
  --cbw-input: rgba(255, 255, 255, 0.96);
  --cbw-hover: rgba(255, 240, 246, 0.95);
  --cbw-border: rgba(120, 90, 130, 0.20);
  --cbw-border-strong: rgba(120, 90, 130, 0.30);

  --cbw-fg: #1d2433;
  --cbw-fg-soft: #333a4a;
  --cbw-fg-muted: #5b6478;
  --cbw-fg-dim: #7b8598;

  --cbw-accent: #ff4f9a;
  --cbw-accent-soft: #ff8fc0;
  --cbw-accent-bg: rgba(255, 79, 154, 0.12);
  --cbw-accent-line: rgba(255, 79, 154, 0.42);
  --cbw-accent-2: #7c6cff;

  --cbw-ok: #0f9d6a;
  --cbw-ok-bg: rgba(15, 157, 106, 0.12);
  --cbw-warn: #b45309;
  --cbw-warn-bg: rgba(180, 83, 9, 0.10);
  --cbw-warn-line: rgba(180, 83, 9, 0.24);
  --cbw-danger: #e11d48;

  --cbw-shadow: 0 6px 20px rgba(180, 120, 150, 0.16);
  --cbw-shadow-strong: 0 10px 30px rgba(180, 120, 150, 0.22);
  color-scheme: light;
}

/* 黑暗少年风：这里的值就是改造前的原样 */
html[data-theme="dark"] {
  --theme-image: url('/static/img/theme-dark.jpg');
  --theme-halo: radial-gradient(ellipse 76% 68% at 50% 44%,
      rgba(2, 3, 6, 0.96) 0%,
      rgba(2, 3, 6, 0.92) 30%,
      rgba(2, 3, 6, 0.70) 56%,
      rgba(2, 3, 6, 0.42) 80%,
      rgba(2, 3, 6, 0.30) 100%);

  --cbw-bg: #121212;
  --cbw-panel: #1a1a1a;
  --cbw-panel-2: #1e1e1e;
  --cbw-input: #2a2a2a;
  --cbw-hover: #232323;
  --cbw-border: #333333;
  --cbw-border-strong: #444444;

  --cbw-fg: #e0e0e0;
  --cbw-fg-soft: #cccccc;
  --cbw-fg-muted: #9aa3b2;
  --cbw-fg-dim: #7d8698;

  --cbw-accent: #4da6ff;
  --cbw-accent-soft: #7cc0f0;
  --cbw-accent-bg: #2c3e50;
  --cbw-accent-line: #4da6ff;
  --cbw-accent-2: #6c5ce7;

  --cbw-ok: #7ee0a3;
  --cbw-ok-bg: #1e3a2c;
  --cbw-warn: #e0c35c;
  --cbw-warn-bg: #241f10;
  --cbw-warn-line: #3a2f16;
  --cbw-danger: #ff8b7b;

  --cbw-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  --cbw-shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* ================= 页面基础 ================= */
html, body {
  height: 100%;
  margin: 0;
  background-color: var(--cbw-bg);
  background-image: var(--theme-halo), var(--theme-image);
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  color: var(--cbw-fg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
}
#cbw-root { height: 100%; }
.cbw-root { height: 100%; display: flex; flex-direction: column; }
.cbw-bar {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  background: var(--cbw-panel); border-bottom: 1px solid var(--cbw-border); flex-shrink: 0; flex-wrap: wrap;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cbw-tabs { display: flex; gap: 6px; background: var(--cbw-input); border: 1px solid var(--cbw-border); border-radius: 10px; padding: 4px; }
.cbw-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cbw-status { font-size: 12px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cbw-fg-muted); }
.cbw-btn {
  background: var(--cbw-input); border: 1px solid var(--cbw-border-strong); color: var(--cbw-fg-soft);
  padding: 6px 12px; border-radius: 7px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.cbw-btn:hover { background: var(--cbw-hover); }
.cbw-btn.primary { background: var(--cbw-accent-bg); border-color: var(--cbw-accent-line); color: var(--cbw-accent); }
.cbw-btn:disabled { opacity: 0.55; cursor: wait; }
.cbw-user { color: var(--cbw-fg-muted); font-size: 12px; }
.cbw-warn {
  padding: 8px 14px; font-size: 12px; color: var(--cbw-warn);
  background: var(--cbw-warn-bg); border-bottom: 1px solid var(--cbw-warn-line); flex-shrink: 0;
}
.cbw-body { flex: 1; min-height: 0; overflow: hidden; }
/* novel workbench manages its own inner scrolling; the video workbench is a
   long list and must be scrolled by .cbw-body -- never pin its height. */
.cbw-body > .novel-layout { height: 100%; }
/* 未登录 / 加载态 */
.cbw-center { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; color: var(--cbw-fg-muted); font-size: 14px; text-align: center; padding: 24px; }
.cbw-center a { color: var(--cbw-accent); }
.cbw-center button { background: var(--cbw-accent-bg); border: 1px solid var(--cbw-accent-line); color: var(--cbw-accent); padding: 9px 20px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.cbw-spin { width: 26px; height: 26px; border: 3px solid var(--cbw-border-strong); border-top-color: var(--cbw-accent); border-radius: 50%; animation: cbwspin 0.9s linear infinite; }
@keyframes cbwspin { to { transform: rotate(360deg); } }

/* ==================================================================
   以下为组件自带样式（从 CBPANDA AI global.css 原样抽取，颜色已变量化）
   ================================================================== */
.novel-layout { display: flex; height: 100%; background: transparent; color: var(--cbw-fg); }
.novel-sidebar { width: 190px; background: var(--cbw-panel); border-right: 1px solid var(--cbw-border); display: flex; flex-direction: column; flex-shrink: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.novel-project-header { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--cbw-border); }
.novel-project-header select { flex: 1; min-width: 0; background: var(--cbw-input); border: 1px solid var(--cbw-border-strong); border-radius: 6px; color: var(--cbw-fg-soft); padding: 6px 8px; font-size: 12px; }
.novel-icon-btn { width: 30px; background: var(--cbw-accent); border: none; border-radius: 6px; color: #fff; cursor: pointer; font-size: 17px; }
.novel-nav { flex: 1; overflow-y: auto; padding: 6px 0; }
.novel-nav-item { padding: 9px 14px; font-size: 13px; color: var(--cbw-fg-muted); cursor: pointer; border-left: 3px solid transparent; transition: 0.15s; }
.novel-nav-item:hover { background: var(--cbw-hover); color: var(--cbw-fg-soft); }
.novel-nav-item.active { background: var(--cbw-hover); color: var(--cbw-accent); border-left-color: var(--cbw-accent); }
.novel-status { padding: 10px 12px; border-top: 1px solid var(--cbw-border); font-size: 12px; color: var(--cbw-fg-dim); line-height: 1.7; }
.novel-content { flex: 1; overflow-y: auto; padding: 16px; min-width: 0; }
.novel-btn { background: var(--cbw-input); border: 1px solid var(--cbw-border-strong); color: var(--cbw-fg-soft); padding: 7px 13px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.novel-btn:hover { background: var(--cbw-hover); }
.novel-btn.primary { background: var(--cbw-accent); border-color: var(--cbw-accent); color: #fff; }
.novel-btn.ai { background: var(--cbw-accent-bg); border-color: var(--cbw-accent-line); color: var(--cbw-accent); }
.novel-btn:disabled { opacity: 0.5; cursor: wait; }
.editor-toolbar { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
.chapter-title-input { flex: 1; min-width: 180px; background: var(--cbw-input); border: 1px solid var(--cbw-border-strong); border-radius: 6px; color: var(--cbw-fg); padding: 8px 12px; font-size: 15px; font-weight: 600; box-sizing: border-box; }
.novel-editor { width: 100%; min-height: calc(100vh - 330px); background: var(--cbw-panel-2); border: 1px solid var(--cbw-border); border-radius: 10px; color: var(--cbw-fg); padding: 18px; font-size: 15px; line-height: 2; resize: vertical; outline: none; font-family: Georgia, 'Microsoft YaHei', serif; box-sizing: border-box; }
.novel-editor:focus { border-color: var(--cbw-accent); }
.novel-empty { color: var(--cbw-fg-dim); padding: 36px; text-align: center; font-size: 13px; }
.novel-form { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.novel-form label { display: block; font-size: 12px; color: var(--cbw-fg-muted); margin-bottom: 5px; }
.novel-form input, .novel-form select, .novel-form textarea { width: 100%; background: var(--cbw-input); border: 1px solid var(--cbw-border-strong); border-radius: 8px; color: var(--cbw-fg-soft); padding: 9px 11px; font-size: 13px; box-sizing: border-box; }
.novel-form textarea { min-height: 76px; resize: vertical; }
.novel-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.novel-card { background: var(--cbw-panel-2); border: 1px solid var(--cbw-border); border-radius: 10px; padding: 14px; }
.novel-card:hover { border-color: var(--cbw-accent); }
.novel-card-title { font-size: 15px; font-weight: 600; color: var(--cbw-fg); margin-bottom: 2px; }
.novel-card-sub { font-size: 12px; color: var(--cbw-fg-dim); margin-bottom: 8px; }
.novel-card-row { font-size: 13px; color: var(--cbw-fg-soft); line-height: 1.6; }
.novel-card-row strong { color: var(--cbw-fg-muted); font-weight: 500; }
.novel-table { width: 100%; border-collapse: collapse; background: var(--cbw-panel-2); border-radius: 10px; overflow: hidden; }
.novel-table th { background: var(--cbw-input); color: var(--cbw-fg-soft); padding: 10px 12px; text-align: left; font-size: 13px; font-weight: 500; }
.novel-table td { padding: 9px 12px; border-bottom: 1px solid var(--cbw-border); font-size: 13px; color: var(--cbw-fg-soft); }
.novel-tag { padding: 2px 9px; border-radius: 10px; font-size: 11px; background: var(--cbw-accent-bg); color: var(--cbw-accent); }
.novel-tag.warn { background: var(--cbw-warn-bg); color: var(--cbw-warn); }
.novel-tag.ok { background: var(--cbw-ok-bg); color: var(--cbw-ok); }
.novel-chat-fab { position: absolute; right: 22px; bottom: 22px; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--cbw-accent), var(--cbw-accent-2)); border: none; color: #fff; font-size: 22px; cursor: pointer; box-shadow: var(--cbw-shadow); z-index: 30; }
.novel-chat-fab:hover { filter: brightness(1.12); }
.novel-chat { position: absolute; right: 22px; bottom: 22px; width: 360px; height: 470px; display: flex; flex-direction: column; background: var(--cbw-panel-2); border: 1px solid var(--cbw-accent-line); border-radius: 12px; box-shadow: var(--cbw-shadow-strong); z-index: 30; overflow: hidden; }
.novel-chat-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: var(--cbw-accent-bg); color: var(--cbw-accent); font-size: 13px; font-weight: 600; flex-shrink: 0; }
.novel-chat-x { background: none; border: none; color: var(--cbw-fg-muted); cursor: pointer; font-size: 13px; margin-left: 8px; }
.novel-chat-x:hover { color: var(--cbw-fg); }
.novel-chat-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.novel-chat-msg { display: flex; flex-direction: column; }
.novel-chat-msg.me { align-items: flex-end; }
.novel-chat-bubble { max-width: 86%; padding: 7px 10px; border-radius: 9px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.novel-chat-msg.me .novel-chat-bubble { background: var(--cbw-accent-bg); color: var(--cbw-fg); }
.novel-chat-msg.ai .novel-chat-bubble { background: var(--cbw-input); color: var(--cbw-fg-soft); }
.novel-chat-append { align-self: flex-start; margin-top: 3px; background: none; border: 1px solid var(--cbw-border-strong); color: var(--cbw-fg-muted); border-radius: 6px; font-size: 11px; padding: 2px 7px; cursor: pointer; }
.novel-chat-append:hover { color: var(--cbw-accent); border-color: var(--cbw-accent); }
.novel-chat-input { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--cbw-border); flex-shrink: 0; }
.novel-chat-input textarea { flex: 1; min-height: 52px; max-height: 120px; background: var(--cbw-input); border: 1px solid var(--cbw-border-strong); border-radius: 8px; color: var(--cbw-fg); padding: 7px 9px; font-size: 13px; resize: none; box-sizing: border-box; font-family: inherit; }
.novel-chat-input textarea:focus { outline: none; border-color: var(--cbw-accent); }
.novel-chat-note { padding: 5px 10px; font-size: 11px; color: var(--cbw-accent); background: var(--cbw-accent-bg); border-top: 1px solid var(--cbw-border); }

/* 窄屏：固定背景会掉帧，改成滚动 */
@media (max-width: 900px) {
  html, body { background-attachment: scroll, scroll; }
}