body{
    margin:0;
    font-family:Arial;
    background:#0f172a;
}

.container{
    max-width:900px;
    margin:auto;
    height:100vh;
    display:flex;
    flex-direction:column;
}

.header{
    background:#111827;
    color:white;
    padding:18px;
    font-size:20px;
}

.chat-box{
    flex:1;
    padding:20px;
    overflow-y:auto;
}

.message{
    padding:12px;
    margin:10px 0;
    border-radius:10px;
    color:white;
    max-width:75%;
    white-space:pre-line;
}

.user{
    background:#2563eb;
    margin-left:auto;
}

.bot{
    background:#1e293b;
}

.input-area{
    display:flex;
    padding:15px;
    background:#111827;
}

textarea{
    flex:1;
    height:60px;
    border-radius:8px;
    padding:10px;
    border:none;
    font-size:16px;
}

button{
    margin-left:10px;
    padding:12px 15px;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

#micBtn.listening{
    background:red;
    color:white;
    animation:pulse 1s infinite;
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.2);}
    100%{transform:scale(1);}
}