/* Symbolic Language Syntax Highlighting */

/* Base code block styling */
.highlight-symbolic {
    background: #282c34;
    color: #abb2bf;
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    line-height: 1.5;
    font-size: 0.9em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Light theme */
.highlight-symbolic.light {
    background: #f8f9fa;
    color: #212529;
    border: 1px solid #e9ecef;
}

/* Token styles based on cli.py TOKEN_STYLES */

/* Numbers - yellow */
.highlight-symbolic .m,
.highlight-symbolic .mi,
.highlight-symbolic .mf,
.highlight-symbolic .mh,
.highlight-symbolic .mo {
    color: #FFD700; /* yellow */
    font-weight: 500;
}

/* Strings - gold */
.highlight-symbolic .s,
.highlight-symbolic .sb,
.highlight-symbolic .sc,
.highlight-symbolic .sd,
.highlight-symbolic .s2,
.highlight-symbolic .se,
.highlight-symbolic .sh,
.highlight-symbolic .si,
.highlight-symbolic .sx,
.highlight-symbolic .sr,
.highlight-symbolic .s1,
.highlight-symbolic .ss {
    color: #FFD700; /* #FFD700 - gold for strings */
}

/* Identifiers - cyan */
.highlight-symbolic .n,
.highlight-symbolic .na,
.highlight-symbolic .nb,
.highlight-symbolic .nc,
.highlight-symbolic .nd,
.highlight-symbolic .ne,
.highlight-symbolic .nf,
.highlight-symbolic .nl,
.highlight-symbolic .nn,
.highlight-symbolic .no,
.highlight-symbolic .nt,
.highlight-symbolic .nv,
.highlight-symbolic .nx {
    color: #00FFFF; /* cyan */
}

/* Keywords - deep pink */
.highlight-symbolic .k,
.highlight-symbolic .kc,
.highlight-symbolic .kd,
.highlight-symbolic .kn,
.highlight-symbolic .kp,
.highlight-symbolic .kr,
.highlight-symbolic .kt {
    color: #FF1493; /* deep pink */
    font-weight: 600;
}

/* Separators - green */
.highlight-symbolic .p {
    color: #00FF00; /* green for punctuation/separators */
}

/* Symbols and operators - orange/orange-red */
.highlight-symbolic .o,
.highlight-symbolic .ow {
    color: #FFA500; /* orange for symbols */
}

.highlight-symbolic .op {
    color: #FF4500; /* orange-red for operators */
}

/* Full stops - white */
.highlight-symbolic .punct {
    color: #FFFFFF; /* white for full stops */
}

/* Comments - lawn green */
.highlight-symbolic .c,
.highlight-symbolic .ch,
.highlight-symbolic .cm,
.highlight-symbolic .cp,
.highlight-symbolic .cpf,
.highlight-symbolic .c1,
.highlight-symbolic .cs {
    color: #7CFC00; /* lawn green */
    font-style: italic;
}

/* Other/unknown - blue violet */
.highlight-symbolic .x,
.highlight-symbolic .err,
.highlight-symbolic .g {
    color: #8A2BE2; /* blue violet */
}

/* Special Symbolic language elements */

/* Complex number 'i' */
.highlight-symbolic .ni {
    color: #FFD700;
    font-weight: 600;
}

/* Mathematical operators like ^, |z|, z* */
.highlight-symbolic .mo-math {
    color: #FFA500;
    font-weight: 600;
}

/* Function definitions with mathematical notation */
.highlight-symbolic .nf-math {
    color: #00FFFF;
    font-weight: 600;
}

/* Pattern matching keywords */
.highlight-symbolic .k-pattern {
    color: #FF69B4;
    font-weight: 600;
}

/* Async/await keywords */
.highlight-symbolic .k-async {
    color: #9370DB;
    font-weight: 600;
}

/* Type annotations */
.highlight-symbolic .kt-annotation {
    color: #32CD32;
    font-style: italic;
}

/* Light theme overrides */
.highlight-symbolic.light .m,
.highlight-symbolic.light .mi,
.highlight-symbolic.light .mf,
.highlight-symbolic.light .mh,
.highlight-symbolic.light .mo {
    color: #B8860B; /* dark goldenrod for numbers */
}

.highlight-symbolic.light .s,
.highlight-symbolic.light .s1,
.highlight-symbolic.light .s2 {
    color: #8B4513; /* saddle brown for strings */
}

.highlight-symbolic.light .n,
.highlight-symbolic.light .nf,
.highlight-symbolic.light .nx {
    color: #000080; /* navy for identifiers */
}

.highlight-symbolic.light .k,
.highlight-symbolic.light .kd,
.highlight-symbolic.light .kn {
    color: #8B008B; /* dark magenta for keywords */
}

.highlight-symbolic.light .o,
.highlight-symbolic.light .op {
    color: #FF4500; /* orange red for operators */
}

.highlight-symbolic.light .p {
    color: #228B22; /* forest green for punctuation */
}

.highlight-symbolic.light .c,
.highlight-symbolic.light .c1,
.highlight-symbolic.light .cm {
    color: #228B22; /* forest green for comments */
}

/* Line numbers */
.highlight-symbolic .linenos {
    background: #21252b;
    color: #5c6370;
    padding-right: 1em;
    text-align: right;
    user-select: none;
    border-right: 1px solid #3e4452;
}

.highlight-symbolic.light .linenos {
    background: #f1f3f4;
    color: #5f6368;
    border-right-color: #dadce0;
}

/* Highlighted lines */
.highlight-symbolic .hll {
    background-color: #3e4452;
    display: block;
    margin: 0 -1rem;
    padding: 0 1rem;
}

.highlight-symbolic.light .hll {
    background-color: #fff3cd;
}

/* Copy button integration */
.highlight-symbolic {
    position: relative;
}

.highlight-symbolic .copy-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 20, 147, 0.8);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    font-family: inherit;
}

