How to change the WordPress Plugin Watson Assistant Chatbot BOX Size?

Question

How to change the Wordpress Plugin Watson Assistant Chatbot BOX Size? The CSS code below changes the height from below to top but not from top to below. I want to decrease the chatbot BOX size from top to below but I am not able to do it. The Code is written in adittional css part of wordpress .

@media (min-width: 640px) {
#watson-float {
top: 0;
right: 0 !important;
}

#watson-box {
width: 35vw !important;
height: 95vh !important;
}

#message-container {
height: calc(100% – 2.75em) !important;
}
}

I want to change the size of the box up to the red line.

Answer 1

Add margin-top and change values according to your will.

  @media (min-width: 640px) {
      #watson-float {
            margin-top: 100px;
        top: 0;
        right: 0 !important;
      }
    
      #watson-box {
        width: -900% !important;
        height:100% !important;
      }
    
      #message-container {
        height: calc(100% - 2.75em) !important;
      }
    }