/**
 * Micro-interactions et animations
 * Améliore l'expérience utilisateur avec des feedbacks visuels subtils
 */

/* ===== TRANSITIONS GLOBALES ===== */
:root {
  --transition-rapide: 0.15s ease;
  --transition-normale: 0.2s ease;
  --transition-lente: 0.3s ease;
  --transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== BOUTONS ===== */
button, .btn {
  transition: transform var(--transition-rapide),
              background-color var(--transition-normale),
              box-shadow var(--transition-normale),
              opacity var(--transition-normale);
}

button:active:not(:disabled),
.btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* Bouton send avec animation */
.bouton-envoi:active:not(:disabled),
#btnEnvoyer:active:not(:disabled) {
  transform: scale(0.92);
}

/* Animation d'envoi */
@keyframes envoi {
  0% { transform: translateX(0) scale(1); }
  50% { transform: translateX(4px) scale(0.95); }
  100% { transform: translateX(0) scale(1); }
}

.envoi-animation {
  animation: envoi 0.3s ease;
}

/* ===== ITEMS SIDEBAR ===== */
.item-unifie,
.conversation-item {
  transition: transform var(--transition-rapide),
              background-color var(--transition-normale),
              box-shadow var(--transition-normale);
}

.item-unifie:active,
.conversation-item:active {
  transform: scale(0.98);
}

/* Item sélectionné - pulse subtil */
.item-unifie.active,
.conversation-item.active {
  animation: selectionPulse 0.3s ease;
}

@keyframes selectionPulse {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* ===== MESSAGES ===== */
.message {
  transition: transform var(--transition-normale),
              opacity var(--transition-normale);
}

/* Nouveau message - apparition douce */
@keyframes messageApparition {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message.nouveau {
  animation: messageApparition 0.3s ease;
}

/* Hover message - légère élévation */
.message:hover {
  transform: translateX(2px);
}

.message.utilisateur:hover,
.message.user:hover {
  transform: translateX(-2px);
}

/* ===== AVATAR ===== */
.message-avatar,
.avatar-contact,
.avatar-ia-carre {
  transition: transform var(--transition-spring);
}

.message:hover .message-avatar,
.item-unifie:hover .avatar-contact,
.item-unifie:hover .avatar-ia-carre {
  transform: scale(1.05);
}

/* ===== ICÔNES ===== */
.fa-star,
.fa-heart {
  transition: transform var(--transition-spring), color var(--transition-normale);
}

.fa-star:hover,
.fa-heart:hover {
  transform: scale(1.2);
}

/* Animation favori */
@keyframes favoriPop {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.favori-animation {
  animation: favoriPop 0.4s ease;
}

/* ===== MODALES ET OVERLAYS ===== */
.modal,
.modal-overlay,
.overlay {
  transition: opacity var(--transition-normale);
}

.modal-content,
.modal-body {
  transition: transform var(--transition-normale), opacity var(--transition-normale);
}

/* ===== CHARGEMENT SKELETON ===== */
@keyframes skeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-loading {
  background: linear-gradient(
    90deg,
    var(--fond-tertiaire, #f0f0f0) 0%,
    var(--fond-secondaire, #e8e8e8) 50%,
    var(--fond-tertiaire, #f0f0f0) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
}

/* ===== RIPPLE EFFECT ===== */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.ripple:active::after {
  width: 200%;
  height: 200%;
  opacity: 0;
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}

/* ===== FOCUS VISIBLE ===== */
:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
  transition: outline-offset var(--transition-rapide);
}

button:focus-visible,
.btn:focus-visible {
  outline-offset: 3px;
}

/* ===== TYPING INDICATOR ===== */
@keyframes typingDot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.typing-indicator span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 2px;
  background: var(--texte-secondaire, #666);
  border-radius: 50%;
  animation: typingDot 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
.typing-indicator span:nth-child(3) { animation-delay: 0s; }

/* ===== CHECKBOX / TOGGLE ===== */
input[type="checkbox"],
.toggle-switch {
  transition: background-color var(--transition-normale),
              border-color var(--transition-normale),
              box-shadow var(--transition-normale);
}

/* ===== TOAST / NOTIFICATIONS ===== */
@keyframes toastSlideIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toastSlideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.toast-entree {
  animation: toastSlideIn 0.3s ease forwards;
}

.toast-sortie {
  animation: toastSlideOut 0.3s ease forwards;
}

/* ===== RÉDUCTION MOUVEMENT ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}