*{box-sizing:border-box;margin:0;padding:0}body{display:flex;justify-content:center;align-items:center;font-family:Times New Roman,Times,serif;width:100%;height:100vh;border:1px solid #8a8a8a;background-color:#090909}.contenedor{width:20rem;padding:.5rem;border-radius:.8rem;background:#eee}.pantalla{overflow-y:auto;width:100%;height:22rem;padding:.8rem;border-radius:.8rem;box-shadow:0 0 10px #0000004d}.msjBot,.msjUser{position:relative;text-wrap:balance;margin:.5rem 0;padding:.5rem;border-radius:.5rem;border:1px solid #00000022}.msjBot{font-weight:700;text-align:left;color:#000;background-color:#fff0}.msjUser{font-weight:700;text-align:right;color:#fff;background-color:#000}.enviarMjs{margin:.5rem 0}.enviar{border:none;width:75%;padding:.5rem 1rem;border-radius:.5rem;background-color:transparent;box-shadow:0 0 10px #0000004d}.enviar:focus{outline:none;font-weight:700}button{cursor:pointer;border:none;transition:all .3s ease;width:23%;padding:.5rem 1rem;border-radius:.5rem;color:#000;box-shadow:0 0 10px #0000004d}button:hover{background:#000;color:#fff}.modalContenedor{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100dvh;z-index:100;background-color:#00000080}.modal{text-align:center;text-wrap:balance;padding:1.5rem;margin:0 .5rem;border-radius:.8rem;background:#eee}#modalInput{outline:none;text-align:center;width:100%;margin:.5rem 0;padding:.5rem;border-radius:.5rem;border:1px solid transparent}#modalInput:focus{font-weight:700;border:1px solid #ccc}#modalBtn{cursor:pointer;border:none;transition:all .3s ease;width:100%;padding:.5rem 1rem;border-radius:.5rem;color:#000;background-color:#fff0}#modalBtn:hover{color:#fff;background-color:#000}@media screen and (max-width: 600px){.contenedor{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100vh;border-radius:0}.pantalla{overflow-y:scroll;height:100%}.enviar{margin:5px auto;text-align:center;width:100%}button{width:100%}.enviarMsj{display:flex;flex-direction:column}}