
#hqshc-customer-root, #hqshc-customer-root * { box-sizing: border-box; }
.hqshc-widget {
    --hq-primary:#0b74de;
    position:fixed;
    bottom:22px;
    z-index:999999;
    font-family:Arial,Helvetica,sans-serif;
}
.hqshc-widget.is-right{right:22px}.hqshc-widget.is-left{left:22px}
.hqshc-toggle{
    display:flex;align-items:center;gap:9px;min-height:56px;padding:0 18px;border:0;border-radius:999px;
    color:#fff;background:var(--hq-primary);font-weight:700;cursor:pointer;
    box-shadow:0 12px 32px rgba(15,23,42,.24)
}
.hqshc-toggle svg{width:23px;height:23px;fill:currentColor}
.hqshc-panel{
    position:absolute;bottom:calc(100% + 12px);width:min(360px,calc(100vw - 24px));height:min(560px,calc(100vh - 120px));
    display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;
    box-shadow:0 22px 60px rgba(15,23,42,.24);opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);
    transition:.18s ease
}
.hqshc-widget.is-right .hqshc-panel{right:0}.hqshc-widget.is-left .hqshc-panel{left:0}
.hqshc-widget.is-open .hqshc-panel{opacity:1;visibility:visible;transform:none}
.hqshc-header{display:flex;justify-content:space-between;align-items:center;padding:16px 17px;color:#fff;background:var(--hq-primary)}
.hqshc-header strong{font-size:17px}.hqshc-close{border:0;background:rgba(255,255,255,.18);color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:22px}
.hqshc-body{flex:1;display:flex;flex-direction:column;min-height:0;background:#f8fafc}
.hqshc-start{padding:18px;overflow:auto}.hqshc-start p{margin:0 0 14px;color:#334155}
.hqshc-field{margin-bottom:12px}.hqshc-field label{display:block;margin-bottom:5px;font-size:13px;font-weight:700;color:#334155}
.hqshc-field input,.hqshc-compose textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:11px 12px;background:#fff}
.hqshc-primary{width:100%;min-height:44px;border:0;border-radius:10px;background:var(--hq-primary);color:#fff;font-weight:700;cursor:pointer}
.hqshc-privacy{margin-top:11px!important;font-size:11px;color:#64748b!important}
.hqshc-chat{display:flex;flex-direction:column;height:100%;min-height:0}
.hqshc-messages{flex:1;padding:14px;overflow:auto;scroll-behavior:smooth}
.hqshc-row{display:flex;margin:7px 0}.hqshc-row.customer{justify-content:flex-end}.hqshc-row.agent{justify-content:flex-start}
.hqshc-bubble{max-width:82%;padding:10px 12px;border-radius:14px;font-size:14px;white-space:pre-wrap;word-break:break-word}
.hqshc-row.customer .hqshc-bubble{background:var(--hq-primary);color:#fff;border-bottom-right-radius:4px}
.hqshc-row.agent .hqshc-bubble{background:#fff;color:#0f172a;border:1px solid #e2e8f0;border-bottom-left-radius:4px}
.hqshc-time{display:block;margin-top:4px;font-size:10px;opacity:.68}
.hqshc-compose{display:flex;gap:8px;padding:10px;background:#fff;border-top:1px solid #e2e8f0}
.hqshc-compose textarea{resize:none;min-height:42px;max-height:100px}
.hqshc-send{flex:0 0 44px;width:44px;border:0;border-radius:10px;background:var(--hq-primary);color:#fff;cursor:pointer;font-size:18px}
.hqshc-error{margin:10px 0;padding:9px 10px;background:#fef2f2;color:#b91c1c;border-radius:8px;font-size:13px}
.hqshc-status{padding:6px 12px;background:#fff7ed;color:#9a3412;font-size:12px;text-align:center;border-bottom:1px solid #fed7aa}
@media(max-width:600px){
    .hqshc-widget{bottom:14px}.hqshc-widget.is-right{right:14px}.hqshc-widget.is-left{left:14px}
    .hqshc-panel{position:fixed;inset:10px;width:auto;height:auto}
    .hqshc-toggle span{display:none}.hqshc-toggle{width:56px;padding:0;justify-content:center}
}
