/* ========================================
   Claude 官方風格代碼塊樣式
   ========================================
   
   📁 建議路徑: /assets/css/claude_code_style.css
   
   🎯 特點:
   - 深色主題（類似 VS Code Dark+）
   - 語法高亮
   - 行號支持
   - 流暢的複製動畫
   - 響應式設計
   
   📝 使用方式:
   在 index4.php 或主 CSS 文件中引入此文件
   ======================================== */

/* ========================================
   CSS 變量 - 代碼塊專用
   ======================================== */
:root {
    /* 代碼塊深色主題顏色 */
    --code-bg: #1e1e1e;
    --code-header-bg: #2d2d2d;
    --code-border: #3d3d3d;
    --code-text: #d4d4d4;
    --code-line-number: #858585;
    --code-line-number-bg: #1e1e1e;
    --code-selection: rgba(38, 79, 120, 0.5);
    --code-scrollbar: #424242;
    --code-scrollbar-hover: #555555;
    
    /* 語法高亮顏色（VS Code Dark+ 風格）*/
    --syntax-keyword: #569cd6;       /* 關鍵字: function, const, let, var */
    --syntax-string: #ce9178;        /* 字符串 */
    --syntax-number: #b5cea8;        /* 數字 */
    --syntax-comment: #6a9955;       /* 註釋 */
    --syntax-function: #dcdcaa;      /* 函數名 */
    --syntax-class: #4ec9b0;         /* 類名 */
    --syntax-variable: #9cdcfe;      /* 變量 */
    --syntax-operator: #d4d4d4;      /* 運算符 */
    --syntax-punctuation: #d4d4d4;   /* 標點 */
    --syntax-tag: #569cd6;           /* HTML/XML 標籤 */
    --syntax-attribute: #9cdcfe;     /* 屬性名 */
    --syntax-property: #9cdcfe;      /* 屬性 */
    --syntax-type: #4ec9b0;          /* 類型 */
    --syntax-constant: #4fc1ff;      /* 常量 */
    --syntax-boolean: #569cd6;       /* 布爾值 */
    --syntax-null: #569cd6;          /* null/undefined */
    
    /* 按鈕顏色 */
    --code-btn-bg: transparent;
    --code-btn-hover: rgba(255, 255, 255, 0.1);
    --code-btn-text: #a0a0a0;
    --code-btn-text-hover: #ffffff;
    --code-btn-success: #4ade80;
}

/* ========================================
   代碼塊容器 - Claude 風格
   ======================================== */
.code-block {
    margin: 1rem 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
    max-width: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}

.code-block:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.08);
}

/* 深色主題類（保持向後兼容）*/
.code-block.dark-theme {
    background: var(--code-bg);
}

/* ========================================
   代碼塊頭部
   ======================================== */
.code-block .code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 1rem;
    background: var(--code-header-bg);
    border-bottom: 1px solid var(--code-border);
    min-height: 44px;
}

/* 語言標籤 */
.code-block .code-language {
    font-weight: 500;
    color: var(--code-btn-text);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 語言圖標（可選）*/
.code-block .code-language::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--syntax-keyword);
}

/* 不同語言的圖標顏色 */
.code-block[data-language="javascript"] .code-language::before,
.code-block[data-language="js"] .code-language::before {
    background: #f7df1e;
}

.code-block[data-language="typescript"] .code-language::before,
.code-block[data-language="ts"] .code-language::before {
    background: #3178c6;
}

.code-block[data-language="python"] .code-language::before,
.code-block[data-language="py"] .code-language::before {
    background: #3776ab;
}

.code-block[data-language="php"] .code-language::before {
    background: #777bb4;
}

.code-block[data-language="html"] .code-language::before {
    background: #e34f26;
}

.code-block[data-language="css"] .code-language::before {
    background: #1572b6;
}

.code-block[data-language="sql"] .code-language::before {
    background: #336791;
}

.code-block[data-language="json"] .code-language::before {
    background: #292929;
}

.code-block[data-language="bash"] .code-language::before,
.code-block[data-language="shell"] .code-language::before {
    background: #4eaa25;
}

/* ========================================
   操作按鈕
   ======================================== */
.code-block .code-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.code-block .code-btn {
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--code-btn-bg);
    color: var(--code-btn-text);
    border: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: inherit;
}

.code-block .code-btn:hover {
    background: var(--code-btn-hover);
    color: var(--code-btn-text-hover);
}

.code-block .code-btn:active {
    transform: scale(0.96);
}

/* 複製成功狀態 */
.code-block .code-btn.success {
    color: var(--code-btn-success);
}

.code-block .code-btn.success::before {
    content: '✓';
    margin-right: 0.25rem;
}

/* ========================================
   代碼內容區
   ======================================== */
.code-block .code-content {
    position: relative;
    background: var(--code-bg);
    overflow: auto;
    max-height: 500px;
    scrollbar-width: thin;
    scrollbar-color: var(--code-scrollbar) transparent;
}

/* Webkit 滾動條樣式 */
.code-block .code-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.code-block .code-content::-webkit-scrollbar-track {
    background: transparent;
}

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

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

.code-block .code-content::-webkit-scrollbar-corner {
    background: transparent;
}

/* Pre 和 Code 樣式 */
.code-block pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    background: transparent;
    white-space: pre;
    word-wrap: normal;
    counter-reset: line;
}

