/* ================= CHAT ICON ================= */

#chatIcon{

    position:fixed;

    right:20px;

    bottom:40px;

    width:65px;

    height:65px;

    background:#000978;

    color:#fff;

    font-size:32px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    z-index:9999;

    box-shadow:0 6px 20px rgba(0,0,0,.35);

    transition:.3s;

}

#chatIcon:hover{

    transform:scale(1.08);

}

/* ================= CHAT WINDOW ================= */

#chatBox{

    display:none;

    position:fixed;

    right:20px;

    bottom:95px;

    width:360px;

    height:520px;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(0,0,0,.35);

    z-index:9999;

}

/* ================= HEADER ================= */

.chatHeader{

    background:#000978;

    color:#fff;

    padding:14px 18px;

    font-size:18px;

    font-weight:bold;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.chatHeader span{

    cursor:pointer;

    font-size:26px;

}

/* ================= BODY ================= */

#chatBody{

    height:390px;

    overflow-y:auto;

    padding:12px;

    background:#f5f7fb;

}

/* Scroll Bar */

#chatBody::-webkit-scrollbar{

    width:8px;

}

#chatBody::-webkit-scrollbar-thumb{

    background:#c5c5c5;

    border-radius:10px;

}

/* ================= BOT MESSAGE ================= */

.bot{

    background:#e6f2ff;

    color:#222;

    padding:12px 15px;

    margin-bottom:10px;

    border-radius:15px;

    line-height:1.7;

    max-width:92%;

    white-space:pre-wrap;

    animation:fadeIn .4s;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

/* ================= USER MESSAGE ================= */

.user{

    background:#ffd700;

    color:#000;

    padding:12px 15px;

    margin-bottom:10px;

    margin-left:auto;

    border-radius:15px;

    max-width:85%;

    text-align:right;

    white-space:pre-wrap;

    animation:fadeIn .4s;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

/* ================= TYPING ================= */

.typing{

    display:inline-block;

    background:#ececec;

    color:#555;

    padding:10px 15px;

    border-radius:15px;

    margin-bottom:10px;

    font-style:italic;

    animation:blink 1s infinite;

}

/* ================= FOOTER ================= */

.chatFooter{

    display:flex;

    border-top:1px solid #ddd;

    background:#fff;

}

.chatFooter input{

    flex:1;

    padding:12px;

    border:none;

    outline:none;

    font-size:15px;

}

.chatFooter button{

    width:90px;

    border:none;

    background:#000978;

    color:#fff;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.chatFooter button:hover{

    background:#d40000;

}

/* ================= ANIMATIONS ================= */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes blink{

    0%{

        opacity:.4;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.4;

    }

}

/* ================= MOBILE ================= */

@media(max-width:768px){

    #chatBox{

        width:95%;

        right:2.5%;

        bottom:85px;

        height:480px;

    }

    #chatBody{

        height:350px;

    }

    #chatIcon{

        width:58px;

        height:58px;

        font-size:28px;

    }

    .chatFooter button{

        width:75px;

    }

}
.chat-link{

    display:inline-block;

    background:#000978;

    color:white;

    padding:10px 18px;

    border-radius:8px;

    text-decoration:none;

    margin-top:10px;

    font-weight:bold;

}

.chat-link:hover{

    background:red;

    color:white;

}