*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue','Microsoft YaHei',sans-serif;background:#000;color:#f5f5f7;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.topbar{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:200;background:rgba(0,0,0,0.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.topbar .back{font-size:14px;color:#7c4dff;text-decoration:none;font-weight:400;display:flex;align-items:center;gap:4px}
.topbar .title{font-size:14px;font-weight:600;color:#f5f5f7;position:absolute;left:50%;transform:translateX(-50%)}
.topbar .phase-tag{font-size:12px;color:#86868b;background:#1d1d1f;padding:4px 10px;border-radius:980px}
.topbar .reset-btn{font-size:12px;color:#ff453a;background:none;border:1px solid rgba(255,69,58,0.3);padding:4px 12px;border-radius:980px;cursor:pointer;font-family:inherit;display:none;transition:all .2s}
.topbar .reset-btn:hover{background:#ff453a;color:#fff;border-color:#ff453a}

/* ======== Sections ======== */
.section{max-width:680px;margin:0 auto;padding:100px 24px 80px;display:flex;flex-direction:column;align-items:center}
.section.hidden{display:none}

h1{font-size:32px;font-weight:600;color:#f5f5f7;letter-spacing:-0.5px;text-align:center;margin-bottom:10px}
.sub{font-size:15px;color:#86868b;text-align:center;margin-bottom:40px;line-height:1.7}

/* Upload area */
.upload-zone{width:100%;border:1px dashed #38383a;border-radius:16px;padding:56px 32px;text-align:center;cursor:pointer;transition:all .3s;position:relative}
.upload-zone:hover{border-color:#48484a;background:#0a0a0a}
.upload-zone.dragover{border-color:#48484a;background:#0d0d0f}
.upload-zone.has-file{border-style:solid;border-color:#1d1d1f;background:#1d1d1f;cursor:default;padding:24px}
.upload-icon{margin-bottom:16px}
.upload-icon svg{width:40px;height:40px}
.upload-zone h3{font-size:17px;font-weight:600;color:#f5f5f7;margin-bottom:6px}
.upload-zone p{font-size:14px;color:#86868b}
.upload-zone .formats{font-size:12px;color:#48484a;margin-top:10px}
.upload-hint{font-size:11px;color:#ff9f0a;margin-top:8px;opacity:0.8}
input[type="file"]{display:none}

.file-info{display:none;align-items:center;gap:16px;width:100%}
.file-info.show{display:flex}
.file-icon{width:48px;height:48px;border-radius:12px;background:#2d2d2f;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.file-icon svg{width:24px;height:24px}
.file-detail{flex:1;text-align:left}
.file-detail .name{font-size:15px;color:#f5f5f7;font-weight:500;margin-bottom:2px;word-break:break-all}
.file-detail .size{font-size:13px;color:#86868b}
.file-remove{width:32px;height:32px;border-radius:50%;background:#2d2d2f;border:none;color:#86868b;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.file-remove:hover{background:#38383a;color:#f5f5f7}
.upload-placeholder{}
.upload-placeholder.hidden{display:none}

.start-btn{width:100%;padding:13px;border-radius:12px;border:none;background:#7c4dff;color:#fff;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit;margin-top:28px;display:none}
.start-btn:hover{background:#5e35b1}
.start-btn.show{display:block}
.start-btn:disabled{background:#1d1d1f;color:#48484a;cursor:not-allowed}

/* Project select */
.project-select-group{width:100%;margin-bottom:28px}
.project-select-group label{display:block;font-size:13px;color:#86868b;margin-bottom:10px;font-weight:500}
.project-tabs{display:flex;gap:0;margin-bottom:12px;background:#1d1d1f;border-radius:10px;padding:3px}
.proj-tab{flex:1;padding:8px 0;border:none;background:transparent;color:#86868b;font-size:13px;font-weight:500;cursor:pointer;border-radius:8px;transition:all .2s;font-family:inherit}
.proj-tab.active{background:rgba(124,77,255,0.18);color:#fff;border:1px solid rgba(124,77,255,0.4)}
.proj-tab:hover:not(.active){color:#f5f5f7}
.proj-mode-new input,.proj-mode-existing select{width:100%;padding:12px 16px;border-radius:12px;border:1px solid #38383a;background:#000;color:#f5f5f7;font-size:15px;outline:none;transition:border-color .2s;font-family:inherit;-webkit-appearance:none;appearance:none}
.proj-mode-new input:focus,.proj-mode-existing select:focus{border-color:#48484a}
.proj-mode-new input::placeholder{color:#48484a}
.proj-mode-existing select{cursor:pointer}
.proj-mode-existing select option{background:#1d1d1f;color:#f5f5f7}

/* Steps preview */
.steps{width:100%;margin-top:56px}
.steps h4{font-size:13px;color:#48484a;font-weight:500;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px}
.step{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.step-num{width:32px;height:32px;border-radius:50%;background:#1d1d1f;display:flex;align-items:center;justify-content:center;font-size:14px;color:#86868b;font-weight:600;flex-shrink:0}
.step-content{padding-top:4px}
.step-content .step-title{font-size:15px;color:#f5f5f7;font-weight:500;margin-bottom:4px}
.step-content .step-desc{font-size:14px;color:#48484a;line-height:1.6}

/* ======== Chat Section · 单栏（旧） ======== */
.chat-section{max-width:780px;margin:0 auto;padding:60px 24px 0;display:flex;flex-direction:column;height:calc(100vh - 48px)}
.chat-section.hidden{display:none}

/* ======== Workbench · 双栏（左 chat / 右 preview） ======== */
/* 用 .chat-section.workbench 这个高优先级 selector 覆盖上面的单栏样式 */
.chat-section.workbench{
  max-width:1480px;
  margin:0 auto;
  padding:60px 24px 0;
  display:flex;
  flex-direction:row;
  gap:24px;
  height:calc(100vh - 48px);
  align-items:stretch;
}
.workbench .chat-pane{
  position:relative;
  flex:0 0 480px;
  min-width:380px;
  max-width:520px;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  transition:flex-basis .25s ease, max-width .25s ease, min-width .25s ease;
}

/* ======== chat-pane 折叠按钮 ======== */
/* 按钮挂在 chat-section.workbench 直下，绝对定位贴在 chat-pane 与 preview-pane 的分界线上
   chat-section padding-left:24 + chat-pane width 480 + gap 24 / 2 - btn width 26 / 2 = 503 */
.chat-section.workbench{position:relative}
.chat-pane-toggle{
  position:absolute;
  top:50%;
  left:calc(24px + 480px + 12px - 13px);
  transform:translateY(-50%);
  z-index:50;
  width:26px;
  height:52px;
  border-radius:8px;
  background:#1d1d1f;
  border:1px solid #2d2d2f;
  color:#86868b;
  font-size:16px;
  font-weight:300;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  line-height:1;
  padding:0;
  transition:all .2s, left .25s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.chat-pane-toggle:hover{background:#7c4dff;color:#fff;border-color:#7c4dff}

/* 桌面折叠态：chat-pane 收成 36px 窄条，按钮跟着滑到 36 + gap/2 - btn/2 位置 */
.workbench .chat-pane.collapsed{
  flex:0 0 36px;
  min-width:36px;
  max-width:36px;
  overflow:visible;
  border-right:1px dashed #1d1d1f;
}
.workbench .chat-pane.collapsed > *{display:none !important}
.chat-section.workbench:has(.chat-pane.collapsed) .chat-pane-toggle{
  left:calc(24px + 36px + 12px - 13px);
}
/* :has 不支持时退化到 .viewing-preview class（toggleChatPane 同步打的兜底） */
.chat-section.workbench.viewing-preview .chat-pane-toggle{
  left:calc(24px + 36px + 12px - 13px);
}
.workbench .preview-pane{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  height:100%;
  background:#0a0a0c;
  border:1px solid #1d1d1f;
  border-radius:16px;
  overflow:hidden;
}
.preview-pane-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid #1d1d1f;
  flex-shrink:0;
  background:rgba(20,20,24,0.6);
}
.preview-pane-title{display:flex;align-items:center;gap:8px;font-size:13px;color:#d1d1d6;font-weight:500}
.preview-pane-title .preview-dot{width:6px;height:6px;border-radius:50%;background:#a78bfa;box-shadow:0 0 6px rgba(167,139,250,0.6)}
.preview-pane-actions{display:flex;gap:6px}
.preview-toolbtn{
  width:28px;height:28px;border-radius:8px;border:1px solid #2d2d2f;background:transparent;color:#86868b;
  font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:inherit;
}
.preview-toolbtn:hover{background:#1d1d1f;color:#f5f5f7;border-color:#38383a}

.preview-pane-body{
  flex:1 1 0;
  min-height:0;
  overflow-y:auto;
  padding:18px 20px 24px;
  scrollbar-width:thin;
  scrollbar-color:#38383a transparent;
}
.preview-pane-body::-webkit-scrollbar{width:6px}
.preview-pane-body::-webkit-scrollbar-thumb{background:#2d2d2f;border-radius:3px}
.preview-pane-body::-webkit-scrollbar-thumb:hover{background:#3a3a3f}

.preview-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;text-align:center;padding:40px 20px;
}
.preview-empty-icon{margin-bottom:16px;opacity:0.5}
.preview-empty-icon svg{width:56px;height:56px}
.preview-empty-text{font-size:14px;color:#86868b;margin-bottom:6px;font-weight:500}
.preview-empty-sub{font-size:12px;color:#48484a;max-width:280px;line-height:1.6}

/* 流式中的占位（区别于初始空状态：有节奏的脉冲） */
.preview-streaming-banner{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;margin-bottom:12px;
  background:rgba(167,139,250,0.08);
  border:1px solid rgba(167,139,250,0.2);
  border-radius:10px;
  font-size:12px;color:#a78bfa;
}
.preview-streaming-banner .pulse{
  width:8px;height:8px;border-radius:50%;background:#a78bfa;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.3);opacity:0.5}
}

/* preview pane 里 outline cards 字号微调（兜底用，正常右侧不再渲染 cards） */
.preview-pane-body .outline-cards{gap:8px;margin:0}
.preview-pane-body .outline-card{background:#15151a;border-color:#23232a}
.preview-pane-body .outline-card-header{padding:12px 14px}
.preview-pane-body .outline-card-header h4{font-size:13px}
.preview-pane-body .outline-card.open .outline-card-body{padding:0 14px 12px}
.preview-pane-body .outline-card-body p,
.preview-pane-body .outline-card-body ul,
.preview-pane-body .outline-card-body table{font-size:12.5px}

/* ======== 右侧大纲完整 markdown 渲染（preview-fulltext） ======== */
.preview-fulltext{
  font-size:14px;
  line-height:1.85;
  color:#d1d1d6;
  word-break:break-word;
}
.preview-fulltext h1,
.preview-fulltext h2,
.preview-fulltext h3{
  color:#f5f5f7;
  font-weight:600;
  margin:24px 0 10px;
  padding-bottom:6px;
  border-bottom:1px solid #1d1d1f;
}
.preview-fulltext h1{font-size:20px}
.preview-fulltext h2{font-size:17px;color:#a78bfa;border-color:rgba(167,139,250,0.2)}
.preview-fulltext h3{font-size:15px;border:none;padding:0;margin-top:18px}
.preview-fulltext h2:first-child,
.preview-fulltext h1:first-child{margin-top:4px}
.preview-fulltext p{margin:8px 0}
.preview-fulltext ul,
.preview-fulltext ol{padding-left:20px;margin:8px 0}
.preview-fulltext li{margin:4px 0}
.preview-fulltext strong,
.preview-fulltext b{color:#f5f5f7}
.preview-fulltext code{background:#1d1d1f;padding:2px 6px;border-radius:4px;font-size:12.5px;color:#f5f5f7}
.preview-fulltext blockquote{
  border-left:3px solid #38383a;
  padding:4px 14px;color:#86868b;
  margin:12px 0;background:#0e0e10;border-radius:0 8px 8px 0;
}
.preview-fulltext hr{border:none;border-top:1px solid #1d1d1f;margin:18px 0}
.preview-fulltext table{
  width:100%;border-collapse:collapse;margin:12px 0;
  font-size:12.5px;
}
.preview-fulltext th{
  background:#1d1d1f;color:#a1a1a6;padding:8px 10px;text-align:left;
  font-weight:600;border:1px solid #2d2d2f;
}
.preview-fulltext td{
  padding:8px 10px;border:1px solid #2d2d2f;color:#d1d1d6;vertical-align:top;
}
.preview-fulltext tr:nth-child(even) td{background:#0e0e10}

/* 人物关系图（与 outline-preview 共用同一套视觉） */
.preview-fulltext .relation-graph{
  position:relative;width:100%;height:520px;margin:14px 0 18px;
  background:radial-gradient(ellipse at center,#0d1117 0%,#080b10 100%);
  border-radius:14px;overflow:hidden;cursor:default;
  border:1px solid rgba(255,255,255,0.05);
}
.preview-fulltext .relation-graph canvas{display:block}
.preview-fulltext .relation-graph .graph-hint{
  position:absolute;bottom:10px;right:14px;
  font-size:11px;color:rgba(255,255,255,0.2);pointer-events:none;
}

/* 左侧 bubble 内的"已生成→见右侧"小卡片 */
.outline-mini-ref{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:rgba(167,139,250,0.08);
  border:1px solid rgba(167,139,250,0.25);
  border-radius:10px;
  font-size:13px;color:#c8b8ff;
}
.outline-mini-ref .arrow{font-size:16px;color:#a78bfa}
.outline-mini-ref .meta{font-size:11px;color:#86868b;margin-top:2px}

/* 响应式：< 1100px 折叠为单栏（chat 优先，预览面板隐藏并提供浮窗按钮） */
@media (max-width: 1100px){
  /* 窄屏：chat 与 preview 互斥显示，由右下角悬浮按钮切换 */
  .chat-section.workbench{
    max-width:780px;
    flex-direction:row;
    gap:0;
  }
  .workbench .chat-pane{
    flex:1 1 auto;
    max-width:none;
    min-width:0;
    width:100%;
  }
  .workbench .preview-pane{display:none}

  /* 切到 preview 模式：chat 隐藏内容（保留容器作 0 宽占位），preview 占满 */
  .workbench.viewing-preview .chat-pane{
    flex:0 0 0;
    min-width:0;
    width:0;
    overflow:hidden;
    border:none;
  }
  .workbench.viewing-preview .preview-pane{
    display:flex;
    flex:1 1 auto;
    width:100%;
  }

  /* 响应式按钮：浮动在屏幕右侧垂直居中的 FAB 圆形按钮（避开顶栏/底部输入区） */
  .chat-pane-toggle{
    position:fixed !important;
    top:50% !important;
    left:auto !important;
    right:8px !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    width:38px !important;
    height:38px !important;
    border-radius:50% !important;
    font-size:18px !important;
    background:rgba(96,165,250,0.85) !important;
    color:#fff !important;
    border-color:rgba(96,165,250,0.5) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.45) !important;
    opacity:0.85 !important;
  }
  .chat-pane-toggle:hover,
  .chat-pane-toggle:active{
    background:#7c4dff !important;
    opacity:1 !important;
  }
}

.phase-indicator{display:flex;align-items:center;gap:8px;padding:12px 0;margin-bottom:8px;flex-shrink:0}
.phase-dot{width:6px;height:6px;border-radius:50%;background:#30d158}
.phase-label{font-size:13px;color:#86868b;font-weight:500}

.chat-messages{flex:1;overflow-y:auto;padding:8px 0 16px;-ms-overflow-style:none;scrollbar-width:thin;scrollbar-color:#38383a transparent}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:#38383a;border-radius:2px}

.msg{margin-bottom:16px;display:flex;gap:12px;align-items:flex-start;animation:msgIn .3s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.msg-avatar{width:32px;height:32px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.msg-ai .msg-avatar{background:#1d1d1f;color:#86868b}
.msg-user .msg-avatar{background:#7c4dff;color:#fff}
.msg-user{flex-direction:row-reverse}

.msg-bubble{max-width:85%;padding:14px 18px;border-radius:16px;font-size:14px;line-height:1.8;word-break:break-word}
.msg-ai .msg-bubble{background:#1d1d1f;color:#d1d1d6;border-bottom-left-radius:6px}
.msg-user .msg-bubble{background:#7c4dff;color:#fff;border-bottom-right-radius:6px}

.msg-bubble h1,.msg-bubble h2,.msg-bubble h3{color:#f5f5f7;font-weight:600;margin:16px 0 8px}
.msg-bubble h1{font-size:20px}.msg-bubble h2{font-size:17px}.msg-bubble h3{font-size:15px}
.msg-bubble table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13px}
.msg-bubble th{background:#2d2d2f;color:#a1a1a6;padding:6px 10px;text-align:left;font-weight:500}
.msg-bubble td{padding:6px 10px;border-bottom:1px solid #2d2d2f;color:#d1d1d6}
.msg-bubble strong,.msg-bubble b{color:#f5f5f7}
.msg-bubble code{background:#2d2d2f;padding:2px 5px;border-radius:4px;font-size:12px}
.msg-bubble ul,.msg-bubble ol{padding-left:18px;margin:6px 0}
.msg-bubble li{margin:3px 0}
.msg-bubble hr{border:none;border-top:1px solid #2d2d2f;margin:12px 0}
.msg-bubble blockquote{border-left:3px solid #38383a;padding-left:14px;color:#86868b;margin:10px 0}
.msg-user .msg-bubble h1,.msg-user .msg-bubble h2,.msg-user .msg-bubble h3,.msg-user .msg-bubble strong,.msg-user .msg-bubble b{color:#fff}
.msg-user .msg-bubble th{background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.8)}
.msg-user .msg-bubble td{border-color:rgba(255,255,255,0.1);color:rgba(255,255,255,0.9)}

/* Confirm bar */
.confirm-bar{display:flex;gap:10px;margin:12px 0 16px;padding-left:44px}
.confirm-bar button{padding:8px 20px;border-radius:10px;border:1px solid #38383a;background:transparent;color:#f5f5f7;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit}
.confirm-bar button:hover{background:#1d1d1f}
.confirm-bar button.primary{background:#7c4dff;border-color:#7c4dff;color:#fff}
.confirm-bar button.primary:hover{background:#5e35b1}

/* Typing indicator */
.typing{display:flex;gap:4px;padding:14px 18px}
.typing span{width:6px;height:6px;border-radius:50%;background:#48484a;animation:typeDot 1.4s ease-in-out infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes typeDot{0%,60%,100%{opacity:.3;transform:scale(1)}30%{opacity:1;transform:scale(1.2)}}

/* Chat input */
.chat-input-area{flex-shrink:0;padding:12px 0 24px;border-top:1px solid #1d1d1f}
.chat-input-wrap{display:flex;gap:10px;align-items:flex-end}
.chat-input{flex:1;padding:12px 16px;border-radius:12px;border:1px solid #38383a;background:#000;color:#f5f5f7;font-size:14px;outline:none;font-family:inherit;resize:none;min-height:44px;max-height:120px;line-height:1.5;transition:border-color .2s}
.chat-input:focus{border-color:#48484a}
.chat-input::placeholder{color:#48484a}
.chat-send{width:44px;height:44px;border-radius:12px;border:none;background:#7c4dff;color:#fff;font-size:18px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-send:hover{background:#5e35b1}
.chat-send:disabled{background:#1d1d1f;color:#48484a;cursor:not-allowed}
.chat-scope{font-size:11px;color:#48484a;text-align:center;margin-top:8px}

/* Progress bar */
.progress-bar{width:100%;height:3px;background:#1d1d1f;border-radius:2px;margin-bottom:12px;overflow:hidden;flex-shrink:0}
.progress-fill{height:100%;background:#7c4dff;border-radius:2px;transition:width .5s ease;width:0%}
.progress-text{font-size:11px;color:#48484a;text-align:right;margin-bottom:8px;flex-shrink:0}


/* Collapsible outline cards */
.outline-cards{display:flex;flex-direction:column;gap:10px;margin:8px 0}
.outline-card{background:#1a1a1e;border:1px solid #2d2d2f;border-radius:12px;overflow:hidden;transition:all .3s}
.outline-card:hover{border-color:#3a3a3f}
.outline-card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;user-select:none}
.outline-card-header h4{font-size:14px;font-weight:600;color:#f5f5f7;margin:0}
.outline-card-header .toggle{font-size:18px;color:#86868b;transition:transform .2s}
.outline-card.open .toggle{transform:rotate(180deg)}
.outline-card-body{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 16px}
.outline-card.open .outline-card-body{max-height:2000px;padding:0 16px 14px}
.outline-card-body p,.outline-card-body ul,.outline-card-body table{font-size:13px;color:#c8c8cc;line-height:1.7;margin-bottom:8px}
.outline-card-body table{width:100%;border-collapse:collapse;margin:8px 0}
.outline-card-body th,.outline-card-body td{padding:8px 10px;border:1px solid #2d2d2f;font-size:12px;text-align:left}
.outline-card-body th{background:#111;color:#86868b;font-weight:600}
.outline-card-body td{color:#d1d1d6}
.outline-card .card-summary{font-size:12px;color:#86868b;padding:0 16px 12px;display:block}
.outline-card.open .card-summary{display:none}

/* Preview modal */
.preview-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:400;overflow-y:auto;padding:40px 20px}
.preview-overlay.active{display:block}
.preview-container{max-width:800px;margin:0 auto;background:#1d1d1f;border-radius:18px;padding:32px;position:relative}
.preview-container .close-preview{position:absolute;top:16px;right:20px;background:none;border:none;color:#86868b;font-size:24px;cursor:pointer}
.preview-container .close-preview:hover{color:#f5f5f7}
.preview-container h2{font-size:22px;font-weight:600;color:#f5f5f7;margin-bottom:20px}

.confirm-bar .preview-btn{background:#1d1d1f;color:#a78bfa;border:1px solid rgba(167,139,250,0.3);transition:all .2s}
.confirm-bar .preview-btn:hover{background:#a78bfa;color:#fff;border-color:#a78bfa}

/* 画风配置弹窗 */
.style-grid{display:flex;flex-wrap:wrap;gap:8px}
.style-chip{padding:8px 16px;border-radius:10px;border:1px solid #38383a;background:transparent;color:#86868b;font-size:13px;cursor:pointer;transition:all .2s;font-family:inherit}
.style-chip:hover{border-color:#86868b;color:#f5f5f7}
.style-chip.selected{background:#7c4dff;color:#fff;border-color:#7c4dff}

.ratio-grid{display:flex;gap:10px}
.ratio-chip{flex:1;padding:14px 0;border-radius:12px;border:1px solid #38383a;background:transparent;color:#86868b;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit;text-align:center}
.ratio-chip:hover{border-color:#86868b;color:#f5f5f7}
.ratio-chip.selected{background:#7c4dff;color:#fff;border-color:#7c4dff}
.ratio-chip .ratio-desc{display:block;font-size:11px;font-weight:400;margin-top:2px;opacity:0.7}

/* Typewriter stream (non-flickering) */
.tw-stream{white-space:pre-wrap;word-break:break-word}
.tw-cursor{display:inline-block;margin-left:1px;color:#7c4dff;font-weight:400;transform:translateY(1px);animation:twBlink 1s steps(2,start) infinite}
@keyframes twBlink{to{visibility:hidden}}

/* ============================================================== */
/* ChatGPT 风格 plain stream 覆盖（2026-05-13）                    */
/* 触发：.chat-section.plain-stream 容器（pipe-a.html 已套上）      */
/* 目标：去 bubble、去头像，让分析过程像 ChatGPT 一样裸文本铺开   */
/*       ＋ 顶部 sticky 状态栏，全程可见 elapsed/进度，不再"卡白"  */
/* ============================================================== */

.chat-section.plain-stream{
  max-width:880px;
  margin:0 auto;
  padding:60px 32px 0;     /* 60px = 顶部 topbar(48px) + 12px 呼吸 */
  height:calc(100vh - 8px);
  display:flex;flex-direction:column;
  box-sizing:border-box;
}

/* —— 顶部 sticky 状态栏（永远可见，从第 0 秒就有动画+计时） —— */
.chat-section.plain-stream .phase-status{
  position:sticky; top:0; z-index:30;
  background:rgba(20,20,22,0.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  padding:18px 0 12px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
}
.chat-section.plain-stream .phase-status-row{display:flex;align-items:center;gap:12px}
.chat-section.plain-stream .phase-dot{
  width:10px;height:10px;border-radius:50%;background:#7c4dff;flex-shrink:0;
  box-shadow:0 0 12px rgba(124,77,255,0.55);
  animation:phasePulse 1.4s ease-in-out infinite;
}
.chat-section.plain-stream .phase-dot.streaming{background:#a78bfa;box-shadow:0 0 12px rgba(167,139,250,0.6)}
.chat-section.plain-stream .phase-dot.done{background:#30d158;animation:none;box-shadow:0 0 10px rgba(48,209,88,0.55)}
.chat-section.plain-stream .phase-dot.error{background:#ff453a;animation:none;box-shadow:0 0 10px rgba(255,69,58,0.55)}
@keyframes phasePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(0.7);opacity:0.45}}

.chat-section.plain-stream .phase-label{
  flex:1;font-size:14px;color:#f5f5f7;font-weight:500;letter-spacing:0.2px;
  text-align:left;margin:0;
}
.chat-section.plain-stream .phase-elapsed{
  font-family:'SF Mono',Consolas,'Roboto Mono',monospace;
  font-size:12px;color:#86868b;flex-shrink:0;
  background:#1d1d1f;padding:3px 10px;border-radius:6px;
}
.chat-section.plain-stream .progress-bar{
  margin:10px 0 0;height:2px;background:rgba(255,255,255,0.06);border-radius:2px;
}
.chat-section.plain-stream .progress-fill{
  height:100%;background:linear-gradient(90deg,#7c4dff,#a78bfa);border-radius:2px;
  transition:width .4s ease;
}
.chat-section.plain-stream .phase-hint{
  font-size:11px;color:#6e6e73;margin-top:8px;letter-spacing:0.1px;
}

/* —— 主体：去 flex 横排，改回正常块级文档 —— */
.chat-section.plain-stream .plain-stream-body{
  flex:1;overflow-y:auto;
  padding:28px 0 80px;
  scrollbar-width:thin;scrollbar-color:#38383a transparent;
}

/* —— 去掉所有 bubble/avatar 包装，让 .msg-bubble 变成纯文章块 —— */
.chat-section.plain-stream .msg{
  display:block;            /* 干掉 flex 横排 */
  margin:0 0 36px;
  animation:plainIn .35s ease;
  gap:0;
}
@keyframes plainIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.chat-section.plain-stream .msg-avatar{display:none !important}  /* 不再要头像 */
.chat-section.plain-stream .msg-user{flex-direction:row}         /* 反向也撤销 */

.chat-section.plain-stream .msg-bubble{
  max-width:none;            /* ChatGPT 全宽 */
  background:transparent;    /* 去气泡底色 */
  padding:0;                 /* 去气泡内边距 */
  border-radius:0;           /* 去圆角 */
  font-size:15px;
  line-height:1.85;
  color:#e8e8ed;
}

/* 用户消息：左侧紫色细线代替紫色气泡 */
.chat-section.plain-stream .msg-user .msg-bubble{
  background:transparent;color:#d1d1d6;
  padding:2px 0 2px 14px;
  border-left:2px solid rgba(124,77,255,0.45);
  border-radius:0;
  font-size:14px;
}

/* AI 消息：保持 ChatGPT 风格的文本 */
.chat-section.plain-stream .msg-ai .msg-bubble{background:transparent;color:#e8e8ed}

/* 之前 .typing 是个嵌在 bubble 里的小三点动画——禁掉，改用顶部 status dot */
.chat-section.plain-stream .typing{display:none !important}
.chat-section.plain-stream #typingMsg{display:none !important}

/* 操作栏：撤掉 padding-left:44px（那是为头像让位的） */
.chat-section.plain-stream .confirm-bar{padding-left:0;margin:14px 0 28px;flex-wrap:wrap}

/* 流式光标 */
.chat-section.plain-stream .tw-cursor{color:#a78bfa}

/* ============================================================== */
/* Phase Narration（2026-05-13b）                                  */
/* 首字到达前在 bubble 里铺一条"AI 正在干嘛"的时间线，模拟 ChatGPT */
/* 的 thinking 流，让用户在 0~120s 冷启期间始终有感知。            */
/* 首字到达 → JS 调 destroy() 移除整段 narration，让真实文本接管。  */
/* ============================================================== */
.phase-narration{
  display:flex;flex-direction:column;gap:14px;
  padding:6px 0 4px;max-width:680px;
  font-size:14px;line-height:1.5;
}
.phase-narration .narration-step{
  display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px;
  opacity:0;transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease, color .3s;
  color:#6e6e73;
}
.phase-narration .narration-step.visible{opacity:1;transform:none}
.phase-narration .narration-step.active{color:#f5f5f7}
.phase-narration .narration-step.done{color:#86868b}

.phase-narration .step-icon{
  width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;border-radius:50%;
  background:rgba(124,77,255,0.18);color:#7c4dff;
}
.phase-narration .narration-step.active .step-icon{
  background:transparent;color:#a78bfa;
  border:2px solid rgba(167,139,250,0.35);border-top-color:#a78bfa;
  animation:narrSpin 0.9s linear infinite;font-size:0;
}
.phase-narration .narration-step.done .step-icon{
  background:rgba(48,209,88,0.16);color:#30d158;
}
@keyframes narrSpin{to{transform:rotate(360deg)}}

.phase-narration .step-text{font-size:14px;letter-spacing:0.1px}
.phase-narration .step-time{
  font-family:'SF Mono',Consolas,'Roboto Mono',monospace;
  font-size:11px;color:#6e6e73;
}

.phase-narration .narration-foot{
  margin-top:6px;font-size:12px;color:#6e6e73;
  display:flex;align-items:center;gap:8px;letter-spacing:0.1px;
}
.phase-narration .narration-foot .foot-dot{
  width:6px;height:6px;border-radius:50%;background:#a78bfa;
  animation:narrBlink 1.2s ease-in-out infinite;
}
@keyframes narrBlink{0%,100%{opacity:1}50%{opacity:0.25}}

/* ============================================================== */
/* Outline Generation Overlay（2026-05-13b）                       */
/* phase1 流完后跳转 outline-preview 之前，铺一层全屏半透明蒙版，   */
/* 中央 spinner + 文案，告诉用户"我在切到大纲了"，避免突兀闪屏。   */
/* ============================================================== */
.outline-gen-overlay{
  position:fixed;inset:0;z-index:2147483646;
  background:rgba(8,8,10,0.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.outline-gen-overlay.show{opacity:1;pointer-events:auto}

.outline-gen-overlay .overlay-card{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:36px 56px;border-radius:22px;
  background:linear-gradient(180deg,rgba(40,40,44,0.85),rgba(28,28,32,0.85));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 24px 60px rgba(0,0,0,0.55), 0 0 80px rgba(124,77,255,0.18);
  transform:translateY(8px) scale(0.98);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.outline-gen-overlay.show .overlay-card{transform:none}

.outline-gen-overlay .overlay-spinner{
  width:46px;height:46px;border-radius:50%;
  border:3px solid rgba(167,139,250,0.18);
  border-top-color:#a78bfa;border-right-color:#a78bfa;
  animation:overlaySpin 0.9s linear infinite;
}
@keyframes overlaySpin{to{transform:rotate(360deg)}}

.outline-gen-overlay .overlay-title{
  font-size:17px;color:#f5f5f7;font-weight:600;letter-spacing:0.3px;
}
.outline-gen-overlay .overlay-sub{
  font-size:12px;color:#86868b;letter-spacing:0.2px;
  display:flex;align-items:center;gap:6px;
}
.outline-gen-overlay .overlay-sub .sub-dot{
  width:5px;height:5px;border-radius:50%;background:#30d158;
  box-shadow:0 0 8px rgba(48,209,88,0.55);
}

/* ============================================================== */
/* workbench + plain-stream 组合（2026-05-13 narr2 复活双栏）      */
/* 原 .plain-stream 把 max-width / flex-direction / padding 锁死了 */
/* 单栏，必须通过 .workbench.plain-stream 这个高特异性选择器把外层 */
/* 重新拉回双栏，让 chat-pane 内部继续走 plain-stream 的裸文本流。  */
/* ============================================================== */
.chat-section.workbench.plain-stream{
  max-width:1480px;
  margin:0 auto;
  padding:60px 24px 0;
  flex-direction:row;
  gap:24px;
  height:calc(100vh - 48px);
  align-items:stretch;
  position:relative;
}
.chat-section.workbench.plain-stream .chat-pane{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  flex:0 0 480px;
  min-width:380px;
  max-width:520px;
  transition:flex-basis .25s ease, max-width .25s ease, min-width .25s ease;
}
/* sticky 状态栏在 chat-pane 内部生效（不再 stick 到 viewport 顶） */
.chat-section.workbench.plain-stream .chat-pane .phase-status{
  position:sticky;top:0;z-index:10;
}
/* 流式裸文本主体接管 chat-pane 剩余高度，内部独立滚动 */
.chat-section.workbench.plain-stream .chat-pane .plain-stream-body{
  flex:1 1 0;
  min-height:0;
  overflow-y:auto;
  padding:18px 0 80px;
}
/* 收起态：chat-pane 收成 36px 窄条，preview-pane 接管全宽 */
.chat-section.workbench.plain-stream .chat-pane.collapsed{
  flex:0 0 36px;
  min-width:36px;
  max-width:36px;
  overflow:visible;
  border-right:1px dashed #1d1d1f;
}
.chat-section.workbench.plain-stream .chat-pane.collapsed > *{display:none !important}

/* error 状态下 phase-hint 文字变红（之前是浅灰 #6e6e73 看不清错误信息） */
.chat-section.workbench.plain-stream .phase-status:has(.phase-dot.error) .phase-hint,
.chat-section.plain-stream .phase-status:has(.phase-dot.error) .phase-hint{
  color:#ff453a;
  font-weight:500;
}

/* 窄屏（≤1100px）退化回单栏：右栏隐藏，左栏占满 */
@media (max-width: 1100px){
  .chat-section.workbench.plain-stream{
    max-width:920px;
    flex-direction:column;
    gap:0;
    padding:60px 24px 0;
  }
  .chat-section.workbench.plain-stream .chat-pane{
    flex:1 1 auto;
    min-width:0;
    max-width:none;
  }
  .chat-section.workbench.plain-stream .preview-pane{display:none}
  .chat-section.workbench.plain-stream .chat-pane-toggle{display:none}
}

/* ============================================================== */
/* 取消分析按钮（B5）                                              */
/* 仅在流式期间出现，点击后 abort fetch + 复位 UI                  */
/* ============================================================== */
.phase-cancel-btn{
  font-size:11px;color:#86868b;
  background:transparent;border:1px solid #38383a;
  padding:3px 10px;border-radius:6px;
  cursor:pointer;font-family:inherit;
  transition:all .15s;flex-shrink:0;
}
.phase-cancel-btn:hover{
  border-color:#ff453a;color:#ff453a;
  background:rgba(255,69,58,0.08);
}

/* ============================================================== */
/* 上传后预览卡片（B1）                                            */
/* 显示前 200 字 + 字数 + 检测集数，让用户开始拉片前先确认         */
/* ============================================================== */
.script-preview-card{
  width:100%;margin-top:18px;
  background:#0a0a0a;border:1px solid #1d1d1f;border-radius:12px;
  padding:14px 16px;
  font-size:13px;color:#d1d1d6;line-height:1.7;
  display:flex;flex-direction:column;gap:10px;
}
.script-preview-card .preview-meta{
  display:flex;flex-wrap:wrap;gap:10px;
  font-size:12px;color:#86868b;
}
.script-preview-card .preview-meta .meta-item{
  background:#1d1d1f;border-radius:6px;padding:3px 10px;
  display:inline-flex;align-items:center;gap:6px;
}
.script-preview-card .preview-meta .meta-item.warn{
  background:rgba(255,159,10,0.12);color:#ff9f0a;
  border:1px solid rgba(255,159,10,0.25);
}
.script-preview-card .preview-meta .meta-item.error{
  background:rgba(255,69,58,0.12);color:#ff453a;
  border:1px solid rgba(255,69,58,0.25);
}
.script-preview-card .preview-text{
  font-size:12.5px;color:#a8a8ad;line-height:1.75;
  max-height:120px;overflow:hidden;
  position:relative;
  font-family:-apple-system,BlinkMacSystemFont,'Microsoft YaHei',sans-serif;
  white-space:pre-wrap;word-break:break-word;
}
.script-preview-card .preview-text::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;height:32px;
  background:linear-gradient(180deg,transparent,#0a0a0a);
  pointer-events:none;
}