/* HelpDrawer v3.28.3 抽屉 + markdown-body 样式 */

/* -- 蒙层 -- */
.help-drawer-mask {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(15, 23, 42, 0.35);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.help-drawer-mask.open { opacity: 1; pointer-events: auto; }

/* -- 抽屉 -- */
.help-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 10002;
  width: 560px; max-width: 90vw;
  background: #fff; box-shadow: -4px 0 24px rgba(0, 0, 0, .1);
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column;
}
.help-drawer.open { transform: translateX(0); }

.help-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #E5E7EB;
  background: #F9FAFB;
}
.help-drawer-head h3 {
  margin: 0; font-size: 15px; color: #111827; font-weight: 700;
}
.help-drawer-close {
  background: none; border: none; cursor: pointer;
  color: #6B7280; padding: 4px; border-radius: 4px;
  display: inline-flex; align-items: center;
}
.help-drawer-close:hover { background: #E5E7EB; color: #111827; }

.help-drawer-body {
  flex: 1; overflow-y: auto; padding: 18px 22px;
  font-size: 13px; line-height: 1.65; color: #374151;
}
.help-drawer-loading, .help-drawer-error {
  padding: 40px 0; text-align: center; color: #9CA3AF;
}
.help-drawer-error { color: #DC2626; }

/* -- markdown-body 样式 (极简版, 跟系统风格一致) -- */
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
  color: #111827; font-weight: 700; margin: 18px 0 10px;
}
.markdown-body h1 { font-size: 19px; margin-top: 0; border-bottom: 1px solid #E5E7EB; padding-bottom: 8px; }
.markdown-body h2 { font-size: 16px; margin-top: 22px; }
.markdown-body h3 { font-size: 14px; }
.markdown-body h4 { font-size: 13px; color: #4B5563; }

.markdown-body p { margin: 8px 0; }
.markdown-body ul, .markdown-body ol { margin: 6px 0 10px; padding-left: 22px; }
.markdown-body li { margin: 3px 0; }

.markdown-body blockquote {
  margin: 10px 0; padding: 8px 14px;
  border-left: 3px solid #FCD34D; background: #FFFBEB;
  color: #78350F; font-size: 12px;
}
.markdown-body blockquote p { margin: 0; }

.markdown-body table {
  border-collapse: collapse; margin: 10px 0; font-size: 12px; width: 100%;
}
.markdown-body th, .markdown-body td {
  border: 1px solid #E5E7EB; padding: 6px 10px; text-align: left;
}
.markdown-body th { background: #F9FAFB; font-weight: 600; color: #374151; }

.markdown-body code {
  background: #F3F4F6; color: #7C3AED; padding: 1px 5px;
  border-radius: 3px; font-size: 12px; font-family: 'Consolas', 'Monaco', monospace;
}
.markdown-body pre {
  background: #1E293B; color: #E2E8F0; padding: 12px 14px;
  border-radius: 6px; overflow-x: auto; font-size: 12px;
}
.markdown-body pre code { background: none; color: inherit; padding: 0; }

.markdown-body a { color: #4F46E5; text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }

.markdown-body hr { border: none; border-top: 1px solid #E5E7EB; margin: 20px 0; }

.markdown-body video, .markdown-body img {
  max-width: 100%; border-radius: 4px; margin: 10px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* -- help-btn 触发器 (在 help_button macro 里引用) -- */
.help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  color: #6B7280; cursor: pointer; transition: all .15s;
  vertical-align: middle; margin-left: 4px;
}
.help-btn:hover { color: #4F46E5; background: #EEF2FF; }
.help-btn .material-icons { font-size: 14px; }

/* 手机适配 */
@media (max-width: 640px) {
  .help-drawer { width: 100vw; max-width: 100vw; }
}