/* ==========================================================================
   GDNote GitHub-Style Alerts（gfm.css）
   --------------------------------------------------------------------------
   配合 gfm.js 使用。gfm.js 会把两种来源的元素标记为 alert：
     - blockquote：内容以 `[!NOTE]/[!IMPORTANT]/[!WARNING]/[!TIP]/[!CAUTION]`
       开头的标准 markdown blockquote（后端未启用 AlertExtension 时）
     - div.alert.alert-*：后端 custom_markdown.AlertExtension 生成的 div
   本文件同时覆盖这两类选择器，并提供明暗两种配色（浅色默认 + 暗色下用
   dark.css 的调色板变量）。
   ========================================================================== */

/* 同时命中 blockquote.alert 与 div.alert（由 gfm.js 或后端生成） */
blockquote.alert,
blockquote.alert-note,
blockquote.alert-important,
blockquote.alert-warning,
blockquote.alert-tip,
blockquote.alert-caution,
div.alert.alert-note,
div.alert.alert-important,
div.alert.alert-warning,
div.alert.alert-tip,
div.alert.alert-caution {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left-style: solid;
  border-left-width: 0.25rem;
  border-radius: 0.375rem;
}

/* 图标 */
blockquote.alert .alert-icon,
div.alert.alert-note > .alert-icon,
div.alert.alert-important > .alert-icon,
div.alert.alert-warning > .alert-icon,
div.alert.alert-tip > .alert-icon,
div.alert.alert-caution > .alert-icon {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  margin-top: 0.05rem;
  font-size: 1.15rem;
}

blockquote.alert p,
div.alert.alert-note p,
div.alert.alert-important p,
div.alert.alert-warning p,
div.alert.alert-tip p,
div.alert.alert-caution p {
  margin: 0.1rem 0;
}
blockquote.alert p:first-child,
div.alert.alert-note p:first-child,
div.alert.alert-important p:first-child,
div.alert.alert-warning p:first-child,
div.alert.alert-tip p:first-child,
div.alert.alert-caution p:first-child {
  margin-top: 0;
}
blockquote.alert p:last-child,
div.alert.alert-note p:last-child,
div.alert.alert-important p:last-child,
div.alert.alert-warning p:last-child,
div.alert.alert-tip p:last-child,
div.alert.alert-caution p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   亮色配色（GitHub 风格）
---------------------------------------------------------------------------- */
blockquote.alert-note,
div.alert.alert-note {
  border-left-color: #0969da;
  background-color: #ddf4ff;
}
blockquote.alert-note .alert-icon,
div.alert.alert-note .alert-icon {
  color: #0969da;
}
blockquote.alert-important,
div.alert.alert-important {
  border-left-color: #8250df;
  background-color: #fbefff;
}
blockquote.alert-important .alert-icon,
div.alert.alert-important .alert-icon {
  color: #8250df;
}
blockquote.alert-warning,
div.alert.alert-warning {
  border-left-color: #9a6700;
  background-color: #fff8c5;
}
blockquote.alert-warning .alert-icon,
div.alert.alert-warning .alert-icon {
  color: #9a6700;
}
blockquote.alert-tip,
div.alert.alert-tip {
  border-left-color: #1a7f37;
  background-color: #dafbe1;
}
blockquote.alert-tip .alert-icon,
div.alert.alert-tip .alert-icon {
  color: #1a7f37;
}
blockquote.alert-caution,
div.alert.alert-caution {
  border-left-color: #cf222e;
  background-color: #ffe3e6;
}
blockquote.alert-caution .alert-icon,
div.alert.alert-caution .alert-icon {
  color: #cf222e;
}

/* ---------------------------------------------------------------------------
   暗色配色：复用 dark.css 的调色板变量（body.dark-mode 时）
   注意：dark.css 的 `body.dark-mode .alert{...}` 带 !important 会盖过本文件
   的同名 .alert 样式，因此这里全部加 !important 并保持更高特异性
   （body.dark-mode blockquote.alert-* / div.alert.alert-* > body.dark-mode .alert）。
---------------------------------------------------------------------------- */
body.dark-mode blockquote.alert-note,
body.dark-mode div.alert.alert-note {
  border-left-color: var(--dark-primary, #6ea8fe) !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  background-color: rgba(110, 168, 254, 0.12) !important;
  color: var(--dark-text, #e8e6e3) !important;
}
body.dark-mode blockquote.alert-note .alert-icon,
body.dark-mode div.alert.alert-note .alert-icon {
  color: var(--dark-primary, #6ea8fe) !important;
}
body.dark-mode blockquote.alert-important,
body.dark-mode div.alert.alert-important {
  border-left-color: #c297fb !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  background-color: rgba(194, 151, 251, 0.12) !important;
  color: var(--dark-text, #e8e6e3) !important;
}
body.dark-mode blockquote.alert-important .alert-icon,
body.dark-mode div.alert.alert-important .alert-icon {
  color: #c297fb !important;
}
body.dark-mode blockquote.alert-warning,
body.dark-mode div.alert.alert-warning {
  border-left-color: var(--dark-warning-bg, #c9a227) !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  background-color: rgba(199, 155, 45, 0.14) !important;
  color: var(--dark-text, #e8e6e3) !important;
}
body.dark-mode blockquote.alert-warning .alert-icon,
body.dark-mode div.alert.alert-warning .alert-icon {
  color: var(--dark-warning, #ffda6a) !important;
}
body.dark-mode blockquote.alert-tip,
body.dark-mode div.alert.alert-tip {
  border-left-color: var(--dark-success, #75b798) !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  background-color: rgba(117, 183, 152, 0.12) !important;
  color: var(--dark-text, #e8e6e3) !important;
}
body.dark-mode blockquote.alert-tip .alert-icon,
body.dark-mode div.alert.alert-tip .alert-icon {
  color: var(--dark-success, #75b798) !important;
}
body.dark-mode blockquote.alert-caution,
body.dark-mode div.alert.alert-caution {
  border-left-color: var(--dark-danger, #ea868f) !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  background-color: rgba(234, 134, 143, 0.12) !important;
  color: var(--dark-text, #e8e6e3) !important;
}
body.dark-mode blockquote.alert-caution .alert-icon,
body.dark-mode div.alert.alert-caution .alert-icon {
  color: var(--dark-danger, #ea868f) !important;
}