You can use the Conversation Style Generator to adjust the conversation avatar image and the conversation bubbles style in visual mode. But if you want something more complex, Magic Conversation for Gravity Forms provides an option that you can use to make advanced adjustments with custom css code.

Visit Dashboard -> Magic Conversation for Gravity Forms -> Settings -> Custom -> Custom CSS, paste your css code into the textarea and click Save Changes to make it take effect. After saving, refresh your browser to see the results.

When writing your own custom css code for the conversation bubbles, you can use this css selector: cf-chat-response text.

cf-chat-response text is for the bubble container. It is the outside box of each bubble. So you can adjust the border and padding of the bubble.

For example, the code below changes the padding to 30px and the border to red with 3px width.

cf-chat-response text{
    padding:50px;
    border: 3px solid red;
}

You can also add a shadow effect to the bubble.

cf-chat-response text {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Because this plugin always shows plain text in bubble, that means cf-chat-response text is also for the bubble text effect. You can change text size, font family with this selector too.

For example, the code below changes the bubble text size to 30px, text color to white, and font family to Arial.

cf-chat-response text {
    font-size:30px;
    color: white;
    font-family: arial;
}

You can add custom code for other elements of conversation form by using the css selector below:

• The whole message box: .conversational-form
• Bubble for Robot: cf-chat-response.robot text
• Avatar for Robot: cf-chat-response.robot thumb
• Bubble for User: cf-chat-response.user text
• Avatar for User: cf-chat-response.user thumb

You can also add custom code for global conversation button by using the css selector below:

• Global conversation header: .mcfgfp-pin-conversation-body-profile
• Global conversation button container: .mcfgfp-pin-btn
• Global conversation button normal status: #mcfgfp-pin-container .mcfgfp-pin-btn .mcfgfp-pin-btn-open
• Global conversation button active status: #mcfgfp-pin-container .mcfgfp-pin-btn .mcfgfp-pin-btn-close

If you want to customize the css style only on mobile devices, you can use CSS3 media query support. You can specify code for target device width. In the code below, the first part is for devices with max device width 1023px (tablet) and the second part is for devices with max device width 767px (phone).

The order is important, css generated by the Conversation Style Generator is for desktop, so we use max-device-width query, to reduce size one by one. You cannot put the code for phone above the code for tablet.

@media only screen and (max-device-width: 1023px) {
    cf-chat-response text {
        color: #FFFFFF;  
        border-radius: 5px;  
        font-size: 14px;  
        background-color: #D41111;  
        -webkit-border-radius: 5px;  
        -moz-border-radius: 5px;  
        margin-left: 0px;  
        margin-top: 0px;  
        border-color: #333333;  
        border-width: 1;
    }
    cf-chat-response text {  
        line-height: 150%;  
        padding: 2.4px 6px 2.4px 6px;
    }
}
@media only screen and (max-device-width: 767px) {
    cf-chat-response text {
        color: #FFFFFF;  
        border-radius: 5px;  
        font-size: 14px;  
        background-color: #D41111;  
        -webkit-border-radius: 5px;  
        -moz-border-radius: 5px;  
        margin-left: 0px;  
        margin-top: 0px;  
        border-color: #333333;  
        border-width: 1;
    }
    cf-chat-response text {  
        line-height: 150%;  
        padding: 2.4px 6px 2.4px 6px;
    }
}

Please read this article for more detail about it: Responsive Web Design – Media Queries