.markdown-editor {
    border: 1px solid #ddd;
}

    .markdown-editor .toolbar {
        background-color: #f5f5f5;
        border-bottom: 1px solid #ddd;
    }

        .markdown-editor .toolbar .toolbar-select::part(base) {
            background-color: transparent;
            color: #000;
        }

        .markdown-editor .toolbar wa-dropdown.mode-dropdown:not([disabled]):hover .toolbar-select::part(base),
        .markdown-editor .toolbar wa-dropdown.heading-dropdown:not([disabled]):hover .toolbar-select::part(base) {
            background-color: rgba(0, 0, 0, 0.08);
        }

        .markdown-editor .toolbar wa-dropdown.mode-dropdown[open] .toolbar-select::part(base),
        .markdown-editor .toolbar wa-dropdown.heading-dropdown[open] .toolbar-select::part(base) {
            background-color: rgba(0, 0, 0, 0.14);
        }

    .markdown-editor .toolbar-divider {
        background-color: #ddd;
    }

    .markdown-editor .toolbar wa-button.icon-only::part(base) {
        background-color: transparent;
        color: #000;
    }

    .markdown-editor .toolbar wa-button.icon-only:not([disabled]):hover::part(base) {
        background-color: rgba(0, 0, 0, 0.08);
    }

    .markdown-editor .toolbar wa-button.icon-only.active::part(base) {
        background-color: rgba(0, 0, 0, 0.14);
    }

    .markdown-editor .toolbar wa-dropdown.code-dropdown[open] wa-button.icon-only.toolbar-control::part(base),
    .markdown-editor .toolbar wa-dropdown.link-dropdown[open] wa-button.icon-only.toolbar-control::part(base) {
        background-color: rgba(0, 0, 0, 0.14);
    }

    .markdown-editor .toolbar wa-button.icon-only[disabled]::part(base) {
        background-color: transparent;
    }

    .markdown-editor .toolbar wa-button.icon-only wa-icon {
        color: #000;
    }

    .markdown-editor .splitter {
        background-color: #ddd;
    }

        .markdown-editor .splitter:hover {
            background-color: #bbb;
        }

    .markdown-editor .footer {
        background-color: #f5f5f5;
        border-top: 1px solid #ddd;
        color: #666;
    }

