* { box-sizing:border-box; }
body { font-family:Arial,sans-serif; margin:0; padding:0; background:#f0f2f5; display:flex; justify-content:center; align-items:center; height:100vh; }

#chat-container {
    display:flex; flex-direction:column;
    width:100%; max-width:450px;
    height:90vh;
    background:white; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.1);
    overflow:hidden;
}

#chat { flex:1; padding:15px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; scroll-behavior:smooth; }
.message { display:flex; align-items:flex-end; max-width:80%; padding:10px 14px; border-radius:20px; animation:fadeIn 0.2s ease-in; position:relative; }
.user { background:#007bff; color:white; align-self:flex-end; border-bottom-right-radius:4px; }
.bot { background:#e5e5ea; color:black; align-self:flex-start; border-bottom-left-radius:4px; }
.avatar { width:30px; height:30px; border-radius:50%; margin-right:8px; flex-shrink:0; background-size:cover; background-position:center; }
.message.user .avatar { display:none; }
.timestamp { font-size:10px; color:#666; margin-left:6px; }
#typing { font-style:italic; color:#555; padding-left:15px; display:none; }
#input-container { display:flex; padding:10px; border-top:1px solid #ddd; background:#f9f9f9; }
#input { flex:1; padding:10px 14px; border-radius:20px; border:1px solid #ccc; outline:none; }
#send { margin-left:10px; padding:10px 16px; border:none; border-radius:20px; background:#007bff; color:white; cursor:pointer; }
#send:disabled { background:#aaa; cursor:not-allowed; }
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@media(max-width:480px) { #chat-container { width:95%; height:90vh; } }