/* JLS Free Chatbot — chatbot.css v3 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

#jlsf-root{
  --p:#0f2444;--p2:#162f5a;--p3:#0d1f3c;
  --a:#b8860b;--a2:#d4a017;--a3:#f5c842;
  --pale:#fdf8ee;--w:#fff;
  --g50:#f7f8fa;--g100:#f0f2f5;--g200:#e4e8ef;
  --g400:#9ea8b8;--g600:#5a6478;--g800:#1e2533;
  --sh:0 20px 60px rgba(10,20,50,.22),0 4px 16px rgba(10,20,50,.12);
  --sh2:0 4px 20px rgba(10,20,50,.18);
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  position:fixed;z-index:999999;
}
#jlsf-root.pos-bottom-right{bottom:28px;right:28px}
#jlsf-root.pos-bottom-left {bottom:28px;left:28px}

/* ── Toggle Button ── */
#jlsf-toggle{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(145deg,var(--p2),var(--p3));
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 28px rgba(10,20,50,.42),0 2px 8px rgba(10,20,50,.2);
  transition:transform .25s cubic-bezier(.34,1.3,.64,1),box-shadow .2s;
  position:relative;
}
#jlsf-toggle:hover{transform:scale(1.12);box-shadow:0 10px 36px rgba(10,20,50,.52)}
#jlsf-toggle svg{width:28px;height:28px;color:#fff;transition:opacity .15s}
#jlsf-badge{
  position:absolute;top:-3px;right:-3px;
  background:#e53e3e;color:#fff;
  width:22px;height:22px;border-radius:50%;
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:2.5px solid #fff;
  animation:jbounce .9s ease 2s 3;
}
@keyframes jbounce{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}

/* ── Chat Window ── */
#jlsf-window{
  position:absolute;bottom:80px;
  width:420px;max-height:640px;
  background:var(--w);border-radius:22px;
  box-shadow:var(--sh);
  display:flex;flex-direction:column;overflow:hidden;
  animation:jwin .3s cubic-bezier(.34,1.26,.64,1);
  border:1px solid rgba(15,36,68,.07);
}
#jlsf-root.pos-bottom-right #jlsf-window{right:0}
#jlsf-root.pos-bottom-left  #jlsf-window{left:0}
@keyframes jwin{from{opacity:0;transform:translateY(22px) scale(.93)}to{opacity:1;transform:none}}

/* ── Header ── */
#jlsf-header{
  background:linear-gradient(135deg,var(--p3) 0%,var(--p2) 60%,#1e4080 100%);
  padding:15px 18px;
  display:flex;align-items:center;gap:11px;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
#jlsf-av{
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
  border:2px solid rgba(184,134,11,.55);
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
#jlsf-hinfo{flex:1;min-width:0}
#jlsf-bname{font-size:14px;font-weight:700;color:#fff;letter-spacing:.01em}
#jlsf-hstatus{font-size:11px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:5px;margin-top:2px}
#jlsf-dot{width:7px;height:7px;border-radius:50%;background:#2ecc71;animation:jpulse 2.2s infinite;flex-shrink:0}
@keyframes jpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
#jlsf-call{
  font-size:11.5px;font-weight:600;text-decoration:none;
  background:rgba(184,134,11,.28);
  padding:7px 13px;border-radius:100px;
  display:flex;align-items:center;gap:5px;
  color:var(--a3);border:1px solid rgba(184,134,11,.45);
  transition:all .2s;white-space:nowrap;
}
#jlsf-call:hover{background:rgba(184,134,11,.5);color:#fff;border-color:rgba(184,134,11,.7)}
#jlsf-closebtn{
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.45);font-size:17px;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;margin-left:2px;
}
#jlsf-closebtn:hover{background:rgba(255,255,255,.14);color:#fff}

