/* ShopBot — shared chat widget. Theme via --cb-* variables set per site. */
:root{
  --cb-accent:#E8912D; --cb-accent-deep:#C46F1A; --cb-dark:#1E3A2B;
  --cb-panel:#FFFDF6; --cb-text:#22221f; --cb-muted:#8a867c; --cb-bubble:#f3efe2;
}
#cb-fab{
  position:fixed; right:22px; bottom:22px; z-index:9998;
  width:62px; height:62px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--cb-accent),var(--cb-accent-deep));
  box-shadow:0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
#cb-fab:hover{ transform:scale(1.07); box-shadow:0 14px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.35); }
#cb-fab svg{ width:28px; height:28px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
#cb-fab .cb-x{ display:none; }
#cb-fab.open .cb-chat-ic{ display:none; }
#cb-fab.open .cb-x{ display:block; }
#cb-fab .cb-dot{
  position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%;
  background:#ff4d4d; border:2.5px solid #fff; display:none;
}
#cb-fab.has-unread .cb-dot{ display:block; }
#cb-fab::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--cb-accent); opacity:0; pointer-events:none;
}
#cb-fab.pulse::after{ animation:cbPulse 2.2s ease-out 3; }
@keyframes cbPulse{ 0%{transform:scale(.8);opacity:.9;} 70%{transform:scale(1.25);opacity:0;} 100%{transform:scale(1.25);opacity:0;} }

#cb-panel{
  position:fixed; right:22px; bottom:96px; z-index:9999;
  width:378px; max-width:calc(100vw - 32px); height:540px; max-height:calc(100dvh - 140px);
  background:var(--cb-panel); border-radius:22px; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.32);
  display:flex; flex-direction:column;
  transform-origin:bottom right; transform:scale(.6) translateY(24px); opacity:0; pointer-events:none;
  transition:transform .28s cubic-bezier(.22,.9,.3,1.15), opacity .22s ease;
}
#cb-panel.open{ transform:none; opacity:1; pointer-events:auto; }
.cb-head{
  background:linear-gradient(135deg,var(--cb-dark),var(--cb-accent-deep));
  color:#fff; padding:16px 18px; display:flex; align-items:center; gap:12px; flex:none;
}
.cb-avatar{
  width:44px; height:44px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center; font-size:24px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.cb-head .cb-who{ flex:1; min-width:0; }
.cb-head .cb-name{ font-weight:800; font-size:16px; letter-spacing:.01em; }
.cb-head .cb-status{ font-size:12px; opacity:.85; display:flex; align-items:center; gap:6px; }
.cb-head .cb-status i{ width:8px; height:8px; border-radius:50%; background:#4ade80; display:inline-block; box-shadow:0 0 8px #4ade80; }
#cb-close{ background:rgba(255,255,255,.14); border:none; color:#fff; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:18px; line-height:1; }
#cb-close:hover{ background:rgba(255,255,255,.26); }
#cb-log{ flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px; -webkit-overflow-scrolling:touch; }
.cb-msg{ max-width:82%; padding:10px 14px; border-radius:16px; font-size:14.5px; line-height:1.5; animation:cbIn .3s cubic-bezier(.22,.9,.3,1.1); word-wrap:break-word; }
@keyframes cbIn{ from{opacity:0; transform:translateY(10px) scale(.97);} to{opacity:1; transform:none;} }
.cb-bot{ align-self:flex-start; background:var(--cb-bubble); color:var(--cb-text); border-bottom-left-radius:5px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.cb-bot b{ color:var(--cb-dark); }
.cb-user{ align-self:flex-end; background:linear-gradient(135deg,var(--cb-accent),var(--cb-accent-deep)); color:#fff; border-bottom-right-radius:5px; box-shadow:0 4px 12px rgba(0,0,0,.14); }
.cb-msg a{ color:var(--cb-accent-deep); font-weight:700; }
.cb-typing{ align-self:flex-start; background:var(--cb-bubble); border-radius:16px; border-bottom-left-radius:5px; padding:12px 16px; display:flex; gap:5px; }
.cb-typing span{ width:8px; height:8px; border-radius:50%; background:var(--cb-muted); animation:cbBlink 1.2s infinite; }
.cb-typing span:nth-child(2){ animation-delay:.18s; } .cb-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes cbBlink{ 0%,60%,100%{opacity:.3; transform:none;} 30%{opacity:1; transform:translateY(-3px);} }
#cb-chips{ display:flex; gap:8px; padding:4px 14px 10px; flex-wrap:wrap; flex:none; }
.cb-chip{
  border:1.5px solid var(--cb-accent); color:var(--cb-accent-deep); background:#fff;
  border-radius:999px; padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer;
  transition:all .15s ease; white-space:nowrap;
}
.cb-chip:hover{ background:var(--cb-accent); color:#fff; transform:translateY(-1px); }
.cb-inputbar{ display:flex; gap:8px; padding:12px 14px 16px; flex:none; border-top:1px solid rgba(0,0,0,.07); background:var(--cb-panel); }
#cb-input{
  flex:1; border:2px solid rgba(0,0,0,.1); border-radius:999px; padding:11px 16px;
  font-size:14.5px; font-family:inherit; outline:none; background:#fff; color:var(--cb-text);
}
#cb-input:focus{ border-color:var(--cb-accent); }
#cb-send{
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; flex:none;
  background:linear-gradient(135deg,var(--cb-accent),var(--cb-accent-deep)); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease;
}
#cb-send:hover{ transform:scale(1.08); }
#cb-send svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:480px){
  #cb-panel{ right:12px; bottom:92px; width:calc(100vw - 24px); height:min(600px, calc(100dvh - 120px)); }
  #cb-fab{ right:16px; bottom:16px; }
}
@media (prefers-reduced-motion:reduce){
  #cb-panel, .cb-msg, #cb-fab{ transition:none; animation:none; }
}