/* ================================================================================
   MESSAGE TRUNCATE - Gestion des longs messages utilisateur
   ================================================================================

   Affiche uniquement les 10 premières lignes des messages utilisateur
   avec un bouton "Afficher plus" pour les messages plus longs.

   Les messages assistant sont toujours affichés en entier.

   ================================================================================ */

/* Permettre au message user de wrapper le bouton en dessous */
.message-user:has(.message-expand-toggle) {
  flex-wrap: wrap;
}

/* Container pour le message utilisateur tronqué */
.message-user .content.truncated {
  position: relative;
  max-height: calc(1.5em * 10); /* 10 lignes avec line-height 1.5 */
  overflow: hidden;
}

/* Gradient de fondu à la fin du message tronqué - Light mode */
.message-user .content.truncated::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background: linear-gradient(
    to bottom,
    rgba(251, 249, 245, 0) 0%,
    rgba(251, 249, 245, 0.8) 50%,
    rgba(251, 249, 245, 1) 100%
  );
  pointer-events: none;
}

/* Gradient de fondu - Dark mode */
[data-theme="dark"] .message-user .content.truncated::after {
  background: linear-gradient(
    to bottom,
    rgba(38, 38, 36, 0) 0%,
    rgba(38, 38, 36, 0.8) 50%,
    rgba(38, 38, 36, 1) 100%
  );
}

/* État expanded - afficher tout le contenu */
.message-user .content.expanded {
  max-height: none;
  overflow: visible;
}

.message-user .content.expanded::after {
  display: none;
}

/* Bouton "Afficher plus" / "Afficher moins" */
.message-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  justify-content: flex-end; /* Aligné à droite */
  margin-top: 8px;
  padding: 4px 0;
  background: transparent;
  border: none;
  color: rgba(47, 47, 46, 0.6);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
}

.message-expand-toggle:hover {
  color: rgba(47, 47, 46, 0.9);
}

.message-expand-toggle:active {
  opacity: 0.7;
}

/* Icône chevron */
.message-expand-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

/* Rotation de l'icône quand expanded */
.content.expanded + .message-expand-toggle svg {
  transform: rotate(180deg);
}

/* Dark mode pour le bouton */
[data-theme="dark"] .message-expand-toggle {
  color: rgba(245, 245, 240, 0.7);
}

[data-theme="dark"] .message-expand-toggle:hover {
  color: rgba(245, 245, 240, 1);
}

/* Responsive */
@media (max-width: 768px) {
  .message-expand-toggle {
    font-size: 11px;
  }

  .message-expand-toggle svg {
    width: 12px;
    height: 12px;
  }
}

/* ========================================
   FIN DU FICHIER MESSAGE TRUNCATE
   ======================================== */