/* 写作工作台 · 样式
 * 复用 base.css 的设计令牌（--paper/--ink/--accent/--rule…），
 * 保持与阅读页同一套视觉语言：单 accent、hairline、无阴影无渐变。
 */

/* 统一的隐藏规则。
 * 这些块都设了 display:flex，会盖掉浏览器对 [hidden] 的默认 display:none，
 * 导致切视图时旧面板没真的藏起来（与目标面板叠在一起）。
 * 这里显式声明，确保 hidden 始终生效。 */
.ws-tree[hidden],
.ws-editor[hidden],
.ws-writing[hidden],
.ws-history[hidden],
.set-layout[hidden],
.ws-topbar .topbar-right[hidden],
#saveState[hidden],
#historyBtn[hidden],
#saveBtn[hidden] {
  display: none;
}

.ws-body{height:100vh;display:flex;flex-direction:column;overflow:hidden}

.ws-topbar{gap:var(--sp-3)}
.ws-crumb{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);color:var(--ink-3);overflow:hidden;white-space:nowrap;
}
.ws-back{
  flex:0 0 auto;color:var(--ink-2);cursor:pointer;font-family:inherit;
  background:transparent;border:1px solid var(--rule);border-radius:var(--radius);
  padding:5px 10px;font-size:var(--fs-xs);margin-right:var(--sp-2);
}
.ws-back:hover{border-color:var(--ink-3);color:var(--ink)}
.ws-crumb-novel{color:var(--ink-2)}
.ws-crumb-chap{color:var(--ink);font-weight:550;overflow:hidden;text-overflow:ellipsis}

/* 保存状态指示灯 */
.ws-save-state{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap;
}
.ws-dot{
  width:7px;height:7px;border-radius:50%;background:var(--ink-3);
  flex:0 0 auto;
}
.ws-save-state[data-state="saved"]{color:var(--ok)}
.ws-save-state[data-state="saved"] .ws-dot{background:var(--ok)}
.ws-save-state[data-state="dirty"]{color:var(--warn)}
.ws-save-state[data-state="dirty"] .ws-dot{background:var(--warn)}
.ws-save-state[data-state="saving"]{color:var(--ink-3)}
.ws-save-state[data-state="saving"] .ws-dot{background:var(--ink-3);animation:wsPulse 1s infinite}
.ws-save-state[data-state="error"]{color:var(--accent)}
.ws-save-state[data-state="error"] .ws-dot{background:var(--accent)}
@keyframes wsPulse{0%,100%{opacity:.3}50%{opacity:1}}

/* 三栏布局 */
.ws-layout{flex:1;display:flex;min-height:0}

/* 左：目录树 */
.ws-tree{
  width:270px;flex:0 0 270px;border-right:1px solid var(--rule);
  display:flex;flex-direction:column;min-height:0;background:var(--paper);
}
.ws-tree-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5) var(--sp-3);
}
.ws-tree-head h2{
  margin:0;font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
}
.ws-tree-tools{display:flex;gap:var(--sp-2)}
.ws-novel-pick{padding:0 var(--sp-4) var(--sp-3)}
.ws-novel-pick select{
  width:100%;min-height:36px;padding:0 var(--sp-3);
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);font-family:inherit;font-size:var(--fs-sm);
}
.ws-tree-body{flex:1;overflow-y:auto;padding-bottom:var(--sp-5)}

.ws-vol{margin-bottom:var(--sp-2)}
.ws-vol-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-2);padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-5);
  font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
.ws-vol-head .ws-add-chap{
  opacity:0;transition:opacity .12s;
  width:22px;height:22px;font-size:var(--fs-sm);
}
.ws-vol:hover .ws-vol-head .ws-add-chap{opacity:1}

.ws-chap-list{list-style:none;margin:0;padding:0}
.ws-chap-list li{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
  cursor:pointer;border-left:2px solid transparent;min-height:var(--tap);
}
.ws-chap-list li:hover{background:var(--paper-2)}
.ws-chap-list li.active{border-left-color:var(--accent);background:var(--paper-2)}
.ws-chap-num{
  font-family:"SF Mono",Consolas,monospace;font-size:var(--fs-xs);
  color:var(--ink-3);flex:0 0 auto;min-width:1.6em;
}
.ws-chap-title{
  flex:1;min-width:0;font-size:var(--fs-sm);color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ws-chap-list li.active .ws-chap-title{color:var(--ink);font-weight:550}
.ws-chap-flag{
  font-size:10px;letter-spacing:.06em;padding:1px 5px;
  border:1px solid var(--rule);border-radius:2px;color:var(--ink-3);flex:0 0 auto;
}
.ws-chap-flag.final{color:var(--ok);border-color:var(--ok)}

.ws-tree-empty{padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);color:var(--ink-3)}

