:root {
    --feedback-animation-duration: 12s;
    --feedback-comment-slot-duration: calc(var(--feedback-animation-duration) / 3);
}

.feedback-img-wrapper {
    padding: 20px 20px 20px 0px; /* Match .roas-feature-img.chat-component-container padding */
    box-sizing: border-box;
    /* background-color: #FFFFFF; */ /* Décommentez si un fond blanc est nécessaire */
    /* border-radius: 24px; */ /* Décommentez si des coins arrondis sont nécessaires */
}

.feedback-animation-container {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 180px; /* Hauteur minimale réduite */
    padding: 0;
    box-sizing: border-box;
    align-items: stretch; /* Force les enfants à avoir la même hauteur */
    justify-content: flex-start;
    gap: 12px;
    overflow: visible;
    font-family: 'Lato', sans-serif;
    position: relative;
}

/* Styles spécifiques pour exemple_meta dans le feedback-animation-container - version ultra-réduite */
.feedback-animation-container .exemple_meta {
    position: relative;
    width: 180px; /* Largeur fortement réduite */
    flex: 0 0 auto;
    top: 0;
    left: 0;
    transform: none;
    margin-right: 12px; /* Espace entre l'ad et les commentaires */
    padding: 8px; /* Padding minimal */
    font-size: 70%; /* Réduction plus importante de la typographie */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Ombre encore plus légère */
    border-radius: 10px; /* Légèrement plus arrondis */
    height: 100%; /* Prend toute la hauteur disponible */
    box-sizing: border-box; /* Inclut padding et bordures dans la hauteur */
    display: flex;
    flex-direction: column;
}

/* Structure flex pour distribution de l'espace vertical */
.feedback-animation-container .exemple_meta {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Répartir l'espace entre les éléments */
    height: 100%; /* Assure que exemple_meta prend toute la hauteur disponible */
}

/* Ajustement des espaces internes - version ultra-compacte */
.feedback-animation-container .exemple_meta .ad-header {
    margin-bottom: 5px; /* Espacement minimal */
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto; /* Taille fixe */
}

.feedback-animation-container .exemple_meta .brand-logo {
    width: 18px; /* Logo minuscule */
    height: 18px;
    min-width: 18px; /* Empêche le rétrécissement */
}

