#hlc-root{
  --hlc-navy:#123b5d;
  --hlc-navy-2:#0d2f4b;
  --hlc-teal:#28aeb5;
  --hlc-teal-2:#1f949b;
  --hlc-teal-soft:#e8f8f9;
  --hlc-bg:#f6fbfc;
  --hlc-border:#dbe9ec;
  --hlc-text:#17324a;
  --hlc-muted:#6b7f8f;
  --hlc-danger:#f45b69;
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:999999;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

#hlc-launcher{
  position:relative;
  min-width:154px;
  height:58px;
  border:0;
  border-radius:999px;
  font-size:15px;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,var(--hlc-navy) 0%,#176b7c 48%,var(--hlc-teal) 100%);
  box-shadow:0 10px 26px rgba(18,59,93,.27),inset 0 1px 0 rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 18px;
  animation:hlcShakeStrong 5.2s cubic-bezier(.36,.07,.19,.97) infinite;
  transform-origin:center;
  will-change:transform;
  transition:min-width .24s ease,width .24s ease,padding .24s ease,box-shadow .2s ease,transform .2s ease,filter .2s ease;
}
#hlc-launcher::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));
  pointer-events:none;
}
.hlc-launcher-icon{
  position:relative;
  z-index:1;
  font-size:24px;
  line-height:1;
  transform-origin:center;
  animation:hlcIconBounce 5.2s ease-in-out infinite;
}
.hlc-launcher-text{
  position:relative;
  z-index:1;
  font-weight:750;
  letter-spacing:.1px;
  white-space:nowrap;
  max-width:130px;
  opacity:1;
  overflow:hidden;
  transition:max-width .22s ease,opacity .16s ease,margin .22s ease;
}
#hlc-launcher:hover{
  animation:none;
  transform:translateY(-2px);
  filter:saturate(1.08) brightness(1.02);
  box-shadow:0 14px 30px rgba(18,59,93,.31),inset 0 1px 0 rgba(255,255,255,.2);
}
#hlc-launcher:hover .hlc-launcher-icon{animation:none}
#hlc-launcher i{
  position:absolute;
  z-index:3;
  right:-3px;
  top:-6px;
  min-width:20px;
  height:20px;
  line-height:20px;
  border-radius:12px;
  background:var(--hlc-danger);
  color:#fff;
  font:700 11px Arial;
  padding:0 4px;
  font-style:normal;
  box-shadow:0 3px 9px rgba(244,91,105,.36);
}

@keyframes hlcShakeStrong{
  0%,70%,100%{transform:translate3d(0,0,0) rotate(0)}
  73%{transform:translate3d(-7px,0,0) rotate(-8deg)}
  76%{transform:translate3d(8px,0,0) rotate(9deg)}
  79%{transform:translate3d(-7px,0,0) rotate(-7deg)}
  82%{transform:translate3d(7px,0,0) rotate(7deg)}
  85%{transform:translate3d(-5px,0,0) rotate(-5deg)}
  88%{transform:translate3d(4px,0,0) rotate(4deg)}
  91%{transform:translate3d(0,0,0) rotate(0)}
}
@keyframes hlcIconBounce{
  0%,70%,91%,100%{transform:scale(1)}
  76%{transform:scale(1.18) translateY(-1px)}
  82%{transform:scale(.94)}
  87%{transform:scale(1.1)}
}

#hlc-root.hlc-panel-open #hlc-launcher,
#hlc-root.hlc-panel-open .hlc-launcher-icon{
  animation:none;
}

