html {
    body {
        div#content {

            /* Markdown preview styles */
            .markdownx-preview {
                margin-top: 10px;
                padding: 10px;
                border: 1px solid var(--border-color);
                border-radius: 4px;
                background-color: var(--darkened-bg);
                color: var(--body-fg);
                max-height: 400px;
                overflow-y: auto;
            }

            /* Add label styling for preview section */
            .markdownx-preview-label label {
                font-weight: bold;
                margin-bottom: 5px;
                display: block;
            }

            /* Create clear separation between editor and preview */
            .markdown-form-row>div {
                padding: 10px;
                border-radius: 4px;
                background-color: var(--body-bg);
            }

            /* Ensure the text field spans the full available width */
            .markdownx-field {
                width: 100%;
                box-sizing: border-box;
                min-height: 100px;
            }

            /* Style markdown elements inside preview */
            .markdownx-preview h1,
            .markdownx-preview h2,
            .markdownx-preview h3,
            .markdownx-preview h4,
            .markdownx-preview h5,
            .markdownx-preview h6 {
                color: var(--body-fg) !important;
            }

            /* Ensure all text elements in markdown preview use theme colors */
            .markdownx-preview p,
            .markdownx-preview li,
            .markdownx-preview td,
            .markdownx-preview th,
            .markdownx-preview span,
            .markdownx-preview em,
            .markdownx-preview strong {
                color: var(--body-fg) !important;
            }

            /* Markdown help styling */
            .markdown-help {
                margin-top: 5px;
                font-size: 0.9em;
            }

            .markdown-help summary {
                cursor: pointer;
                color: var(--link-fg);
            }

            .markdown-examples {
                margin-top: 8px;
                padding: 8px;
                border-radius: 4px;
                background-color: var(--darkened-bg);
            }

            .markdown-examples p {
                margin: 5px 0;
                color: var(--body-fg);
            }

            .markdown-examples code {
                background-color: var(--body-bg);
                padding: 2px 4px;
                border-radius: 3px;
                font-family: monospace;
                color: var(--body-fg);
            }

            .markdownx-preview a {
                color: var(--link-fg);
            }

            .markdownx-preview code,
            .markdownx-preview pre {
                background-color: var(--darkened-bg);
                border: 1px solid var(--border-color);
                border-radius: 3px;
                padding: 2px 4px;
                color: var(--body-fg);
            }

            .markdownx-preview blockquote {
                border-left: 4px solid var(--border-color);
                padding-left: 10px;
                margin-left: 20px;
                color: var(--body-quiet-color);
            }

            .markdown-form-row {
                display: grid;
                grid-template-columns: 1fr;
                gap: 10px;
            }

            @media (min-width: 768px) {
                .markdown-form-row {
                    grid-template-columns: 1fr 1fr;
                }
            }

            .markdownx-preview ul,
            .markdownx-preview ol {
                margin: .2em 0 .8em 0;
                display: block;
                margin-block-start: 1em;
                margin-block-end: 1em;
                padding-inline-start: 40px;
                unicode-bidi: isolate;
            }

            .markdownx-preview ul {
                li {
                    list-style-type: disc;
                }
            }
        }
    }
}