/* ============================================
 * YuFen 主题 - 代码块样式
 * 作用：代码块容器、复制按钮、滚动条、内联代码、错误标记
 * 功能：为 Markdown 代码块提供美观的容器、语言标签、
 *       一键复制按钮和自定义滚动条
 * 包含：CSS 变量驱动主题色、浅色/深色模式、响应式、打印样式
 * 合并文件：code-block.css + code-error.css
 * ============================================ */

/* ---------- CSS 变量（浅色模式） ---------- */
:root {
    --cb-bg: #fafafa;
    --cb-border: 1px dashed #d0d0d0;
    --cb-text: #1f2328;
    --cb-head: transparent;
    --cb-btn-border: #d4d4d4;
    --cb-btn-hover-bg: #f5f5f5;
    --cb-btn-hover-text: #333333;
    --cb-btn-hover-border: #999999;
    --cb-shadow: none;
    --cb-shadow-hover: none;
    --cb-radius: 6px;
    --cb-scrollbar-track: #f0f0f0;
    --cb-scrollbar-thumb: #cccccc;
    --cb-scrollbar-thumb-hover: #aaaaaa;
    --cb-ln-color: #999999;
    --cb-ln-border: #e5e5e5;
    --cb-copy-success: #16a34a;
    --cb-copy-success-bg: #f0fdf4;
    --cb-copy-success-border: #86efac;
    --cb-copy-success-hover: #dcfce7;
    --cb-lang-label: #666666;
    --cb-font: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Monaco, "Courier New", monospace;
}

/* ---------- CSS 变量（深色模式） ---------- */
.dark {
    --cb-bg: #1e1e1e;
    --cb-border: 1px dashed #444444;
    --cb-text: #e6edf3;
    --cb-head: transparent;
    --cb-btn-border: #555555;
    --cb-btn-hover-bg: #2a2a2a;
    --cb-btn-hover-text: #e0e0e0;
    --cb-btn-hover-border: #666666;
    --cb-shadow: none;
    --cb-shadow-hover: none;
    --cb-scrollbar-track: #2a2a2a;
    --cb-scrollbar-thumb: #4a4a4a;
    --cb-scrollbar-thumb-hover: #5a5a5a;
    --cb-ln-color: #666666;
    --cb-ln-border: #333333;
    --cb-copy-success: #4ade80;
    --cb-copy-success-bg: #14532d;
    --cb-copy-success-border: #22c55e;
    --cb-copy-success-hover: #166534;
    --cb-lang-label: #999999;
}

/* ---------- 字体 ---------- */
.code-font,
.lang-label,
.code-content-wrapper pre,
.code-content-wrapper pre.chroma {
    font-family: var(--cb-font);
}

/* ---------- 代码块容器 ---------- */
/* Obsidian Border 主题：点状图案背景叠加在纯色之上 */
.code-block-container {
    position: relative;
    margin: 1rem auto;
    width: 100%;
    border-radius: var(--cb-radius);
    background: var(--pattern-bg), var(--cb-bg);
    border: var(--cb-border);
    overflow: hidden;
    box-shadow: var(--cb-shadow);
    transition: all 0.2s ease;
}

.code-block-container:hover {
    box-shadow: var(--cb-shadow-hover);
}

/* ---------- 头部：语言标签 + 复制按钮 ---------- */
.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    min-height: 26px;
    box-sizing: border-box;
    cursor: default;
    flex-wrap: nowrap;
    background-color: var(--cb-head);
    border-bottom: none;
    user-select: none;
}

.code-block-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* 语言标签 */
.lang-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--cb-lang-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 复制按钮 */
.copy-button {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cb-lang-label);
    background: transparent;
    border: 1px solid var(--cb-btn-border);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.copy-button i {
    font-size: 11px;
}

.copy-button:hover {
    color: var(--cb-btn-hover-text);
    border-color: var(--cb-btn-hover-border);
    background-color: var(--cb-btn-hover-bg);
}

