/**
 * @tc/md-core 默认样式
 * 
 * 使用方法：
 * import '@tc/md-core/styles.css';
 * <div class="markdown-body">...</div>
 * 
 * 定制主题：
 * :root { --md-color-primary: red; }
 * 
 * 强制暗黑/浅色：
 * <div class="markdown-body md-dark">...</div>
 */

/* ========================================
   CSS 变量定义 - 浅色模式（默认）
   ======================================== */
:root,
.md-light {
    /* 基础颜色 */
    --md-color-text: #24292f;
    --md-color-text-muted: #656d76;
    --md-color-primary: #0969da;
    --md-color-bg: #ffffff;
    --md-color-border: #d0d7de;

    /* 代码 */
    --md-color-bg-muted: rgba(175, 184, 193, 0.2);
    --md-color-bg-code-block: #f6f8fa;

    /* 表格 */
    --md-color-bg-table-header: rgba(175, 184, 193, 0.2);
    --md-color-bg-table-row: rgba(234, 238, 242, 0.5);

    /* 引用 */
    --md-color-blockquote-border: rgba(175, 184, 193, 0.4);

    /* 字体 */
    --md-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    --md-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    --md-font-size-base: 14px;
    --md-line-height: 1.5;

    /* 圆角 */
    --md-radius: 6px;
    --md-radius-sm: 4px;

    /* 图片骨架屏 */
    --md-skeleton-bg: #e8e8e8;
    --md-skeleton-shine: #f5f5f5;
    --md-skeleton-icon: #bdbdbd;
    --md-skeleton-icon-detail: #9e9e9e;

    /* 代码高亮 - 浅色 */
    --md-hljs-bg: #f6f8fa;
    --md-hljs-text: #24292f;
    --md-hljs-keyword: #cf222e;
    --md-hljs-string: #0a3069;
    --md-hljs-comment: #6e7781;
    --md-hljs-function: #8250df;
    --md-hljs-number: #0550ae;

    /* Pending 状态 */
    --md-pending-border-color: #0969da;
}

/* ========================================
   暗黑模式 - 系统偏好
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root:not(.md-light) {
        --md-color-text: #e6edf3;
        --md-color-text-muted: #8b949e;
        --md-color-primary: #4493f8;
        --md-color-bg: #0d1117;
        --md-color-border: #30363d;

        --md-color-bg-muted: rgba(110, 118, 129, 0.4);
        --md-color-bg-code-block: #161b22;

        --md-color-bg-table-header: rgba(110, 118, 129, 0.4);
        --md-color-bg-table-row: rgba(110, 118, 129, 0.1);

        --md-color-blockquote-border: rgba(110, 118, 129, 0.4);

        --md-skeleton-bg: #21262d;
        --md-skeleton-shine: #30363d;
        --md-skeleton-icon: #484f58;
        --md-skeleton-icon-detail: #6e7681;

        --md-hljs-bg: #161b22;
        --md-hljs-text: #e6edf3;
        --md-hljs-keyword: #ff7b72;
        --md-hljs-string: #a5d6ff;
        --md-hljs-comment: #8b949e;
        --md-hljs-function: #d2a8ff;
        --md-hljs-number: #79c0ff;

        --md-pending-border-color: #4493f8;
    }
}

/* ========================================
   暗黑模式 - 手动强制（优先级最高）
   ======================================== */
.md-dark {
    --md-color-text: #e6edf3;
    --md-color-text-muted: #8b949e;
    --md-color-primary: #4493f8;
    --md-color-bg: #0d1117;
    --md-color-border: #30363d;

    --md-color-bg-muted: rgba(110, 118, 129, 0.4);
    --md-color-bg-code-block: #161b22;

    --md-color-bg-table-header: rgba(110, 118, 129, 0.4);
    --md-color-bg-table-row: rgba(110, 118, 129, 0.1);

    --md-color-blockquote-border: rgba(110, 118, 129, 0.4);

    --md-skeleton-bg: #21262d;
    --md-skeleton-shine: #30363d;
    --md-skeleton-icon: #484f58;
    --md-skeleton-icon-detail: #6e7681;

    --md-hljs-bg: #161b22;
    --md-hljs-text: #e6edf3;
    --md-hljs-keyword: #ff7b72;
    --md-hljs-string: #a5d6ff;
    --md-hljs-comment: #8b949e;
    --md-hljs-function: #d2a8ff;
    --md-hljs-number: #79c0ff;

    --md-pending-border-color: #4493f8;
}

