/* Prikaz markdown-a koji je iscrtao js/markdown.js.
 *
 * Zaseban fajl, a ne dopuna ai.css-a: ai.css je na 541 liniji od dozvoljenih
 * 600, a ova pravila nisu vezana za AI sekciju — vezana su za `.ai-md` sadržaj
 * gde god se pojavio. Ide PRE responsive.css, kao i svi ostali.
 *
 * Sve veličine su relativne (`em`) da bi blok nasledio kontekst u koji je
 * ubačen: u poruci razgovora je 13px, drugde može biti drugačije, a odnosi
 * ostaju isti.
 */

.ai-md {
    /* Prelome sad nosi markup, ne belina u tekstu. */
    white-space: normal;
}

/* Prvi i poslednji blok ne smeju da naduju kutiju u koju su ubačeni —
   razmak između njih pravi `margin`, ivice pravi `padding` roditelja. */
.ai-md > :first-child {
    margin-top: 0;
}

.ai-md > :last-child {
    margin-bottom: 0;
}

.ai-md p {
    margin: 0 0 var(--s-2);
}

.ai-md h4,
.ai-md h5,
.ai-md h6 {
    margin: var(--s-3) 0 var(--s-1);
    color: var(--ink);
    font-weight: 600;
    line-height: 1.35;
}

.ai-md h4 {
    font-size: 1.15em;
}

.ai-md h5 {
    font-size: 1.05em;
}

.ai-md h6 {
    font-size: 1em;
    color: var(--ink-2);
}

.ai-md strong {
    color: var(--ink);
    font-weight: 600;
}

.ai-md em {
    font-style: italic;
}

.ai-md del {
    color: var(--muted);
}

.ai-md ul,
.ai-md ol {
    margin: 0 0 var(--s-2);
    padding-left: var(--s-5);
}

/* Ugnježden spisak nema svoj razmak — razmak već nosi stavka iznad njega. */
.ai-md li > ul,
.ai-md li > ol {
    margin: var(--s-1) 0 0;
}

.ai-md li {
    margin-bottom: var(--s-1);
}

.ai-md li:last-child {
    margin-bottom: 0;
}

.ai-md a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    /* Duga adresa bez razmaka ne sme da razvuče balon poruke. */
    overflow-wrap: anywhere;
}

.ai-md a:hover {
    color: var(--accent-strong);
}

.ai-md code {
    padding: 1px 4px;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.92em;
}

/* Blok koda skroluje sam; balon poruke ostaje svoje širine. */
.ai-md pre {
    margin: 0 0 var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-3);
    overflow-x: auto;
}

.ai-md pre code {
    padding: 0;
    background: none;
    white-space: pre;
}

.ai-md blockquote {
    margin: 0 0 var(--s-2);
    padding-left: var(--s-3);
    border-left: 2px solid var(--line);
    color: var(--muted);
}

.ai-md hr {
    margin: var(--s-3) 0;
    border: 0;
    border-top: 1px solid var(--line);
}