// =============================================================================
// Message Reply Preview Component
// =============================================================================
// Компактное превью ответа на сообщение в чате
// При клике скроллит к оригинальному сообщению и подсвечивает его
// Использует data-reply-to-id для навигации

.message-reply-preview {
  // Базовые стили
  padding: 0; // Без отступов
  margin-bottom: 2px; // Минимальный отступ снизу
  
  // Компенсация padding от родительского .bubble
  // .bubble имеет padding: var(--space-1) var(--space-2)
  margin-left: calc(var(--space-2) * -1); // Компенсируем левый padding bubble
  margin-right: calc(var(--space-2) * -1); // Компенсируем правый padding bubble
  margin-top: calc(var(--space-1) * -1); // Компенсируем верхний padding bubble (первый элемент)
  
  border-radius: var(--bs-border-radius);
  border-left-width: 3px;
  border-left-style: solid;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.3; // Компактный межстрочный интервал
  
  // Сброс возможных наследуемых стилей от bubble
  display: block;
  
  // Интерактивность
  &:hover {
    transform: translateX(2px);
    opacity: 0.9;
  }
  
  &:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
  }
  
  // Автор ответа
  &__author {
    line-height: 1.2;
    margin-bottom: 2px;
    padding: 0; // Сброс padding от .small
    
    .bi-reply-fill {
      font-size: 0.85em;
      margin-right: 4px;
    }
  }
  
  // Текст сообщения
  &__content {
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0; // Сброс margin от .small
    padding: 0; // Сброс padding от .small
    max-width: 400px;
  }
  
  // Вариант для своих сообщений (синий фон)
  &--own {
    background-color: rgba(255, 255, 255, 0.1);
    border-left-color: rgba(255, 255, 255, 0.5);
    
    .message-reply-preview__author {
      color: rgba(255, 255, 255, 0.7);
    }
    
    .message-reply-preview__content {
      color: rgba(255, 255, 255, 0.6);
    }
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.15);
    }
  }
  
  // Вариант для чужих сообщений (светлый фон)
  &--other {
    background-color: rgba(13, 110, 253, 0.05);
    border-left-color: var(--bs-primary);
    
    .message-reply-preview__author {
      color: var(--bs-primary);
    }
    
    .message-reply-preview__content {
      color: var(--bs-secondary);
    }
    
    &:hover {
      background-color: rgba(13, 110, 253, 0.1);
    }
  }
  
  // Адаптивность для мобильных
  @media (max-width: 576px) {
    &__content {
      max-width: 250px;
    }
  }
}