/* 写作台视图 · 样式（第 4 期 4.2.1）。
 * 复用 base.css 的设计令牌，不新增颜色，全部走 :root 变量。
 */

#writingViewBody{padding:var(--sp-6) var(--sp-7) var(--sp-7);max-width:960px}
#writingViewBody .wr-empty-title{margin:0;font-family:"Songti SC","SimSun",serif;font-size:var(--fs-xl);color:var(--ink)}
#writingViewBody .wr-empty-hint{color:var(--ink-3)}
#writingViewBody .wr-hint{color:var(--ink-3);font-size:var(--fs-sm)}

#writingViewBody .wr-head{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:var(--sp-3);margin-bottom:var(--sp-3)}
#writingViewBody .wr-chapter{font-family:"Songti SC","SimSun",serif;font-size:var(--fs-lg);font-weight:600;color:var(--ink)}
#writingViewBody .wr-temp{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--ink-3);font-size:var(--fs-sm)}

#writingViewBody .wr-select,
#writingViewBody .wr-input{
  font:inherit;font-size:var(--fs-sm);color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--radius);padding:var(--sp-2);
}
#writingViewBody .wr-select{padding:var(--sp-1) var(--sp-2)}

#writingViewBody .wr-style{margin-bottom:var(--sp-4)}
#writingViewBody .wr-style-input{width:100%;resize:vertical}

#writingViewBody .wr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-5)}
#writingViewBody .wr-card{border:1px solid var(--rule);border-radius:var(--radius);padding:var(--sp-4);background:var(--paper)}
#writingViewBody .wr-card-title{font-weight:600;color:var(--ink);margin-bottom:var(--sp-1)}
#writingViewBody .wr-card-hint{color:var(--ink-3);font-size:var(--fs-xs);line-height:1.6;margin-bottom:var(--sp-3)}
#writingViewBody .wr-card-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}

#writingViewBody .wr-list-title{font-weight:600;color:var(--ink);margin:var(--sp-2) 0 var(--sp-3)}
#writingViewBody .wr-list{display:flex;flex-direction:column;gap:var(--sp-3)}
#writingViewBody .wr-cand{border:1px solid var(--rule);border-radius:var(--radius);padding:var(--sp-4);background:var(--paper)}
#writingViewBody .wr-cand-meta{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-2)}
#writingViewBody .wr-cand-key{font-size:var(--fs-xs);padding:0 var(--sp-2);border-radius:var(--radius);background:var(--paper-2);color:var(--ink-3);border:1px solid var(--rule)}
#writingViewBody .wr-cand-status{font-size:var(--fs-xs);color:var(--ink-3)}
#writingViewBody .wr-cand-title{font-weight:600;color:var(--ink);margin-bottom:var(--sp-2)}
#writingViewBody .wr-cand-body{
  white-space:pre-wrap;word-break:break-word;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:var(--radius);padding:var(--sp-3);
  font:inherit;font-size:var(--fs-sm);color:var(--ink-2);max-height:220px;overflow:auto;margin:0;
}
#writingViewBody .wr-cand-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap}

/* 按钮 */
#writingViewBody .wr-btn,.wr-dlg .wr-btn{
  font:inherit;font-size:var(--fs-sm);cursor:pointer;border-radius:var(--radius);
  border:1px solid var(--rule);background:var(--paper);color:var(--ink-2);
  padding:var(--sp-1) var(--sp-3);min-height:34px;
}
#writingViewBody .wr-btn:hover,.wr-dlg .wr-btn:hover{border-color:var(--ink-3);color:var(--ink)}
#writingViewBody .wr-btn-primary,.wr-dlg .wr-btn-primary{background:var(--accent);color:var(--paper);border-color:var(--accent)}
#writingViewBody .wr-btn-ghost,.wr-dlg .wr-btn-ghost{background:transparent}
#writingViewBody .wr-btn:disabled{opacity:.5;cursor:default}

/* 弹层 */
.wr-dlg-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.wr-dlg{background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--sp-5);width:min(560px,92vw);max-height:86vh;overflow:auto}
.wr-dlg .wr-dlg-title{font-weight:600;margin:0 0 var(--sp-3)}
.wr-dlg .wr-input{width:100%;resize:vertical;margin-bottom:var(--sp-2)}
.wr-dlg .wr-hint{color:var(--ink-3);font-size:var(--fs-sm);margin:var(--sp-1) 0 var(--sp-2)}
.wr-dlg .wr-mode-row{display:flex;gap:var(--sp-4);margin:var(--sp-2) 0}
.wr-dlg .wr-radio{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-2)}
.wr-dlg .wr-dlg-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-4)}
.wr-dlg .wr-pre{
  white-space:pre-wrap;word-break:break-word;font-size:var(--fs-xs);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--sp-3);max-height:50vh;overflow:auto;
}


/* ---------------- 流式开关 / 目标字数 / 流式输出（B1/A4/C1） ---------------- */

.wr-stream {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer;
  user-select: none;
}
.wr-stream input { margin: 0; }

.wr-target {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; margin: var(--sp-2) 0;
}
.wr-target-label { font-size: var(--fs-sm); color: var(--ink-2); }
.wr-target-input { width: 140px; }
.wr-target-hint { font-size: var(--fs-xs); color: var(--ink-3); }

.wr-stream-out {
  margin: var(--sp-2) 0 0; padding: var(--sp-3);
  max-height: 320px; overflow-y: auto;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--fs-sm); line-height: 1.7; white-space: pre-wrap;
  word-break: break-word;
}
.wr-err { color: var(--accent); }


/* ---------------- 块C：写作页本章配图 ---------------- */
.ws-illustrations { margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--rule-2); }
.ws-ill-head { display: flex; align-items: center; gap: var(--sp-3); }
.ws-ill-head h3 { margin: 0; font-size: var(--fs-lg); }
.ws-ill-hint { color: var(--ink-3); font-size: var(--fs-xs); margin: var(--sp-2) 0; }
.ws-ill-grid { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ws-ill-cell { border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; background: var(--paper-2); }
.ws-ill-img { width: 100%; height: 180px; object-fit: cover; display: block;
  cursor: pointer; }
.ws-ill-img:hover { opacity: .85; }
.ws-ill-cap { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs);
  color: var(--ink-3); }
.wr-ill-pos, .wr-ill-neg { width: 100%; font-family: inherit; font-size: var(--fs-sm); }