/* 中：编辑器 */
.ws-editor{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.ws-empty{margin:auto;text-align:center;padding:var(--sp-7) var(--sp-5);color:var(--ink-3)}

.ws-writing{
  flex:1;min-height:0;display:flex;flex-direction:column;
  padding:var(--sp-6) var(--sp-7) 0;
}
.ws-chapter-head{
  max-width:760px;width:100%;margin:0 auto;
  border-bottom:1px solid var(--rule);padding-bottom:var(--sp-4);
}
.ws-title-input{
  width:100%;border:none;background:transparent;
  font-family:"Songti SC","SimSun",serif;
  font-size:var(--fs-2xl);font-weight:600;line-height:1.3;letter-spacing:-.01em;
  color:var(--ink);padding:0;
}
.ws-title-input:focus{outline:none}
.ws-title-input::placeholder{color:var(--ink-3)}
.ws-meta-line{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);margin-top:var(--sp-3);
  font-size:var(--fs-xs);color:var(--ink-3);
}
.ws-count{font-family:"SF Mono",Consolas,monospace}

.ws-draft-banner{
  max-width:760px;width:100%;margin:var(--sp-4) auto 0;
  padding:var(--sp-3) var(--sp-4);
  border-left:2px solid var(--warn);background:rgba(138,106,31,.06);
  font-size:var(--fs-sm);color:var(--ink-2);
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
}
.ws-draft-banner[hidden]{display:none}
.ws-linkbtn{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:var(--fs-sm);color:var(--accent);
  border-bottom:1px solid rgba(156,59,46,.35);
}

.ws-textarea{
  flex:1;min-height:0;width:100%;max-width:760px;margin:var(--sp-5) auto 0;
  border:none;background:transparent;resize:none;
  font-family:inherit;font-size:var(--fs-lg);line-height:1.9;color:var(--ink-2);
  padding:0 0 var(--sp-7);
}
.ws-textarea:focus{outline:none}
.ws-textarea::placeholder{color:var(--ink-3)}

/* 右：修订历史 */
.ws-history{
  width:320px;flex:0 0 320px;border-left:1px solid var(--rule);
  display:flex;flex-direction:column;min-height:0;background:var(--paper-2);
}
.ws-history[hidden]{display:none}
.ws-history-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5) var(--sp-3);
  border-bottom:1px solid var(--rule);
}
.ws-history-head h2{
  margin:0;font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
}
.ws-rev-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.ws-rev-list li{
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--rule-2);
}
.ws-rev-top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-2);
}
.ws-rev-no{
  font-family:"SF Mono",Consolas,monospace;font-size:var(--fs-sm);
  color:var(--ink);font-weight:600;
}
.ws-rev-time{font-size:var(--fs-xs);color:var(--ink-3)}
.ws-rev-summary{font-size:var(--fs-sm);color:var(--ink-2);margin:0 0 var(--sp-2)}
.ws-rev-actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-2)}
.ws-rev-actions button{
  min-height:36px;padding:0 var(--sp-3);
  background:transparent;border:1px solid var(--rule);border-radius:var(--radius);
  cursor:pointer;font-family:inherit;font-size:var(--fs-sm);color:var(--ink-2);
}
.ws-rev-actions button:hover{border-color:var(--ink-3);color:var(--ink)}
.ws-rev-actions button.primary{
  border-color:var(--accent);color:var(--accent);
}
.ws-rev-preview{
  font-size:var(--fs-xs);color:var(--ink-3);line-height:1.5;
  max-height:3em;overflow:hidden;margin:0 0 var(--sp-2);
  white-space:pre-wrap;
}