#hlc-panel{
  position:absolute;
  right:0;
  bottom:72px;
  width:382px;
  max-width:calc(100vw - 28px);
  height:590px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 22px 55px rgba(13,47,75,.23);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(40,174,181,.16);
}
.hlc-hidden{display:none!important}
.hlc-header{
  padding:15px 16px;
  background:linear-gradient(135deg,var(--hlc-navy) 0%,#176b7c 52%,var(--hlc-teal) 100%);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:58px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);
}
.hlc-brand{display:flex;gap:10px;align-items:center}
.hlc-brand>span{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 4px rgba(255,255,255,.13)}
.hlc-brand>span.online{background:#47dc8f}
.hlc-brand>span.offline{background:#c3d0d8}
.hlc-header .hlc-brand div>strong{font-size:15px;letter-spacing:.1px}
.hlc-header .hlc-brand div>span{display:block;font-size:12px;color:rgba(255,255,255,.82);margin-top:3px;max-width:270px}
.hlc-header button{border:0;background:rgba(255,255,255,.1);color:#fff;font-size:24px;cursor:pointer;width:34px;height:34px;border-radius:50%;line-height:30px;transition:background .18s ease,transform .18s ease}
.hlc-header button:hover{background:rgba(255,255,255,.19);transform:rotate(3deg)}
.hlc-body{padding:20px;background:linear-gradient(180deg,#fff 0%,#fbfeff 100%)}
.hlc-body p{margin-top:0;color:#506779;line-height:1.5}
.hlc-body input{width:100%;box-sizing:border-box;margin:0 0 11px;padding:12px 13px;border:1px solid var(--hlc-border);border-radius:11px;outline:none;background:#fff;color:var(--hlc-text);transition:border-color .18s ease,box-shadow .18s ease}
.hlc-body input:focus,.hlc-composer textarea:focus{border-color:var(--hlc-teal);box-shadow:0 0 0 3px rgba(40,174,181,.12)}
#hlc-start,#hlc-send{border:0;border-radius:11px;padding:11px 15px;cursor:pointer;background:linear-gradient(135deg,var(--hlc-teal-2),var(--hlc-teal));color:#fff;font-weight:700;box-shadow:0 7px 16px rgba(40,174,181,.2);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
#hlc-start:hover,#hlc-send:hover{filter:brightness(.97) saturate(1.07);transform:translateY(-1px);box-shadow:0 9px 18px rgba(40,174,181,.24)}
#hlc-start{width:100%}
#hlc-send:disabled{opacity:.6;cursor:wait;transform:none}
#hlc-chat-view{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--hlc-bg)}
#hlc-messages{flex:1;overflow:auto;padding:14px;background:linear-gradient(180deg,#f8fcfd 0%,#f3fafb 100%);scroll-behavior:smooth}
.hlc-msg{max-width:78%;padding:9px 11px;margin:7px 0;border-radius:14px;background:#fff;border:1px solid rgba(18,59,93,.06);box-shadow:0 2px 6px rgba(18,59,93,.06);word-break:break-word;color:var(--hlc-text)}
.hlc-msg.them{border-bottom-left-radius:5px}
.hlc-msg.me{margin-left:auto;background:linear-gradient(135deg,#e9f9fa 0%,#dff5f6 100%);border-color:rgba(40,174,181,.18);border-bottom-right-radius:5px}
.hlc-msg b{display:block;font-size:11px;margin-bottom:3px;color:var(--hlc-navy)}
.hlc-msg img{display:block;max-width:210px;max-height:210px;width:auto;height:auto;border-radius:10px;margin-top:6px;background:#e7eff1;border:1px solid rgba(18,59,93,.06)}
.hlc-msg a{display:inline-block;margin-top:5px;color:#147b86;font-weight:600;text-decoration:none}
.hlc-msg a:hover{text-decoration:underline}
.hlc-msg small{display:block;font-size:10px;color:#7d8e9b;margin-top:5px}
.hlc-msg.deleted{font-style:italic;color:#7b8790;background:#f5f7f8}
.hlc-composer{display:flex;gap:7px;padding:10px;border-top:1px solid var(--hlc-border);align-items:flex-end;background:#fff}
.hlc-composer textarea{flex:1;resize:none;padding:9px 10px;border:1px solid var(--hlc-border);border-radius:11px;max-height:90px;background:#fcfeff;color:var(--hlc-text);outline:none}
.hlc-attach,.hlc-camera{cursor:pointer;font-size:20px;padding:6px 2px;filter:saturate(.85);transition:transform .16s ease}
.hlc-attach:hover,.hlc-camera:hover{transform:translateY(-1px) scale(1.05)}
.hlc-attach input,.hlc-camera input{display:none}
#hlc-file-preview{padding:7px 12px;background:#eef8f9;color:#46616b;font-size:12px;border-top:1px solid var(--hlc-border)}
#hlc-file-preview button{border:0;background:none;cursor:pointer;font-size:16px;color:#617783}
.hlc-error{font-size:12px;color:#b42318;padding:4px 10px 8px;background:#fff}
#hlc-reply-preview{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 11px;border-top:1px solid var(--hlc-border);background:#edf8f9;border-left:3px solid var(--hlc-teal)}
#hlc-reply-preview div{min-width:0}
#hlc-reply-preview span,#hlc-reply-preview strong{display:block}
#hlc-reply-preview span{font-size:10px;color:#63808b}
#hlc-reply-preview strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:270px;color:var(--hlc-text)}
#hlc-reply-preview button{border:0;background:none;font-size:19px;cursor:pointer;color:#617783}
.hlc-reply-quote{display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--hlc-teal);border-radius:7px;background:rgba(255,255,255,.72);padding:5px 7px;margin-bottom:6px;cursor:pointer}
.hlc-reply-quote span,.hlc-reply-quote b{display:block}
.hlc-reply-quote span{font-size:9px;color:#6c808d}
.hlc-reply-quote b{font-size:10px;color:#294a5e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hlc-reply-btn{display:block;border:0;background:none;color:#16838c;font-size:10px;cursor:pointer;padding:5px 0 0;font-weight:600}
.hlc-flash{animation:hlcFlash .9s ease}
@keyframes hlcFlash{0%,100%{box-shadow:0 2px 6px rgba(18,59,93,.06)}50%{box-shadow:0 0 0 4px rgba(40,174,181,.22)}}

@media(max-width:480px){
  #hlc-root{right:10px;bottom:86px}
  #hlc-launcher{min-width:118px;height:46px;padding:0 13px;gap:7px;font-size:13px;box-shadow:0 8px 20px rgba(18,59,93,.25)}
  .hlc-launcher-icon{font-size:20px}
  .hlc-launcher-text{max-width:105px}
  #hlc-launcher i{right:-3px;top:-5px;min-width:18px;height:18px;line-height:18px;font-size:10px}
  #hlc-root.hlc-scrolling:not(.hlc-panel-open) #hlc-launcher{min-width:46px;width:46px;padding:0;gap:0}
  #hlc-root.hlc-scrolling:not(.hlc-panel-open) .hlc-launcher-text{max-width:0;opacity:0;margin:0}
  #hlc-root.hlc-scrolling:not(.hlc-panel-open) .hlc-launcher-icon{font-size:21px}
  #hlc-panel{position:fixed;inset:8px 8px 80px;width:auto;height:auto;max-width:none;border-radius:17px}
  .hlc-header{padding:13px 14px;min-height:54px}
  .hlc-header .hlc-brand div>span{max-width:230px}
  .hlc-msg{max-width:84%}
  #hlc-messages{padding:11px}
}

@media(min-width:481px) and (max-width:900px){
  #hlc-root{right:14px;bottom:24px}
}

@media(prefers-reduced-motion:reduce){
  #hlc-launcher,.hlc-launcher-icon{animation:none!important}
  #hlc-launcher,.hlc-launcher-text{transition:none!important}
}

/* v0.3.3 proactive greeting / exit intent */
.hlc-proactive{position:fixed;right:24px;bottom:92px;z-index:999995;width:min(330px,calc(100vw - 32px));box-sizing:border-box;padding:14px 42px 13px 14px;border-radius:16px;background:#fff;color:#17324a;box-shadow:0 14px 36px rgba(18,59,93,.22);border:1px solid rgba(40,174,181,.22);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .18s ease,transform .18s ease;font-family:system-ui,-apple-system,sans-serif}.hlc-proactive.hlc-visible{opacity:1;transform:translateY(0) scale(1)}#hlc-proactive-text{font-size:14px;line-height:1.45;font-weight:600}#hlc-proactive-open{margin-top:10px;border:0;border-radius:999px;padding:8px 13px;cursor:pointer;background:linear-gradient(120deg,#123b5d,#28aeb5);color:#fff;font-weight:700}#hlc-proactive-close{position:absolute;right:10px;top:8px;border:0;background:transparent;color:#6b7f8f;font-size:22px;line-height:1;cursor:pointer}@media(max-width:480px){.hlc-proactive{right:16px;bottom:82px;width:calc(100vw - 32px)}}

/* v0.3.5 automatic welcome message bubble */
.hlc-auto-thread{
 display:flex;
 align-items:flex-end;
 gap:8px;
 margin:12px 14px 4px;
 padding:0;
}
.hlc-auto-avatar{
 width:30px;
 height:30px;
 flex:0 0 30px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:11px;
 font-weight:800;
 color:#fff;
 background:linear-gradient(135deg,#123b5d,#28aeb5);
 box-shadow:0 3px 10px rgba(18,59,93,.18);
}
.hlc-auto-message{
 max-width:calc(100% - 42px);
 padding:10px 12px;
 border-radius:16px 16px 16px 5px;
 background:#fff;
 color:#17384d;
 border:1px solid #e5eef1;
 box-shadow:0 4px 14px rgba(18,59,93,.08);
 font-size:14px;
 line-height:1.45;
}
.hlc-auto-sender{
 display:block;
 margin-bottom:3px;
 font-size:11px;
 font-weight:800;
 color:#2b7887;
}
.hlc-auto-pop{animation:hlcAutoPop .3s ease}
@keyframes hlcAutoPop{
 from{opacity:0;transform:translateY(7px) scale(.98)}
 to{opacity:1;transform:translateY(0) scale(1)}
}
