/* ==========================================================
   ABTECH FLOATING CHAT
========================================================== */

.floating-chat{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:9999;

}

/* ==========================================================
   TOGGLE BUTTON
========================================================== */

.floating-chat-toggle{

    width:64px;

    height:64px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#142B63,#2563EB);

    color:#FFFFFF;

    font-size:26px;

    box-shadow:0 18px 45px rgba(20,43,99,.28);

    transition:.3s ease;

}

.floating-chat-toggle:hover{

    transform:translateY(-5px);

    box-shadow:0 25px 55px rgba(20,43,99,.38);

}

.floating-chat-toggle:focus{

    outline:none;

}

/* ==========================================================
   CHAT PANEL
========================================================== */

.floating-chat-box{

    position:absolute;

    right:0;

    bottom:82px;

    width:320px;

    background:#FFFFFF;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 25px 70px rgba(15,23,42,.20);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s ease;

}

.floating-chat.active .floating-chat-box{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

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

.chat-header{

    display:flex;

    align-items:center;

    gap:14px;

    padding:20px;

    background:linear-gradient(135deg,#142B63,#2563EB);

    color:#FFFFFF;

}

.chat-header-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

}

.chat-header-text{

    flex:1;

}

.chat-header-text h3{

    margin:0;

    font-size:13px;

    font-weight:700;

}

.chat-header-text p{

    margin:4px 0 0;

    font-size:12px;

    opacity:.9;

}

.chat-close{

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:rgba(255,255,255,.15);

    color:#FFFFFF;

    font-size:16px;

    transition:.25s;

}

.chat-close:hover{

    background:rgba(255,255,255,.25);

}

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

.chat-body{

    padding:20px;

}

.chat-intro{

    margin-bottom:20px;

}

.chat-intro h4{

    margin:0 0 6px;

    font-size:14px;

    color:#142B63;

    font-weight:700;

}

.chat-intro p{

    margin:0;

    font-size:12px;

    line-height:1.55;

    color:#64748B;

}

/* ==========================================================
   CONSULTANT
========================================================== */

.chat-consultant{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px;

    margin-bottom:10px;

    border:1px solid #E5E7EB;

    border-radius:14px;

    transition:.3s;

}

.chat-consultant:hover{

    border-color:#2563EB;

    background:#F8FBFF;

}

.consultant-avatar{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#EEF4FF;

    color:#2563EB;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    flex-shrink:0;

}

.consultant-info{

    flex:1;

}

.consultant-info h4{

    margin:0;

    font-size:12px;

    color:#142B63;

    font-weight:700;

}

.consultant-info p{

    margin:6px 0 0;

    font-size:11px;

    color:#64748B;

    line-height:1.5;

}

/* ==========================================================
   STATUS
========================================================== */

.status{

    display:flex;

    align-items:center;

    gap:5px;

    margin-top:3px;

    font-size:11px;

    color:#16A34A;

    font-weight:600;

}

.dot{

    width:6px;

    height:6px;

    border-radius:50%;

    background:#16A34A;

    animation:pulse 1.5s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.4);

        opacity:.4;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/* ==========================================================
   BUTTON
========================================================== */

.consult-btn{

     padding:8px 14px;

    border-radius:30px;

    background:#142B63;

    color:#FFFFFF;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    transition:.3s;

    white-space:nowrap;

}

.consult-btn:hover{

    background:#2563EB;

}
/* ==========================================================
   CONTACT INFO
========================================================== */
.chat-contact{

    margin-top:12px;

    padding-top:12px;

    border-top:1px solid #E5E7EB;

}

.chat-contact-item{

    display:flex;

    gap:14px;

    align-items:flex-start;

    margin-bottom:10px;

}

.chat-contact-item:last-child{

    margin-bottom:0;

}

.chat-contact-item i{

    width:30px;

    height:30px;

    font-size:13px;

    background:#EEF4FF;

    color:#2563EB;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    flex-shrink:0;

}

.chat-contact-item strong{

    display:block;

    font-size:12px;

    color:#142B63;

    margin-bottom:4px;

}

.chat-contact-item span{

    display:block;

    font-size:11px;

    color:#64748B;

    line-height:1.6;

}

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

.chat-footer{

    padding:16px 20px;

    text-align:center;

    background:#F8FAFC;

    border-top:1px solid #E5E7EB;

}

.chat-footer small{

    color:#94A3B8;

    font-size:12px;

}

/* ==========================================================
   SCROLLBAR
========================================================== */

.floating-chat-box{

    max-height:460px;

    overflow-y:auto;

}

.floating-chat-box::-webkit-scrollbar{

    width:6px;

}

.floating-chat-box::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:20px;

}

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

@media(max-width:768px){

.floating-chat{

    right:18px;

    bottom:18px;

}

.floating-chat-toggle{

    width:58px;

    height:58px;

    font-size:22px;

}

.floating-chat-box{

    width:320px;

    right:0;

}

.chat-header{

    padding:18px;

}

.chat-body{

    padding:18px;

}

.chat-consultant{

    padding:14px;

}

.consultant-avatar{

    width:48px;

    height:48px;

    font-size:20px;

}

.consult-btn{

    padding:9px 16px;

    font-size:12px;

}

}

@media(max-width:480px){

.floating-chat{

    right:12px;

    bottom:12px;

}

.floating-chat-box{

    width:calc(100vw - 24px);

    right:0;

    bottom:72px;

}

.chat-header-text h3{

    font-size:16px;

}

.chat-intro h4{

    font-size:16px;

}

.chat-intro p{

    font-size:13px;

}

.consultant-info h4{

    font-size:14px;

}

.consultant-info p{

    font-size:12px;

}

.chat-contact-item strong{

    font-size:13px;

}

.chat-contact-item span{

    font-size:12px;

}

}