/* 写作教练面板（#/write）：引导式写作。管理界面（深色默认，跟随主题）。 */
#view-write[hidden] { display: none !important; } /* display:flex 会压过 UA 的 [hidden]，必须显式补 */
#view-write {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--mast-h));
  min-height: 0;
}

/* ============ 文章内双栏面板（#write-panel / #aside-cards 内） ============ */
#aside-cards #write-panel {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card-bg);
  overflow: hidden;
}
#write-panel[hidden] { display: none !important; }
.wp-head {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 12px 8px; border-bottom: 1px solid var(--line);
}
.wp-title { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); }
.wp-sub { font-size: 11px; color: var(--muted); flex: 1; }
.wp-head button {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  background: none; color: var(--ink-soft); font-size: 16px; cursor: pointer;
}
.wp-head button:hover { background: var(--hover); color: var(--accent); border-color: var(--frame); }
#write-panel .write-palette { padding: 6px 12px 8px; gap: 6px; }
#write-panel .write-palette .wp-chip { font-size: 12px; padding: 3px 8px; }
#write-panel .wp-palette:empty { display: none; }
#write-panel .write-chat { padding: 12px; gap: 10px; }
#write-panel .write-bubble { font-size: 14px; max-width: 100%; }
#write-panel .write-form { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
#write-panel .write-form textarea { font-size: 14px; }

#view-write .article-nav { padding: 10px 24px 0; }
#view-write .article-nav button {
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 15px; padding: 4px 6px; border-radius: 8px;
}
#view-write .article-nav button:hover { background: var(--hover); color: var(--ink); }

.write-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 24px 10px;
  flex-wrap: wrap;
}
.write-head .app-title { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); margin: 0; }
.write-article-label { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 13px; }
.write-article-label select {
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; max-width: 320px;
}

.write-sessions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 24px 0;
}
.write-sessions:empty { display: none; }
.write-sessions .ws-chip {
  font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft);
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.write-sessions .ws-chip:hover { background: var(--hover); border-color: var(--frame); }
.write-sessions .ws-chip.is-active,
.write-sessions .ws-item.is-active .ws-load {
  color: var(--chip-on-fg); background: var(--chip-on-bg); border-color: var(--chip-on-bg);
}
.write-sessions .ws-item { display: inline-flex; align-items: center; gap: 1px; }
.write-sessions .ws-del {
  font-family: var(--sans); font-size: 12px; color: var(--muted);
  background: none; border: 1px solid transparent; border-radius: 999px;
  padding: 2px 6px; cursor: pointer; margin-left: -6px;
}
.write-sessions .ws-del:hover { color: var(--accent); border-color: var(--frame); background: var(--hover); }

.write-palette {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 24px 12px; border-bottom: 1px solid var(--line);
}
.write-palette:empty { display: none; }
.write-palette .wp-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.write-palette .wp-chip {
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: var(--tag-bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; cursor: pointer;
}
.write-palette .wp-chip:hover { background: var(--hover); border-color: var(--frame); }

.write-chat {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 12px;
}

.write-empty {
  margin: auto; max-width: 520px; text-align: center; color: var(--ink-soft);
  padding: 24px;
}
.write-empty .we-icon { font-size: 48px; margin-bottom: 8px; opacity: 0.85; }
.write-empty p { line-height: 1.6; font-size: 15px; }
.write-empty .we-start {
  margin-top: 12px; font-size: 15px; font-weight: 600;
  color: var(--chip-on-fg); background: var(--accent); border: none; border-radius: 999px;
  padding: 10px 20px; cursor: pointer;
}
.write-empty .we-start:hover { filter: brightness(1.06); }

.write-bubble {
  max-width: 760px; padding: 12px 16px; border-radius: 14px; line-height: 1.7;
  font-size: 15px; white-space: normal; word-break: break-word;
}
.write-bubble.user {
  align-self: flex-end; color: var(--ink); background: var(--bubble-right);
  border: 1px solid var(--bubble-me-line);
}
.write-bubble.coach {
  align-self: flex-start; color: var(--ink); background: var(--bubble-left);
  border: 1px solid var(--bubble-other-line);
}
.write-bubble.coach strong { color: var(--accent); font-weight: 600; }
.write-bubble.coach strong.ipa-anchor { font-size: 1.4em; color: var(--accent); font-weight: 700; }
.write-bubble.coach .ipa-weak { font-size: 0.85em; color: var(--muted); }
.write-bubble.coach p { margin: 0.45em 0; }
.write-bubble.coach ul { margin: 0.45em 0; padding-left: 1.3em; }
.write-bubble.coach li { margin-bottom: 0.25em; }
.write-bubble.coach blockquote {
  margin: 0.5em 0; padding: 4px 12px; border-left: 3px solid var(--frame);
  color: var(--ink-soft); background: var(--card-bg); border-radius: 0 8px 8px 0;
}
.write-bubble.wb-thinking, .write-bubble .wb-thinking { color: var(--muted); font-style: italic; }

.write-form {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.write-form textarea {
  flex: 1; resize: none; font-family: var(--sans); font-size: 15px; line-height: 1.5;
  color: var(--ink); background: var(--card-bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; min-height: 46px; max-height: 180px;
}
.write-form textarea:focus { outline: none; border-color: var(--frame); }
.write-form button {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
  color: var(--chip-on-fg); background: var(--accent); border: none; font-size: 18px; cursor: pointer;
}
.write-form button:disabled { opacity: 0.5; cursor: default; }
/* 停止 / 撤回按钮：发丝线框圆钮，静止墨色、悬停朱砂 */
.write-form .wf-btn {
  width: 34px; height: 34px; font-size: 15px; flex: 0 0 auto; border-radius: 50%;
  color: var(--ink-soft); background: none; border: 1px solid var(--line); cursor: pointer;
}
.write-form .wf-btn:hover { color: var(--accent); border-color: var(--frame); background: var(--hover); }
.write-form .wf-btn[hidden] { display: none; }

/* ————— 2026-09-15：写作教练改为独立插槽（writing-service :8791）后的宿主壳 —————
   两处装载点都是 iframe：全页 #/write 与文章内双栏 #write-panel。
   这样"写作"只有一份实现（在 writing-service），reader 不再维护第二套聊天 UI。 */
.write-frame{display:block;width:100%;height:calc(100vh - 96px);border:0;border-radius:14px;background:#faf7f2}
.wp-frame{display:block;width:100%;height:100%;min-height:60vh;border:0;background:#faf7f2}
#write-panel{display:flex;flex-direction:column;height:100%}
#write-panel[hidden]{display:none !important}
#write-panel .wp-head{flex:0 0 auto}
#write-panel .wp-frame{flex:1 1 auto;border-radius:0 0 12px 12px}
#sheet-write{background:none;border:none;font-size:16px;padding:2px 4px;cursor:pointer;line-height:1}
#sheet-write:hover{transform:translateY(-1px)}