@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* BUTTON */
#chat-toggle { position: fixed; bottom: 20px; right: 20px;color: #fff;width: 65px; height: 65px;border-radius: 50%;display: flex;align-items: center; justify-content: center;
 cursor: pointer;    z-index: 999999;}
#chat-toggle  img{ width:100%; }
/* BOX */
#chat-box { position: fixed;bottom: 90px; right: 20px; width: 425px; height: 410px; background: #fff; border-radius: 10px; overflow: hidden; display: none;
  flex-direction: column; box-shadow: 0 5px 20px rgba(0,0,0,0.3); font-family: "Inter", sans-serif;  z-index: 999999;}
.ch_top .ch_img{ float:left; width: 40px;}
.ledt_side{ float: left; margin-left: 10px; }
.left_title{ font-weight: 600; font-size: 16px; margin-top: 5px; }
.online_n{ font-size: 12px; color: #43EE7D; float: left; margin-top: 2px; }
.online_n span{ width: 8px; height: 8px; background: #43EE7D; border-radius: 30px; float: left; margin-top: 3px; margin-right: 4px; }
#chat-header {  background: #003852; color: #fff; padding: 15px 10px; display: flex; justify-content: space-between;}
#chat-body { flex: 1;padding: 10px; overflow-y: auto; background: #F8F9FA;}
#chat-footer { display: flex; padding:14px;  box-shadow: 0px 0px 15px #e1e1e1;}
#chat-input {flex: 1; padding: 15px 10px; width: 74%; border: none; background: none;  float: left; font-size: 14px; padding-left: 15px; margin-top: 3px;}
#send-btn { background: none; color: #fff; border: none; padding: 12px 15px; cursor: pointer;}
.footer_box{background: #F2F2F2; border-radius: 16px; width: 100%;   display: flex;}
.message { margin: 5px 0; padding: 10px 8px; border-radius: 8px; max-width: 75%; font-size: 15px;}
.user { background: #003852; color: #fff; margin-left: auto;}
#chat-input:focus,
#chat-input:active {
  outline: none !important;  box-shadow: none !important;  border: none !important;}
.bot {  background: #ddd;}
#close{ background: none; color: #fff; font-weight: 700; border: none;  cursor: pointer;}
 /* TYPING INDICATOR */
.typing { display: flex;  gap: 5px; align-items: center;}
.typing span {width: 6px; height: 6px; background: #999;  border-radius: 50%; animation: blink 1.4s infinite;}
.typing span:nth-child(2) {  animation-delay: 0.2s;}
.typing span:nth-child(3) {  animation-delay: 0.4s;}

.message p{color:#fff; font-size: 16px;; }
@keyframes blink {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
@media (max-width: 600px) {
  #chat-box { width: 90%; height: 60%; }
}
/* MESSAGE WRAP */
.msg-wrap{ display:flex; margin-bottom:10px; align-items:flex-end; width:100%;}
.msg-wrap.user{justify-content:flex-end;}
.msg-wrap.bot{ justify-content:flex-start;}
/* AVATAR */
.avatar{ width:34px; height:34px;flex-shrink:0;}
.avatar img{ width:100%; height:100%; object-fit:contain;}
/* CONTENT */
.msg-content{  max-width:78%;}
.msg-wrap.bot .msg-content{
  margin-left:10px;
}

.msg-wrap.user .msg-content{
  margin-right:10px;
}

.bot a{
  color:#ffe500;
  text-decoration:underline;
  word-break:break-word;
}

/* MESSAGE */
.message{
  padding:8px 12px;
  font-size:15px;
  line-height:21px;
  position:relative;
  border-radius:6px;
  word-wrap:break-word;
}

/* BOT */
.message.bot{
     background: #5DA2BC;
    color: #ffffff;
  border-bottom-left-radius:0;
}

/* USER */
.message.user{
     background: #efece8;
    color: #444444;
    border-bottom-right-radius: 0;
  border-bottom-right-radius:0;
}

/* SHARP EDGE */
.message.bot::after{
  content:'';
  position:absolute;
  left:-9px;
  bottom:0;
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-right:10px solid #5DA2BC;
}

.message.user::after{
  content:'';
  position:absolute;
  right:-10px;
  bottom:0;
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-left:10px solid #efece8;
}

/* TIME */
.msg-time{
  font-size:11px;
  color:#999;
  margin-top:6px;
  padding-left:5px;
}

/* REMOVE OLD */
.user,
.bot{
  margin-left:0;
  background:none;
  max-width:unset;
}


.g-recaptcha{
    margin-bottom:12px;
    display:flex;
    justify-content:center;
}



#email-screen{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-sizing:border-box;
}

.email-box{
  width:100%;
  text-align:center;
}

.email-box h3{
  margin-bottom:10px;
  font-size:22px;
}

.email-box p{
  margin-bottom:15px;
  font-size:14px;
  color:#666;
}

#email-input{
  width:100%;
  padding:14px;
  border:1px solid #ddd;
  border-radius:10px;
  margin-bottom:12px;
  font-size:15px;
  box-sizing:border-box;
}

#start-chat-btn{
  width:100%;
  background:#003852;
  color:#fff;
  border:none;
  padding:14px;
  border-radius:10px;
  cursor:pointer;
  font-size:15px;
}
#email-error{
  color:#ff3b30;
  font-size:13px;
  margin-top:10px;
  text-align:center;
  font-weight:500;
}






#chat-popup{
  position:fixed;
  right:95px;
  bottom:44px;
  z-index:999999;
  display:none;
  animation:popupFade .4s ease;
  
}

#popup-chat-btn{
  display:inline-block;
  background:#ffffff;
  color:#003852;
  padding:12px 18px;
  border-radius:25px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 15px rgba(0,0,0,.15);
  white-space:nowrap;
}

#popup-chat-btn:hover{
  transform:translateY(-2px);
}

