﻿.markdown-light {
    font-size: 0.93rem; /* Nearly Tailwind text-sm, for parity with Agent/user prompts */
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    line-height: 1.65;
    color: #1f2937; /* Tailwind gray-800 by default */
    background: transparent;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

    .markdown-light a {
        color: #2563eb;
        text-decoration: underline;
        transition: color 0.18s;
        word-break: break-all;
    }

        .markdown-light a:hover,
        .markdown-light a:focus {
            color: #1d4ed8;
            text-decoration: underline;
            outline: none;
        }

        .markdown-light a:visited {
            color: #7c3aed;
        }

    .markdown-light h1,
    .markdown-light h2,
    .markdown-light h3,
    .markdown-light h4,
    .markdown-light h5,
    .markdown-light h6 {
        font-weight: 700;
        color: #1e293b;
        line-height: 1.2;
        margin-top: 1.07em;
        margin-bottom: 0.48em;
    }

    .markdown-light h1 {
        font-size: 1.25rem;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 0.14em;
    }

    .markdown-light h2 {
        font-size: 1.11rem;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 0.13em;
    }

    .markdown-light h3 {
        font-size: 1.01rem;
    }

    .markdown-light h4,
    .markdown-light h5,
    .markdown-light h6 {
        font-size: 0.96rem;
    }

    .markdown-light p {
        margin: 0.49em 0 0.49em 0;
        color: #374151;
        font-size: 0.97em;
    }

    .markdown-light strong {
        font-weight: 700;
        color: #111827;
    }

    .markdown-light em {
        font-style: italic;
        color: #4b5563;
    }

    .markdown-light blockquote {
        border-left: 3px solid #2563eb;
        padding-left: 0.85em;
        color: #374151;
        background: #f3f4f6;
        font-style: italic;
        margin: 0.68em 0;
        border-radius: 0.23em;
        font-size: 0.97em;
    }

        .markdown-light blockquote blockquote {
            border-left: 3px solid #f59e42;
            background: #fef3c7;
            color: #a16207;
        }

    .markdown-light code {
        background: #f1f5f9;
        color: #d97706;
        padding: 0.10em 0.32em;
        border-radius: 4px;
        font-size: 0.95em;
        font-family: 'Roboto Mono', 'Menlo', 'monospace';
    }

    .markdown-light pre {
        background: #f3f4f6;
        color: #334155;
        padding: 0.64em 0.54em;
        border-radius: 0.23em;
        font-size: 0.90em;
        overflow-x: auto;
        font-family: 'Roboto Mono', 'Menlo', 'monospace';
        margin: 0.6em 0;
    }

        .markdown-light pre code {
            background: none;
            color: inherit;
            padding: 0;
        }

    /* Table: compact and mobile-friendly */
    .markdown-light table {
        width: 100%;
        border-collapse: collapse;
        margin: 0.63em 0;
        font-size: 0.95em;
        background: #fff;
        border-radius: 5px;
    }

    .markdown-light th,
    .markdown-light td {
        border: 1px solid #e5e7eb;
        padding: 0.34em 0.42em;
        text-align: left;
    }

    .markdown-light th {
        background: #f3f4f6;
        color: #18181b;
        font-weight: 600;
    }

    .markdown-light tr:nth-child(even) {
        background: #fafafa;
    }

    /* Unordered & ordered lists */
    .markdown-light ul, .markdown-light ol {
        margin: 0.58em 0 0.58em 1.11em;
        padding-left: 1.11em;
        color: #374151;
    }

    .markdown-light li {
        margin: 0.32em 0;
        line-height: 1.5;
    }

    /* Images: responsive, never huge */
    .markdown-light img {
        max-width: 100%;
        border-radius: 0.28em;
        display: block;
        margin: 0.48em auto;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    /* Hr: subtle */
    .markdown-light hr {
        border: none;
        border-top: 1px solid #e5e7eb;
        margin: 1em 0;
        opacity: 0.87;
    }

    .markdown-light details {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 0.18em;
        margin: 0.48em 0;
        padding: 0.34em 0.6em;
    }

    .markdown-light summary {
        cursor: pointer;
        font-weight: 500;
    }

    .markdown-light del {
        text-decoration: line-through;
        color: #9ca3af;
    }

    .markdown-light sup {
        font-size: 0.81em;
        color: #a1a1aa;
        vertical-align: super;
    }

    .markdown-light input[type='checkbox'] {
        margin-right: 0.38em;
        accent-color: #2563eb;
    }

    /* Remove active/focus highlight */
    .markdown-light *:active, .markdown-light *:focus {
        outline: none;
    }

/* Mobile-friendly tweaks */
@@media (max-width: 600px) {
    .markdown-light {
        font-size: 0.87rem;
    }

        .markdown-light h1 {
            font-size: 1.06rem;
        }

        .markdown-light h2 {
            font-size: 0.97rem;
        }

        .markdown-light h3,
        .markdown-light h4,
        .markdown-light h5,
        .markdown-light h6 {
            font-size: 0.89rem;
        }

        .markdown-light pre,
        .markdown-light code {
            font-size: 0.87em;
        }

        .markdown-light th, .markdown-light td {
            padding: 0.22em 0.22em;
        }
}
