/* Custom Styles for TypoClean */

/* Smooth fade in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Editor Placeholder Behavior */
#editor:empty:before {
    content: attr(data-placeholder);
    color: #9ca3af;
    font-style: italic;
    pointer-events: none;
}

/* 
   DIFF VISUALIZATION 
   Ces classes sont injectées par le moteur JS
*/

/* Suppression (Rouge) */
.typo-del {
    background-color: rgba(254, 202, 202, 0.4); /* Red-200 with opacity */
    color: #b91c1c; /* Red-700 */
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 2px;
    padding: 0 1px;
    border-radius: 2px;
    transition: all 0.2s ease;
}

/* Ajout/Remplacement (Vert) */
.typo-ins {
    background-color: rgba(167, 243, 208, 0.4); /* Emerald-200 with opacity */
    color: #047857; /* Emerald-700 */
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
    padding: 0 1px;
    border-radius: 2px;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* 
   BLOCK LEVEL DELETIONS (pour <hr>)
*/
.typo-del-block {
    display: block;
    border: 2px dashed #fca5a5; /* Red-300 */
    background-color: rgba(254, 226, 226, 0.3);
    margin: 1em 0;
    position: relative;
    height: 10px;
}
.typo-del-block::after {
    content: "Ligne supprimée";
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    color: #ef4444;
    font-weight: bold;
    text-transform: uppercase;
}
/* Masquer complètement lors de l'impression ou copie propre si géré par CSS, 
   mais ici on le gère via JS remove() */

/* Character invisibles visualization (optional, for debug or advanced view) */
.typo-ins[data-char="NBSP"]::after {
    /* content: "•"; */ /* Peut être activé si l'utilisateur veut voir les insécables */
}

/* 
   PARAGRAPH MANAGEMENT 
   Classes toggleable sur le container #editor
*/

/* Supprimer marge après */
#editor.no-margin-bottom p,
#editor.no-margin-bottom ul,
#editor.no-margin-bottom ol,
#editor.no-margin-bottom blockquote {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Supprimer marge avant */
#editor.no-margin-top p,
#editor.no-margin-top ul,
#editor.no-margin-top ol,
#editor.no-margin-top blockquote {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Default paragraph spacing in the editor (pour simuler un rendu clean) */
#editor p {
    margin-bottom: 1.5em; /* Default spacing */
}

/* Si le diff est désactivé via le toggle UI (classe sur body ou editor) */
.hide-diff .typo-del {
    display: none;
}

.hide-diff .typo-ins {
    background: none;
    color: inherit;
    text-decoration: none;
    padding: 0;
    font-weight: inherit;
}