:root { --sc-accent:#6d5dfc; --sc-dark:#15151d; --sc-muted:#777; }
.sc-widget { position: fixed; right: 22px; bottom: 22px; z-index: 99999; font-family: Inter, Arial, sans-serif; }
.sc-button { width: 58px; height: 58px; border-radius: 22px; border: 0; background: linear-gradient(135deg,#7c5cff,#20c6ff); color:#fff; box-shadow: 0 16px 40px rgba(32,35,70,.28); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
.sc-button:hover { transform: translateY(-2px); }
.sc-button svg { width: 28px; height: 28px; }
.sc-panel { position:absolute; right:0; bottom:74px; width: 360px; max-width: calc(100vw - 28px); height: 520px; max-height: calc(100vh - 120px); background:#fff; border:1px solid rgba(20,20,30,.08); border-radius: 24px; box-shadow:0 22px 70px rgba(18,22,40,.25); overflow:hidden; display:none; }
.sc-widget.open .sc-panel { display:flex; flex-direction:column; }
.sc-head { padding:18px 18px 16px; color:#fff; background: linear-gradient(135deg,#6d5dfc,#12b5e5); }
.sc-title { font-weight:800; font-size:17px; margin-bottom:4px; }
.sc-subtitle { font-size:13px; opacity:.9; }
.sc-messages { flex:1; padding:16px; overflow:auto; background:#f7f8fb; display:flex; flex-direction:column; gap:10px; scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth; }
.sc-messages::-webkit-scrollbar { width:0; height:0; display:none; }
.sc-empty { color:#7b8190; font-size:14px; line-height:1.45; margin:auto 0; text-align:center; }
.sc-msg { max-width:82%; padding:10px 12px; border-radius:16px; font-size:14px; line-height:1.35; word-break:break-word; }
.sc-msg.visitor { align-self:flex-end; color:#fff; background:#6d5dfc; border-bottom-right-radius:6px; }
.sc-msg.operator { align-self:flex-start; color:#15151d; background:#fff; border:1px solid rgba(20,20,30,.08); border-bottom-left-radius:6px; }
.sc-msg.system { align-self:center; color:#777; background:transparent; font-size:12px; }
.sc-author { display:block; font-size:11px; color:#7b8190; margin-bottom:4px; }
.sc-form { display:flex; gap:8px; padding:12px; background:#fff; border-top:1px solid rgba(20,20,30,.08); }
.sc-input { flex:1; resize:none; height:42px; max-height:110px; padding:11px 12px; border-radius:14px; border:1px solid rgba(20,20,30,.13); font:inherit; outline:none; overflow:hidden; scrollbar-width:none; }
.sc-input::-webkit-scrollbar { width:0; height:0; display:none; }
.sc-chips { display:flex; flex-wrap:wrap; gap:8px; padding:12px 12px 0; background:#fff; border-top:1px solid rgba(20,20,30,.08); max-height:94px; overflow:auto; scrollbar-width:none; -ms-overflow-style:none; }
.sc-chips::-webkit-scrollbar { width:0; height:0; display:none; }
.sc-chip { border:1px solid rgba(109,93,252,.22); background:#f3f1ff; color:#5546d8; border-radius:999px; padding:8px 10px; font-size:12px; line-height:1; cursor:pointer; transition:.15s; }
.sc-chip:hover { background:#e9e5ff; transform:translateY(-1px); }
.sc-input:focus { border-color:#6d5dfc; box-shadow:0 0 0 3px rgba(109,93,252,.12); }
.sc-send { width:44px; height:44px; border:0; border-radius:14px; background:#15151d; color:#fff; cursor:pointer; }
.sc-send:disabled { opacity:.55; cursor:default; }
@media (max-width: 560px) { .sc-widget { right:14px; bottom:76px; } .sc-panel { position:fixed; left:12px; right:12px; bottom:142px; width:auto; height: min(520px, calc(100vh - 170px)); } }