.copy-button.copied {
    color: var(--cb-copy-success);
    border-color: var(--cb-copy-success-border);
    background-color: var(--cb-copy-success-bg);
}

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

/* ---------- 代码内容区域 ---------- */
.code-content-wrapper {
    overflow-x: auto;
    width: 100%;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--cb-scrollbar-thumb) var(--cb-scrollbar-track);
}

/* 滚动条 - WebKit */
.code-content-wrapper::-webkit-scrollbar {
    height: 8px;
}

.code-content-wrapper::-webkit-scrollbar-track {
    background: var(--cb-scrollbar-track);
}

.code-content-wrapper::-webkit-scrollbar-thumb {
    background: var(--cb-scrollbar-thumb);
    border-radius: 4px;
}

.code-content-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--cb-scrollbar-thumb-hover);
}

.code-content-wrapper > div {
    min-width: 0;
}

/* Pre 代码块 */
.code-content-wrapper pre,
.code-content-wrapper pre.chroma {
    margin: 0;
    padding: 0.6rem 0.8rem;
    overflow-x: hidden;
    font-family: var(--cb-font);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cb-text);
    background-color: transparent;
    tab-size: 4;
    display: block;
    width: 100%;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Chroma 行号表格 */
.code-content-wrapper .chroma .lntable {
    width: 100%;
    border-spacing: 0;
    table-layout: fixed;
}

.code-content-wrapper .chroma .lntd:first-child {
    width: 1%;
    vertical-align: top;
    white-space: nowrap;
    padding-right: 1rem;
}

.code-content-wrapper .chroma .lntd:last-child {
    vertical-align: top;
    overflow-x: visible;
    width: 100%;
    word-break: break-word;
    white-space: normal;
}

.code-content-wrapper .chroma .line {
    white-space: normal;
    word-break: break-word;
}

/* 行号样式 */
.code-content-wrapper .chroma .lnt {
    color: var(--cb-ln-color);
    font-size: 11px;
    text-align: right;
    user-select: none;
    padding-right: 0.5rem;
    border-right: 1px dashed var(--cb-ln-border);
    margin-right: 0.6rem;
    display: inline-block;
    min-width: 1.2rem;
}

/* Code inline within pre */
.code-content-wrapper code {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: transparent;
    padding: 0;
    color: inherit;
}

/* ---------- Chroma 容器透明背景 ---------- */
.code-content-wrapper .chroma {
    background-color: transparent;
}

/* ---------- 错误标记（合并自 code-error.css） ---------- */
.code-content-wrapper .chroma .err {
    color: #d33682;
    background-color: transparent;
    border-bottom: 1px dashed #d33682;
}

.dark .code-content-wrapper .chroma .err {
    color: #ff79c6;
    border-bottom: 1px dashed #ff79c6;
}

/* ---------- 可访问性 ---------- */
@media (prefers-reduced-motion: reduce) {
    .code-block-container,
    .copy-button {
        transition: none;
    }
}

/* ---------- 打印样式 ---------- */
@media print {
    .code-block-container {
        box-shadow: none;
        border: 1px dashed #ccc;
        break-inside: avoid;
    }

    .code-block-header {
        background: transparent !important;
    }

    .copy-button {
        display: none;
    }

    .code-content-wrapper pre,
    .code-content-wrapper pre.chroma {
        white-space: pre-wrap;
        word-break: break-word;
        overflow-x: visible;
    }
}

/* ---------- 移动端响应式 ---------- */
@media (max-width: 640px) {
    .code-block-container {
        margin: 0.75rem auto;
        border-radius: 4px;
    }

    .code-block-header {
        padding: 4px 8px;
        min-height: 24px;
    }

    .lang-label {
        font-size: 10px;
    }

    .copy-button {
        font-size: 10px;
        padding: 2px 5px;
    }

    .code-content-wrapper pre,
    .code-content-wrapper pre.chroma {
        padding: 0.5rem 0.7rem;
        font-size: 11.5px;
        line-height: 1.45;
    }
}