body {
    margin:0;
    font-family: system-ui;
    background: linear-gradient(135deg, #0f0f0f, #1c1c1c);
    color:white;
}

/* container */
.chat-container {
    max-width:600px;
    margin:auto;
    height:100vh;
    display:flex;
    flex-direction:column;
}

/* header */
.chat-header {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    background:#111;
    border-bottom:1px solid #222;
}

.avatar {
    width:42px;
    height:42px;
    border-radius:50%;
}

/* chat */
#chat {
    flex:1;
    padding:15px;
    overflow-y:auto;
}

/* messages */
.msg {
    padding:10px 14px;
    border-radius:14px;
    margin:8px 0;
    max-width:75%;
    line-height:1.4;
}

.user {
    background:#4caf50;
    margin-left:auto;
}

.bot {
    background:#2a2a2a;
}

/* typing */
.typing {
    display:none;
    padding:5px 15px;
    font-size:12px;
    opacity:0.7;
}

/* input */
.input-area {
    display:flex;
    border-top:1px solid #222;
}

input {
    flex:1;
    padding:12px;
    border:none;
    outline:none;
    background:#111;
    color:white;
}

button {
    background:#4caf50;
    border:none;
    padding:12px 16px;
    cursor:pointer;
}

/* mobile */
@media(max-width:600px){
    .msg { max-width:85%; }
}