/* css/socialproof-chat.css */

/* Emergency override to force left alignment of all chat elements */
.roas-feature-card .roas-feature-img.chat-component-container,
.roas-feature-img.chat-component-container,
.chat-component-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 20px !important; /* 20px padding on all sides */
  text-align: left !important;
  position: relative !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* Force children to align left */
}

.roas-feature-img.feedback-img-wrapper {
  width: 100% !important;
  /* Suppression de height: 100% qui causait le débordement */
  /* Au lieu de cela, on utilise auto qui respecte la taille du parent */
  height: auto !important;
  margin: 0 !important;
  padding: 20px !important;
  text-align: left !important;
  position: relative !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
  /* Éviter tout débordement */
  overflow: hidden !important;
}

/* Specific rule for when chat component is directly applied to the feature image div */
.roas-feature-img.chat-component-container {
  width: 100% !important; /* Force full width, override any fixed width */
  margin-left: 0 !important; /* Force left alignment */
  margin-right: auto !important;
  padding-left: 0 !important; /* Remove left padding completely */
  align-self: flex-start !important; /* Force left alignment in flex parent */
  justify-content: flex-start !important; /* Ensure content aligns left */
}
.chat-component-container {
  position: relative; /* For the thread line positioning */
  background-color: #FFFFFF; /* Fond blanc */
  border-radius: 24px; /* Standard project radius */
  padding: 20px 20px 20px 0px; /* Top, Right, Bottom, Left - ZERO left padding */
  display: flex;
  flex-direction: column;
  gap: 15px; /* Space between chat messages */
  overflow: hidden; /* Ensures nothing spills out awkwardly */
  margin-left: 0; /* Force left alignment */
  margin-right: auto;
  width: 100%; /* Take full width available */
}

.socialproof-chat-message {
  display: flex;
  align-items: flex-start; /* Aligns avatar with the top of the text bubble */
  gap: 5px; /* Space between avatar and bubble */
  max-width: 100%; /* Allow child elements to control width with padding */
  position: relative;
  z-index: 1; /* To ensure messages are above the thread line */
  margin-left: 0 !important; /* Force left alignment */
  padding-left: 5px !important; /* Small padding from left edge */
  width: auto !important; /* Allow content sizing while maintaining left alignment */
  align-self: flex-start !important; /* Force left alignment */
}

.socialproof-chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden; /* This is key to clip the image if it's not perfectly round or sized */
  flex-shrink: 0; /* Prevents the avatar from shrinking if space is tight */
}

.socialproof-chat-message.user-message .socialproof-chat-avatar {
  /* border: 2px solid #BEB8E8; */ /* Bordure supprimée */
  box-sizing: border-box; /* Ensures border is within the 40x40 dimensions */
}

.socialproof-chat-avatar svg,
.socialproof-chat-avatar img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover; /* Ensures image covers the area without distortion */
}

.socialproof-chat-bubble {
  background-color: #F2F2F2; /* Updated chat bubble color */
  padding: 10px 15px;
  border-radius: 24px; /* Rounded corners for the bubble */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
  flex-grow: 0; /* Don't expand beyond content */
  max-width: fit-content; /* Size to content */
}

.socialproof-chat-user-name {
  font-family: 'Rubik', sans-serif; /* As per project's typography for titles/names */
  font-weight: 500; /* Medium boldness */
  font-size: 14px; /* Slightly smaller for chat context */
  color: #000B10; /* Deep black for names */
  margin-bottom: 4px;
}

.socialproof-chat-text {
  font-family: 'Lato', sans-serif; /* As per project's typography for body text */
  font-size: 13px; /* Slightly smaller for chat context */
  color: #717171;
}

.socialproof-chat-message.agent-message {
  margin-left: 15px !important; /* Slightly indent agent responses */
  padding-left: 5px; /* Reduced padding for better appearance */
  box-sizing: border-box; /* Ensure padding is included in width calculation */
  max-width: fit-content; /* Adapt to content width */
  width: auto; /* Allow natural sizing */
}

.socialproof-chat-thread-line {
  display: none; /* Masquer la ligne de fil de discussion */
  position: absolute;
  left: 20px; /* Aligné avec le centre de l'avatar */
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e0e0e0;
  z-index: 0; /* Behind messages */
}

/* Ce sélecteur est maintenant défini plus haut dans le fichier */

/* Conteneur pour les messages */
.response-messages-container {
  position: relative;
  width: 100%;
  min-height: 80px; /* Hauteur minimale pour éviter les sauts de mise en page */
}

/* Style pour le message animé */
#animated-message {
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

/* Classes pour les animations de fondu */
.fade-out {
  opacity: 0 !important;
}

.fade-in {
  opacity: 1 !important;
}

/* Ajustement pour les appareils mobiles pour éviter que le texte ne soit coupé */
@media (max-width: 767px) {
  .roas-feature-img.chat-component-container {
    min-height: 284px; /* Augmente la hauteur minimale du conteneur principal sur mobile */
  }
}