/* 修订查看 / 对比弹窗 */
.rev-modal{align-items:center;justify-content:center}
.rev-card{max-width:760px;width:100%;max-height:86vh;display:flex;flex-direction:column;padding:0}
.rev-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-5) var(--sp-5) var(--sp-3);border-bottom:1px solid var(--rule);
}
.rev-head h3{margin:0;font-size:var(--fs-lg)}
.rev-tabs{
  display:flex;gap:var(--sp-1);padding:var(--sp-3) var(--sp-5) 0;
}
.rev-tabs button{
  min-height:34px;padding:0 var(--sp-4);cursor:pointer;font-family:inherit;
  background:transparent;border:1px solid var(--rule);border-radius:var(--radius);
  font-size:var(--fs-sm);color:var(--ink-3);
}
.rev-tabs button.active{background:var(--paper-2);color:var(--ink);font-weight:550}
.rev-body{
  flex:1;min-height:0;overflow-y:auto;padding:var(--sp-4) var(--sp-5);
  font-size:var(--fs-base);line-height:1.85;color:var(--ink-2);
  white-space:pre-wrap;word-break:break-word;
}
.rev-body p{margin:0 0 1em}
/* 对比视图：新增/删除 */
.diff-add{background:rgba(63,107,79,.13);color:var(--ink);text-decoration:none}
.diff-del{background:rgba(156,59,46,.11);color:var(--ink-3);text-decoration:line-through}
.diff-block{margin:0 0 .6em;padding:2px 6px;border-radius:2px}
.diff-block.add{background:rgba(63,107,79,.13)}
.diff-block.del{background:rgba(156,59,46,.11)}
.rev-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--rule);flex-wrap:wrap;
}
.rev-foot-hint{font-size:var(--fs-xs);color:var(--ink-3)}
.rev-foot-actions{display:flex;gap:var(--sp-3)}

/* 窄屏：折叠成单列 */
@media (max-width:900px){
  .ws-body{height:auto;overflow:auto}  .ws-layout{flex-direction:column}
  .ws-tree{
    width:auto;flex:none;border-right:none;
    border-bottom:1px solid var(--rule);max-height:38vh;
  }
  .ws-editor{min-height:70vh}
  .ws-writing{padding:var(--sp-5) var(--sp-4) 0}
  .ws-history{
    width:auto;flex:none;border-left:none;
    border-top:1px solid var(--rule);max-height:50vh;
  }
  .ws-save-state{display:none}
}

/* 窄屏顶栏：允许换行，避免元素被挤扁、溢出。
 * 411px 下顶栏原本塞了品牌+返回+面包屑+导航+3按钮，
 * 固定 56px 高且不换行 → 文字竖折、按钮溢出到栏外。 */
@media (max-width:820px){
  .ws-topbar{
    height:auto;min-height:56px;flex-wrap:wrap;
    padding:var(--sp-2) var(--sp-4);
    gap:var(--sp-2) var(--sp-3);
  }
  /* 次要信息在窄屏收起，给核心操作腾地方 */
  .ws-topbar .brand-name{display:none}
  .ws-topbar .ws-crumb-novel{display:none}
  .ws-topbar .ws-crumb-sep{display:none}
  .ws-topbar .ws-save-state{display:none}

  .ws-crumb{flex:0 1 auto;min-width:0}
  .ws-nav{order:1;flex:0 0 auto}
  /* 右侧操作组独占一行，靠右；避免与导航挤在一行 */
  .ws-topbar .topbar-right{
    order:3;flex:1 0 100%;
    justify-content:flex-end;
  }
}


/* ---------------- 窄屏适配（导航不遮挡/不溢出） ---------------- */

/* ws-nav-wrap：给导航条加换行能力（窄屏自动折行，不挤压/溢出） */
.ws-nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  row-gap: var(--sp-1);
}
.ws-nav button { flex: 0 0 auto; }

/* 顶栏：窄屏允许换行，避免挤成一团 */
@media (max-width: 900px) {
  .ws-topbar { flex-wrap: wrap; height: auto; min-height: 56px;
    padding: var(--sp-2) var(--sp-3); row-gap: var(--sp-1); }
  .ws-crumb { flex-basis: 100%; }
  .ws-nav { width: 100%; }
}

/* 极窄屏：字号略缩，保证 11 个导航项都能点到 */
@media (max-width: 560px) {
  .ws-nav button { padding: 5px 8px; font-size: var(--fs-xs); }
}