/* Highlight for contract modifications */
.contract-modification-highlight {
  background-color: #fef3c7; /* yellow-100 */
  padding: 2px 4px;
  border-radius: 3px;
  animation: highlight-fade 3s ease-out;
}

@keyframes highlight-fade {
  0% {
    background-color: #fde047; /* yellow-300 */
  }
  100% {
    background-color: #fef3c7; /* yellow-100 */
  }
}

/* Highlight for contract excerpts (persistent) */
.contract-excerpt-highlight {
  background-color: #fde047; /* yellow-300 */
  padding: 2px 4px;
  border-radius: 3px;
}

/* Highlight for replaced text (old version - red strikethrough) */
.contract-replaced-text {
  color: #dc2626; /* red-600 */
  text-decoration: line-through;
  padding: 2px 4px;
  border-radius: 3px;
  background-color: #fee2e2; /* red-100 */
  font-style: italic;
}

/* Highlight for new text after replacement (yellow) */
.contract-new-text {
  background-color: #fde047; /* yellow-300 */
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 500;
}

/* Highlight for inserted text (green tint to distinguish from replacement) */
.contract-inserted-text {
  background-color: #bbf7d0; /* green-200 */
  border-left: 3px solid #22c55e; /* green-500 */
  padding: 2px 4px 2px 8px;
  border-radius: 0 3px 3px 0;
  font-weight: 500;
}

/* Animation for newly applied modifications */
@keyframes pulse-highlight {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.contract-new-text,
.contract-inserted-text {
  animation: pulse-highlight 1.5s ease-in-out 2;
}

/* Badge for correction applied */
.correction-applied-badge {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Fix numbering for ordered lists - ensure continuous numbering */
/* Use a single global counter for all lists in the document */
.markdown-content,
.prose {
  counter-reset: global-list-counter;
}

.markdown-content ol,
.prose ol {
  counter-reset: none !important; /* Don't reset for each list */
}

.markdown-content ol li,
.prose ol li {
  counter-increment: global-list-counter !important;
  list-style: none !important;
  position: relative !important;
  padding-left: 1.5rem !important;
}

.markdown-content ol li::before,
.prose ol li::before {
  content: counter(global-list-counter) "." !important;
  position: absolute !important;
  left: 0 !important;
  font-weight: normal !important;
  color: inherit !important;
}

/* ========================================
   NOUVEAU SYSTÈME DE SEGMENTS
   ======================================== */

/* Style de base pour les segments */
.contract-segment {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Highlight temporaire pour les segments (lors du scroll) */
.segment-highlight {
  background-color: #fef3c7; /* yellow-100 */
  box-shadow: 0 0 0 3px #fde047; /* yellow-300 border */
  border-radius: 4px;
  animation: segment-pulse 2s ease-out;
}

@keyframes segment-pulse {
  0% {
    background-color: #fde047; /* yellow-300 */
    box-shadow: 0 0 0 4px #fde047;
  }
  100% {
    background-color: #fef3c7; /* yellow-100 */
    box-shadow: 0 0 0 3px #fde047;
  }
}

/* Segment modifié (persistant) */
.segment-modified {
  /* background-color: #ecfdf5; green-50 */
  /* border-left: 3px solid #10b981; green-500 */
  padding-left: 12px;
  margin-left: -12px;
  border-radius: 0 4px 4px 0;
}

/* ========================================
   AFFICHAGE DU DIFF (ancien barré + nouveau)
   ======================================== */

/* Container pour un segment qui a un diff */
.segment-has-diff {
  /* Pas de fond, juste un léger espacement */
  display: block;
}

/* Texte supprimé (ancien) - barré en rouge */
.segment-diff-deleted {
  display: block !important;
  color: #dc2626 !important; /* red-600 */
  text-decoration: line-through !important;
  margin-bottom: 4px;
}

/* Texte de REMPLACEMENT (nouveau contenu qui remplace l'ancien) - en ORANGE/AMBRE */
/* Toujours accompagné de rouge barré à côté */
.segment-diff-added {
  display: block !important;
  color: #d47c17 !important; /* amber-800 - couleur sombre pour lisibilité */
   /* background-color: #fef3c7; */ /* amber-100 */
  padding: 4px 8px;
  border-radius: 4px;
  /* border-left: 3px solid #f59e0b; */ /* amber-500 */
}

/* Texte AJOUTÉ (nouveau contenu où il n'y avait rien) - en VERT */
/* Apparaît tout seul, sans rouge barré */
.segment-diff-inserted {
  display: block !important;
  color: #18773d !important; /* green-800 - couleur sombre pour lisibilité */
  /* background-color: #dcfce7; */ /* green-100 */
  padding: 4px 8px;
  border-radius: 4px;
  /* border-left: 3px solid #22c55e; */ /* green-500 */
  font-weight: 500;
}

/* Container pour les segments avec ajouts purs (pas de barré rouge) */
.segment-has-addition .segment-diff-deleted {
  display: none !important; /* Cacher le rouge barré pour les ajouts purs */
}

/* Animation pour attirer l'attention sur le diff */
@keyframes diff-appear {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.segment-has-diff .segment-diff-deleted,
.segment-has-diff .segment-diff-added {
  animation: diff-appear 0.3s ease-out;
}


/* ========================================
   SEGMENTS INSÉRÉS (nouveaux segments)
   ======================================== */

/* Segment inséré (nouveau contenu ajouté) */
.segment-inserted {
  background-color: #dcfce7 !important; /* green-100 */
  border-left: 4px solid #22c55e !important; /* green-500 */
  padding: 8px 12px !important;
  margin-left: -12px;
  margin-top: 8px;
  margin-bottom: 8px;
  border-radius: 0 6px 6px 0;
  position: relative;
}

/* Badge "Nouveau" pour les segments insérés */
.segment-inserted::before {
  content: "✚ Nouveau";
  position: absolute;
  top: -10px;
  left: 0;
  background-color: #22c55e; /* green-500 */
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px 4px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Animation d'apparition pour les segments insérés */
.segment-new {
  animation: segment-inserted-appear 0.5s ease-out;
}

@keyframes segment-inserted-appear {
  0% {
    opacity: 0;
    transform: translateY(-10px);
    background-color: #86efac; /* green-300 */
  }
  50% {
    background-color: #86efac; /* green-300 */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    background-color: #dcfce7; /* green-100 */
  }
}

/* Effet de highlight supplémentaire pour les segments insérés */
.segment-inserted.segment-highlight {
  background-color: #86efac !important; /* green-300 */
  box-shadow: 0 0 0 4px #22c55e !important; /* green-500 */
}