/**
 * Code Highlight Pro - 前台样式
 * 国际化代码高亮组件，支持多主题切换
 */

.chp-code-block {
    --chp-bg: #1e1e1e;
    --chp-fg: #d4d4d4;
    --chp-border: #2d2d2d;
    --chp-toolbar-bg: #252526;
    --chp-line-num: #6e7681;
    --chp-line-num-bg: #1a1a1a;
    --chp-comment: #6a9955;
    --chp-keyword: #569cd6;
    --chp-string: #ce9178;
    --chp-function: #dcdcaa;
    --chp-number: #b5cea8;
    --chp-class: #4ec9b0;
    --chp-operator: #d4d4d4;
    --chp-variable: #9cdcfe;
    --chp-tag: #569cd6;
    --chp-attr: #9cdcfe;
    --chp-highlight-line: rgba(255, 255, 255, 0.06);
    --chp-diff-add: rgba(46, 160, 67, 0.15);
    --chp-diff-remove: rgba(248, 81, 73, 0.15);
    --chp-radius: 8px;
    --chp-font: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Courier New', monospace;

    position: relative;
    margin: 1.5em 0;
    border-radius: var(--chp-radius);
    overflow: hidden;
    background: var(--chp-bg);
    border: 1px solid var(--chp-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    direction: ltr;
}

/* ============ 工具栏 ============ */
.chp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--chp-toolbar-bg);
    border-bottom: 1px solid var(--chp-border);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.chp-toolbar-left,
.chp-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chp-dots {
    display: inline-flex;
    gap: 6px;
    margin-right: 4px;
}

.chp-dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

.chp-dots span:nth-child(1) { background: #ff5f56; }
.chp-dots span:nth-child(2) { background: #ffbd2e; }
.chp-dots span:nth-child(3) { background: #27c93f; }

.chp-filename,
.chp-language-label {
    font-size: 12px;
    color: var(--chp-fg);
    opacity: 0.75;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.chp-language-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--chp-fg);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ============ 复制按钮 ============ */
.chp-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--chp-fg);
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    line-height: 1.4;
}

.chp-copy-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.16);
}

.chp-copy-btn.chp-copied {
    background: rgba(46, 160, 67, 0.2);
    border-color: rgba(46, 160, 67, 0.4);
    color: #3fb950;
}

.chp-copy-btn .chp-icon-copy,
.chp-copy-btn .chp-icon-check {
    flex-shrink: 0;
}

/* ============ 代码主体 ============ */
.chp-code-wrapper {
    display: flex;
    overflow-x: auto;
}

.chp-line-numbers {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    background: var(--chp-line-num-bg);
    border-right: 1px solid var(--chp-border);
    user-select: none;
    text-align: right;
}

.chp-line-numbers span {
    display: block;
    padding: 0 14px;
    font-family: var(--chp-font);
    font-size: 13px;
    line-height: 1.6;
    color: var(--chp-line-num);
}

