#hc-bubble{
  position:fixed; right:22px; bottom:22px;
  width:56px; height:56px; border-radius:999px;
  background:#2cc5cf; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 25px rgba(0,0,0,.18); color:#fff; cursor:pointer; z-index:9999;
}
#hc-bubble:hover{ filter:brightness(.95); }

#hc-panel{
  position:fixed; right:22px; bottom:90px; width:360px; max-width:calc(100vw - 32px);
  background:#fff; border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,.22);
  overflow:hidden; display:none; z-index:10000; border:1px solid #e5e7eb;
  animation:hc-pop .18s ease-out;
}
@keyframes hc-pop{ from{ transform:translateY(8px); opacity:0 } to{ transform:none; opacity:1 } }

.hc-head{
  background:#f5ffff; border-bottom:1px solid #e5e7eb; padding:14px 12px;
  display:flex; align-items:center; justify-content:space-between;
}
.hc-brand{ display:flex; gap:10px; align-items:center; }
.hc-avatar{ width:34px; height:34px; border-radius:999px; }
#hc-title{ font-weight:800; color:#1f2937 }
.hc-sub{ color:#6b7280; font-size:12px; line-height:1.3; }

#hc-close{ border:0; background:none; font-size:18px; cursor:pointer; color:#6b7280 }

.hc-messages{ height:360px; padding:12px; overflow:auto; background:#f8fafc; }
.hc-msg{ max-width:80%; padding:8px 10px; border-radius:12px; margin:6px 0; line-height:1.35; }
.hc-msg.visitor{ background:#2cc5cf; color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.hc-msg.agent,.hc-msg.system{ background:#fff; color:#111827; border:1px solid #e5e7eb; border-bottom-left-radius:4px; }

.hc-form{ display:flex; gap:8px; padding:10px; border-top:1px solid #e5e7eb; background:#fff; }
#hc-input{ flex:1; height:40px; border:1px solid #e5e7eb; border-radius:10px; padding:0 12px; outline:none; }
#hc-input:focus{ border-color:#93c5fd; box-shadow:0 0 0 3px rgba(147,197,253,.35) }
.hc-send{ width:40px; border:0; border-radius:10px; background:#2cc5cf; color:#fff; cursor:pointer; }
.hc-send:hover{ filter:brightness(.95); }

@media (max-width:480px){
  #hc-panel{ right:12px; left:12px; width:auto; bottom:84px; }
}