#popup-chat-btn::after{
  content:'';
  position:absolute;
  right:-7px;
  bottom:12px;
  width:0;
  height:0;
  border-left:10px solid #fff;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}


#chat-popup{

  animation: popupFloat 2s ease-in-out infinite;
}

@keyframes popupFloat{
  0%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-2px);
  }
  100%{
    transform:translateY(0);
  }
}
@keyframes popupFade{
  from{
    opacity:0;
    transform:translateY(15px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* #chat-toggle{
  animation: floatChat 2.5s ease-in-out infinite;
}

@keyframes floatChat{
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-2px);
  }
  100%{
    transform: translateY(0);
  }
} */

#chat-toggle{
   transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
  animation: floatChat 2.5s ease-in-out infinite;
}


#start-chat-btn{
  position:relative;
}

/* LOADING STATE */
#start-chat-btn.loading .btn-text{
  opacity:0;
}

#start-chat-btn.loading .btn-loader{
  display:block;
}

.btn-loader{
  width:18px;
  height:18px;
  border:2px solid rgba(255,255,255,0.4);
  border-top:2px solid #fff;
  border-radius:50%;
  animation:spin .8s linear infinite;

  position:absolute;
  left:50%;
  top:50%;
  margin-left:-9px;
  margin-top:-9px;

  display:none;
}

@keyframes spin{
  100%{
    transform:rotate(360deg);
  }
}



/* CASE STUDY CARD */
.case-card{
  background:#ffffff;
  border-radius:12px;
  padding:14px;
  margin-top:12px;
  color:#222;
}

.case-title{
  font-size:15px;
  font-weight:500;
  margin-bottom:8px;
  color:#003852;
}

.case-desc{
  font-size:14px;
  line-height:22px;
  color:#555;
  margin-bottom:10px;
}

.case-link a{
    display: inline-block;
    background: none;
    color: #003852 !important;
    padding: initial;
    border-radius: initial;
    text-decoration: underline;
    font-size: 13px;
    font-weight: 500 !important; 
}

.case-card br{ display: none; }

.case-card a{ color: #003852 !important; }

.case-title a{ color: #003852 !important; }



/* TYPING LOADER */
.typing-box{

  background:#5DA2BC;

  padding:14px 16px;

  border-radius:8px;
  border-bottom-left-radius:0;

  display:flex;
  align-items:center;
  gap:6px;

  position:relative;

}

.typing-box::after{

  content:'';

  position:absolute;

  left:-9px;
  bottom:0;

  width:0;
  height:0;

  border-top:10px solid transparent;
  border-right:10px solid #5DA2BC;

}

.typing-box span{

  width:7px;
  height:7px;

  background:#fff;

  border-radius:50%;

  animation:typingBounce 1.3s infinite ease-in-out;

}

.typing-box span:nth-child(2){
  animation-delay:0.2s;
}

.typing-box span:nth-child(3){
  animation-delay:0.4s;
}

@keyframes typingBounce{

  0%, 80%, 100%{
    transform:translateY(0);
    opacity:0.4;
  }

  40%{
    transform:translateY(-4px);
    opacity:1;
  }

}
/* FORCE SHOW TYPING */
.typing-box{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}

.typing-box span{
  display:block !important;
}

.msg-wrap.bot{
  display:flex !important;
  padding-top: 5px;
}

/* SMOOTH ANIMATION */
.msg-wrap{
  animation:fadeUp .3s ease;
  transition:all .3s ease;
}

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(8px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}