/* user.css - Styles spécifiques à l'interface utilisateur Brume */

/* === Thème utilisateur === */
body {
  background: #343541;
  color: #ececf1;
}

.header {
  background: #202123;
  border-bottom: 1px solid #4d4d4f;
  justify-content: space-between;
}

.header h1 {
  color: #ececf1;
}

/* === Badge session === */
.session-id {
  font-size: 0.75rem;
  color: #a1a1aa;
  background: #40414f;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* === Zone de chat === */
#chat {
  background: #343541;
}

#chat::-webkit-scrollbar-thumb {
  background: #565869;
}

/* === Messages === */
.message {
  background: #40414f;
  border-radius: 0.75rem;
  padding: 1rem;
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
}

.message.user {
  background: #2f303b;
  border: 1px solid #565869;
  margin-left: auto;
}

.message.ai {
  background: #444654;
  margin-right: auto;
}

/* === Avatars === */
.avatar {
  background: rgba(255, 255, 255, 0.08);
}

.avatar.user {
  background: #5436da;
  color: #fff;
}

/* === Contenu des messages === */
.message-content {
  color: #f7f7f8;
  padding-top: 0.125rem;
  min-width: 0;
}

/* === Animation de réflexion === */
.typing {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0;
}

.typing span {
  width: 0.5rem;
  height: 0.5rem;
  background: #8e8ea0;
  border-radius: 999px;
  animation: bounce 1.4s infinite ease-in-out;
}

.typing span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* === Zone de saisie === */
.input-container {
  background: #202123;
  border-top: 1px solid #4d4d4f;
}

.input-wrapper {
  width: 100%;
}

#f {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  background: #40414f;
  border: 1px solid #565869;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.user-input {
  border: 1px solid #565869;
  background: #343541;
  color: #ececf1;
}

/* Assure l'accessibilité du champ de saisie */
.user-input[aria-label] {
  /* Pas de styles supplémentaires requis, mais ce sélecteur documente l'accessibilité */
}

.user-input::placeholder {
  color: #8e8ea0;
}

/* === Bouton d'envoi === */
.user-button {
  width: 100%;
  background: #19c37d;
  color: #052d1a;
}

.user-button:hover,
.user-button:focus-visible {
  background: #15a96c;
}

.user-button:disabled {
  background: #3f3f46;
  color: #b5b5c1;
}

.welcome {
  text-align: center;
  padding: 2.5rem 1rem;
  color: #b5b5c1;
}

.welcome h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ececf1;
  margin-bottom: 0.75rem;
}

.welcome p {
  font-size: 0.9375rem;
}

@media (min-width: 600px) {
  #f {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .user-button {
    width: auto;
    justify-self: end;
    min-width: 7rem;
  }
}

@media (min-width: 768px) {
  .message {
    max-width: 48rem;
    padding: 1.25rem;
  }

  #f {
    padding: 1rem 1.25rem;
  }
}