/* CSS 自定义属性 - 颜色变量 */
:root {
  --callout-quote-bg: rgba(33, 150, 243, 0.08);
  --callout-quote-border: #2196f3;
  --callout-quote-text: #1976d2;

  --callout-note-bg: rgba(68, 138, 255, 0.08);
  --callout-note-border: #448aff;
  --callout-note-text: #2c5aa0;

  --callout-info-bg: rgba(0, 188, 212, 0.08);
  --callout-info-border: #00bcd4;
  --callout-info-text: #00838f;

  --callout-warning-bg: rgba(255, 152, 0, 0.08);
  --callout-warning-border: #ff9800;
  --callout-warning-text: #e65100;

  --callout-tip-bg: rgba(76, 175, 80, 0.08);
  --callout-tip-border: #4caf50;
  --callout-tip-text: #2e7d32;

  --callout-important-bg: rgba(156, 39, 176, 0.08);
  --callout-important-border: #9c27b0;
  --callout-important-text: #6a1b9a;

  --callout-caution-bg: rgba(244, 67, 54, 0.08);
  --callout-caution-border: #f44336;
  --callout-caution-text: #c62828;
}

/* 基础 callout 样式 */
.callout {
  border-radius: 0.75rem;
  margin: 1.25rem 0 !important;
  padding: 1rem 1.5rem !important;
  border-left: 4px solid;
  background: var(--card-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

/* callout 标题样式 */
.callout-title {
  display: flex;
  align-items: center;
  gap: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}

.callout-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.callout-title-text {
  letter-spacing: 0.5px;
  font-weight: 700;
}

/* callout 内容样式 */
.callout-content {
  margin-left: 0 !important;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* 普通引用块的内容样式 */
.callout-quote > .callout-content {
  font-style: italic;
  margin: 0 !important;
}

.callout-content p {
  margin: 0.5rem 0 !important;
}

.callout-content p:first-child {
  margin-top: 0 !important;
}

.callout-content p:last-child {
  margin-bottom: 0 !important;
}

/* 各种 callout 类型的特定样式 */
.callout-note {
  border-color: var(--callout-note-border);
  background-color: var(--callout-note-bg);
}

.callout-note > .callout-title {
  color: var(--callout-note-text);
}

.callout-note > .callout-title-icon {
  color: var(--callout-note-border);
}

.callout-info {
  border-color: var(--callout-info-border);
  background-color: var(--callout-info-bg);
}

.callout-info > .callout-title {
  color: var(--callout-info-text);
}

.callout-info > .callout-title-icon {
  color: var(--callout-info-border);
}

.callout-warning {
  border-color: var(--callout-warning-border);
  background-color: var(--callout-warning-bg);
}

.callout-warning > .callout-title {
  color: var(--callout-warning-text);
}

.callout-warning > .callout-title-icon {
  color: var(--callout-warning-border);
}

.callout-tip {
  border-color: var(--callout-tip-border);
  background-color: var(--callout-tip-bg);
}

.callout-tip > .callout-title {
  color: var(--callout-tip-text);
}

.callout-tip > .callout-title-icon {
  color: var(--callout-tip-border);
}

.callout-important {
  border-color: var(--callout-important-border);
  background-color: var(--callout-important-bg);
}

.callout-important > .callout-title {
  color: var(--callout-important-text);
}

.callout-important > .callout-title-icon {
  color: var(--callout-important-border);
}

.callout-caution {
  border-color: var(--callout-caution-border);
  background-color: var(--callout-caution-bg);
}

.callout-caution > .callout-title {
  color: var(--callout-caution-text);
}

.callout-caution > .callout-title-icon {
  color: var(--callout-caution-border);
}

/* 普通引用块样式（保持原有的 blockquote 结构） */
blockquote.callout-quote {
  border-radius: 0.75rem;
  margin: 1.25rem 0 !important;
  padding: 1rem 1.5rem !important;
  border-left: 4px solid var(--callout-quote-border);
  background-color: var(--callout-quote-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

blockquote.callout-quote p {
  margin: 0.5rem 0 !important;
}

blockquote.callout-quote p:first-child {
  margin-top: 0 !important;
}

blockquote.callout-quote p:last-child {
  margin-bottom: 0 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .callout {
    margin: 1rem 0 !important;
    padding: 0.875rem 1.25rem !important;
  }

  .callout-title {
    margin-bottom: 0.625rem !important;
    font-size: 0.9rem;
  }

  .callout-content {
    font-size: 0.9rem;
  }

  blockquote.callout-quote {
    margin: 1rem 0 !important;
    padding: 0.875rem 1.25rem !important;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  :root {
    --callout-quote-bg: rgba(33, 150, 243, 0.12);
    --callout-note-bg: rgba(68, 138, 255, 0.12);
    --callout-info-bg: rgba(0, 188, 212, 0.12);
    --callout-warning-bg: rgba(255, 152, 0, 0.12);
    --callout-tip-bg: rgba(76, 175, 80, 0.12);
    --callout-important-bg: rgba(156, 39, 176, 0.12);
    --callout-caution-bg: rgba(244, 67, 54, 0.12);
  }
}