/* VALORIX FAQ CHATBOT V1 */

#vx-chat-launcher{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9998;
  width:58px;
  height:58px;
  border:1px solid rgba(18,167,255,.36);
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:#fff;
  background:
    radial-gradient(circle at 30% 20%,rgba(6,229,232,.24),transparent 45%),
    linear-gradient(145deg,#087cff,#0552ad);
  box-shadow:
    0 18px 45px rgba(0,0,0,.40),
    0 0 30px rgba(8,124,255,.18);
  transition:.2s ease;
}

#vx-chat-launcher:hover{
  transform:translateY(-2px) scale(1.03);
}

#vx-chat-launcher svg{
  width:25px;
  height:25px;
}

#vx-chat-panel{
  position:fixed;
  right:22px;
  bottom:94px;
  z-index:9999;
  width:min(390px,calc(100vw - 28px));
  height:min(590px,calc(100vh - 125px));
  display:none;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(48,155,255,.22);
  border-radius:22px;
  background:#06101f;
  box-shadow:0 28px 80px rgba(0,0,0,.58);
}

#vx-chat-panel.open{
  display:flex;
}

.vx-chat-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:17px 18px;
  border-bottom:1px solid rgba(48,155,255,.14);
  background:
    radial-gradient(circle at 90% 0%,rgba(18,167,255,.14),transparent 45%),
    #071225;
}

.vx-chat-logo{
  width:38px;
  height:38px;
  object-fit:contain;
  border-radius:10px;
}

.vx-chat-title{
  flex:1;
}

.vx-chat-title strong{
  display:block;
  color:#fff;
  font-size:14px;
}

.vx-chat-title span{
  display:block;
  margin-top:2px;
  color:#8ca2ba;
  font-size:11px;
}

.vx-chat-online{
  color:#06e5e8;
}

.vx-chat-close{
  border:0;
  background:none;
  color:#8ca2ba;
  cursor:pointer;
  font-size:24px;
  line-height:1;
}

.vx-chat-messages{
  flex:1;
  overflow-y:auto;
  padding:17px;
}

.vx-msg{
  max-width:88%;
  margin-bottom:11px;
  padding:11px 13px;
  border-radius:14px;
  font-size:13px;
  line-height:1.55;
  white-space:pre-line;
}

.vx-msg.bot{
  margin-right:auto;
  color:#dcecff;
  background:#0b1930;
  border:1px solid rgba(48,155,255,.12);
  border-bottom-left-radius:5px;
}

.vx-msg.user{
  margin-left:auto;
  color:#fff;
  background:linear-gradient(135deg,#087cff,#0759bd);
  border-bottom-right-radius:5px;
}

.vx-quick{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:4px 0 16px;
}

.vx-quick button{
  border:1px solid rgba(18,167,255,.23);
  border-radius:999px;
  padding:7px 10px;
  cursor:pointer;
  color:#bcdcff;
  background:rgba(8,124,255,.08);
  font-size:11px;
  transition:.15s ease;
}

.vx-quick button:hover{
  color:#fff;
  border-color:rgba(18,167,255,.48);
  background:rgba(8,124,255,.16);
}

.vx-chat-contact{
  display:block;
  margin-top:11px;
  padding:10px 12px;
  border-radius:10px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  font-size:12px;
  font-weight:700;
  background:linear-gradient(135deg,#087cff,#0665d7);
}

.vx-chat-inputbar{
  display:flex;
  gap:8px;
  padding:12px;
  border-top:1px solid rgba(48,155,255,.14);
  background:#071225;
}

#vx-chat-input{
  flex:1;
  min-width:0;
  border:1px solid rgba(48,155,255,.18);
  border-radius:11px;
  padding:11px 12px;
  outline:none;
  color:#edf6ff;
  background:#04101f;
  font:inherit;
  font-size:13px;
}

#vx-chat-input:focus{
  border-color:rgba(18,167,255,.55);
}

#vx-chat-send{
  width:42px;
  border:0;
  border-radius:11px;
  cursor:pointer;
  color:#fff;
  background:#087cff;
  font-size:17px;
}

@media(max-width:600px){
  #vx-chat-launcher{
    right:14px;
    bottom:14px;
  }

  #vx-chat-panel{
    right:14px;
    bottom:82px;
    width:calc(100vw - 28px);
    height:min(620px,calc(100vh - 100px));
  }
}