.highlight-symbolic:hover .copy-button {
    opacity: 1;
}

.highlight-symbolic .copy-button:hover {
    background: #FF1493;
    transform: scale(1.1);
}

/* Interactive code blocks */
.highlight-symbolic.interactive {
    border-left: 4px solid #FF1493;
    background: linear-gradient(135deg, #282c34, #2d3142);
}

.highlight-symbolic.interactive::before {
    content: "Interactive";
    position: absolute;
    top: -8px;
    left: 12px;
    background: #FF1493;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Error highlighting */
.highlight-symbolic .err {
    color: #e06c75;
    background-color: rgba(224, 108, 117, 0.1);
    border-radius: 2px;
}

/* Selection highlighting */
.highlight-symbolic ::selection {
    background-color: rgba(255, 20, 147, 0.3);
}

.highlight-symbolic.light ::selection {
    background-color: rgba(255, 20, 147, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .highlight-symbolic {
        font-size: 0.8em;
        padding: 0.75rem;
        border-radius: 4px;
    }
    
    .highlight-symbolic .copy-button {
        top: 4px;
        right: 4px;
        padding: 2px 6px;
        font-size: 10px;
    }
}

/* Print styles */
@media print {
    .highlight-symbolic {
        background: white !important;
        color: black !important;
        border: 1px solid #ccc;
        box-shadow: none;
    }
    
    .highlight-symbolic .copy-button {
        display: none !important;
    }
    
    .highlight-symbolic * {
        color: black !important;
    }
    
    .highlight-symbolic .k,
    .highlight-symbolic .kd {
        font-weight: bold;
    }
    
    .highlight-symbolic .c,
    .highlight-symbolic .c1 {
        font-style: italic;
        color: #666 !important;
    }
}

/* Dark theme specific adjustments */
[data-theme="dark"] .highlight-symbolic {
    border-color: #4a5568;
}

[data-theme="dark"] .highlight-symbolic .copy-button {
    background: rgba(255, 20, 147, 0.9);
}

/* Accessibility improvements */
.highlight-symbolic:focus-within {
    outline: 2px solid #FF1493;
    outline-offset: 2px;
}

.highlight-symbolic .copy-button:focus {
    outline: 2px solid white;
    outline-offset: 1px;
}

/* Animation for syntax highlighting */
@keyframes highlight-fade-in {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

.highlight-symbolic {
    animation: highlight-fade-in 0.3s ease-out;
}