/* Hotless LiveChat 2.6.1 realtime polish. */
.hlc-widget{--hlc-safe-bottom:0px}

/* Respect the configured horizontal offset on mobile instead of forcing 0. */
@media(max-width:700px){
  .hlc-widget.hlc-pos-left{left:var(--hlc-h-offset)!important;right:auto!important}
  .hlc-widget.hlc-pos-right{right:var(--hlc-h-offset)!important;left:auto!important}
  .hlc-widget.hlc-anchor-bottom{bottom:calc(var(--hlc-v-offset) + var(--hlc-safe-bottom))!important;top:auto!important}
  .hlc-anchor-bottom .hlc-panel{bottom:calc(var(--hlc-safe-bottom) + 72px)!important;top:auto!important}
}

/* Premium compact composer controls. */
.hlc-tool-button,.hlc-admin-tool-button,.hlc-message-send{
  position:relative!important;
  overflow:hidden!important;
  border-radius:14px!important;
  border:1px solid #d9e2ee!important;
  background:linear-gradient(180deg,#fff,#f3f7fb)!important;
  color:#1e3a8a!important;
  box-shadow:0 5px 14px rgba(15,23,42,.07),inset 0 1px 0 rgba(255,255,255,.92)!important;
  font-size:0!important;
}
.hlc-tool-button:hover,.hlc-admin-tool-button:hover{border-color:#bfdbfe!important;background:linear-gradient(180deg,#fff,#eef5ff)!important}
.hlc-message-send{
  border:0!important;
  background:linear-gradient(135deg,var(--hlc-primary,#2563eb),#2563eb 54%,#0ea5e9)!important;
  color:#fff!important;
  box-shadow:0 10px 20px rgba(37,99,235,.24)!important;
}
.hlc-message-send span{display:none!important}
.hlc-tool-button:before,.hlc-admin-tool-button:before,.hlc-message-send:before{
  content:"";
  display:block;
  width:20px;
  height:20px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
[data-hlc-attach]:before,.hlc-admin-tool-button:first-child:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.8 12.9l6.1-6.1a3.1 3.1 0 014.4 4.4l-8.1 8.1a5.2 5.2 0 01-7.4-7.4l8.1-8.1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.8 12.9l6.1-6.1a3.1 3.1 0 014.4 4.4l-8.1 8.1a5.2 5.2 0 01-7.4-7.4l8.1-8.1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
}
[data-hlc-voice]:before,.hlc-admin-tool-button:last-child:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a4 4 0 004-4V7a4 4 0 10-8 0v4a4 4 0 004 4zm-7-4a7 7 0 0014 0M12 18v3M9 21h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a4 4 0 004-4V7a4 4 0 10-8 0v4a4 4 0 004 4zm-7-4a7 7 0 0014 0M12 18v3M9 21h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
}
.hlc-message-send:before{
  width:22px;height:22px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3L10 14M21 3l-7 18-4-7-7-4 18-7z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3L10 14M21 3l-7 18-4-7-7-4 18-7z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
}
.hlc-tool-button.is-recording,.hlc-admin-tool-button.is-recording{background:linear-gradient(135deg,#ef4444,#b91c1c)!important;color:#fff!important;border-color:transparent!important}
.hlc-tool-button.is-recording:before,.hlc-admin-tool-button.is-recording:before{
  width:14px;height:14px;border-radius:3px;background:#fff!important;-webkit-mask-image:none!important;mask-image:none!important
}

/* Typing presence feels live instead of flashing after the user stops. */
.hlc-typing-indicator,.hlc-admin-typing-indicator{
  min-height:31px;
  padding:6px 13px!important;
  opacity:0;
  transform:translateY(3px);
  transition:opacity .12s ease,transform .12s ease;
}
.hlc-typing-indicator.is-live,.hlc-admin-typing-indicator.is-live,
.hlc-typing-indicator:not([hidden]),.hlc-admin-typing-indicator:not([hidden]){opacity:1;transform:translateY(0)}
.hlc-typing-dots{height:15px;gap:4px!important}
.hlc-typing-dots i{width:6px!important;height:6px!important;animation:hlcTypingRealtime .72s infinite cubic-bezier(.4,0,.2,1)!important}
.hlc-typing-dots i:nth-child(2){animation-delay:.11s!important}
.hlc-typing-dots i:nth-child(3){animation-delay:.22s!important}
@keyframes hlcTypingRealtime{0%,60%,100%{transform:translateY(1px) scale(.82);opacity:.3}30%{transform:translateY(-3px) scale(1);opacity:1}}

/* Upload state is compact and visible without pushing the composer around. */
.hlc-upload-status,.hlc-admin-upload-status{position:relative!important;padding-left:31px!important;border:1px solid #dbeafe!important;box-shadow:0 5px 14px rgba(37,99,235,.05)!important}
.hlc-upload-status:not(.is-error):before,.hlc-admin-upload-status:not(.is-error):before{
  content:"";position:absolute;left:11px;top:50%;width:11px;height:11px;margin-top:-6px;border:2px solid #bfdbfe;border-top-color:#2563eb;border-radius:50%;animation:hlcUploadSpin .65s linear infinite
}
@keyframes hlcUploadSpin{to{transform:rotate(360deg)}}

.hlc-image-attachment,.hlc-admin-image-attachment{overflow:hidden;border-radius:13px!important;background:#e2e8f0!important}
.hlc-image-attachment img,.hlc-admin-image-attachment img{transition:transform .18s ease!important}
.hlc-image-attachment:hover img,.hlc-admin-image-attachment:hover img{transform:scale(1.015)}

@media(max-width:700px){
  .hlc-message-form{gap:7px!important;padding-left:10px!important;padding-right:10px!important}
  .hlc-tool-button{width:42px!important;height:42px!important;min-width:42px!important;border-radius:13px!important}
  .hlc-message-send{width:48px!important;height:48px!important;min-width:48px!important}
  .hlc-message-form textarea{min-width:0!important}
}

@media(prefers-reduced-motion:reduce){
  .hlc-typing-dots i,.hlc-upload-status:before,.hlc-admin-upload-status:before{animation:none!important}
}