.chp-pre {
    margin: 0;
    padding: 16px 20px;
    overflow-x: auto;
    flex: 1;
    background: transparent;
    color: var(--chp-fg);
    font-family: var(--chp-font) !important;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.chp-pre code {
    font-family: inherit;
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    color: inherit;
    white-space: pre;
    font-size: inherit;
}

.chp-code-block.chp-wrap-on .chp-pre,
.chp-code-block.chp-wrap-on .chp-pre code {
    white-space: pre-wrap;
    word-break: break-word;
}

/* 高亮行 */
.chp-pre .chp-line-highlight {
    display: block;
    margin: 0 -20px;
    padding: 0 20px;
    background: var(--chp-highlight-line);
    border-left: 3px solid #569cd6;
}

/* Diff 高亮 */
.chp-pre .chp-line-diff-add {
    display: block;
    margin: 0 -20px;
    padding: 0 20px;
    background: var(--chp-diff-add);
    border-left: 3px solid #2ea043;
}

.chp-pre .chp-line-diff-remove {
    display: block;
    margin: 0 -20px;
    padding: 0 20px;
    background: var(--chp-diff-remove);
    border-left: 3px solid #f85149;
}

/* ============ 语法高亮 Token ============ */
.chp-pre .token.comment,
.chp-pre .token.prolog,
.chp-pre .token.doctype,
.chp-pre .token.cdata {
    color: var(--chp-comment);
    font-style: italic;
}

.chp-pre .token.keyword,
.chp-pre .token.selector,
.chp-pre .token.important,
.chp-pre .token.atrule {
    color: var(--chp-keyword);
}

.chp-pre .token.string,
.chp-pre .token.char,
.chp-pre .token.attr-value,
.chp-pre .token.regex {
    color: var(--chp-string);
}

.chp-pre .token.function,
.chp-pre .token.method {
    color: var(--chp-function);
}

.chp-pre .token.number,
.chp-pre .token.boolean,
.chp-pre .token.constant {
    color: var(--chp-number);
}

.chp-pre .token.class-name,
.chp-pre .token.builtin {
    color: var(--chp-class);
}

.chp-pre .token.operator,
.chp-pre .token.punctuation {
    color: var(--chp-operator);
    opacity: 0.85;
}

.chp-pre .token.variable,
.chp-pre .token.property {
    color: var(--chp-variable);
}

.chp-pre .token.tag {
    color: var(--chp-tag);
}

.chp-pre .token.attr-name {
    color: var(--chp-attr);
}

/* ============================================
   主题：Visual Studio 浅色
   ============================================ */
.chp-code-block.chp-theme-vs-light {
    --chp-bg: #ffffff;
    --chp-fg: #1e1e1e;
    --chp-border: #e1e4e8;
    --chp-toolbar-bg: #f6f8fa;
    --chp-line-num: #a0a0a0;
    --chp-line-num-bg: #f6f8fa;
    --chp-comment: #008000;
    --chp-keyword: #0000ff;
    --chp-string: #a31515;
    --chp-function: #795e26;
    --chp-number: #098658;
    --chp-class: #267f99;
    --chp-operator: #1e1e1e;
    --chp-variable: #001080;
    --chp-tag: #800000;
    --chp-attr: #ff0000;
    --chp-highlight-line: rgba(0, 0, 0, 0.04);
}

/* ============================================
   主题：GitHub Dark
   ============================================ */
.chp-code-block.chp-theme-github-dark {
    --chp-bg: #0d1117;
    --chp-fg: #c9d1d9;
    --chp-border: #30363d;
    --chp-toolbar-bg: #161b22;
    --chp-line-num: #6e7681;
    --chp-line-num-bg: #0d1117;
    --chp-comment: #8b949e;
    --chp-keyword: #ff7b72;
    --chp-string: #a5d6ff;
    --chp-function: #d2a8ff;
    --chp-number: #79c0ff;
    --chp-class: #ffa657;
    --chp-operator: #c9d1d9;
    --chp-variable: #79c0ff;
    --chp-tag: #7ee787;
    --chp-attr: #79c0ff;
}

/* ============================================
   主题：GitHub Light
   ============================================ */
.chp-code-block.chp-theme-github-light {
    --chp-bg: #ffffff;
    --chp-fg: #24292f;
    --chp-border: #d0d7de;
    --chp-toolbar-bg: #f6f8fa;
    --chp-line-num: #8c959f;
    --chp-line-num-bg: #f6f8fa;
    --chp-comment: #6e7781;
    --chp-keyword: #cf222e;
    --chp-string: #0a3069;
    --chp-function: #8250df;
    --chp-number: #0550ae;
    --chp-class: #953800;
    --chp-operator: #24292f;
    --chp-variable: #0550ae;
    --chp-tag: #116329;
    --chp-attr: #0550ae;
    --chp-highlight-line: rgba(0, 0, 0, 0.04);
}

/* ============================================
   主题：Dracula
   ============================================ */
.chp-code-block.chp-theme-dracula {
    --chp-bg: #282a36;
    --chp-fg: #f8f8f2;
    --chp-border: #44475a;
    --chp-toolbar-bg: #21222c;
    --chp-line-num: #6272a4;
    --chp-line-num-bg: #21222c;
    --chp-comment: #6272a4;
    --chp-keyword: #ff79c6;
    --chp-string: #f1fa8c;
    --chp-function: #50fa7b;
    --chp-number: #bd93f9;
    --chp-class: #8be9fd;
    --chp-operator: #ff79c6;
    --chp-variable: #f8f8f2;
    --chp-tag: #ff79c6;
    --chp-attr: #50fa7b;
}

/* ============================================
   主题：Monokai
   ============================================ */
.chp-code-block.chp-theme-monokai {
    --chp-bg: #272822;
    --chp-fg: #f8f8f2;
    --chp-border: #3e3d32;
    --chp-toolbar-bg: #1e1f1c;
    --chp-line-num: #75715e;
    --chp-line-num-bg: #1e1f1c;
    --chp-comment: #75715e;
    --chp-keyword: #f92672;
    --chp-string: #e6db74;
    --chp-function: #a6e22e;
    --chp-number: #ae81ff;
    --chp-class: #66d9ef;
    --chp-operator: #f92672;
    --chp-variable: #f8f8f2;
    --chp-tag: #f92672;
    --chp-attr: #a6e22e;
}

/* ============================================
   主题：Nord
   ============================================ */
.chp-code-block.chp-theme-nord {
    --chp-bg: #2e3440;
    --chp-fg: #d8dee9;
    --chp-border: #3b4252;
    --chp-toolbar-bg: #272c36;
    --chp-line-num: #4c566a;
    --chp-line-num-bg: #272c36;
    --chp-comment: #616e88;
    --chp-keyword: #81a1c1;
    --chp-string: #a3be8c;
    --chp-function: #88c0d0;
    --chp-number: #b48ead;
    --chp-class: #8fbcbb;
    --chp-operator: #81a1c1;
    --chp-variable: #d8dee9;
    --chp-tag: #81a1c1;
    --chp-attr: #8fbcbb;
}

/* ============================================
   主题：One Dark Pro
   ============================================ */
.chp-code-block.chp-theme-one-dark {
    --chp-bg: #282c34;
    --chp-fg: #abb2bf;
    --chp-border: #181a1f;
    --chp-toolbar-bg: #21252b;
    --chp-line-num: #495162;
    --chp-line-num-bg: #21252b;
    --chp-comment: #5c6370;
    --chp-keyword: #c678dd;
    --chp-string: #98c379;
    --chp-function: #61afef;
    --chp-number: #d19a66;
    --chp-class: #e5c07b;
    --chp-operator: #56b6c2;
    --chp-variable: #e06c75;
    --chp-tag: #e06c75;
    --chp-attr: #d19a66;
}

/* ============================================
   主题：Solarized Dark
   ============================================ */
.chp-code-block.chp-theme-solarized-dark {
    --chp-bg: #002b36;
    --chp-fg: #839496;
    --chp-border: #073642;
    --chp-toolbar-bg: #00252e;
    --chp-line-num: #586e75;
    --chp-line-num-bg: #00252e;
    --chp-comment: #586e75;
    --chp-keyword: #859900;
    --chp-string: #2aa198;
    --chp-function: #268bd2;
    --chp-number: #d33682;
    --chp-class: #b58900;
    --chp-operator: #859900;
    --chp-variable: #839496;
    --chp-tag: #268bd2;
    --chp-attr: #93a1a1;
}

/* ============================================
   主题：Solarized Light
   ============================================ */
.chp-code-block.chp-theme-solarized-light {
    --chp-bg: #fdf6e3;
    --chp-fg: #657b83;
    --chp-border: #eee8d5;
    --chp-toolbar-bg: #eee8d5;
    --chp-line-num: #93a1a1;
    --chp-line-num-bg: #eee8d5;
    --chp-comment: #93a1a1;
    --chp-keyword: #859900;
    --chp-string: #2aa198;
    --chp-function: #268bd2;
    --chp-number: #d33682;
    --chp-class: #b58900;
    --chp-operator: #859900;
    --chp-variable: #657b83;
    --chp-tag: #268bd2;
    --chp-attr: #586e75;
    --chp-highlight-line: rgba(0, 0, 0, 0.04);
}

/* ============================================
   主题：Tomorrow Night
   ============================================ */
.chp-code-block.chp-theme-tomorrow-night {
    --chp-bg: #1d1f21;
    --chp-fg: #c5c8c6;
    --chp-border: #373b41;
    --chp-toolbar-bg: #161719;
    --chp-line-num: #969896;
    --chp-line-num-bg: #161719;
    --chp-comment: #969896;
    --chp-keyword: #b294bb;
    --chp-string: #b5bd68;
    --chp-function: #81a2be;
    --chp-number: #de935f;
    --chp-class: #f0c674;
    --chp-operator: #8abeb7;
    --chp-variable: #cc6666;
    --chp-tag: #cc6666;
    --chp-attr: #de935f;
}

/* ============================================
   主题：Material Dark
   ============================================ */
.chp-code-block.chp-theme-material-dark {
    --chp-bg: #263238;
    --chp-fg: #eeffff;
    --chp-border: #314549;
    --chp-toolbar-bg: #1e272c;
    --chp-line-num: #546e7a;
    --chp-line-num-bg: #1e272c;
    --chp-comment: #546e7a;
    --chp-keyword: #c792ea;
    --chp-string: #c3e88d;
    --chp-function: #82aaff;
    --chp-number: #f78c6c;
    --chp-class: #ffcb6b;
    --chp-operator: #89ddff;
    --chp-variable: #eeffff;
    --chp-tag: #f07178;
    --chp-attr: #ffcb6b;
}

/* ============================================
   主题：Material Light
   ============================================ */
.chp-code-block.chp-theme-material-light {
    --chp-bg: #fafafa;
    --chp-fg: #90a4ae;
    --chp-border: #e0e0e0;
    --chp-toolbar-bg: #f5f5f5;
    --chp-line-num: #cfd8dc;
    --chp-line-num-bg: #f5f5f5;
    --chp-comment: #90a4ae;
    --chp-keyword: #7c4dff;
    --chp-string: #91b859;
    --chp-function: #6182b8;
    --chp-number: #f76d47;
    --chp-class: #ffb62c;
    --chp-operator: #39adb5;
    --chp-variable: #e53935;
    --chp-tag: #e53935;
    --chp-attr: #ffb62c;
    --chp-highlight-line: rgba(0, 0, 0, 0.04);
}

/* ============================================
   响应式
   ============================================ */
@media (max-width: 600px) {
    .chp-toolbar {
        padding: 6px 10px;
    }

    .chp-filename,
    .chp-language-label {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chp-copy-text {
        display: none;
    }

    .chp-pre {
        padding: 12px 14px;
        font-size: 12px !important;
    }

    .chp-line-numbers span {
        padding: 0 8px;
        font-size: 12px;
    }
}

/* ============================================
   RTL 语言支持（阿拉伯语 / 希伯来语等界面，代码本身保持 LTR）
   ============================================ */
[dir="rtl"] .chp-toolbar-left {
    direction: ltr;
}

[dir="rtl"] .chp-toolbar-right {
    direction: ltr;
}

[dir="rtl"] .chp-code-wrapper {
    direction: ltr;
}