/* Code Syntax Highlighting */
pre {
    position: relative;
    background-color: var(--bg-code);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    margin: var(--space-6) 0;
    box-shadow: var(--shadow-md);
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    line-height: 1.6;
}

/* Inline code */
:not(pre) > code {
    background-color: var(--bg-tertiary);
    color: var(--color-danger);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.875em;
}

/* Code Copy Button */
.copy-code-button {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 1;
}

.copy-code-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Monokai Theme Colors */
.chroma {
    color: #f8f8f2;
    background-color: #272822;
}

.chroma .err { color: #960050; background-color: #1e0010; }
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
.chroma .hl { display: block; width: 100%; background-color: #3c3d37; }
.chroma .lnt { color: #7f7f7f; }
.chroma .ln { color: #7f7f7f; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }

/* Keywords */
.chroma .k { color: #66d9ef; }
.chroma .kc { color: #66d9ef; }
.chroma .kd { color: #66d9ef; }
.chroma .kn { color: #f92672; }
.chroma .kp { color: #66d9ef; }
.chroma .kr { color: #66d9ef; }
.chroma .kt { color: #66d9ef; }

/* Names */
.chroma .n { color: #f8f8f2; }
.chroma .na { color: #a6e22e; }
.chroma .nb { color: #f8f8f2; }
.chroma .bp { color: #f8f8f2; }
.chroma .nc { color: #a6e22e; }
.chroma .no { color: #66d9ef; }
.chroma .nd { color: #a6e22e; }
.chroma .ni { color: #f8f8f2; }
.chroma .ne { color: #a6e22e; }
.chroma .nf { color: #a6e22e; }
.chroma .fm { color: #a6e22e; }
.chroma .nl { color: #f8f8f2; }
.chroma .nn { color: #f8f8f2; }
.chroma .nx { color: #a6e22e; }
.chroma .py { color: #f8f8f2; }
.chroma .nt { color: #f92672; }
.chroma .nv { color: #f8f8f2; }
.chroma .vc { color: #f8f8f2; }
.chroma .vg { color: #f8f8f2; }
.chroma .vi { color: #f8f8f2; }
.chroma .vm { color: #f8f8f2; }

/* Literals */
.chroma .l { color: #ae81ff; }
.chroma .ld { color: #e6db74; }
.chroma .s { color: #e6db74; }
.chroma .sa { color: #e6db74; }
.chroma .sb { color: #e6db74; }
.chroma .sc { color: #e6db74; }
.chroma .dl { color: #e6db74; }
.chroma .sd { color: #e6db74; }
.chroma .s2 { color: #e6db74; }
.chroma .se { color: #ae81ff; }
.chroma .sh { color: #e6db74; }
.chroma .si { color: #e6db74; }
.chroma .sx { color: #e6db74; }
.chroma .sr { color: #e6db74; }
.chroma .s1 { color: #e6db74; }
.chroma .ss { color: #e6db74; }
.chroma .m { color: #ae81ff; }
.chroma .mb { color: #ae81ff; }
.chroma .mf { color: #ae81ff; }
.chroma .mh { color: #ae81ff; }
.chroma .mi { color: #ae81ff; }
.chroma .il { color: #ae81ff; }
.chroma .mo { color: #ae81ff; }

/* Operators */
.chroma .o { color: #f92672; }
.chroma .ow { color: #f92672; }

/* Comments */
.chroma .c { color: #75715e; }
.chroma .ch { color: #75715e; }
.chroma .cm { color: #75715e; }
.chroma .c1 { color: #75715e; }
.chroma .cs { color: #75715e; }
.chroma .cp { color: #75715e; }
.chroma .cpf { color: #75715e; }

/* Generic */
.chroma .g { color: #f8f8f2; }
.chroma .gd { color: #f92672; }
.chroma .ge { font-style: italic; }
.chroma .gi { color: #a6e22e; }
.chroma .gs { font-weight: bold; }
.chroma .gu { color: #75715e; }

/* Line Numbers */
.chroma .line { display: block; }
.chroma .line:hover { background-color: rgba(255, 255, 255, 0.05); }

/* Language-specific adjustments */
.language-bash .chroma .nv { color: #66d9ef; }
.language-bash .chroma .nb { color: #a6e22e; }

.language-json .chroma .nt { color: #f92672; }
.language-json .chroma .s2 { color: #e6db74; }

/* Scrollbar for code blocks */
pre::-webkit-scrollbar {
    height: 8px;
}

pre::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
}

pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
}

pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}