/* ========================================
   Markdown 容器
   ======================================== */
.markdown-body {
    font-family: var(--md-font-family);
    font-size: var(--md-font-size-base);
    line-height: var(--md-line-height);
    color: var(--md-color-text);
    background-color: var(--md-color-bg);
    word-wrap: break-word;
}

/* 子元素间距 */
.markdown-body>*+* {
    margin-top: 1rem;
}

/* 首个子元素无顶部 margin */
.markdown-body>*:first-child {
    margin-top: 0;
}

/* 最后子元素无底部 margin */
.markdown-body>*:last-child {
    margin-bottom: 0;
}

/* ========================================
   标题
   ======================================== */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--md-color-text);
}

/* h1: 1.875rem (30px) */
.markdown-body h1 {
    font-size: 1.875rem;
}

/* h2: 1.5rem (24px) */
.markdown-body h2 {
    font-size: 1.5rem;
}

/* h3: 1.25rem (20px) */
.markdown-body h3 {
    font-size: 1.25rem;
}

/* h4: 1.125rem (18px) */
.markdown-body h4 {
    font-size: 1.125rem;
}

/* h5: 1rem (16px) */
.markdown-body h5 {
    font-size: 1rem;
}

/* h6: 0.875rem (14px) */
.markdown-body h6 {
    font-size: 0.875rem;
}

/* ========================================
   段落
   ======================================== */
.markdown-body p {
    margin-top: 0;
    margin-bottom: 0;
}

/* ========================================
   链接
   ======================================== */
.markdown-body a {
    color: var(--md-color-primary);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.markdown-body a:hover {
    opacity: 0.8;
}

/* ========================================
   粗体
   ======================================== */
.markdown-body strong {
    font-weight: 600;
}

/* ========================================
   行内代码
   ======================================== */
.markdown-body code {
    background-color: var(--md-color-bg-muted);
    border-radius: var(--md-radius-sm);
    padding: 0.125rem 0.375rem;
    font-size: 0.875rem;
    font-family: var(--md-font-family-mono);
}

/* ========================================
   代码块
   ======================================== */
.markdown-body pre {
    margin-top: 0;
    margin-bottom: 0;
    background-color: var(--md-color-bg-code-block);
    border-radius: var(--md-radius);
    padding: 1rem;
    overflow-x: auto;
}

.markdown-body pre code {
    background: transparent;
    padding: 0;
    font-size: 0.875rem;
    border-radius: 0;
    line-height: 1.45;
}

/* ========================================
   引用块
   ======================================== */
.markdown-body blockquote {
    margin: 1rem 0;
    padding: 0 0 0 1rem;
    color: var(--md-color-text-muted);
    border-left: 4px solid var(--md-color-blockquote-border);
}

.markdown-body blockquote>*:first-child {
    margin-top: 0;
}

.markdown-body blockquote>*:last-child {
    margin-bottom: 0;
}

/* ========================================
   列表
   ======================================== */
.markdown-body ul,
.markdown-body ol {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style-position: inside;
    white-space: normal;
}

.markdown-body ul {
    list-style-type: disc;
}

.markdown-body ol {
    list-style-type: decimal;
}

/* 嵌套列表缩进 */
.markdown-body li ul,
.markdown-body li ol {
    padding-left: 1.5rem;
}

/* 列表项 */
.markdown-body li {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* 列表项内段落内联 */
.markdown-body li>p {
    display: inline;
}

/* ========================================
   表格
   ======================================== */
.markdown-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    border: 1px solid var(--md-color-border);
    border-radius: var(--md-radius);
    overflow: hidden;
}

.markdown-body thead {
    background-color: var(--md-color-bg-table-header);
}

.markdown-body tbody {
    background-color: var(--md-color-bg-table-row);
}

.markdown-body tr {
    border-bottom: 1px solid var(--md-color-border);
}

.markdown-body tr:last-child {
    border-bottom: none;
}

.markdown-body th {
    padding: 0.5rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    border: none;
}

.markdown-body td {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border: none;
}

/* ========================================
   分割线
   ======================================== */
.markdown-body hr {
    border: 0;
    border-top: 1px solid var(--md-color-border);
    margin: 1.5rem 0;
}

/* ========================================
   图片
   ======================================== */
.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--md-radius);
}

