#shopbot-root *{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
/* Button */
#sb-btn{position:fixed;z-index:99998;width:58px;height:58px;border-radius:50%;background:var(--sb-color,#6366f1);border:none;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s}
#sb-btn:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(0,0,0,.32)}
#sb-btn svg{width:26px;height:26px}
.sb-dot{position:absolute;top:-3px;right:-3px;width:18px;height:18px;background:#ef4444;border-radius:50%;font-size:10px;font-weight:700;color:#fff;display:none;align-items:center;justify-content:center;border:2px solid #fff}
#sb-btn.unread .sb-dot{display:flex}
/* Panel */
#sb-panel{position:fixed;z-index:99999;width:380px;height:610px;max-height:93vh;background:#fff;border-radius:18px;box-shadow:0 10px 50px rgba(0,0,0,.22);display:none;flex-direction:column;overflow:hidden}
#sb-panel.open{display:flex}
.sb-pos-bottom-right{bottom:20px;right:20px}
.sb-pos-bottom-left{bottom:20px;left:20px}
/* Header */
#sb-head{padding:13px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0}
#sb-av{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#sb-hn{color:#fff;font-size:15px;font-weight:600}
#sb-hs{color:rgba(255,255,255,.8);font-size:11px}
#sb-hi{flex:1}
#sb-hacts{display:flex;align-items:center;gap:4px}
#sb-hist-btn,#sb-close{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.8);font-size:16px;padding:6px;border-radius:6px;transition:all .15s;display:flex;align-items:center;justify-content:center}
#sb-hist-btn:hover,#sb-close:hover{color:#fff;background:rgba(255,255,255,.15)}
/* Views */
.sb-view{display:none;flex-direction:column;flex:1;overflow:hidden}
.sb-view.active{display:flex}
/* Messages */
#sb-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;background:#f4f6fb}
.sb-msg{max-width:92%;display:flex;flex-direction:column;gap:4px}
.sb-msg.bot{align-self:flex-start}
.sb-msg.user{align-self:flex-end}
.sb-bbl{padding:11px 15px;border-radius:18px;font-size:14px;line-height:1.6;word-break:break-word}
.sb-msg.bot .sb-bbl{background:#fff;color:#1e1e1e;border-bottom-left-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.08)}
.sb-msg.user .sb-bbl{background:var(--sb-color,#6366f1);color:#fff;border-bottom-right-radius:4px}
/* Typing */
.sb-dots{display:flex;gap:4px}
.sb-dots span{width:7px;height:7px;background:#ccc;border-radius:50%;animation:sbp 1.2s infinite}
.sb-dots span:nth-child(2){animation-delay:.2s}
.sb-dots span:nth-child(3){animation-delay:.4s}
@keyframes sbp{0%,80%,100%{transform:scale(.7);opacity:.5}40%{transform:scale(1);opacity:1}}
/* Pre-chat */
.sb-prechat{display:flex;flex-direction:column;align-items:center;padding:24px 20px;text-align:center}
.sb-pc-icon{font-size:48px;margin-bottom:12px}
.sb-prechat h3{font-size:18px;font-weight:700;color:#111;margin-bottom:6px}
.sb-prechat p{font-size:13px;color:#6b7280;margin-bottom:20px}
.sb-pc-fields{width:100%;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.sb-pc-f label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:4px;text-align:left}
.sb-pc-f input{width:100%;border:1px solid #e5e7eb;border-radius:10px;padding:10px 13px;font-size:14px;outline:none;transition:border-color .15s}
.sb-pc-f input:focus{border-color:var(--sb-color,#6366f1)}
.sb-pc-f input.sb-error{border-color:#ef4444}
.sb-pc-btn{width:100%;padding:12px;background:var(--sb-color,#6366f1);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s;margin-bottom:8px}
.sb-pc-btn:hover{opacity:.88}
.sb-pc-skip{background:none;border:none;color:#9ca3af;font-size:13px;cursor:pointer;text-decoration:underline}
.sb-pc-skip:hover{color:#374151}
/* Products */
.sb-products{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:6px}
.sb-pcard{background:#fff;border:1.5px solid #e5e7eb;border-radius:16px;overflow:hidden;transition:all .2s}
.sb-pcard:hover{border-color:var(--sb-color,#6366f1);box-shadow:0 4px 16px rgba(99,102,241,.14)}
.sb-pcard.sale{border-color:#fca5a5}
.sb-pcard.sale:hover{border-color:#ef4444}
/* Image */
.sb-piw{position:relative;width:100%;height:160px;overflow:hidden;background:#f9fafb;cursor:pointer}
.sb-pimg{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.sb-pcard:hover .sb-pimg{transform:scale(1.05)}
/* Sale badge */
.sb-sbadge{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.sb-sale-tag{background:#ef4444;color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:4px;letter-spacing:.5px}
.sb-sale-pct{background:#111;color:#fff;font-size:14px;font-weight:800;padding:3px 10px;border-radius:4px}
/* Info */
.sb-pi{padding:12px 14px 14px}
.sb-pnm{font-size:14px;font-weight:700;color:#111;cursor:pointer;margin-bottom:4px;line-height:1.3}
.sb-pnm:hover{color:var(--sb-color,#6366f1)}
.sb-sd{font-size:12px;color:#6b7280;line-height:1.4;margin-bottom:6px}
.sb-pw{margin-bottom:6px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.sb-pn{font-size:15px;font-weight:700;color:var(--sb-color,#6366f1)}
.sb-ps{font-size:16px;font-weight:800;color:#ef4444}
.sb-po{font-size:12px;color:#9ca3af;text-decoration:line-through}
.sb-psave{font-size:11px;background:#fef2f2;color:#ef4444;padding:2px 7px;border-radius:4px;font-weight:600}
.sb-pst{font-size:11px;padding:3px 9px;border-radius:5px;display:inline-block;margin-bottom:10px;font-weight:600}
.sb-pst.in{background:#dcfce7;color:#166534}
.sb-pst.out{background:#fee2e2;color:#991b1b}
/* ── Variation selector — prominent ── */
.sb-vars{background:#f8f9ff;border:1.5px solid #e0e4ff;border-radius:12px;padding:12px;margin-bottom:10px}
.sb-vars-hd{font-size:12px;font-weight:700;color:var(--sb-color,#6366f1);margin-bottom:10px;text-transform:uppercase;letter-spacing:.4px}
.sb-vg{margin-bottom:10px}
.sb-vg:last-child{margin-bottom:0}
.sb-vl{font-size:12px;font-weight:600;color:#374151;margin-bottom:6px;display:flex;align-items:center;gap:4px}
.sb-vl-icon{font-size:14px}
.sb-vo{display:flex;flex-wrap:wrap;gap:6px}
/* Option buttons */
.sb-vb{padding:6px 14px;border:2px solid #e5e7eb;border-radius:8px;font-size:13px;font-weight:500;background:#fff;cursor:pointer;transition:all .15s;color:#374151}
.sb-vb:hover{border-color:var(--sb-color,#6366f1);color:var(--sb-color,#6366f1);background:#f0f4ff}
.sb-vb.active{background:var(--sb-color,#6366f1);color:#fff;border-color:var(--sb-color,#6366f1);font-weight:600;box-shadow:0 2px 8px rgba(99,102,241,.3)}
/* Color swatches */
.sb-sw{width:32px;height:32px;border-radius:50%;border:3px solid transparent;cursor:pointer;position:relative;transition:all .15s;outline:none;padding:0}
.sb-sw:hover{transform:scale(1.15)}
.sb-sw.active{border-color:var(--sb-color,#6366f1)!important;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sb-color,#6366f1)}
.sb-swck{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:13px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);display:none;font-weight:800}
.sb-sw.active .sb-swck{display:block}
/* Shake animation */
@keyframes sbshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.sb-shake{animation:sbshake .5s ease}
/* Qty */
.sb-qr-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sb-qlb{font-size:12px;color:#6b7280;font-weight:500}
.sb-qctl{display:flex;align-items:center;border:1.5px solid #e5e7eb;border-radius:8px;overflow:hidden}
.sb-qd,.sb-qi{width:32px;height:32px;border:none;background:#f9fafb;cursor:pointer;font-size:16px;font-weight:600;color:#374151;transition:background .15s;display:flex;align-items:center;justify-content:center}
.sb-qd:hover,.sb-qi:hover{background:#f0f0f0}
.sb-qty{border:none;border-left:1.5px solid #e5e7eb;border-right:1.5px solid #e5e7eb;padding:0 8px;font-size:13px;background:#fff;height:32px;cursor:pointer;outline:none;min-width:56px;text-align:center}
/* Cart button */
.sb-atc{width:100%;padding:10px;background:var(--sb-color,#6366f1);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;margin-bottom:6px}
.sb-atc:hover{opacity:.88}
.sb-atc:disabled{opacity:.6;cursor:default}
.sb-atc.done{background:#16a34a}
.sb-atc.nv{background:#f3f4f6;color:#6b7280;border:1.5px dashed #d1d5db;cursor:not-allowed}
.sb-atc.nv:hover{opacity:1}
.sb-vp{display:block;text-align:center;font-size:12px;color:var(--sb-color,#6366f1);text-decoration:none;padding:4px}
.sb-vp:hover{text-decoration:underline}
.sb-out{background:#fff1f2;color:#ef4444;border-radius:8px;padding:8px;font-size:13px;font-weight:600;text-align:center;margin-bottom:6px}
/* Quick replies */
.sb-qrs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sb-qr{padding:6px 13px;background:#fff;border:1.5px solid #e5e7eb;border-radius:20px;font-size:12px;color:#374151;cursor:pointer;transition:all .15s;white-space:nowrap}
.sb-qr:hover{background:#f0f4ff;border-color:var(--sb-color,#6366f1);color:var(--sb-color,#6366f1)}
/* Input */
#sb-bar{padding:10px 12px;border-top:1px solid #e5e7eb;display:flex;gap:8px;align-items:flex-end;background:#fff;flex-shrink:0}
#sb-inp{flex:1;border:1.5px solid #e5e7eb;border-radius:22px;padding:9px 15px;font-size:14px;resize:none;max-height:80px;outline:none;line-height:1.4;background:#fafafa;transition:border-color .15s}
#sb-inp:focus{border-color:var(--sb-color,#6366f1);background:#fff}
#sb-send{width:38px;height:38px;border-radius:50%;background:var(--sb-color,#6366f1);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s}
#sb-send:hover{opacity:.85}
/* History view */
.sb-hh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #e5e7eb;background:#fff;font-size:14px;font-weight:600;color:#374151;flex-shrink:0}
#sb-back{background:none;border:none;cursor:pointer;color:var(--sb-color,#6366f1);font-size:13px;font-weight:600;padding:4px 8px;border-radius:6px}
#sb-back:hover{background:#f0f4ff}
#sb-hl{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#f4f6fb}
.sb-hs-wrap{display:flex;flex-direction:column;gap:10px}
.sb-hm{display:flex;max-width:90%}
.sb-hm.user{align-self:flex-end}
.sb-hm.bot{align-self:flex-start}
.sb-hb{padding:9px 13px;border-radius:16px;font-size:13px;line-height:1.5}
.sb-hb.user{background:var(--sb-color,#6366f1);color:#fff;border-bottom-right-radius:4px}
.sb-hb.bot{background:#fff;color:#1e1e1e;border-bottom-left-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.sb-he{text-align:center;color:#9ca3af;font-size:14px;padding:30px 20px}
/* Order form */
.sb-form{display:flex;flex-direction:column;gap:8px}
.sb-form input,.sb-form select{border:1.5px solid #e5e7eb;border-radius:10px;padding:9px 12px;font-size:13px;outline:none;width:100%;background:#fff;transition:border-color .15s}
.sb-form input:focus,.sb-form select:focus{border-color:var(--sb-color,#6366f1)}
.sb-os{background:#f8fafc;border-radius:10px;padding:11px 13px;margin-bottom:4px}
.sb-oi{font-size:12px;color:#374151;padding:3px 0;border-bottom:1px dashed #e5e7eb}
.sb-oi:last-of-type{border:none}
.sb-ot{display:flex;flex-direction:column;gap:3px;margin-top:8px;padding-top:8px;border-top:1px solid #e2e8f0}
.sb-ot span{font-size:12px;color:#6b7280}
.sb-otl{font-size:15px!important;color:#111!important;font-weight:700}
.sb-submit{padding:11px;background:var(--sb-color,#6366f1);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s}
.sb-submit:hover{opacity:.88}
.sb-submit:disabled{opacity:.6;cursor:default}
.sb-cancel{padding:8px;background:transparent;color:#9ca3af;border:1px solid #e5e7eb;border-radius:10px;font-size:13px;cursor:pointer}
.sb-cancel:hover{color:#374151;border-color:#9ca3af}
/* Confirmation */
.sb-conf{background:#f0fdf4;border:1.5px solid #86efac;border-radius:12px;padding:14px 16px}
.sb-ct{font-size:16px;font-weight:700;color:#166534;margin-bottom:8px}
.sb-cid{font-size:12px;color:#6b7280;margin-bottom:7px;font-weight:500}
.sb-cr{font-size:13px;color:#374151;padding:2px 0}
.sb-cttl{font-size:15px;font-weight:700;color:#111;margin-top:10px;padding-top:10px;border-top:1px solid #bbf7d0}
.sb-cpay{font-size:13px;color:#166534;margin-top:7px;font-weight:500}
.sb-bank{white-space:pre-wrap;font-size:13px;background:#fffbeb;border:1.5px solid #fcd34d;border-radius:10px;padding:12px;margin-top:8px;line-height:1.8}
.sb-wa{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:11px;background:#25d366;color:#fff;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s}
.sb-wa:hover{background:#1ebe5d;color:#fff}
/* Mobile */
@media(max-width:400px){
    #sb-panel{width:calc(100vw - 16px);height:calc(100vh - 80px);border-radius:14px}
    .sb-pos-bottom-right{right:8px;bottom:14px}
    .sb-pos-bottom-left{left:8px;bottom:14px}
}