*{box-sizing:border-box}
:root{--c:#4f46e5;--t:#fff}
html,body{margin:0;height:100%;background:transparent;overflow:hidden;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1f2937}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}
#launcher{position:absolute;bottom:20px;right:20px;width:60px;height:60px;border-radius:50%;border:0;background:var(--c);color:var(--t);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .15s}
#launcher:hover{transform:scale(1.07)}
body.left #launcher{right:auto;left:20px}
#badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#ef4444;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
#bubble{position:absolute;bottom:92px;right:20px;width:300px;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 6px 24px rgba(0,0,0,.2);cursor:pointer}
body.left #bubble{right:auto;left:20px}
#bubble p{margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
#bx{position:absolute;top:2px;right:6px;border:0;background:none;font-size:20px;color:#9ca3af}
.bwho{display:flex;align-items:center;gap:8px}
.av{width:34px;height:34px;border-radius:50%;background:var(--c);color:var(--t);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
#panel{position:absolute;inset:20px;display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.28);overflow:hidden;animation:pop .18s ease-out}
body.mobile #panel{inset:0;border-radius:0}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--c);color:var(--t);flex:none}
header .av{background:rgba(255,255,255,.25);color:inherit}
.hinfo{flex:1;min-width:0;display:flex;flex-direction:column}
.hinfo small{opacity:.85}
#close{border:0;background:none;color:inherit;font-size:28px;line-height:1;opacity:.9}
#startv,#chatv{flex:1;display:flex;flex-direction:column;min-height:0}
.msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#f9fafb}
.m{display:flex;gap:8px;max-width:88%;align-items:flex-end}
.m.me{align-self:flex-end;flex-direction:row-reverse}
.mav{width:26px;height:26px;border-radius:50%;background:var(--c);color:var(--t);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.mav img{width:100%;height:100%;object-fit:cover}
.mb{padding:9px 12px;border-radius:14px;background:#fff;border:1px solid #e5e7eb;white-space:pre-wrap;word-break:break-word}
.me .mb{background:var(--c);color:var(--t);border-color:var(--c)}
.mb a{color:inherit;text-decoration:underline}
.mb small{display:block;font-size:11px;opacity:.6;margin-top:3px}
.m.pending{opacity:.6}
#startf{padding:14px 16px 18px;border-top:1px solid #e5e7eb}
#startf label{display:block;font-weight:600;margin-bottom:10px}
#startf input{display:block;width:100%;margin-top:4px;padding:10px;border:1px solid #d1d5db;border-radius:8px;font:inherit}
#startf input:focus,#inp:focus{outline:2px solid var(--c);outline-offset:-1px}
.primary{width:100%;padding:11px;border:0;border-radius:8px;background:var(--c);color:var(--t);font-weight:600}
.err{color:#b91c1c;margin:8px 0 0;min-height:1em}
#sendf{display:flex;gap:8px;padding:10px;border-top:1px solid #e5e7eb;align-items:flex-end}
#inp{flex:1;resize:none;max-height:110px;padding:10px;border:1px solid #d1d5db;border-radius:10px;font:inherit}
#sendf button{width:42px;height:42px;border:0;border-radius:50%;background:var(--c);color:var(--t);display:flex;align-items:center;justify-content:center;flex:none}