/* =========================================================
   Sophie-AI Chat Markdown
   ========================================================= */

.sophie-markdown {
    line-height: 1.62;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.sophie-markdown > :first-child {
    margin-top: 0;
}

.sophie-markdown > :last-child {
    margin-bottom: 0;
}


/* Paragraphs */

.sophie-markdown p {
    margin: 0 0 0.9rem;
}


/* Headlines */

.sophie-markdown h1,
.sophie-markdown h2,
.sophie-markdown h3,
.sophie-markdown h4 {
    line-height: 1.3;
    margin: 1.35rem 0 0.65rem;
    font-weight: 650;
}

.sophie-markdown h1 {
    font-size: 1.35rem;
}

.sophie-markdown h2 {
    font-size: 1.20rem;
}

.sophie-markdown h3 {
    font-size: 1.08rem;
}


/* Lists */

.sophie-markdown ul,
.sophie-markdown ol {
    margin: 0.55rem 0 1rem 1.4rem;
    padding: 0;
}

.sophie-markdown li {
    margin: 0.3rem 0;
    padding-left: 0.15rem;
}

.sophie-markdown li > p {
    margin: 0.2rem 0;
}


/* Bold */

.sophie-markdown strong {
    font-weight: 700;
}


/* Links */

.sophie-markdown a {
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* Quotes */

.sophie-markdown blockquote {
    margin: 1rem 0;
    padding: 0.65rem 1rem;
    border-left: 3px solid currentColor;
    opacity: 0.88;
    background: rgba(127, 127, 127, 0.08);
    border-radius: 0 8px 8px 0;
}


/* Inline Code */

.sophie-markdown code {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.91em;

    padding: 0.12rem 0.32rem;

    border-radius: 5px;

    background: rgba(127, 127, 127, 0.15);
}


/* Code blocks */

.sophie-markdown pre {
    overflow-x: auto;

    margin: 1rem 0;

    padding: 0.9rem 1rem;

    border-radius: 10px;

    background: rgba(20, 22, 26, 0.96);
}

.sophie-markdown pre code {
    background: transparent;
    padding: 0;
    font-size: 0.88rem;
    line-height: 1.55;
}


/* Horizontal rule */

.sophie-markdown hr {
    border: 0;
    border-top: 1px solid rgba(127, 127, 127, 0.3);
    margin: 1.4rem 0;
}


/* Tables */

.sophie-markdown table {
    width: 100%;

    margin: 1rem 0;

    border-collapse: collapse;

    display: block;
    overflow-x: auto;
}

.sophie-markdown th,
.sophie-markdown td {
    padding: 0.55rem 0.7rem;

    border: 1px solid rgba(127, 127, 127, 0.25);

    text-align: left;
}

.sophie-markdown th {
    font-weight: 650;
    background: rgba(127, 127, 127, 0.1);
}


/* Images */

.sophie-markdown img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}


/* Better spacing after lists */

.sophie-markdown ul + p,
.sophie-markdown ol + p {
    margin-top: 0.8rem;
}