*{box-sizing:border-box;margin:0;padding:0;font-family:Poppins,sans-serif}body{background:#f0f2f5;color:#2c3e50}.app{display:flex;flex-direction:column;height:100vh}.app-header,.app-footer{background:#1abc9c;color:#fff;text-align:center;padding:1rem;font-weight:600}.app-header h1{font-size:1.5rem}.chat-container{flex:1;display:flex;flex-direction:column;margin:1rem;background:#fff;border-radius:15px;box-shadow:0 5px 15px #0000001a;overflow:hidden}.messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}.message{max-width:75%;padding:.6rem 1rem;border-radius:20px;word-wrap:break-word;animation:fadeIn .3s ease;box-shadow:0 2px 5px #0000000d}.my-message{background:#d1f2eb;align-self:flex-end}.other-message{background:#f1f2f6;align-self:flex-start}.message-header{font-size:.7rem;color:#7f8c8d;margin-bottom:.2rem;display:flex;justify-content:space-between}.user-input{display:flex;padding:.5rem;gap:.5rem;border-top:1px solid #ecf0f1;background:#f9f9f9}.user-input input{flex:1;padding:.6rem 1rem;border-radius:50px;border:1px solid #bdc3c7;outline:none}.user-input button{padding:.6rem 1rem;border:none;border-radius:50px;background:#1abc9c;color:#fff;font-weight:600;cursor:pointer;transition:.2s}.user-input button:hover{background:#16a085}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.messages::-webkit-scrollbar{width:6px}.messages::-webkit-scrollbar-thumb{background:#bdc3c7;border-radius:3px}@media(max-width:600px){.chat-container{margin:.5rem;border-radius:10px}.message{max-width:85%;font-size:.9rem}.app-header h1{font-size:1.2rem}}