/* messages.css */
.message {
    max-width: 75%;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: var(--border-radius);
    word-wrap: break-word;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp var(--transition-speed) ease forwards;
  }
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Пузырёк пользователя (справа) */
  .message.user {
    background-color: var(--user-bubble);
    color: var(--text-user);
    margin-left: auto;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
  }
  
  /* Пузырёк бота (слева) */
  .message.bot {
    background-color: var(--bot-bubble);
    color: var(--text-bot);
    margin-right: auto;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
  }
  
  /* Индикатор загрузки */
  .loader {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top: 2px solid var(--user-bubble);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }