/* ==========================================================================
   ERROR BANNER — Bannière d'erreur Mermaid (UX enrichie)
   --------------------------------------------------------------------------
   Surclasse les règles génériques de preview.css pour la nouvelle structure :
     .error-banner > .error-banner-icon + .error-banner-content {
        .error-banner-header { .error-banner-title + .error-banner-actions }
        .error-banner-friendly
        .error-banner-hint
        .error-banner-excerpt   ← extrait + pointeur ASCII de Mermaid
        .error-banner-details   ← message brut, repliable
     }

   Inclut aussi la décoration injectée par Editor (ligne fautive + caret) afin
   que toute la « peau » d'une erreur Mermaid soit centralisée ici.
   ========================================================================== */

/* ---- Container : on neutralise le `align-items: flex-start` hérité au
   profit d'un layout interne propre (icône en colonne + contenu flex). ---- */

.error-banner {
    flex-direction: row;
    align-items: stretch;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
}

.error-banner-icon {
    margin-top: 2px;
    color: var(--danger);
}

.error-banner-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* ---- En-tête : titre + boutons d'action ---- */

.error-banner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.error-banner-title {
    font-weight: 600;
    color: var(--danger);
    font-size: var(--fs-sm);
    line-height: 1.3;
}

.error-banner-actions {
    display: flex;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.error-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--danger);
    background: var(--surface, #fff);
    color: var(--danger);
    font-size: var(--fs-xs);
    font-weight: 500;
    cursor: pointer;
    transition:
        background var(--t-fast, 120ms) ease,
        color var(--t-fast, 120ms) ease,
        transform var(--t-fast, 120ms) ease;
}

.error-banner-btn:hover {
    background: var(--danger);
    color: #fff;
}

.error-banner-btn:active {
    transform: translateY(1px);
}

.error-banner-btn:focus-visible {
    outline: 2px solid var(--danger);
    outline-offset: 2px;
}

.error-banner-btn-ghost {
    border-color: var(--border-default, var(--border-subtle));
    color: var(--text-secondary);
    background: transparent;
}

.error-banner-btn-ghost:hover {
    background: var(--surface-hover, var(--surface));
    color: var(--text-primary);
    border-color: var(--border-default, var(--border-subtle));
}

.error-banner-btn[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

.error-banner-btn .fa-chevron-down {
    transition: transform var(--t-fast, 120ms) ease;
}

/* ---- Corps : message lisible + piste de correction ---- */

.error-banner-friendly {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.error-banner-hint {
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    background: var(--accent-soft, rgba(99, 102, 241, 0.08));
    border-left: 3px solid var(--accent, #6366f1);
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
    color: var(--text-primary);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.error-banner-hint::before {
    content: "💡 ";
    margin-right: 2px;
}

/* ---- Extrait fautif + pointeur (rendu monospace, fond contrasté) ---- */

.error-banner-excerpt {
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.04));
    border-radius: var(--radius-sm, 4px);
    padding: var(--sp-2) var(--sp-3);
    overflow-x: auto;
}

.error-banner-excerpt pre {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--text-primary);
    white-space: pre;
}

.error-banner-excerpt-pointer {
    color: var(--danger);
    font-weight: 700;
}

/* ---- Détail technique (replié par défaut) ---- */

.error-banner-details {
    border-top: 1px dashed var(--border-subtle);
    padding-top: var(--sp-2);
}

.error-banner-raw {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 12rem;
    overflow-y: auto;
}

/* ---- Décoration de l'éditeur : ligne fautive + caret ---- */

/* La ligne entière est teintée d'un voile rouge, gardé suffisamment léger
   pour que la coloration syntaxique reste lisible. Prime sur .cm-highlight-line
   si jamais un highlightNode tombe dessus. */
.cm-error-line {
    background: var(--danger-soft, rgba(239, 68, 68, 0.10)) !important;
    box-shadow: inset 3px 0 0 var(--danger, #ef4444);
}

/* Underline ondulée rouge sous le caractère pointé par Mermaid.
   Implémentée en background-image SVG pour rester nette à toute taille. */
.cm-error-caret {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3'><path d='M0 2 Q 1.5 0 3 2 T 6 2' fill='none' stroke='%23ef4444' stroke-width='1'/></svg>");
    background-repeat: repeat-x;
    background-position: bottom left;
    padding-bottom: 2px;
    /* Légère teinte pour rendre le caret visible même sur un espace. */
    background-color: rgba(239, 68, 68, 0.18);
    border-radius: 1px;
}

/* Le numéro de ligne dans le gutter passe en rouge gras quand la ligne porte
   la classe d'erreur — la classe est ajoutée par CodeMirror sur l'élément
   .cm-line. CM ne propage pas automatiquement la classe au gutter ; on cible
   donc la ligne active fautive via :has() (compatible Chrome/Edge/Safari/FF
   115+, dégradation gracieuse ailleurs). */
.cm-gutters:has(+ .cm-scroller .cm-error-line.cm-activeLine) .cm-activeLineGutter {
    color: var(--danger) !important;
    font-weight: 700;
}

/* ---- Responsive : pile en colonne sur mobile ---- */

@media (max-width: 640px) {
    .error-banner-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
    }

    .error-banner-actions {
        width: 100%;
    }

    .error-banner-btn {
        flex: 1;
        justify-content: center;
    }
}