@font-face {
    font-family: "Globotipo Variable";
    src: url("fonts/5462f4c64759cc666538a326be3e6de1.woff2") format("woff2");
    font-style: normal italic;
    font-weight: 100 900;
    font-stretch: condensed normal;
    font-display: swap
} 
@font-face {
    font-family: "glbOpenSans";
    font-weight: 300;
    src: url("fonts/opensans-light-normal.woff2")
        format('woff2'),
      url("fonts/opensans-light-normal.woff")
        format('woff');
    font-display: swap;
}
@font-face {
    font-family: "glbOpenSans";
    font-weight: 700;
    src: url("fonts/opensans-bold-normal.woff2")
        format('woff2'),
      url("fonts/opensans-bold-normal.woff")
        format('woff');
    font-display: swap;
}
@font-face {
    font-family: "glbOpenSans";
    font-weight: 600;
    src: url("fonts/opensans-semibold-normal.woff2")
        format('woff2'),
      url("fonts/opensans-semibold-normal.woff")
        format('woff');
    font-display: swap;
}
@font-face {
    font-family: "glbOpenSans";
    font-weight: 400;
    src: url("fonts/opensans-regular-normal.woff2")
        format('woff2'),
      url("fonts/opensans-regular-normal.woff")
        format('woff');
    font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.cdnfonts.com/css/trebuchet-ms-2');
html, body{
margin:0;
padding:0;
font-family: "glbOpenSans";
background:#FFF;
}
ul{
margin:0;
padding:0;
}
ul li{
padding:0;
margin:0;
list-style: none;
font-family: "glbOpenSans";
}
img{
max-width: 100%;
height:auto;
border:0;
outline: 0;
}
button, input, a, select{
outline: 0 !important;
border:0;
text-decoration: none;
font-family: "glbOpenSans";
}
a, span, p, h1, h2, h3, h4, h5, h6, small{
font-family: "glbOpenSans";
}
a{
text-decoration:none;
font-family: "glbOpenSans";
}
body{
background-color:#f4f4f4;
height:100vh;
}
.container-chat {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0 20px;
}
#chat {
flex: 1;
width: 100%;
max-width: 640px;
overflow-y: auto;
display: flex;
flex-direction: column;
background-color:#fff;
border-radius: 10px;
padding:15px;
min-height: 600px;
}
#chat-container {
width: 100%;
height: 100%;
display: flex;
max-width: 550px;
flex-direction: column;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s ease forwards;
}
.mensagem {
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
color: #1257B8;
animation: fadeInMessage 0.5s ease forwards;
font-family: "glbOpenSans";
display: inline-block;
max-width: 70%;
}
.mensagem strong{
font-family: "glbOpenSans";
}
.chatbot {
background-color: #f7f8ff;
display: block;
width: fit-content;
max-width: 80%;
}
.usuario {
background-color: #fff;
text-align: right;
}
#input-container {
display: flex;
align-items: center;
justify-content: flex-end;
}
button {
padding: 8px 20px;
border: none;
border-radius: 5px;
background-color: #1257B8;
color: #fff;
font-size: 16px;
cursor: pointer;
overflow: hidden;
}
button:hover {
background-color: #1257B8;
}
#name-input {
padding:5px 15px;
border:1px solid #ccc;
border-radius:5px;
font-size: 15px;
width: auto;
font-family: "glbOpenSans";
color: #3b3b3b;
height: 40px;
margin-right: 10px;
}
#name-input::placeholder {
color: #848484;
}
#name-input:focus, input:focus {
outline: none;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInMessage {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

@media(max-width:992px){
    .mensagem{
        font-size: 14px;
    }
}