@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;overflow-y:auto}.modal-content{background-color:#fff;padding:1.5rem;border-radius:.625rem;text-align:center;max-width:90%;width:100%;box-sizing:border-box}.modal-content h2{margin-bottom:.75rem;font-size:1.5rem}.modal-content p{margin-bottom:1.5rem;font-size:1rem;color:#333}.modal-content button{background-color:#25d366;color:#fff;border:none;padding:.75rem 1.25rem;cursor:pointer;border-radius:.3125rem;margin:.3125rem;font-size:1rem;transition:background-color .3s ease}.modal-content button:hover{background-color:#1ebc57}.App{display:flex;flex-direction:column;height:100vh;font-family:Roboto,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f4f4f4}.room-entry{padding:1rem 2rem;background-color:#fff;border-radius:.625rem;box-shadow:0 0 10px #0000001a;max-width:600px;margin:0 auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.username{display:flex;flex-direction:row;align-items:center;gap:.5rem}.username>h3{font-size:1.5rem;color:#333}.username>img{width:1.25rem;cursor:pointer}.action-group{margin-bottom:1.5rem;display:flex;flex-direction:column}.prompt-text{margin-bottom:.5rem;font-size:1.125rem;color:#555}.input-wrapper{display:flex;align-items:center;gap:.5rem}.input.room-input{padding:.875rem;width:70%;border:1px solid #ccc;border-radius:.375rem;font-size:1rem}.room-input{position:relative;display:flex;align-items:center;width:100%}.input{padding:.875rem;margin:.625rem 0;border:1px solid #ccc;border-radius:.3125rem;box-sizing:border-box;width:calc(100% - 3.75rem)}.emoji-button{background:none;border:none;cursor:pointer;font-size:1.25rem;padding:.625rem;margin-left:.625rem}.emoji-picker{position:absolute;bottom:3.75rem;right:.625rem;z-index:10}.btn{padding:.875rem 1.25rem;font-size:1rem;border-radius:.375rem;cursor:pointer;transition:background-color .3s ease}.primary-btn{background-color:#25d366;color:#fff;border:none}.primary-btn:hover{background-color:#1ebc57}.secondary-btn{background-color:#f5f5f5;color:#333;border:1px solid #ddd;padding:.914rem;font-size:.75rem}.secondary-btn:hover{background-color:#ebebeb}.btn:hover{background-color:#1ebc57;color:#fff}.chat-room{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:0;margin:0}.messages{flex-grow:1;padding:.625rem;overflow-y:auto;background-color:#ece5dd;display:flex;flex-direction:column-reverse}.message-container{display:flex;flex-direction:column}.message-container.incoming{display:flex;flex-direction:column;align-self:flex-start}.message-container.outgoing{display:flex;flex-direction:column;align-self:flex-end}.message{padding:.75rem 1.125rem;margin-bottom:.625rem;border-radius:1.25rem;font-size:1.125rem;word-wrap:break-word}.message.incoming{background-color:#fff;border-bottom-left-radius:0}.message.outgoing{background-color:#dcf8c6;border-bottom-right-radius:0}.typing{color:gray;font-style:italic;padding:.625rem}.spacing{display:flex;justify-content:center;align-items:center;padding:0 1rem;gap:.3rem}.input-area{display:flex;align-items:center;padding:.625rem;background-color:#fff;border-top:1px solid #ddd}.input-area input{flex-grow:1;padding:.75rem;border:1px solid #ccc;border-radius:1.5625rem;margin-right:.625rem}.input-area button{background-color:#25d366;border:none;padding:.75rem;border-radius:50%;color:#fff;cursor:pointer}.input-area button:hover{background-color:#1ebc57}@media (max-width: 600px){.modal-content{padding:1.25rem;border-radius:.5rem}.modal-content h2{font-size:1.25rem}.modal-content p{font-size:.875rem}.modal-content button{font-size:.875rem;padding:.625rem 1rem}.message{font-size:1rem;padding:.625rem .75rem}.input-area input{font-size:1rem;padding:.625rem}.input-area button{padding:.625rem 1rem}.btn{font-size:1rem;padding:.625rem 1.125rem}.input{font-size:1rem;padding:.75rem}}*{margin:0}