:root{ --spc-primary:#6f00ee; --spc-accent:#fa6400; --spc-error:#e5484d; --spc-ok:#2ecc71;}
.spc-root *{box-sizing:border-box; font-family: Arial, Helvetica, sans-serif !important}
.spc-bubble{ position:fixed; right:16px; bottom:16px; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--spc-primary); color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:2147483647; }
.spc-panel{ position:fixed; right:16px; bottom:84px; width:min(380px, calc(100vw - 32px)); height:520px; border-radius:16px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.35); display:none; z-index:2147483647;}
.spcLight{ --spc-bg:#ffffff; --spc-fg:#111; --spc-border:#e6e6e6; --spc-input:#f6f6f7; --spc-bot:#f1f0f0; --spc-bot-fg:#111; --spc-me:#d8c8ff; --spc-me-fg:#1a0033; --spc-me-border:#bfa9ff;}
.spcDark{  --spc-bg:#0e0f12; --spc-fg:#f2f3f5; --spc-border:#2a2c31; --spc-input:#17191f; --spc-bot:#1d2027; --spc-bot-fg:#f2f3f5; --spc-me:#6f00ee; --spc-me-fg:#fff; --spc-me-border:#5a00c0;}
.spc-wrap{background:var(--spc-bg); color:var(--spc-fg); height:100%; display:flex; flex-direction:column; border:1px solid var(--spc-border)}
.spc-header{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--spc-border)}
.spc-title{font-weight:700}
.spc-actions{display:flex; gap:8px; align-items:center}
.spc-theme,.spc-close{border:0; background:transparent; color:var(--spc-fg); cursor:pointer; font-size:16px; transition:none}
.spc-theme:hover,.spc-close:hover{ background:transparent; color:var(--spc-fg); }
.spc-body{flex:1; overflow:auto; padding:12px}
.spc-lead label{font-size:12px; display:block; margin:8px 0 4px}
.spc-input, .spc-btn{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--spc-border); background:var(--spc-input); color:var(--spc-fg); transition:border-color .15s, background .15s}
.spc-input.invalid{ border-color: var(--spc-error); }
.spc-hint{font-size:12px; margin:4px 2px 0; opacity:.9}
.spc-hint.error{ color: var(--spc-error); }
.spc-hint.ok{ color: var(--spc-ok); }
.spc-checkbox{display:flex; gap:8px; align-items:center; font-size:12px; margin:8px 0}
.spc-btn{background:var(--spc-primary); color:#fff; border:none; cursor:pointer}
.spc-btn:hover{background:var(--spc-accent)}
.spc-footer{padding:10px; border-top:1px solid var(--spc-border); display:flex; gap:8px}
.spc-text{flex:1; padding:12px 14px; border-radius:16px; border:1px solid var(--spc-border); background:var(--spc-input); color:var(--spc-fg)}
.spc-send{padding:12px 16px; border-radius:14px; background:var(--spc-primary); color:#fff; border:none; cursor:pointer; transition: background .15s}
.spc-send:hover{ background: var(--spc-accent); }
.spc-end{padding:10px 12px; border-radius:10px; background:var(--spc-border); color:var(--spc-fg); border:none; cursor:pointer; margin-left:8px; transition: background .15s}
.spc-end:hover{ background: var(--spc-accent); color:#fff; }
.spc-chat{display:flex; flex-direction:column; gap:10px}
.spc-msg{max-width:78%; padding:10px 12px; border-radius:16px; position:relative; line-height:1.4; word-wrap:break-word}
.spc-msg.bot{align-self:flex-start; background:var(--spc-bot); color:var(--spc-bot-fg); border:1px solid var(--spc-border)}
.spc-msg.me{align-self:flex-end; background:var(--spc-me); color:var(--spc-me-fg); border:1px solid var(--spc-me-border)}
.spc-msg.bot::after{content:''; position:absolute; left:-6px; bottom:0; width:12px; height:12px; background:var(--spc-bot); border-left:1px solid var(--spc-border); border-bottom:1px solid var(--spc-border); border-bottom-left-radius:10px; transform:translateY(2px) rotate(45deg)}
.spc-msg.me::after{content:''; position:absolute; right:-6px; bottom:0; width:12px; height:12px; background:var(--spc-me); border-right:1px solid var(--spc-me-border); border-bottom:1px solid var(--spc-me-border); border-bottom-right-radius:10px; transform:translateY(2px) rotate(-45deg)}
@media (max-width:480px){ .spc-panel{height:66vh;} }
.spc-try{ position:fixed; right:16px; bottom:84px; transform: translateX(-4px); background:#000; color:#fff; padding:6px 10px; border-radius:12px; font-size:12px; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:2147483647; display:flex; align-items:center; gap:6px; opacity:0.95; }
.spc-try .arrow{ position:absolute; left:50%; transform:translateX(-50%); bottom:-7px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid #000; }
.spc-root{ pointer-events:none } .spc-root .spc-bubble,.spc-root .spc-panel,.spc-root .spc-try,.spc-root .spc-wrap,.spc-root button,.spc-root input,.spc-root textarea{ pointer-events:auto }
.spc-toast{ position:absolute; right:12px; bottom:12px; background:#111; color:#fff; padding:8px 10px; border-radius:10px; font-size:12px; box-shadow:0 6px 18px rgba(0,0,0,.25); }
@keyframes spc-shake{ 10%, 90% {{ transform: translateX(-1px); }} 20%, 80% {{ transform: translateX(2px); }} 30%, 50%, 70% {{ transform: translateX(-4px); }} 40%, 60% {{ transform: translateX(4px); }} }
.spc-shake{ animation: spc-shake .4s ease both; }