/* RX Game 帮助中心 v2 — 侧边栏目录 + 答案视图 + 管理员编辑 */

/* 主题 CSS 给 html/body 设了 overflow-x:hidden, 会破坏 position:sticky → 改用 clip (不产生滚动容器, 同样防横向溢出) */
/* !important: 主题主样式可能在本文件之后加载, 不加 important 会被覆盖 */
html, body {
  overflow-x: clip !important;
}

/* ---------- 布局 ---------- */
.rx-help-page {
  max-width: none;
  padding: 2rem 0 0;
}

.rx-help-hero { padding-top: 2.5rem; }

.help-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

/* ---------- 侧边栏目录 ---------- */
.help-toc { position: sticky; top: calc(var(--nav-height, 72px) + 1.25rem); }

.help-toc-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.help-toc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}

.help-toc-head svg { color: var(--primary); flex-shrink: 0; }

.help-toc-title { font-size: .95rem; font-weight: 700; color: var(--text-main); flex: 1; }

.help-toc-count {
  font-size: .72rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(37, 99, 235, .1);
  border-radius: 100px;
  padding: 3px 10px;
}

.help-toc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 12px 4px;
  padding: 9px 12px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}

.help-toc-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.help-toc-search svg { flex-shrink: 0; color: var(--text-muted); opacity: .6; }

.help-toc-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: 0;
  background: transparent;
  font-size: .85rem;
  color: var(--text-main);
  font-family: inherit;
}

.help-toc-search-input::placeholder { color: var(--text-muted); opacity: .6; }

.help-toc-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: 56vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.help-toc-list::-webkit-scrollbar { width: 5px; }
.help-toc-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.help-toc-item { position: relative; }

.help-toc-link {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: .85rem;
  line-height: 1.45;
  transition: background .2s, color .2s;
  cursor: pointer;
}

.help-toc-link:hover { background: rgba(37, 99, 235, .07); color: var(--text-main); }

.help-toc-link.is-active { background: var(--primary); color: #fff; }
.help-toc-link.is-active:hover { color: #fff; }

.help-toc-link.is-hidden { display: none; }

.help-toc-num {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(37, 99, 235, .1);
  color: var(--primary);
  font-size: .72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.help-toc-link.is-active .help-toc-num { background: rgba(255, 255, 255, .25); color: #fff; }

.help-toc-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.help-toc-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.help-toc-foot-text { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }

.help-toc-foot-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, transform .2s, box-shadow .2s;
}

.help-toc-foot-btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, .3); }

/* ---------- 答案视图 ---------- */
.answer-viewer {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm);
  padding: 28px 32px 32px;
  scroll-margin-top: calc(var(--nav-height, 72px) + 1.25rem);
  min-height: 320px;
}

.answer-content {
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.85;
  word-break: break-word;
}

.answer-content p { margin: 0 0 1em; }
.answer-content p:last-child { margin-bottom: 0; }

.answer-content h4 {
  margin: 1.4em 0 .6em;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-main);
}

.answer-content h4:first-child { margin-top: 0; }

.answer-content strong { color: var(--text-main); font-weight: 700; }

.answer-content a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.answer-content a:hover { text-decoration: underline; }

.answer-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin-top: 12px;
  display: block;
}

.answer-content ul, .answer-content ol {
  margin: 0 0 1em;
  padding-left: 1.6em;
}

.answer-content li { margin-bottom: .3em; }

.answer-content code {
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: .88em;
}

.answer-empty { display: none; text-align: center; padding: 4rem 1rem; color: var(--text-muted); font-size: .9rem; }
.answer-empty p { margin-top: .75rem; }

.answer-viewer.has-content .answer-empty { display: none; }
.answer-viewer.has-content .answer-content { display: block; }
.answer-viewer:not(.has-content) .answer-content { display: none; }
.answer-viewer:not(.has-content) .answer-empty { display: block; }

/* ---------- 编辑模式 (管理员) ---------- */
#edit-hint {
  position: sticky;
  top: var(--nav-height, 72px);
  z-index: 90;
  background: #fef3c7;
  color: #92400e;
  border-bottom: 1px solid #fde68a;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  padding: 9px 16px;
}

.edit-toolbar {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  gap: 6px;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  padding: 7px;
}

.edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.edit-btn:hover { background: rgba(37, 99, 235, .08); color: var(--primary); }
.edit-btn.is-on { background: var(--primary); color: #fff; }
.edit-btn.is-danger:hover { background: rgba(239, 68, 68, .1); color: #ef4444; }
.edit-btn.is-primary { background: var(--primary); color: #fff; }
.edit-btn.is-primary:hover { background: var(--primary-hover); }

#edit-actions { display: none; }

body.edit-mode .answer-content,
body.edit-mode .help-toc-text {
  outline: 2px dashed rgba(37, 99, 235, .6);
  outline-offset: 3px;
  border-radius: 8px;
  cursor: text;
  background: rgba(37, 99, 235, .05);
}

body.edit-mode .answer-content:focus,
body.edit-mode .help-toc-text:focus {
  outline-color: var(--primary);
  outline-style: solid;
  background: rgba(37, 99, 235, .08);
}

/* 目录项操作按钮组 (编辑模式: 上移/下移/删除) */
.toc-actions {
  display: none;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  gap: 3px;
  z-index: 3;
}

body.edit-mode .toc-actions { display: flex; }

.toc-act-btn {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 7px;
  background: rgba(37, 99, 235, .08);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}

.toc-act-btn:hover { background: var(--primary); color: #fff; }
.toc-act-btn.is-del { background: rgba(239, 68, 68, .1); color: #ef4444; }
.toc-act-btn.is-del:hover { background: #ef4444; color: #fff; }

body.edit-mode .help-toc-link { padding-right: 92px; }

/* 编辑模式图片工具 */
.faq-img-toolbar { display: none; align-items: center; gap: 8px; margin: 14px 0 4px; }
body.edit-mode .faq-img-toolbar { display: flex; }

.faq-img-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed var(--border);
  background: var(--bg-surface);
  color: var(--primary);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
}

.faq-img-toolbar-btn:hover { border-color: var(--primary); background: rgba(37, 99, 235, .06); }

.faq-img-wrap { position: relative; display: inline-block; max-width: 100%; margin-top: 12px; }

.faq-img-actions {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  gap: 6px;
  z-index: 5;
}

body.edit-mode .faq-img-actions { display: flex; }

.faq-img-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: rgba(15, 23, 42, .75);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background .2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.faq-img-btn:hover { background: var(--primary); }
.faq-img-btn.is-danger:hover { background: #ef4444; }

body.edit-mode .answer-content img {
  outline: 2px dashed rgba(37, 99, 235, .35);
  outline-offset: 2px;
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%) translateY(12px);
  background: #0f172a;
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: all .3s;
  z-index: 1000;
  pointer-events: none;
  max-width: 80vw;
  text-align: center;
}

.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-error { background: #ef4444; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .help-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; }
  .answer-viewer { padding: 22px 22px 26px; }
}

@media (max-width: 900px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); padding: 0 .75rem 3rem; }
  .help-toc { position: static; }
  .help-toc-card { border-radius: 14px; }
  .help-toc-head { padding: 11px 14px; }
  .help-toc-search { margin: 10px 10px 2px; }
  .help-toc-list {
    flex-direction: row;
    overflow-x: auto;
    max-height: none;
    padding: 8px;
    scrollbar-width: none;
    min-width: 0;
  }
  .help-toc-list::-webkit-scrollbar { display: none; }
  .help-toc-link { white-space: nowrap; flex-shrink: 0; }
  .help-toc-num { display: none; }
  .help-toc-foot { display: none; }
  body.edit-mode .help-toc-link { padding-right: 88px; }
  .toc-act-btn { width: 20px; height: 20px; }
  .answer-viewer { padding: 18px 16px 22px; min-height: 240px; }
  .edit-toolbar { width: calc(100% - 1.5rem); justify-content: center; overflow-x: auto; border-radius: 16px; }
  .edit-btn { font-size: .75rem; padding: 7px 10px; }
}

/* 小屏手机 (≤480px) 进一步收紧 */
@media (max-width: 480px) {
  .ios-help-hero { padding-top: 1.5rem; }
  .ios-help-page { padding-top: 1.5rem; }
  .answer-content { font-size: .9rem; line-height: 1.8; }
  .answer-content img { border-radius: 10px; }
  .answer-viewer { padding: 16px 14px 20px; }
  .edit-toolbar { padding: 6px; gap: 4px; }
  .edit-btn { padding: 6px 9px; font-size: .72rem; }
}