/* ========================================
   删除线
   ======================================== */
.markdown-body del {
    color: var(--md-color-text-muted);
    text-decoration: line-through;
}

/* ========================================
   上标/下标
   ======================================== */
.markdown-body sup,
.markdown-body sub {
    font-size: 0.875rem;
}

/* ========================================
   代码高亮 (highlight.js)
   ======================================== */
.markdown-body .hljs {
    background: var(--md-hljs-bg);
    color: var(--md-hljs-text);
}

.markdown-body .hljs-keyword,
.markdown-body .hljs-selector-tag {
    color: var(--md-hljs-keyword);
}

.markdown-body .hljs-string,
.markdown-body .hljs-attr {
    color: var(--md-hljs-string);
}

.markdown-body .hljs-comment {
    color: var(--md-hljs-comment);
}

.markdown-body .hljs-function,
.markdown-body .hljs-title {
    color: var(--md-hljs-function);
}

.markdown-body .hljs-number {
    color: var(--md-hljs-number);
}

/* ========================================
   流式渲染 - Pending 状态
   ======================================== */
.markdown-body [data-pending="true"] {
    position: relative;
}

.markdown-body [data-pending="true"]::after {
    display: none;
}

.markdown-body pre[data-pending="true"]::after {
    display: none;
}

/* ========================================
   流式渲染 - 图片骨架屏
   ======================================== */
@keyframes md-image-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.md-image-container {
    position: relative;
    display: block;
    border-radius: var(--md-radius);
    overflow: hidden;
}

.md-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.md-image-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--md-skeleton-bg);
    background-image: linear-gradient(90deg, var(--md-skeleton-bg) 0%, var(--md-skeleton-shine) 50%, var(--md-skeleton-bg) 100%);
    background-size: 200% 100%;
    animation: md-image-shimmer 1.5s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--md-radius);
    z-index: 1;
    pointer-events: none;
}

.md-image-skeleton-icon {
    fill: var(--md-skeleton-icon);
}

.md-image-skeleton-icon-detail {
    fill: var(--md-skeleton-icon-detail);
}

/* ========================================
   流式渲染 - 文本淡入动画
   ======================================== */
@keyframes md-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.md-animation-text {
    color: inherit;
}

/* ========================================
   代码块复制按钮
   ======================================== */
:root,
.md-light {
    --md-copy-button-bg: rgba(0, 0, 0, 0.05);
    --md-copy-button-bg-hover: rgba(0, 0, 0, 0.1);
    --md-copy-button-color: var(--md-color-text-muted);
    --md-copy-button-color-hover: var(--md-color-text);
    --md-copy-button-success: #22c55e;
}

@media (prefers-color-scheme: dark) {
    :root:not(.md-light) {
        --md-copy-button-bg: rgba(255, 255, 255, 0.1);
        --md-copy-button-bg-hover: rgba(255, 255, 255, 0.2);
        --md-copy-button-color: var(--md-color-text-muted);
        --md-copy-button-color-hover: var(--md-color-text);
        --md-copy-button-success: #22c55e;
    }
}

.md-dark {
    --md-copy-button-bg: rgba(255, 255, 255, 0.1);
    --md-copy-button-bg-hover: rgba(255, 255, 255, 0.2);
    --md-copy-button-color: var(--md-color-text-muted);
    --md-copy-button-color-hover: var(--md-color-text);
    --md-copy-button-success: #22c55e;
}

.md-code-block-wrapper {
    position: relative;
}

.md-code-block-wrapper pre {
    margin: 0;
}

.md-copy-button {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--md-radius-sm);
    background-color: transparent;
    color: var(--md-copy-button-color);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}

.md-copy-button:hover {
    opacity: 1;
}

.md-copy-button:active {
    transform: scale(0.95);
}

