:root{font-size:10px}*{margin:0;padding:0;box-sizing:border-box}body{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#f4f4f9;font-family:Arial,Helvetica,sans-serif}.layout__chat{width:95%;max-width:50rem;display:flex;flex-direction:column;align-items:center;gap:5rem}.chat__header{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:3rem;padding:2rem;border-radius:1rem;background-color:#fff;box-shadow:2px 2px 10px rgba(0,0,0,.1)}.header__icon{height:4rem}.header__title{font-size:1.6rem;font-weight:700;color:#007bff;text-align:center}@media(min-width:480px){.header__title{font-size:2.4rem}}@media(min-width:768px){.header__title{font-size:3rem}}.chat__main{width:100%;display:flex;flex-direction:column;background-color:#fff;border-radius:1rem;box-shadow:0 .5px 5px rgba(0,0,0,.1);padding:2rem}.chat__messages{width:100%;height:30rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;padding:1rem;border-radius:.8rem;background-color:#fafafa;box-shadow:inset 0 0 5px rgba(0,0,0,.1)}.chat__message{max-width:90%;padding:1.5rem;font-size:1.8rem;border-radius:1rem;word-wrap:break-word}@media(min-width:480px){.chat__message{max-width:85%}}@media(min-width:768px){.chat__message{max-width:75%}}.chat__message--user{color:#fff;background-color:#007bff;text-align:right;margin-left:auto}.chat__message--bot{color:#333;background-color:#e0e0e0;text-align:left;margin-right:auto}.chat__input-group{width:100%;display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.chat__input-text{width:100%;height:20rem;overflow-y:auto;display:block;outline:0;border:1px solid #ccc;padding:1rem;font-size:1.6rem;line-height:1.3;border-radius:5px;background-color:#fff;resize:none;transition:all .3s ease-in-out}.chat__input::placeholder{color:#6b7280;opacity:1}.chat__input:focus{border-color:#007bff;box-shadow:0 0 5px #007bff}.chat__inputs{display:flex;flex-direction:row;gap:1rem}.chat__selet option{color:#007bff}.chat__selet option:nth-child(odd){background-color:#f0f0f0}.chat__button,.chat__selet{padding:1rem;font-size:1.6rem;border-radius:5px;border:1px solid #ccc;cursor:pointer;transition:all .3s ease-in-out}.chat__selet{flex:2;background-color:#fafafa}.chat__button{flex:1;background-color:#007bff;color:#fff;border:none;outline:0;transition:all .3s ease}.chat__button:hover{background-color:#0a5bb2;box-shadow:0 0 5px #093c72}