/* =========================================================================
   Pulse — 富文本编辑器 & 正文排版
   ---------------------------------------------------------------------------
   1. .rich-content：帖子正文 / 预览共用的排版规则
   2. .editor-*：发帖弹窗里的工具栏编辑器
   ========================================================================= */

/* =========================================================================
   一、正文排版（渲染后的富文本）
   ========================================================================= */
.rich-content {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.rich-content > :first-child { margin-top: 0; }
.rich-content > :last-child { margin-bottom: 0; }

.rich-content p { margin: 0 0 0.85em; }

.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4 {
  margin: 1.25em 0 0.5em;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.rich-content h1 { font-size: 1.5em; }
.rich-content h2 { font-size: 1.32em; }
.rich-content h3 { font-size: 1.16em; }
.rich-content h4 { font-size: 1.04em; }

.rich-content ul,
.rich-content ol {
  margin: 0.55em 0 0.95em;
  padding-left: 1.5em;
}
.rich-content ul { list-style: disc outside; }
.rich-content ol { list-style: decimal outside; }
.rich-content ul ul { list-style: circle outside; }
.rich-content li { margin: 0.28em 0; }
.rich-content li > p { margin: 0 0 0.3em; }

.rich-content blockquote {
  margin: 0.9em 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--teal);
  color: var(--ink-2);
  font-style: normal;
}
.rich-content blockquote > :last-child { margin-bottom: 0; }

.rich-content code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 0.1em 0.38em;
}
.rich-content pre {
  margin: 0.9em 0;
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  line-height: 1.6;
}
.rich-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.86em;
  white-space: pre;
}

.rich-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.9em 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: zoom-in;
}
.rich-content figure { margin: 0.9em 0; }
.rich-content figure img { margin: 0; }
.rich-content figcaption {
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 0.84em;
  text-align: center;
}

.rich-content hr {
  margin: 1.5em 0;
  border: none;
  border-top: 1px solid var(--line);
}

.rich-content a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rich-content mark {
  background: rgba(79, 184, 196, 0.22);
  color: inherit;
  padding: 0 0.15em;
  border-radius: 3px;
}

/* 详情页的大字号正文 */
.post-body-big.rich-content { font-size: 18px; line-height: 1.75; }

/* =========================================================================
   二、编辑器弹窗
   ========================================================================= */
.editor-modal { align-items: flex-start; }

.editor-panel {
  width: min(780px, calc(100vw - 40px));
  margin-top: 6vh;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.editor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.editor-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.editor-head-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.editor-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font: 600 13px var(--font);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.editor-ghost svg { display: block; }
.editor-ghost:hover { background: var(--bg-3); color: var(--ink); }
.editor-ghost[aria-pressed="true"] {
  background: var(--teal-tint);
  border-color: rgba(79, 184, 196, 0.45);
  color: var(--teal);
}

#compose-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

/* ---------- 工具栏 ---------- */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(20, 23, 28, 0.6);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: none;
}
.editor-toolbar::-webkit-scrollbar { display: none; }

.editor-sep {
  flex: none;
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: var(--line);
}

.editor-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font: 600 14px/1 var(--font);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.editor-btn svg { display: block; }
.editor-btn:hover { background: var(--bg-3); color: var(--ink); }
.editor-btn.is-active {
  background: var(--teal-tint);
  color: var(--teal);
}
.editor-btn b, .editor-btn i, .editor-btn u, .editor-btn s { font-size: 14px; }
.editor-clear {
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: line-through;
  text-decoration-color: var(--danger, #e06a6a);
}

.editor-block {
  flex: none;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-2);
  color: var(--ink-2);
  font: 600 12.5px var(--font);
  cursor: pointer;
  outline: none;
}
.editor-block:hover { color: var(--ink); border-color: #2e3540; }

/* ---------- 编辑区 ---------- */
.editor-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.editor-surface,
.editor-preview {
  flex: 1 1 auto;
  min-height: 240px;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 22px;
  outline: none;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.editor-preview { background: rgba(20, 23, 28, 0.45); }

.editor-surface:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-3);
  pointer-events: none;
}
.editor-surface:focus { outline: none; }