.md-copy-button--copied {
    color: var(--md-copy-button-success);
}

.md-copy-button--copied:hover {
    color: var(--md-copy-button-success);
}

.md-copy-button svg {
    width: 14px;
    height: 14px;
}

/* ========================================
   KaTeX 错误样式覆盖
   ======================================== */
.katex-error {
    color: inherit !important;
}

/* ========================================
   Mermaid 图表块样式
   ======================================== */

/* CSS 变量 - 浅色模式 */
:root,
.md-light {
    --md-mermaid-bg: var(--md-color-bg-code-block);
    --md-mermaid-border: var(--md-color-border);
    --md-mermaid-toolbar-bg: rgba(0, 0, 0, 0.03);
    --md-mermaid-toolbar-btn-bg: transparent;
    --md-mermaid-toolbar-btn-bg-hover: rgba(0, 0, 0, 0.08);
    --md-mermaid-toolbar-btn-bg-active: rgba(0, 0, 0, 0.12);
    --md-mermaid-toolbar-btn-color: var(--md-color-text-muted);
    --md-mermaid-toolbar-btn-color-hover: var(--md-color-text);
    --md-mermaid-error-bg: rgba(239, 68, 68, 0.1);
    --md-mermaid-error-color: #dc2626;
}

/* CSS 变量 - 暗黑模式 */
@media (prefers-color-scheme: dark) {
    :root:not(.md-light) {
        --md-mermaid-bg: var(--md-color-bg-code-block);
        --md-mermaid-border: var(--md-color-border);
        --md-mermaid-toolbar-bg: rgba(255, 255, 255, 0.05);
        --md-mermaid-toolbar-btn-bg: transparent;
        --md-mermaid-toolbar-btn-bg-hover: rgba(255, 255, 255, 0.1);
        --md-mermaid-toolbar-btn-bg-active: rgba(255, 255, 255, 0.15);
        --md-mermaid-toolbar-btn-color: var(--md-color-text-muted);
        --md-mermaid-toolbar-btn-color-hover: var(--md-color-text);
        --md-mermaid-error-bg: rgba(239, 68, 68, 0.15);
        --md-mermaid-error-color: #f87171;
    }
}

.md-dark {
    --md-mermaid-bg: var(--md-color-bg-code-block);
    --md-mermaid-border: var(--md-color-border);
    --md-mermaid-toolbar-bg: rgba(255, 255, 255, 0.05);
    --md-mermaid-toolbar-btn-bg: transparent;
    --md-mermaid-toolbar-btn-bg-hover: rgba(255, 255, 255, 0.1);
    --md-mermaid-toolbar-btn-bg-active: rgba(255, 255, 255, 0.15);
    --md-mermaid-toolbar-btn-color: var(--md-color-text-muted);
    --md-mermaid-toolbar-btn-color-hover: var(--md-color-text);
    --md-mermaid-error-bg: rgba(239, 68, 68, 0.15);
    --md-mermaid-error-color: #f87171;
}

/* Mermaid 块容器 */
.md-mermaid-block {
    position: relative;
    border-radius: var(--md-radius);
    overflow: hidden;
    border: 1px solid var(--md-mermaid-border);
    background-color: var(--md-mermaid-bg);
}

/* Mermaid 工具栏 */
.md-mermaid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    gap: 8px;
    background-color: var(--md-mermaid-toolbar-bg);
    border-bottom: 1px solid var(--md-mermaid-border);
}

.md-mermaid-toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.md-mermaid-toolbar-divider {
    width: 1px;
    height: 16px;
    background-color: var(--md-mermaid-border);
    margin: 0 4px;
}

.md-mermaid-mode-switch {
    background-color: var(--md-mermaid-toolbar-btn-bg-hover);
    border-radius: var(--md-radius-sm);
    padding: 2px;
}

/* 工具栏按钮 */
.md-mermaid-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--md-radius-sm);
    background-color: var(--md-mermaid-toolbar-btn-bg);
    color: var(--md-mermaid-toolbar-btn-color);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.md-mermaid-toolbar-btn:hover:not(:disabled) {
    background-color: var(--md-mermaid-toolbar-btn-bg-hover);
    color: var(--md-mermaid-toolbar-btn-color-hover);
}

