body {
    margin:0;
    font-family:sans-serif;
    transition:0.3s;
}

body.light {
    background: linear-gradient(135deg,#74ebd5,#acb6e5);
}

body.dark {
    background: linear-gradient(135deg,#1f1f1f,#121212);
    color:white;
}

.chat-wrapper {
    width:450px;
    height:650px;
    margin:40px auto;
    backdrop-filter: blur(20px);
    background: rgba(255,255,255,0.2);
    border-radius:20px;
    display:flex;
    flex-direction:column;
    box-shadow:0 10px 40px rgba(0,0,0,0.2);
}

.topbar {
    padding:15px;
    display:flex;
    justify-content:space-between;
}

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

.message {
    margin:10px 0;
    padding:10px 15px;
    border-radius:15px;
    max-width:80%;
}

.user {
    background:#4e73df;
    color:white;
    margin-left:auto;
}

.bot {
    background:#ffffffaa;
}

.input-area {
    display:flex;
    padding:10px;
}

.input-area input {
    flex:1;
    padding:10px;
    border-radius:10px;
    border:none;
}

.input-area button {
    margin-left:10px;
    padding:10px;
    border:none;
    border-radius:10px;
    background:#4e73df;
    color:white;
    cursor:pointer;
}