@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: 55px; height: 55px;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: 400px; 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 20px; width: 74%; border: none; background: none;  float: left; font-size: 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;}
@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;
}

/* 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;
}



/* 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);
  }

}