/* 编辑区内的元素与渲染后保持一致 */
.editor-surface p { margin: 0 0 0.85em; }
.editor-surface h2,
.editor-surface h3,
.editor-surface h4 {
  margin: 1.1em 0 0.45em;
  font-weight: 800;
  line-height: 1.35;
}
.editor-surface h2 { font-size: 1.32em; }
.editor-surface h3 { font-size: 1.16em; }
.editor-surface h4 { font-size: 1.04em; }
.editor-surface ul,
.editor-surface ol { margin: 0.5em 0 0.9em; padding-left: 1.5em; }
.editor-surface ul { list-style: disc outside; }
.editor-surface ol { list-style: decimal outside; }
.editor-surface li { margin: 0.25em 0; }
.editor-surface blockquote {
  margin: 0.85em 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--teal);
  color: var(--ink-2);
}
.editor-surface code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 0.1em 0.38em;
}
.editor-surface pre {
  margin: 0.85em 0;
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow-x: auto;
  line-height: 1.6;
}
.editor-surface pre code { background: none; border: none; padding: 0; }
.editor-surface img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.85em 0;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.editor-surface a { color: var(--teal); text-decoration: underline; }
.editor-surface hr { margin: 1.4em 0; border: none; border-top: 1px solid var(--line); }

/* 上传中的占位图 */
.editor-surface img.is-uploading {
  opacity: 0.4;
  filter: grayscale(1);
}

.editor-drop-hint {
  position: absolute;
  inset: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 2px dashed var(--teal);
  border-radius: 12px;
  background: rgba(79, 184, 196, 0.08);
  color: var(--teal);
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}
/* 类选择器会盖掉 [hidden] 的 display:none，必须显式还原 */
.editor-drop-hint[hidden] { display: none; }
.editor-preview[hidden] { display: none; }
.editor-surface[hidden] { display: none; }

/* ---------- 底栏 ---------- */
.editor-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line-soft);
  flex: none;
}
.editor-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font: 600 13px var(--font);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.editor-tool:hover { background: var(--bg-3); color: var(--ink); }
.editor-tool svg { display: block; }
.editor-hint {
  color: var(--ink-3);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editor-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.editor-count b { color: var(--ink-2); font-weight: 400; }
.editor-count.is-over b { color: var(--danger, #e06a6a); }
.editor-submit { flex: none; }

/* 编辑器内的提示条 */
#editor-error {
  padding: 0 16px 12px;
}

/* =========================================================================
   三、移动端
   ========================================================================= */
@media (max-width: 760px) {
  /* 弹窗铺满屏幕，避免键盘弹出后编辑区只剩一条缝 */
  .editor-modal { align-items: stretch; }
  .editor-panel {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: none;
    border-radius: 0;
    padding-bottom: var(--safe-b);
  }
  .editor-head { padding: 10px 10px 8px 16px; }
  .editor-title { font-size: 14.5px; }
  .editor-ghost { padding: 7px 10px; }

  .editor-toolbar { padding: 7px 10px; gap: 1px; }
  .editor-btn { width: 36px; height: 36px; }
  .editor-block { height: 36px; font-size: 13px; }
  .editor-sep { margin: 0 4px; }

  .editor-surface,
  .editor-preview {
    min-height: 0;
    padding: 14px 16px;
    font-size: 16px; /* 防止 iOS 聚焦放大 */
    line-height: 1.7;
  }
  .editor-surface h2 { font-size: 1.25em; }

  .editor-foot {
    gap: 8px;
    padding: 8px 12px calc(10px + var(--safe-b));
  }
  .editor-hint { display: none; }
  .editor-tool-text { display: none; }
  .editor-tool { padding: 8px 10px; }
  .editor-submit { padding: 9px 18px; }
}

@media (max-width: 400px) {
  .editor-surface,
  .editor-preview { padding: 12px 12px; }
  .editor-btn { width: 34px; height: 34px; }
}

/* =========================================================================
   四、编辑模式
   ========================================================================= */
.edit-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(79, 184, 196, 0.1);
  border-bottom: 1px solid rgba(79, 184, 196, 0.3);
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
}
.edit-banner svg { display: block; flex: none; }
.edit-banner-cancel {
  margin-left: auto;
  padding: 4px 12px;
  border: 1px solid rgba(79, 184, 196, 0.4);
  border-radius: 7px;
  color: var(--teal);
  font-size: 12.5px;
  font-weight: 600;
}
.edit-banner-cancel:hover { background: rgba(79, 184, 196, 0.12); }

/* 编辑模式下弹窗标题/按钮已切换文案，这里只做视觉区分 */
.editor-modal.is-edit-mode .editor-title { color: var(--teal); }

/* 外链图片：加载失败时给个可见的占位，方便作者发现死链 */
.rich-content img {
  background: var(--bg-3);
  min-height: 40px;
}

@media (max-width: 760px) {
  .edit-banner { padding: 9px 16px; font-size: 12.5px; }
  .edit-banner-cancel { padding: 4px 10px; }
}