.feedback-animation-container .exemple_meta .brand-name {
    font-size: 10px; /* Nom de marque très petit */
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feedback-animation-container .exemple_meta .ad-info {
    font-size: 8px; /* Info minuscule */
}

/* Ce bloc est supprimé dans le HTML, donc je le commente ici */
/*.feedback-animation-container .exemple_meta .ad-text {
    margin-bottom: 5px; 
    font-size: 9px; 
    line-height: 1.2;
    max-height: 2.4em; 
    overflow: hidden;
}*/

.feedback-animation-container .exemple_meta .ad-image {
    flex: 1; /* Prend l'espace disponible entre les en-têtes et le pied */
    min-height: 60px; /* Hauteur minimale */
    margin-bottom: 5px;
    border-radius: 6px;
}

.feedback-animation-container .exemple_meta .ad-cta {
    padding: 3px 8px; /* Bouton minuscule */
    font-size: 8px;
    margin-bottom: 5px;
    border-radius: 3px;
    align-self: flex-start; /* Aligne le bouton au début */
    flex: 0 0 auto; /* Ne pas étirer */
}

.feedback-animation-container .exemple_meta .social-proof-indicators {
    font-size: 8px; /* Indicateurs sociaux minuscules */
    display: flex;
    justify-content: space-between;
    margin-top: auto; /* Pousse les indicateurs sociaux vers le bas */
    flex: 0 0 auto; /* Ne pas étirer */
}

.feedback-animation-container .exemple_meta:hover {
    transform: rotateY(-1deg) rotateX(1deg) scale(1.02); /* Effet de survol minime pour version ultra-compacte */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Ajustements pour les indicateurs sociaux */
.feedback-animation-container .exemple_meta .social-proof-indicators .like-count,
.feedback-animation-container .exemple_meta .social-proof-indicators .comment-count,
.feedback-animation-container .exemple_meta .social-proof-indicators .share-count {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Réduire la taille des emojis dans les indicateurs sociaux */
.feedback-animation-container .exemple_meta .social-proof-indicators span.count-num {
    font-size: 7px;
    margin: 0 2px 0 0;
}

.ad-placeholder {
    width: 100%;
    /* max-height: 180px; */ /* Limite la hauteur de l'image si besoin */
    aspect-ratio: 4 / 3; /* Maintient un ratio pour l'image */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    /* box-shadow: 0 5px 15px rgba(124, 137, 255, 0.15); */ /* Ombre supprimée */
    /* background-color: #f0f0f0; */ /* Fond supprimé */
}

.ad-placeholder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ad-overlay-info {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    background-color: rgba(0, 11, 16, 0.6);
    color: white;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.ad-likes-count,
.ad-comments-count {
    display: flex;
    align-items: center;
}

.ad-likes-count span,
.ad-comments-count span {
    min-width: 12px; /* Espace pour 2 chiffres */
    display: inline-block;
    text-align: left;
    margin-left: 4px;
}

.comments-column-area {
    display: flex;
    flex-direction: column;
    flex: 1; /* Prend l'espace restant disponible */
    height: 100%; /* Prend toute la hauteur disponible */
    gap: 10px; /* Espace entre les commentaires */
    overflow-y: auto; /* Permet de faire défiler si nécessaire */
    position: relative; /* Contexte de positionnement */
    /* Suppression des limites de hauteur pour s'adapter au contenu */
    max-height: none; 
    min-height: 0;
}

.feedback-comment-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 5px 5px 10px; /* Un peu de padding, surtout à gauche pour l'alignement */

    display: flex;
    align-items: flex-start;
    gap: 8px; /* Espace entre avatar et contenu */

    /* États initiaux pour l'animation (seront gérés par les keyframes) */
    opacity: 0;
    transform: translateX(-20px) scale(0.95);
    visibility: hidden;
    animation-fill-mode: forwards;
}

/* .comment-bubble { // Ancien style, commenté car .comment-bubble a été supprimé du HTML
    display: flex;
    align-items: flex-start;
    gap: 5px; 
    opacity: 0; 
    transform: translateX(-20px) scale(0.95); 
    animation-fill-mode: forwards;
    width: auto; 
    max-width: 100%; 
    box-sizing: border-box;
    padding-left: 5px; 
    
} */

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #E9E7FF; /* Couleur de fond si l'image ne charge pas */
}

.comment-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-content { /* Conteneur pour la bulle de texte et le nom d'utilisateur */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permet à ce conteneur de prendre l'espace restant */
}

.comment-text-bubble { /* La bulle grise contenant le nom et le texte */
    background-color: #F2F2F2; /* Fond gris clair standard */
    border-radius: 24px;     /* Correspond à .socialproof-chat-bubble */
    padding: 10px 15px;      /* Correspond à .socialproof-chat-bubble */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Correspond à .socialproof-chat-bubble */
    width: 100%; /* Prend toute la largeur de .comment-content */
    box-sizing: border-box; /* S'assure que le padding n'augmente pas la largeur totale */
}

.comment-user-name {
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #000B10;
    margin-bottom: 4px;
}

.comment-text {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    color: #717171;
    line-height: 1.4;
}

/* Animations séquentielles pour chaque commentaire sur la durée totale */

/* Commentaire 1: Visible de 0s à 4s (0% à 33.33%) */
@keyframes anim-comment-1-sequence {
    0%      { opacity: 0; transform: translateX(-20px) scale(0.95); visibility: hidden; }
    0.01%   { opacity: 0; transform: translateX(-20px) scale(0.95); visibility: visible; } /* Devient visible pour l'entrée */
    3.33%   { opacity: 1; transform: translateX(0) scale(1); visibility: visible; }      /* Fin apparition */
    26.67%  { opacity: 1; transform: translateX(0) scale(1); visibility: visible; }      /* Début disparition */
    30.00%  { opacity: 0; transform: translateX(10px) scale(0.95); visibility: visible; } /* Fin disparition (opacité) */
    30.01%  { opacity: 0; transform: translateX(10px) scale(0.95); visibility: hidden; }  /* Devient caché */
    100%    { opacity: 0; transform: translateX(-20px) scale(0.95); visibility: hidden; } /* Reste caché, position initiale */
}

/* Commentaire 2: Visible de 4s à 8s (33.33% à 66.66%) */
@keyframes anim-comment-2-sequence {
    0%, 33.32% { opacity: 0; transform: translateX(-20px) scale(0.95); visibility: hidden; } /* Caché avant son slot */
    33.33%  { opacity: 0; transform: translateX(-20px) scale(0.95); visibility: visible; } /* Devient visible */
    36.66%  { opacity: 1; transform: translateX(0) scale(1); visibility: visible; }      /* 33.33 + 3.33 (10%) */
    59.99%  { opacity: 1; transform: translateX(0) scale(1); visibility: visible; }      /* 33.33 + 26.66 (80%) */
    63.33%  { opacity: 0; transform: translateX(10px) scale(0.95); visibility: visible; } /* 33.33 + 30.00 (90%) */
    63.34%  { opacity: 0; transform: translateX(10px) scale(0.95); visibility: hidden; }  /* Devient caché */
    100%    { opacity: 0; transform: translateX(-20px) scale(0.95); visibility: hidden; } /* Reste caché */
}

/* Commentaire 3: Visible de 8s à 12s (66.66% à 99.99%) */
@keyframes anim-comment-3-sequence {
    0%, 66.65% { opacity: 0; transform: translateX(-20px) scale(0.95); visibility: hidden; } /* Caché avant son slot */
    66.66%  { opacity: 0; transform: translateX(-20px) scale(0.95); visibility: visible; } /* Devient visible */
    69.99%  { opacity: 1; transform: translateX(0) scale(1); visibility: visible; }      /* 66.66 + 3.33 (10%) */
    93.32%  { opacity: 1; transform: translateX(0) scale(1); visibility: visible; }      /* 66.66 + 26.66 (80%) */
    96.66%  { opacity: 0; transform: translateX(10px) scale(0.95); visibility: visible; } /* 66.66 + 30.00 (90%) */
    96.67%  { opacity: 0; transform: translateX(10px) scale(0.95); visibility: hidden; }  /* Devient caché */
    100%    { opacity: 0; transform: translateX(-20px) scale(0.95); visibility: hidden; } /* Reste caché */
}

.feedback-comment-item.anim-comment-1 {
    animation-name: anim-comment-1-sequence;
    animation-duration: var(--feedback-animation-duration);
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; /* La progression dans les keyframes gère les fondus */
}

.feedback-comment-item.anim-comment-2 {
    animation-name: anim-comment-2-sequence;
    animation-duration: var(--feedback-animation-duration);
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.feedback-comment-item.anim-comment-3 {
    animation-name: anim-comment-3-sequence;
    animation-duration: var(--feedback-animation-duration);
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* Animation pour le compteur de commentaires */
@keyframes animateCommentsCounter {
    0%      { content: "0"; }
    /* Commentaire 1 (0s à 4s) */
    0.1%    { content: "1"; } /* Apparaît au début du slot 1 */
    33.32%  { content: "1"; } /* Reste jusqu'à la fin du slot 1 */
    /* Commentaire 2 (4s à 8s) */
    33.33%  { content: "2"; } /* Apparaît au début du slot 2 */
    66.65%  { content: "2"; } /* Reste jusqu'à la fin du slot 2 */
    /* Commentaire 3 (8s à 12s) */
    66.66%  { content: "3"; } /* Apparaît au début du slot 3 */
    99.99%  { content: "3"; } /* Reste jusqu'à la fin du slot 3 */
    100%    { content: "0"; } /* Reset pour la boucle */
}

.comments-counter-animated::before {
    content: "0";
    animation-name: animateCommentsCounter;
    animation-duration: var(--feedback-animation-duration);
    animation-iteration-count: infinite;
    animation-timing-function: steps(1, end); /* Changements discrets */
}

/* Animation pour le compteur de likes */
@keyframes animateLikesCounter {
    0%      { content: "0"; }
    /* Slot 1: +5 likes */
    0.1%    { content: "5"; }
    33.32%  { content: "5"; }
    /* Slot 2: +8 likes (total 13) */
    33.33%  { content: "13"; }
    66.65%  { content: "13"; }
    /* Slot 3: +12 likes (total 25) */
    66.66%  { content: "25"; }
    99.99%  { content: "25"; }
    100%    { content: "0"; }
}

.likes-counter-animated::before {
    content: "0";
    animation-name: animateLikesCounter;
    animation-duration: var(--feedback-animation-duration);
    animation-iteration-count: infinite;
    animation-timing-function: steps(1, end); /* Changements discrets */
}

/* Ajustements pour s'assurer que l'animation est bien contenue */
.roas-feature-img {
    /* S'assurer que le conteneur parent permet à l'animation de prendre toute la place */
    display: flex; /* Ou block, selon ce qui fonctionne le mieux avec le reste */
    align-items: stretch; /* Pour que .feedback-animation-container puisse utiliser height: 100% */
    justify-content: center;
    padding: 0; /* Réinitialiser le padding si besoin */
}