/**
 * Braindoor Markdown Styles
 * Styling for rendered markdown content.
 * 
 * @copyright Compunect GmbH 2026
 * @version 1.0.0
 */

/* Container */
.md-content {
    font-family: inherit;
    line-height: 1.6;
    color: inherit;
}

/* Headers */
.md-h1, .md-h2, .md-h3, .md-h4, .md-h5, .md-h6 {
    margin: 0.8em 0 0.4em 0;
    font-weight: 600;
    line-height: 1.3;
    color: var(--n-700, #353535);
}
.md-h1 { font-size: 1.8em; border-bottom: 1px solid var(--n-100, #e0e0e1); padding-bottom: 0.3em; }
.md-h2 { font-size: 1.5em; border-bottom: 1px solid var(--n-100, #e0e0e1); padding-bottom: 0.25em; }
.md-h3 { font-size: 1.25em; }
.md-h4 { font-size: 1.1em; }
.md-h5 { font-size: 1em; }
.md-h6 { font-size: 0.9em; color: var(--n-700, #666); }

/* Paragraphs */
.md-p {
    margin: 0.6em 0;
    line-height: 1.6;
    text-align: left;
}

/* Links */
.md-link {
    color: var(--p-600, #7A41BF);
    text-decoration: none;
    transition: color 0.15s ease;
}
.md-link:hover {
    color: var(--c-500, #29C6A4);
    text-decoration: underline;
}
.md-autolink {
    word-break: break-all;
}

/* Bold & Italic */
.md-bold {
    font-weight: 600;
}
.md-italic {
    font-style: italic;
}
.md-strikethrough {
    text-decoration: line-through;
    opacity: 0.7;
}

/* Inline code */
.md-code {
    font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    background: var(--n-050, #f6f6f7);
    border: 1px solid var(--n-100, #e0e0e1);
    border-radius: 3px;
    padding: 0.15em 0.4em;
    color: var(--p-600, #7A41BF);
}

/* Code blocks */
.md-pre {
    font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.85em;
    background: var(--n-050, #f6f6f7);
    border: 1px solid var(--n-100, #e0e0e1);
    border-radius: 6px;
    padding: 1em;
    margin: 0.8em 0;
    overflow-x: auto;
    line-height: 1.5;
    white-space: pre;
}
.md-pre .md-code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}
.md-pre[data-language]::before {
    content: attr(data-language);
    display: block;
    font-size: 0.75em;
    color: var(--n-700, #666);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--n-100, #e0e0e1);
}

/* Lists */
.md-ul, .md-ol {
    margin: 0.6em 0;
    padding-left: 1.8em;
}
.md-li {
    margin: 0.3em 0;
    line-height: 1.5;
}
.md-li-indent {
    margin-left: 1.5em;
}
.md-ul {
    list-style-type: disc;
}
.md-ol {
    list-style-type: decimal;
}
.md-ul .md-ul, .md-ol .md-ol, .md-ul .md-ol, .md-ol .md-ul {
    margin: 0.2em 0;
}

/* Blockquote */
.md-blockquote {
    margin: 0.8em 0;
    padding: 0.5em 1em;
    border-left: 4px solid var(--p-500, #9966CC);
    background: var(--p-050, #F4EEFC);
    color: var(--n-700, #353535);
    font-style: italic;
    border-radius: 0 4px 4px 0;
}

/* Horizontal rule */
.md-hr {
    border: none;
    border-top: 2px solid var(--n-100, #e0e0e1);
    margin: 1.5em 0;
}

/* Images */
.md-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0.5em 0;
}

/* SVG container */
.md-svg {
    display: inline-block;
    max-width: 100%;
}
.md-svg svg {
    max-width: 100%;
    height: auto;
}

/* Tables */
.md-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.8em 0;
    font-size: 0.95em;
    background: var(--n-000, #fff);
    border: 1px solid var(--n-100, #e0e0e1);
    border-radius: 6px;
    overflow: hidden;
}
.md-table[style*="table-layout:fixed"] {
    table-layout: fixed;
}
.md-table thead {
    background: var(--p-050, #F4EEFC);
}
.md-th {
    font-weight: 600;
    padding: 0.7em 0.8em;
    border-bottom: 2px solid var(--p-500, #9966CC);
    color: var(--n-700, #353535);
    overflow: hidden;
    white-space: nowrap;
}
/* Disable CSS ellipsis - JS handles truncation with tooltips */
.md-td {
    padding: 0.55em 0.8em;
    border-bottom: 1px solid var(--n-100, #e0e0e1);
    vertical-align: top;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.md-table tbody tr:last-child .md-td {
    border-bottom: none;
}
.md-table tbody tr:hover {
    background: var(--n-050, #f6f6f7);
}

/* Table alignment classes */
.md-th[style*="left"], .md-td[style*="left"] { text-align: left; }
.md-th[style*="center"], .md-td[style*="center"] { text-align: center; }
.md-th[style*="right"], .md-td[style*="right"] { text-align: right; }

/* Truncated content with tooltip */
.md-truncated {
    cursor: help;
    border-bottom: 1px dotted var(--n-700, #666);
}

/* Compact table variant */
.md-table-compact .md-th,
.md-table-compact .md-td {
    padding: 0.4em 0.6em;
    font-size: 0.9em;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .md-h1, .md-h2, .md-h3, .md-h4, .md-h5, .md-h6 {
        color: var(--n-050, #f6f6f7);
    }
    .md-h1, .md-h2 {
        border-bottom-color: var(--n-700, #353535);
    }
    .md-code {
        background: var(--n-900, #121212);
        border-color: var(--n-700, #353535);
        color: var(--p-300, #B08AE0);
    }
    .md-pre {
        background: var(--n-900, #121212);
        border-color: var(--n-700, #353535);
    }
    .md-pre[data-language]::before {
        color: var(--n-050, #f6f6f7);
        border-bottom-color: var(--n-700, #353535);
    }
    .md-blockquote {
        background: rgba(var(--p-500-rgb, 153, 102, 204), 0.15);
        border-left-color: var(--p-300, #B08AE0);
        color: var(--n-050, #f6f6f7);
    }
    .md-hr {
        border-top-color: var(--n-700, #353535);
    }
    .md-table {
        background: var(--n-900, #121212);
        border-color: var(--n-700, #353535);
    }
    .md-table thead {
        background: rgba(var(--p-500-rgb, 153, 102, 204), 0.2);
    }
    .md-th {
        border-bottom-color: var(--p-300, #B08AE0);
        color: var(--n-050, #f6f6f7);
    }
    .md-td {
        border-bottom-color: var(--n-700, #353535);
    }
    .md-table tbody tr:hover {
        background: var(--n-950, #0b0b0b);
    }
    .md-link {
        color: var(--p-300, #B08AE0);
    }
    .md-link:hover {
        color: var(--c-300, #6FDCCD);
    }
}

/* Utility classes for markdown containers */
.md-container-chat {
    max-width: 100%;
}
.md-container-chat .md-table {
    font-size: 0.85em;
}
.md-container-chat .md-pre {
    font-size: 0.8em;
    max-height: 300px;
    overflow-y: auto;
}

.md-container-diagnostics {
    font-size: 0.9em;
}
.md-container-diagnostics .md-table {
    font-size: 0.85em;
}
.md-container-diagnostics .md-pre {
    max-height: 400px;
    overflow-y: auto;
}

/* BCC Special Tokens */
.md-bcc-token {
    display: inline-block;
    font-family: monospace;
    font-size: 0.85em;
    color: var(--p-400, #9966cc);
    background: var(--n-50, #f5f5f5);
    border: 1px solid var(--n-100, #e0e0e0);
    border-radius: 3px;
    padding: 0 0.3em;
    margin: 0 0.1em;
    vertical-align: baseline;
}