/**
 * Message Animations CSS
 * Ensures smooth rendering during animations
 */

/* Ensure messages don't cause layout shift during animation */
.message {
  will-change: transform, opacity;
  transform-origin: center center;
}

/* Smooth transitions for message elements */
.message-message,
.user-message,
.assistant-message,
.coach-message {
  position: relative;
  /* Allow animations to work smoothly */
  backface-visibility: hidden;
  /* Improve rendering performance */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typing indicator smooth animations */
#typing-indicator {
  will-change: transform, opacity;
  transform-origin: left center;
}

/* Prevent flash of unstyled content during page load */
.message[style*="opacity: 0"] {
  visibility: hidden;
}

.message[style*="opacity: 1"] {
  visibility: visible;
}

/* Ensure smooth scroll behavior doesn't conflict with animations */
.chat-messages {
  scroll-behavior: smooth;
}

/* Add subtle hover effect to messages (optional enhancement) */
.message:hover {
  /* Slight scale on hover for interactivity feedback */
  transform: scale(1.005);
  transition: transform 0.2s ease-out;
}

/* Cancel hover effect during entrance animation */
.message[style*="translateX"] {
  pointer-events: none;
}

/* Re-enable pointer events after animation */
.message {
  pointer-events: auto;
}