.code-block code {
    font-family: inherit;
    background: transparent;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.7;
    display: block;
    color: var(--code-text);
    tab-size: 4;
}

/* 文字選擇 */
.code-block code::selection,
.code-block code *::selection {
    background: var(--code-selection);
}

/* ========================================
   行號支持（可選功能）
   ======================================== */
.code-block.with-line-numbers pre {
    padding-left: 3.5rem;
}

.code-block.with-line-numbers code {
    position: relative;
}

.code-block.with-line-numbers .line {
    display: block;
    position: relative;
}

.code-block.with-line-numbers .line::before {
    counter-increment: line;
    content: counter(line);
    position: absolute;
    left: -3rem;
    width: 2rem;
    text-align: right;
    color: var(--code-line-number);
    font-size: 0.8125rem;
    user-select: none;
    pointer-events: none;
}

/* ========================================
   語法高亮類
   ======================================== */
/* 關鍵字 */
.code-block .keyword,
.code-block .hljs-keyword,
.code-block .token.keyword {
    color: var(--syntax-keyword);
}

/* 字符串 */
.code-block .string,
.code-block .hljs-string,
.code-block .token.string {
    color: var(--syntax-string);
}

/* 數字 */
.code-block .number,
.code-block .hljs-number,
.code-block .token.number {
    color: var(--syntax-number);
}

/* 註釋 */
.code-block .comment,
.code-block .hljs-comment,
.code-block .token.comment {
    color: var(--syntax-comment);
    font-style: italic;
}

/* 函數 */
.code-block .function,
.code-block .hljs-function,
.code-block .token.function {
    color: var(--syntax-function);
}

/* 類名 */
.code-block .class-name,
.code-block .hljs-class,
.code-block .token.class-name {
    color: var(--syntax-class);
}

/* 變量 */
.code-block .variable,
.code-block .hljs-variable,
.code-block .token.variable {
    color: var(--syntax-variable);
}

/* 運算符 */
.code-block .operator,
.code-block .hljs-operator,
.code-block .token.operator {
    color: var(--syntax-operator);
}

/* 標點 */
.code-block .punctuation,
.code-block .hljs-punctuation,
.code-block .token.punctuation {
    color: var(--syntax-punctuation);
}

/* HTML/XML 標籤 */
.code-block .tag,
.code-block .hljs-tag,
.code-block .token.tag {
    color: var(--syntax-tag);
}

/* 屬性名 */
.code-block .attr-name,
.code-block .hljs-attr,
.code-block .token.attr-name {
    color: var(--syntax-attribute);
}

/* 屬性值 */
.code-block .attr-value,
.code-block .token.attr-value {
    color: var(--syntax-string);
}

/* 布爾值 */
.code-block .boolean,
.code-block .hljs-literal,
.code-block .token.boolean {
    color: var(--syntax-boolean);
}

/* 常量 */
.code-block .constant,
.code-block .hljs-built_in,
.code-block .token.constant {
    color: var(--syntax-constant);
}

/* 類型 */
.code-block .type,
.code-block .hljs-type,
.code-block .token.type {
    color: var(--syntax-type);
}

/* SQL 特定 */
.code-block[data-language="sql"] .keyword {
    color: var(--syntax-keyword);
    text-transform: uppercase;
}

/* ========================================
   響應式設計
   ======================================== */
@media (max-width: 768px) {
    .code-block {
        border-radius: 8px;
        margin: 0.75rem 0;
    }
    
    .code-block .code-header {
        padding: 0.5rem 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .code-block .code-language {
        font-size: 0.6875rem;
    }
    
    .code-block .code-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .code-block pre {
        padding: 0.75rem;
    }
    
    .code-block code {
        font-size: 0.8125rem;
    }
    
    .code-block .code-content {
        max-height: 350px;
    }
}

/* ========================================
   動畫效果
   ======================================== */
@keyframes copySuccess {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.code-block .code-btn.success {
    animation: copySuccess 0.3s ease;
}

/* 代碼塊淡入效果 */
@keyframes codeBlockFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.code-block {
    animation: codeBlockFadeIn 0.3s ease;
}

/* ========================================
   打印樣式
   ======================================== */
@media print {
    .code-block {
        border: 1px solid #ccc;
        box-shadow: none;
        page-break-inside: avoid;
    }
    
    .code-block .code-header {
        background: #f5f5f5;
    }
    
    .code-block .code-actions {
        display: none;
    }
    
    .code-block .code-content {
        max-height: none;
        background: #fafafa;
    }
    
    .code-block code {
        color: #333;
    }
}

/* ========================================
   淺色主題（可選）
   ======================================== */
.code-block.light-theme {
    --code-bg: #ffffff;
    --code-header-bg: #f6f8fa;
    --code-border: #e1e4e8;
    --code-text: #24292e;
    --code-line-number: #959da5;
    --code-selection: rgba(0, 122, 204, 0.2);
    --code-scrollbar: #d1d5da;
    --code-scrollbar-hover: #959da5;
    
    /* 淺色語法高亮 */
    --syntax-keyword: #d73a49;
    --syntax-string: #032f62;
    --syntax-number: #005cc5;
    --syntax-comment: #6a737d;
    --syntax-function: #6f42c1;
    --syntax-class: #22863a;
    --syntax-variable: #e36209;
    
    --code-btn-text: #586069;
    --code-btn-hover: rgba(0, 0, 0, 0.05);
    --code-btn-text-hover: #24292e;
    --code-btn-success: #22863a;
}