@tailwind base;
@tailwind components;
@tailwind utilities;

/* Animations pour le chat */

@keyframes typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.typing-dot {
  animation: typing-bounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(1) {
  animation-delay: 0s;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

.typing-indicator-enter {
  animation: fade-in 0.3s ease-out;
}

/* Améliorations visuelles pour les accusés de lecture */
.read-indicator {
  transition: all 0.2s ease-in-out;
}

.read-indicator.read {
  color: #60a5fa; /* Bleu plus visible pour les messages lus */
}

.read-indicator.sent {
  color: #93c5fd; /* Bleu plus clair pour les messages envoyés */
}

/* Animation pour l'apparition des nouveaux messages */
.message-appear {
  animation: fade-in 0.3s ease-out;
}

/* Styles Discord-like pour les messages */
.message-container:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.message-container:hover .message-timestamp {
  opacity: 1;
}

.message-container:hover .message-actions {
  opacity: 1;
}

.message-timestamp {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.message-actions {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Masquer la scrollbar sur les conteneurs de navigation par onglets */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* =============================================
   Responsive table — mode "stacked" sur mobile
   Sur md+ : table classique
   Sous md  : chaque ligne → carte verticale,
              chaque cellule affiche son label
   ============================================= */
@media (max-width: 767px) {
  .responsive-table thead {
    display: none;
  }
  .responsive-table {
    background: transparent;
  }
  .responsive-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    background: transparent;
  }

  .responsive-table tbody tr {
    display: block;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: #fafaf9; /* stone-50 */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.07);
    padding: 0.25rem 0;
    overflow: hidden;
  }

  .responsive-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 1rem;
    text-align: right;
    font-size: 0.875rem;
  }

  /* Label = nom de la colonne injecté via data-label */
  .responsive-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280; /* gray-500 */
    text-align: left;
    margin-right: 1rem;
    flex-shrink: 0;
  }
}
