:root { --snm-color: #2563eb; }
#snm-wrap { position:fixed; bottom:24px; right:24px; z-index:999999; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
#snm-wrap.snm-left { right:auto; left:24px; }
#snm-toggle { width:60px; height:60px; border-radius:50%; background:var(--snm-color); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(37,99,235,0.4); transition:transform .2s; }
#snm-toggle:hover { transform:scale(1.08); }
#snm-toggle svg { width:28px; height:28px; }
#snm-box { position:absolute; bottom:76px; right:0; width:360px; height:540px; background:#fff; border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,0.18); display:flex; flex-direction:column; overflow:hidden; opacity:0; transform:translateY(16px) scale(0.96); transform-origin:bottom right; transition:opacity .2s,transform .2s; pointer-events:none; }
#snm-wrap.snm-left #snm-box { right:auto; left:0; transform-origin:bottom left; }
#snm-box.snm-open { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
#snm-head { background:var(--snm-color); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.snm-avatar { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.snm-avatar svg { width:36px; height:36px; }
#snm-head h4 { margin:0; font-size:15px; font-weight:600; }
.snm-online { display:flex; align-items:center; gap:5px; font-size:12px; opacity:.85; margin-top:2px; }
.snm-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; animation:snm-blink 2s infinite; }
@keyframes snm-blink { 0%,100%{opacity:1} 50%{opacity:.4} }
#snm-min { background:none; border:none; cursor:pointer; padding:4px; margin-left:auto; opacity:.8; }
#snm-min:hover { opacity:1; }
#snm-min svg { width:20px; height:20px; }
#snm-msgs { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:#f8fafc; scroll-behavior:smooth; }
#snm-msgs::-webkit-scrollbar { width:4px; }
#snm-msgs::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }
.snm-msg { max-width:82%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.55; animation:snm-in .2s ease; }
@keyframes snm-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.snm-bot { background:#fff; color:#1e293b; align-self:flex-start; border-bottom-left-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.07); }
.snm-user { background:var(--snm-color); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.snm-time { display:block; font-size:11px; opacity:.5; margin-top:4px; }
#snm-typing { padding:4px 14px 8px; background:#f8fafc; flex-shrink:0; gap:4px; align-items:center; }
#snm-typing span { width:7px; height:7px; border-radius:50%; background:#94a3b8; display:inline-block; animation:snm-bounce 1.2s infinite; }
#snm-typing span:nth-child(2){animation-delay:.2s} #snm-typing span:nth-child(3){animation-delay:.4s}
@keyframes snm-bounce { 0%,60%,100%{transform:none} 30%{transform:translateY(-6px)} }
#snm-sugg { padding:8px 10px; display:flex; gap:6px; flex-wrap:wrap; border-top:1px solid #e2e8f0; background:#fff; flex-shrink:0; }
.snm-sq { background:#fff; color:var(--snm-color); border:1px solid var(--snm-color); border-radius:20px; padding:5px 12px; font-size:12px; cursor:pointer; transition:.15s; }
.snm-sq:hover { background:var(--snm-color); color:#fff; }
#snm-foot { display:flex; align-items:flex-end; gap:8px; padding:10px 12px; border-top:1px solid #e2e8f0; background:#fff; flex-shrink:0; }
#snm-inp { flex:1; border:1px solid #e2e8f0; border-radius:10px; padding:10px 14px; font-size:14px; font-family:inherit; resize:none; outline:none; max-height:100px; overflow-y:auto; line-height:1.5; transition:border-color .2s; }
#snm-inp:focus { border-color:var(--snm-color); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
#snm-inp::placeholder { color:#94a3b8; }
#snm-send { width:40px; height:40px; background:var(--snm-color); border:none; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:.2s; }
#snm-send:hover:not(:disabled) { opacity:.85; transform:scale(1.05); }
#snm-send:disabled { background:#cbd5e1; cursor:not-allowed; }
#snm-send svg { width:18px; height:18px; }
#snm-brand { text-align:center; padding:5px; font-size:11px; color:#94a3b8; border-top:1px solid #f1f5f9; margin:0; flex-shrink:0; background:#fff; }
#snm-brand a { color:var(--snm-color); text-decoration:none; }
@media(max-width:480px){ #snm-box{width:100vw;height:100dvh;bottom:0;right:0;border-radius:0;} #snm-wrap.snm-left #snm-box{left:0;} }