.widget-chat {
     position: fixed;
     right: 15px;
     bottom: 15px;
}
 .widget-container {
     position: relative;
}
 .widget-button {
    width: 60px;
    height: 60px;
    background-image: -webkit-linear-gradient(90deg,rgba(216,162,0,1.00) 0%,rgba(255,203,45,1.00) 100%);
    background-image: -moz-linear-gradient(90deg,rgba(216,162,0,1.00) 0%,rgba(255,203,45,1.00) 100%);
    background-image: -o-linear-gradient(90deg,rgba(216,162,0,1.00) 0%,rgba(255,203,45,1.00) 100%);
    background-image: linear-gradient(0deg,rgba(216,162,0,1.00) 0%,rgba(255,203,45,1.00) 100%);
    border-radius: 30px;
    position: absolute;
    right: 15px;
    bottom: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
 .chat-open {
     fill: #fff;
     width: 35px;
     height: 35px;
}
 .close-chat {
     fill: #fff;
     width: 35px;
     height: 35px;
     display: none;
     -webkit-animation: close-chat 1.9s ease-in-out both;
     animation: close-chat 1.9s ease-in-out both;
}
 .widget-content {
     visibility: hidden;
     opacity: 0;
     transition: .4s;
     width: 300px;
     height: clamp(300px, 70vh, 475px);
     overflow: hidden;
     border-radius: 5px;
     box-shadow:0 7px 30px -10px rgba(150,170,180,0.5);
     position: absolute;
     bottom: 75px;
     right: 0;
}
 .widget-title {
     display: flex;
     align-items: center;
     padding: 15px;
     background-image: linear-gradient( 109.6deg, rgba(192,10,39,1.00) 11.2%, rgba(192,10,39,1.00) 91.2% );
}
 .widget-title span, strong {
     color: #fff;
     display: block;
}
 .widget-title figure {
     margin: 0 15px 0 0;
}
 .widget-thumb {
     width: 50px;
     height: 50px;
     border-radius: 30px;
     border: 5px solid #fff 
}
/* form */
 .widget-dialog-form {
     height: 100%;
     overflow: hidden;
     overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: #E98973 #9c27b0;
}
 .widget-dialog-form::-webkit-scrollbar {
     width: 12px;
}
 .widget-dialog-form::-webkit-scrollbar-track {
     background: #E7D4C0;
     border-radius: 0;
}
 .widget-dialog-form::-webkit-scrollbar-thumb {
     background-color: #9c27b0;
     border-radius: 0;
}
 .text-form {
     text-align: center;
     color: #555;
     padding: 0;
     margin: 15px;
}
 .widget-dialog-form form {
     max-width: 300px;
     padding: 0 25px;
}
 .widget-dialog-form .field {
     display: flex;
     flex-flow: column-reverse;
}
 .widget-dialog-form label, input {
     transition: all 0.2s;
     padding: 0 10px;
     font-size: 15px;
     color: #555;
     touch-action: manipulation;
}
 .widget-dialog-form textarea, .widget-dialog-form input {
     cursor: text;
     border: 1px solid #efefef;
     border-radius: 5px;
     height: 35px;
     margin-bottom: 5px;
     padding: 5px 15px;
     position: relative;
}
 .widget-dialog-form textarea {
     height: 60px;
}
 .widget-dialog-form textarea:focus, .widget-dialog-form input:focus {
     outline: none;
}
 .widget-dialog-form textarea:placeholder-shown + label, .widget-dialog-form input:placeholder-shown + label {
     cursor: text;
     overflow: hidden;
    /* adiciona a label acima do input e faz a transição suave ao clicar */
     transform-origin: left bottom;
     transform: translate(0, 1.8rem) scale(1.2);
     width: 175px;
}
 .widget-dialog-form ::-webkit-input-placeholder {
     opacity: 0;
     transition: inherit;
}
 .widget-dialog-form input:focus::-webkit-input-placeholder, .widget-dialog-form textarea:focus::-webkit-input-placeholder{
     opacity: 1;
}
 .widget-dialog-form textarea:not(:placeholder-shown) + label, .widget-dialog-form input:not(:placeholder-shown) + label, .widget-dialog-form textarea:focus + label, .widget-dialog-form input:focus + label {
     transform: translate(0, 0) scale(1);
     cursor: pointer;
}
 .btn-play {
     border: 0;
     padding: 10px 15px;
     border-radius: 3px;
     color: #fff;
     margin: 15px auto;
     display: block;
     background-image: linear-gradient( 109.6deg, rgba(192,10,39,1.00) 11.2%, rgba(192,10,39,1.00) 91.2% );
}
 .widget-input-open {
     display: none;
}
 .widget-input-open:checked ~ .widget-content {
     visibility: visible;
     opacity: 1;
}
 .widget-input-open:checked + .widget-button .chat-open {
     display: none;
}
 .widget-input-open:checked + .widget-button .close-chat {
     display: block;
}
/* animacao close */
 @-webkit-keyframes close-chat {
     0% {
         -webkit-transform: rotate(0);
         transform: rotate(0);
    }
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}
 @keyframes close-chat {
     0% {
         -webkit-transform: rotate(0);
         transform: rotate(0);
    }
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}