.quoted__message__preview {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  padding: 8px 16px;
  animation: slide-in 0.2s ease-out;
  transform-origin: bottom;
  background-color: var(--uikit-bg-color-input);

  &__content {
    width: 100%;
    position: relative;
    padding: 8px 12px;
    background-color: var(--uikit-bg-color-operate);
    border-left: 6px solid var(--uikit-text-color-tertiary);

    &--header {
      display: flex;
      margin-bottom: 4px;
      font-size: 14px;
      font-weight: 500;
    }

    &--title {
      font-size: 14px;
      font-weight: 500;
      color: var(--uikit-text-color-primary);
    }

    &--text {
      font-size: 14px;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: var(--uikit-text-color-secondary);
    }
  }

  &__close {
    cursor: pointer;
    transition: color 0.2s ease;
    color: var(--uikit-text-color-secondary);

    &:hover {
      color: var(--uikit-text-color-primary);
    }
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}