/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    overflow:hidden;
    background:linear-gradient(-45deg,#ff0080,#7928ca,#00dbde,#fc00ff);
    background-size:400% 400%;
    animation:bg 12s ease infinite;
}

@keyframes bg{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* Floating Circles */

.bg span{
    position:absolute;
    width:120px;
    height:120px;
    background:rgba(255,255,255,.15);
    border-radius:50%;
    animation:float 10s linear infinite;
    filter:blur(8px);
}

.bg span:nth-child(1){top:10%;left:10%;}
.bg span:nth-child(2){top:70%;left:20%;}
.bg span:nth-child(3){top:20%;right:10%;}
.bg span:nth-child(4){bottom:10%;right:20%;}
.bg span:nth-child(5){top:50%;left:50%;}

@keyframes float{
    50%{transform:translateY(-40px) rotate(180deg);}
}

/* Chat Box */

.chat-container{
    width:420px;
    height:650px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.25);
    border-radius:25px;
    box-shadow:0 0 40px rgba(0,0,0,.4);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

/* Header */

.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px;
    color:#fff;
    background:rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.2);
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.robot{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#00e5ff;
    color:#000;
    font-size:22px;
    box-shadow:0 0 20px cyan;
}

/* Chat */

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

#chat-box::-webkit-scrollbar{
    width:6px;
}

#chat-box::-webkit-scrollbar-thumb{
    background:#00e5ff;
    border-radius:20px;
}

.message{
    max-width:80%;
    padding:12px 18px;
    margin:10px 0;
    border-radius:18px;
    animation:show .4s;
}

.bot .message{
    background:#ffffff25;
    color:#fff;
}

.user{
    display:flex;
    justify-content:flex-end;
}

.user .message{
    background:#00e5ff;
    color:#000;
}

@keyframes show{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Input */

.input-area{
    display:flex;
    padding:15px;
    gap:10px;
    background:rgba(255,255,255,.08);
}

input{
    flex:1;
    padding:14px;
    border:none;
    outline:none;
    border-radius:30px;
    background:rgba(255,255,255,.15);
    color:#fff;
}

input::placeholder{
    color:#ddd;
}

button{
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    background:linear-gradient(45deg,#00e5ff,#00ff95);
    color:#000;
    font-size:20px;
    transition:.3s;
    box-shadow:0 0 15px cyan;
}

button:hover{
    transform:scale(1.12) rotate(15deg);
    box-shadow:0 0 30px cyan;
}

/* Responsive */

@media(max-width:500px){
.chat-container{
    width:95%;
    height:95vh;
}
}