/* MarkdownEditor global engine styles */
.ProseMirror {
    flex: 1;
    outline: none !important;
    height: 100%;
    min-height: 300px;
    padding: 15px;
    background: white;
    color: #333;
    box-sizing: border-box;
    overflow-y: auto;
}

    .ProseMirror a {
        text-decoration: underline;
    }

    .ProseMirror.pm-open-link-mode a[href]:hover {
        cursor: pointer;
    }

    .ProseMirror pre {
        padding: 0;
        position: relative;
        overflow: visible !important;
    }

    /* Le scroll horizontal se fait sur le code intérieur, pas sur le pre */
    .ProseMirror pre code {
        display: block;
        overflow-x: auto;
    }

    /* Badge du langage — injecté via NodeView (codeBlockView.js) */
    .pm-code-language-badge {
        user-select: none;
    }

    /* Wrapper du NodeView code_block */
    .pm-code-block-wrapper {
        position: relative;
    }

    /* Couleurs par langage — light */
    .ProseMirror pre[data-language="csharp"]::before,
    .ProseMirror pre[data-language="cs"]::before       { background: #ede9fe; color: #5b21b6; }
    .ProseMirror pre[data-language="sql"]::before      { background: #dbeafe; color: #1e40af; }
    .ProseMirror pre[data-language="javascript"]::before,
    .ProseMirror pre[data-language="js"]::before,
    .ProseMirror pre[data-language="typescript"]::before,
    .ProseMirror pre[data-language="ts"]::before,
    .ProseMirror pre[data-language="json"]::before     { background: #fef3c7; color: #92400e; }
    .ProseMirror pre[data-language="python"]::before,
    .ProseMirror pre[data-language="py"]::before       { background: #d1fae5; color: #065f46; }
    .ProseMirror pre[data-language="java"]::before     { background: #fee2e2; color: #991b1b; }
    .ProseMirror pre[data-language="html"]::before,
    .ProseMirror pre[data-language="xml"]::before      { background: #ffedd5; color: #9a3412; }
    .ProseMirror pre[data-language="css"]::before      { background: #fce7f3; color: #9d174d; }
    .ProseMirror pre[data-language="bash"]::before,
    .ProseMirror pre[data-language="shell"]::before,
    .ProseMirror pre[data-language="powershell"]::before { background: #f1f5f9; color: #334155; }
    .ProseMirror pre[data-language="go"]::before       { background: #cffafe; color: #0e7490; }
    .ProseMirror pre[data-language="rust"]::before     { background: #fef3c7; color: #78350f; }
    .ProseMirror pre[data-language="cpp"]::before,
    .ProseMirror pre[data-language="c"]::before        { background: #e0f2fe; color: #0c4a6e; }
    .ProseMirror pre[data-language="php"]::before      { background: #ede9fe; color: #5b21b6; }
    .ProseMirror pre[data-language="fsharp"]::before,
    .ProseMirror pre[data-language="fs"]::before       { background: #e0e7ff; color: #3730a3; }

    .ProseMirror p:last-child {
        margin-bottom: 0;
    }

/* Add a subtle focus ring to indicate the editor is active */
.ProseMirror-focused {
    background: #fff;
}

/* Monaco should also fill its container */
.monaco-editor {
    height: 100% !important;
    width: 100% !important;
}

/* ── Image resize NodeView ── */
.image-resize-wrapper {
    display: inline-block;
    position: relative;
    line-height: 0;
    cursor: default;
    user-select: none;
}

.image-resize-wrapper img {
    display: block;
    max-width: 100%;
}

.image-resize-handle {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #4f7cf8;
    border: 2px solid #fff;
    border-radius: 2px;
    cursor: se-resize;
    opacity: 0;
    transition: opacity 120ms ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

.image-resize-wrapper:hover .image-resize-handle,
.image-resize-wrapper.is-resizing .image-resize-handle {
    opacity: 1;
}

/* Hide handle in read-only (contenteditable=false) */
.ProseMirror[contenteditable="false"] .image-resize-handle {
    display: none;
}

/* Image alignment — via text-align on the paragraph containing the image */
.ProseMirror p:has(.image-resize-wrapper[data-align="left"]) {
    text-align: left;
}

.ProseMirror p:has(.image-resize-wrapper[data-align="center"]) {
    text-align: center;
}

.ProseMirror p:has(.image-resize-wrapper[data-align="right"]) {
    text-align: right;
}

/* Text alignment — paragraph and heading */
.ProseMirror p[data-align="left"],
.ProseMirror h1[data-align="left"], .ProseMirror h2[data-align="left"],
.ProseMirror h3[data-align="left"], .ProseMirror h4[data-align="left"],
.ProseMirror h5[data-align="left"] {
    text-align: left;
}

.ProseMirror p[data-align="center"],
.ProseMirror h1[data-align="center"], .ProseMirror h2[data-align="center"],
.ProseMirror h3[data-align="center"], .ProseMirror h4[data-align="center"],
.ProseMirror h5[data-align="center"] {
    text-align: center;
}

.ProseMirror p[data-align="right"],
.ProseMirror h1[data-align="right"], .ProseMirror h2[data-align="right"],
.ProseMirror h3[data-align="right"], .ProseMirror h4[data-align="right"],
.ProseMirror h5[data-align="right"] {
    text-align: right;
}

/* Text alignment — table cells */
.ProseMirror td[data-align="left"], .ProseMirror th[data-align="left"] { text-align: left; }
.ProseMirror td[data-align="center"], .ProseMirror th[data-align="center"] { text-align: center; }
.ProseMirror td[data-align="right"], .ProseMirror th[data-align="right"] { text-align: right; }

/* ── Dark theme ── */
.markdown-editor.dark {
    border-color: #2a2d4a;
}

    .markdown-editor.dark .toolbar {
        background-color: #090b24;
        border-bottom-color: #2a2d4a;
    }

        .markdown-editor.dark .toolbar .toolbar-select::part(base) {
            background-color: transparent;
            color: #e0e0e0;
        }

        .markdown-editor.dark .toolbar wa-dropdown.mode-dropdown:not([disabled]):hover .toolbar-select::part(base),
        .markdown-editor.dark .toolbar wa-dropdown.heading-dropdown:not([disabled]):hover .toolbar-select::part(base) {
            background-color: rgba(255, 255, 255, 0.08);
        }

        .markdown-editor.dark .toolbar wa-dropdown.mode-dropdown[open] .toolbar-select::part(base),
        .markdown-editor.dark .toolbar wa-dropdown.heading-dropdown[open] .toolbar-select::part(base) {
            background-color: rgba(255, 255, 255, 0.14);
        }

    .markdown-editor.dark .toolbar-divider {
        background-color: #2a2d4a;
    }

    .markdown-editor.dark .toolbar wa-button.icon-only::part(base) {
        background-color: transparent;
        color: #e0e0e0;
    }

    .markdown-editor.dark .toolbar wa-button.icon-only:not([disabled]):hover::part(base) {
        background-color: rgba(255, 255, 255, 0.08);
    }

    .markdown-editor.dark .toolbar wa-button.icon-only.active::part(base) {
        background-color: rgba(255, 255, 255, 0.14);
    }

    .markdown-editor.dark .toolbar wa-dropdown.code-dropdown[open] wa-button.icon-only.toolbar-control::part(base),
    .markdown-editor.dark .toolbar wa-dropdown.link-dropdown[open] wa-button.icon-only.toolbar-control::part(base) {
        background-color: rgba(255, 255, 255, 0.14);
    }

    .markdown-editor.dark .toolbar wa-button.icon-only[disabled]::part(base) {
        background-color: transparent;
    }

    .markdown-editor.dark .toolbar wa-button.icon-only wa-icon {
        color: #e0e0e0;
    }

    .markdown-editor.dark .splitter {
        background-color: #2a2d4a;
    }

        .markdown-editor.dark .splitter:hover {
            background-color: #3d4170;
        }

    .markdown-editor.dark .footer {
        background-color: #090b24;
        border-top-color: #2a2d4a;
        color: #aaa;
    }

.markdown-editor.dark .ProseMirror {
    background: #06081c;
    color: #e0e0e0;
}

.markdown-editor.dark .ProseMirror-focused {
    background: #06081c;
}

.markdown-editor.dark .ProseMirror table {
    --bs-table-bg: #0a0c28;
    --bs-table-striped-bg: #0a0c28;
    --bs-table-hover-bg: #0a0c28;
    --bs-table-border-color: #2a2d4a;
    --bs-table-color: #e0e0e0;
    --bs-border-color: #2a2d4a;
    color: #e0e0e0;
    border-color: #2a2d4a;
}

.markdown-editor.dark .ProseMirror table th,
.markdown-editor.dark .ProseMirror table td {
    background-color: transparent;
    color: #e0e0e0;
    border-color: #2a2d4a;
}

.markdown-editor.dark .ProseMirror table thead th {
    background-color: #141636;
    color: #c8cbff;
    border-color: #2a2d4a;
}

.markdown-editor.dark .ProseMirror table tbody tr td {
    background-color: #0a0c28;
}

.markdown-editor.dark .ProseMirror table tbody tr:hover td {
    background-color: #0a0c28;
}

/* ── Syntax highlighting (highlight.js) — light theme ── */
.ProseMirror pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
}

.ProseMirror pre:has(code.hljs) {
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    padding: 0;
}

.hljs-comment,
.hljs-quote        { color: #6a737d; font-style: italic; }
.hljs-keyword,
.hljs-selector-tag { color: #d73a49; }
.hljs-literal,
.hljs-number       { color: #005cc5; }
.hljs-string,
.hljs-doctag,
.hljs-regexp       { color: #032f62; }
.hljs-title,
.hljs-section      { color: #6f42c1; }
.hljs-type,
.hljs-built_in     { color: #e36209; }
.hljs-attribute,
.hljs-name,
.hljs-variable     { color: #24292e; }
.hljs-tag          { color: #22863a; }
.hljs-attr         { color: #6f42c1; }
.hljs-symbol,
.hljs-bullet,
.hljs-link         { color: #005cc5; }
.hljs-addition     { color: #22863a; background: #f0fff4; }
.hljs-deletion     { color: #b31d28; background: #ffeef0; }
.hljs-emphasis     { font-style: italic; }
.hljs-strong       { font-weight: bold; }

/* ── Syntax highlighting — dark theme ── */
.markdown-editor.dark .ProseMirror pre:has(code.hljs) {
    background: #0d1117;
    border-color: #30363d;
}

.markdown-editor.dark .hljs-comment,
.markdown-editor.dark .hljs-quote        { color: #8b949e; font-style: italic; }
.markdown-editor.dark .hljs-keyword,
.markdown-editor.dark .hljs-selector-tag { color: #ff7b72; }
.markdown-editor.dark .hljs-literal,
.markdown-editor.dark .hljs-number       { color: #79c0ff; }
.markdown-editor.dark .hljs-string,
.markdown-editor.dark .hljs-doctag,
.markdown-editor.dark .hljs-regexp       { color: #a5d6ff; }
.markdown-editor.dark .hljs-title,
.markdown-editor.dark .hljs-section      { color: #d2a8ff; }
.markdown-editor.dark .hljs-type,
.markdown-editor.dark .hljs-built_in     { color: #ffa657; }
.markdown-editor.dark .hljs-attribute,
.markdown-editor.dark .hljs-name,
.markdown-editor.dark .hljs-variable     { color: #e6edf3; }
.markdown-editor.dark .hljs-tag          { color: #7ee787; }
.markdown-editor.dark .hljs-attr         { color: #d2a8ff; }
.markdown-editor.dark .hljs-symbol,
.markdown-editor.dark .hljs-bullet,
.markdown-editor.dark .hljs-link         { color: #79c0ff; }
.markdown-editor.dark .hljs-addition     { color: #aff5b4; background: #033a16; }
.markdown-editor.dark .hljs-deletion     { color: #ffdcd7; background: #67060c; }

/* Badge langage — dark */
.markdown-editor.dark .ProseMirror pre[data-language]::before {
    background-color: #1e2433;
    color: #94a3b8;
}
.markdown-editor.dark .ProseMirror pre[data-language="csharp"]::before,
.markdown-editor.dark .ProseMirror pre[data-language="cs"]::before       { background: #2e1a4a; color: #c4b5fd; }
.markdown-editor.dark .ProseMirror pre[data-language="sql"]::before      { background: #1e3a5f; color: #93c5fd; }
.markdown-editor.dark .ProseMirror pre[data-language="javascript"]::before,
.markdown-editor.dark .ProseMirror pre[data-language="js"]::before,
.markdown-editor.dark .ProseMirror pre[data-language="typescript"]::before,
.markdown-editor.dark .ProseMirror pre[data-language="ts"]::before,
.markdown-editor.dark .ProseMirror pre[data-language="json"]::before     { background: #3b2a00; color: #fcd34d; }
.markdown-editor.dark .ProseMirror pre[data-language="python"]::before,
.markdown-editor.dark .ProseMirror pre[data-language="py"]::before       { background: #052e16; color: #6ee7b7; }
.markdown-editor.dark .ProseMirror pre[data-language="java"]::before     { background: #3b0a0a; color: #fca5a5; }
.markdown-editor.dark .ProseMirror pre[data-language="html"]::before,
.markdown-editor.dark .ProseMirror pre[data-language="xml"]::before      { background: #3b1200; color: #fdba74; }
.markdown-editor.dark .ProseMirror pre[data-language="css"]::before      { background: #3b0a20; color: #f9a8d4; }
.markdown-editor.dark .ProseMirror pre[data-language="bash"]::before,
.markdown-editor.dark .ProseMirror pre[data-language="shell"]::before,
.markdown-editor.dark .ProseMirror pre[data-language="powershell"]::before { background: #0f1a2a; color: #94a3b8; }
.markdown-editor.dark .ProseMirror pre[data-language="go"]::before       { background: #0a2a2e; color: #67e8f9; }
.markdown-editor.dark .ProseMirror pre[data-language="rust"]::before     { background: #2e1a00; color: #fcd34d; }
.markdown-editor.dark .ProseMirror pre[data-language="cpp"]::before,
.markdown-editor.dark .ProseMirror pre[data-language="c"]::before        { background: #0a1e2e; color: #7dd3fc; }
.markdown-editor.dark .ProseMirror pre[data-language="php"]::before      { background: #2e1a4a; color: #c4b5fd; }
.markdown-editor.dark .ProseMirror pre[data-language="fsharp"]::before,
.markdown-editor.dark .ProseMirror pre[data-language="fs"]::before       { background: #1a1e4a; color: #a5b4fc; }