.md-mermaid-toolbar-btn:active:not(:disabled) {
    background-color: var(--md-mermaid-toolbar-btn-bg-active);
}

.md-mermaid-toolbar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.md-mermaid-toolbar-btn--active {
    background-color: var(--md-mermaid-toolbar-btn-bg-active);
    color: var(--md-mermaid-toolbar-btn-color-hover);
}

.md-mermaid-toolbar-btn--success {
    color: var(--md-copy-button-success);
}

.md-mermaid-toolbar-btn--close:hover {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.md-mermaid-toolbar-btn svg {
    width: 16px;
    height: 16px;
}

/* 缩放百分比标签 */
.md-mermaid-zoom-label {
    min-width: 42px;
    text-align: center;
    font-size: 12px;
    font-family: var(--md-font-family-mono);
    color: var(--md-mermaid-toolbar-btn-color);
    user-select: none;
}

/* Mermaid 内容区域 */
.md-mermaid-content {
    position: relative;
    min-height: 100px;
}

/* 预览模式 */
.md-mermaid-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 120px;
    overflow: hidden;
}

.md-mermaid-svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
}

.md-mermaid-svg-container svg {
    max-width: 100%;
    height: auto;
}

/* 代码模式 */
.md-mermaid-code {
    position: relative;
}

.md-mermaid-code pre {
    margin: 0;
    border-radius: 0;
    background-color: var(--md-mermaid-bg);
}

.md-mermaid-code pre code {
    color: var(--md-color-text);
}

/* 错误提示 */
.md-mermaid-error {
    padding: 8px 12px;
    font-size: 13px;
    background-color: var(--md-mermaid-error-bg);
    color: var(--md-mermaid-error-color);
    border-top: 1px solid currentColor;
}

/* Loading 骨架屏 */
.md-mermaid-skeleton {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.md-mermaid-skeleton-box {
    width: 100%;
    height: 150px;
    background-color: var(--md-skeleton-bg);
    background-image: linear-gradient(90deg, var(--md-skeleton-bg) 0%, var(--md-skeleton-shine) 50%, var(--md-skeleton-bg) 100%);
    background-size: 200% 100%;
    animation: md-image-shimmer 1.5s linear infinite;
    border-radius: var(--md-radius);
}

/* ========================================
   Mermaid 全屏查看器（使用浏览器原生全屏）
   ======================================== */

/* 全屏容器 - 默认隐藏 */
.md-mermaid-fullscreen-wrapper {
    display: none;
}

/* 全屏激活状态 - 作为全屏元素的根容器 */
.md-mermaid-fullscreen-wrapper--active {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--md-color-bg, #ffffff);
}

/* 暗黑模式背景 */
@media (prefers-color-scheme: dark) {
    :root:not(.md-light) .md-mermaid-fullscreen-wrapper--active {
        background-color: var(--md-color-bg, #1a1a2e);
    }
}

.md-dark .md-mermaid-fullscreen-wrapper--active,
:root.dark .md-mermaid-fullscreen-wrapper--active,
[data-theme="dark"] .md-mermaid-fullscreen-wrapper--active {
    background-color: var(--md-color-bg, #1a1a2e);
}

/* 全屏工具栏 */
.md-mermaid-fullscreen-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: var(--md-mermaid-toolbar-bg);
    border-bottom: 1px solid var(--md-mermaid-border);
}

.md-mermaid-fullscreen-toolbar .md-mermaid-toolbar-btn {
    color: var(--md-mermaid-toolbar-btn-color);
}

.md-mermaid-fullscreen-toolbar .md-mermaid-toolbar-btn:hover:not(:disabled) {
    background-color: var(--md-mermaid-toolbar-btn-bg-hover);
    color: var(--md-mermaid-toolbar-btn-color-hover);
}

.md-mermaid-fullscreen-toolbar .md-mermaid-zoom-label {
    color: var(--md-mermaid-toolbar-btn-color);
}

/* 全屏内容区域 */
.md-mermaid-fullscreen-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 24px;
}

.md-mermaid-fullscreen-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

.md-mermaid-fullscreen-svg svg {
    max-width: none;
    max-height: none;
}