/* =========================================================
   Code blocks: boxed style + copy button（像图二那样）
   作用范围：帖子/回复正文中的 Markdown/Parsedown 输出
   ========================================================= */

/* 包裹容器（由 JS 自动把 pre 包进来） */
.codebox{
  position: relative;
  margin: 10px 0;
}

/* 统一 pre 样式（让它像一个“卡片代码块”） */
.markdown pre,
.parsedown pre,
.topic-content pre,
.post-content pre{
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(148,163,184,.45));
  /* 浅色代码块底色：偏米黄色（更像你图二） */
  background: rgba(255, 251, 235, .90);
  color: var(--text, #0f172a);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  line-height: 1.55;
}

/* 深色主题下的代码块背景 */
html.theme-dark .markdown pre,
html.theme-dark .parsedown pre,
html.theme-dark .topic-content pre,
html.theme-dark .post-content pre{
  background: rgba(2,6,23,.55);
  border-color: rgba(51,65,85,.55);
  color: var(--text, #e5e7eb);
}

/* code 字体 */
.markdown pre code,
.parsedown pre code,
.topic-content pre code,
.post-content pre code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  white-space: pre;
}

/* 行内 code 也稍微美化一下 */
.markdown :not(pre) > code,
.parsedown :not(pre) > code,
.topic-content :not(pre) > code,
.post-content :not(pre) > code{
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(148,163,184,.45));
  background: rgba(255,255,255,.65);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}
html.theme-dark .markdown :not(pre) > code,
html.theme-dark .parsedown :not(pre) > code,
html.theme-dark .topic-content :not(pre) > code,
html.theme-dark .post-content :not(pre) > code{
  background: rgba(2,6,23,.45);
  border-color: rgba(51,65,85,.55);
}

/* 复制按钮（右上角） */
.code-copy-btn{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(148,163,184,.45));
  background: rgba(255, 251, 235, .95);
  color: var(--text, #0f172a);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.code-copy-btn:hover{ filter: brightness(1.05); }
.code-copy-btn:active{ transform: scale(0.98); }
html.theme-dark .code-copy-btn{
  background: rgba(15,23,42,.75);
  border-color: rgba(51,65,85,.55);
  color: var(--text, #e5e7eb);
}

/* 给 pre 留出按钮的位置（避免文字被遮住） */
.codebox pre{ padding-top: 34px; }


/* ===== 板块称号（用户名旁 #金色） + 勋章 ===== */
.user-title{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, .45);
  background: rgba(245, 158, 11, .12);
  color: #b45309; /* 金黄偏深，浅底也清晰 */
  font-weight: 800;
  font-size: 12px;
  line-height: 1.4;
  vertical-align: middle;
}
.user-title::before{ content: "#"; opacity:.9; }
html.theme-dark .user-title{
  border-color: rgba(251, 191, 36, .35);
  background: rgba(251, 191, 36, .12);
  color: #fbbf24;
}

.user-medal{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(148,163,184,.12);
  color: var(--text, #334155);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  vertical-align: middle;
}
html.theme-dark .user-medal{
  border-color: rgba(51,65,85,.55);
  background: rgba(51,65,85,.35);
  color: var(--text, #e5e7eb);
}

/* ===== Upload progress ===== */
.upload-progress{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
}
.upload-progress__card{
  width: 260px;
  border-radius: 14px;
  padding: 12px 12px 10px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(15,23,42,.18);
}
.upload-progress__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text, #0f172a);
}
.upload-progress__label{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  max-width: 190px;
  font-weight: 700;
}
.upload-progress__pct{ font-weight: 800; opacity:.85; }

.upload-progress__bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(148,163,184,.25);
  overflow:hidden;
}
.upload-progress__fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(245,158,11,.9);
  transition: width .12s linear;
}
.upload-progress.is-error .upload-progress__fill{ background: rgba(239,68,68,.9); }
.upload-progress.is-done  .upload-progress__fill{ background: rgba(34,197,94,.9); }

@media (max-width: 640px){
  .upload-progress{ left: 12px; right: 12px; bottom: 12px; }
  .upload-progress__card{ width: 100%; }
}
html.theme-dark .upload-progress__card{
  background: rgba(15,23,42,.72);
  border-color: rgba(51,65,85,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}


/* ===== 拖拽图片到编辑框：高亮 + 提示层 ===== */
.rich-editor{ position: relative; }
.rich-drop-mask{
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  backdrop-filter: blur(1px);
  z-index: 20;
}
.rich-drop-mask__inner{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(16,22,34,.92);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: 13px;
}
.rich-editor.is-dragover textarea{
  outline: 2px dashed rgba(110,168,254,.8);
  outline-offset: 2px;
}

/* 拖拽提示层：默认隐藏（不挡输入） */
.rich-drop-mask{
  display: none !important;
}

/* 只有拖拽文件进入编辑器时才显示 */
.rich-editor.is-dragover .rich-drop-mask{
  display: flex !important;
}