/* ===== FORMATAGE AUTOMATIQUE MATHÉMATIQUE ===== */
/* Fichier à inclure pour formatter ** en gras et X/Y en fractions */

/* ===== 1) FORMATAGE DES FRACTIONS ===== */
/* Transforme automatiquement "2/3" ou "263/23" en vraies fractions */

.msg.bot {
  /* Active le formatage automatique via JavaScript */
  position: relative;
}

/* Style des fractions formatées - Version flexbox ajustée */
.fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-size: 0.95em;
  margin: 0 0.1em;
  gap: 0; /* Aucun espace entre les éléments */
}

.fraction .numerator {
  border-bottom: 1px solid currentColor;
  font-size: 0.9em;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  flex-shrink: 0;
}

.fraction .denominator {
  font-size: 0.9em;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  flex-shrink: 0;
  /* Léger décalage négatif pour rapprocher sans chevaucher */
  margin-top: -1px !important;
}

/* Fraction alternative plus compacte pour les petits écrans */
@media (max-width: 480px) {
  .fraction {
    font-size: 0.9em;
  }
  .fraction .numerator,
  .fraction .denominator {
    font-size: 0.85em;
  }
}

/* ===== 2) FORMATAGE DES ** EN GRAS ET * EN ITALIQUE ===== */
/* Les ** entourant du texte le rendent automatiquement gras */
/* Les * simples entourant du texte le rendent automatiquement italiques */

.math-bold {
  font-weight: bold;
  /* Couleur héritée du parent (pas de couleur spécifique) */
}

.math-italic {
  font-style: italic;
  /* Couleur héritée du parent */
}

/* ===== 3) AMÉLIORATIONS VISUELLES ===== */
/* Pour que les formules mathématiques ressortent mieux */

.math-expression {
  background: rgba(59, 130, 246, 0.08);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-family: 'Courier New', Consolas, monospace;
  border-left: 3px solid #3b82f6;
}

@media (prefers-color-scheme: dark) {
  .math-expression {
    background: rgba(96, 165, 250, 0.15);
    border-left-color: #60a5fa;
  }
}