/* ── Quick Topics ── */
#jlsf-topics{
  padding:10px 14px;background:var(--pale);
  border-bottom:1px solid var(--g200);
  display:flex;gap:5px;flex-wrap:wrap;flex-shrink:0;
}
.jlsf-chip{
  font-size:11.5px;font-weight:500;
  padding:5px 11px;border-radius:100px;
  background:var(--w);border:1px solid rgba(15,36,68,.15);
  color:var(--p);cursor:pointer;transition:all .18s;
  font-family:inherit;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.jlsf-chip:hover{background:var(--p);color:#fff;border-color:var(--p);box-shadow:0 3px 10px rgba(15,36,68,.25)}

/* ── Messages ── */
#jlsf-messages{
  flex:1;overflow-y:auto;
  padding:18px 16px;
  display:flex;flex-direction:column;gap:15px;
  background:var(--g50);scroll-behavior:smooth;
}
#jlsf-messages::-webkit-scrollbar{width:3px}
#jlsf-messages::-webkit-scrollbar-thumb{background:var(--g200);border-radius:3px}

.jmsg{display:flex;gap:9px;align-items:flex-end}
.jmsg.ju{flex-direction:row-reverse}
.jmsg-av{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;margin-bottom:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.jmsg.jb .jmsg-av{background:linear-gradient(135deg,var(--p3),var(--p2));color:var(--a2)}
.jmsg.ju .jmsg-av{background:var(--g200);color:var(--g600)}
.jmsg-wrap{display:flex;flex-direction:column;gap:3px;max-width:83%}
.jmsg.ju .jmsg-wrap{align-items:flex-end}

.jbubble{
  padding:11px 15px;font-size:13.5px;
  line-height:1.72;border-radius:18px;word-break:break-word;
}
.jmsg.jb .jbubble{
  background:var(--w);color:var(--g800);
  border:1px solid var(--g200);border-bottom-left-radius:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.07);
}
.jmsg.ju .jbubble{
  background:linear-gradient(135deg,var(--p3),var(--p2));
  color:#fff;border-bottom-right-radius:4px;
}
.jbubble a{color:var(--a);font-weight:600;text-decoration:none}
.jbubble a:hover{text-decoration:underline}
.jbubble strong{font-weight:700}
.jmsg.jb .jbubble strong{color:var(--p)}
.jmsg.ju .jbubble strong{color:var(--a3)}
.jtime{font-size:10px;color:var(--g400);padding:0 4px}

/* Typing */
.jtyping{display:flex;gap:5px;align-items:center;padding:10px 14px}
.jtd{width:7px;height:7px;border-radius:50%;background:var(--g400);animation:jtdot 1.4s infinite}
.jtd:nth-child(2){animation-delay:.22s}.jtd:nth-child(3){animation-delay:.44s}
@keyframes jtdot{0%,80%,100%{transform:scale(.5);opacity:.25}40%{transform:scale(1);opacity:1}}

/* Service tags */
.jtags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.jtag{
  font-size:11.5px;padding:3px 10px;border-radius:100px;
  background:var(--pale);color:var(--p);
  border:1px solid rgba(184,134,11,.3);font-weight:500;
}

/* Callback form */
.jcallback{
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
  border:1px solid #93c5fd;border-radius:12px;
  padding:13px 15px;margin-top:6px;
}
.jcallback p{font-size:13px;color:#1e40af;font-weight:600;margin:0 0 9px}
.jcallback-row{display:flex;gap:7px}
.jcallback input{
  flex:1;padding:9px 12px;border-radius:9px;
  border:1.5px solid #93c5fd;font-size:13px;
  background:#fff;color:var(--g800);outline:none;font-family:inherit;
  transition:border-color .2s;
}
.jcallback input:focus{border-color:var(--p)}
.jcallback button{
  background:var(--p);color:#fff;border:none;
  padding:9px 16px;border-radius:9px;
  font-size:13px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:background .18s;font-family:inherit;
}
.jcallback button:hover{background:var(--p2)}
.jcallback button:disabled{opacity:.6;cursor:default}

/* ── Input Area ── */
#jlsf-input-area{
  flex-shrink:0;padding:12px 16px 11px;
  background:var(--w);border-top:1px solid var(--g200);
}
#jlsf-input-row{
  display:flex;align-items:center;gap:9px;
  background:var(--g100);
  border:1.5px solid var(--g200);border-radius:100px;
  padding:7px 7px 7px 16px;
  transition:border-color .2s,box-shadow .2s;
}
#jlsf-input-row:focus-within{
  border-color:var(--p);
  box-shadow:0 0 0 3px rgba(15,36,68,.09);
}
#jlsf-input{
  flex:1;border:none;background:transparent;
  font-size:14px;color:var(--g800);
  font-family:inherit;outline:none;resize:none;
  line-height:1.45;max-height:90px;
}
#jlsf-input::placeholder{color:var(--g400)}
#jlsf-send{
  width:38px;height:38px;border-radius:50%;
  background:var(--p);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:background .18s,transform .12s;color:#fff;
  box-shadow:0 2px 8px rgba(15,36,68,.3);
}
#jlsf-send:hover{background:var(--p2)}
#jlsf-send:active{transform:scale(.88)}
#jlsf-send:disabled{background:var(--g200);cursor:default;box-shadow:none}
#jlsf-send svg{width:16px;height:16px}

/* Disclaimer */
#jlsf-disc{
  font-size:10px;color:var(--g600);
  background:#fffbf0;border-top:1px solid #ecdba0;
  padding:5px 16px;text-align:center;flex-shrink:0;
}

/* ── Desktop optimized ── */
@media(min-width:768px){
  #jlsf-window{width:420px}
  #jlsf-root.pos-bottom-left{bottom:32px;left:32px}
  #jlsf-root.pos-bottom-right{bottom:32px;right:32px}
}
@media(max-width:500px){
  #jlsf-window{width:calc(100vw - 24px);border-radius:18px}
  #jlsf-root.pos-bottom-right{right:12px;bottom:20px}
  #jlsf-root.pos-bottom-left{left:12px;bottom:20px}
}