:root{
  --wcchat-accent:#008300; --bg:#fff; --text:#0f172a; --muted:#64748b; --border:#e2e8f0;
  --shadow:0 10px 20px rgba(2,6,23,.10),0 3px 6px rgba(2,6,23,.08);
  --r:18px;
}
*{box-sizing:border-box}

.wcchat-launcher{
  position:fixed; right:24px; bottom:24px;
  width:66px; height:66px; border:0; border-radius:50%;
  display:grid; place-items:center; background:var(--wcchat-accent) !important; color:#fff;
  box-shadow:var(--shadow); cursor:pointer;
  transform:translateY(8px) scale(.98); opacity:0; pointer-events:none;
  transition:transform .25s ease, opacity .25s ease, box-shadow .2s ease;
  z-index:10000; overflow:visible; isolation:isolate;
}
.wcchat-launcher.visible{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1) }
.wcchat-launcher svg{ width:28px; height:28px; display:block }

.wcchat-launcher.pulsing{ animation:wc-breathe 2.6s ease-in-out infinite; will-change:transform,box-shadow,background-color }
.wcchat-launcher.pulsing::before,
.wcchat-launcher.pulsing::after{
  content:""; position:absolute; inset:-10px; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side,
    rgba(0,131,0,.46) 0%,
    rgba(0,131,0,.34) 44%,
    rgba(0,131,0,.20) 64%,
    rgba(0,131,0,0)   70%);
  box-shadow:0 0 0 3px rgba(0,131,0,.26);
  transform-origin:50% 50%; transform:scale(.9); opacity:.98;
  will-change:transform,opacity; animation:wc-pulse-wave 2.2s cubic-bezier(.22,.61,.36,1) infinite;
}
.wcchat-launcher.pulsing::after{ animation-delay:1.1s }

@keyframes wc-pulse-wave{
  0%{ transform:scale(.90); opacity:.98 }
  55%{ transform:scale(1.12); opacity:.38 }
  100%{ transform:scale(1.12); opacity:0 }
}
@keyframes wc-breathe{
  0%{ transform:translateY(0) scale(1); background:var(--wcchat-accent); box-shadow:var(--shadow),0 0 0 0 rgba(0,131,0,0) }
  50%{ transform:translateY(-1px) scale(1.035); background:var(--wcchat-accent); box-shadow:var(--shadow),0 0 0 10px rgba(0,131,0,.14) }
  100%{ transform:translateY(0) scale(1); background:var(--wcchat-accent); box-shadow:var(--shadow),0 0 0 0 rgba(0,131,0,0) }
}

.wcchat-badge{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; line-height:20px; background:#ef4444; color:#fff; font-size:12px; font-weight:700;
  box-shadow:var(--shadow); display:none;
}
.wcchat-badge.show{ display:inline-block }

.wcchat-preview{
  position:fixed; right:100px; bottom:32px; z-index:9999; display:none; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:10px; box-shadow:var(--shadow); max-width:320px; cursor:pointer;
}
.wcchat-preview.show{ display:flex }
.wcchat-preview .avatar{ width:30px; height:30px; border-radius:50%; overflow:hidden; flex:0 0 auto }
.wcchat-preview .avatar video{ width:100%; height:100%; object-fit:cover; display:block }
.wcchat-preview .bubble{ padding:8px 10px; border-radius:12px; background:#f8fafc; font-size:14px; line-height:1.35 }
.wcchat-preview .dots{ display:inline-flex; gap:4px; padding:6px 10px; border:1px solid var(--border); background:#fff; border-radius:12px; margin-left:8px }
.wcchat-preview .wcchat-dot{ width:6px; height:6px; border-radius:50%; background:#9ca3af; animation:wc-dots 1.2s infinite }
.wcchat-preview .wcchat-dot:nth-child(2){ animation-delay:.15s }
.wcchat-preview .wcchat-dot:nth-child(3){ animation-delay:.3s }
@keyframes wc-dots{ 0%,80%,100%{ transform:translateY(0); opacity:.55 } 40%{ transform:translateY(-4px); opacity:1 } }

.wcchat-win{
  position:fixed; right:24px; bottom:108px; width:392px; max-width:calc(100vw - 32px);
  background:#fff; border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; transform:scale(.98) translateY(8px); opacity:0; pointer-events:none; transition:.2s; z-index:9999;
}
.wcchat-win.open{ opacity:1; pointer-events:auto; transform:scale(1) translateY(0) }

.wcchat-head{ display:flex; gap:10px; align-items:center; padding:12px 14px; background:var(--wcchat-accent) !important; color:#fff }
.wcchat-head .avatar{ width:50px; height:50px; border-radius:50%; overflow:hidden; flex:0 0 auto }
.wcchat-head .avatar video{ width:100%; height:100%; object-fit:cover; display:block }
.wcchat-spacer{ flex:1 }
.wcchat-x{ background:rgba(0,0,0,.15); border:0; color:#fff; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; cursor:pointer }

.wcchat-body{ background:#f8fafc; max-height:62vh; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:10px }
.wcchat-msg{ display:flex; gap:10px; align-items:flex-end }
.wcchat-msg .avatar{ width:30px; height:30px; border-radius:50%; overflow:hidden; flex:0 0 auto }
.wcchat-msg .avatar video{ width:100%; height:100%; object-fit:cover; display:block }
.wcchat-msg .bubble{ padding:10px 12px; border-radius:14px; max-width:78%; border:1px solid var(--border); background:#fff }
.wcchat-me{ justify-content:flex-end }
.wcchat-me .bubble{ background:#e8f9ef; border-color:#bbf7d0 }
.wcchat-time{ font-size:11px; color:var(--muted); margin-top:4px }

.wcchat-input{ border-top:1px solid var(--border); background:#fff; padding:10px; display:flex; gap:8px; align-items:center }
.wcchat-input input{ flex:1; height:42px; border:1px solid var(--border); border-radius:12px; padding:0 12px; font:inherit }
.wcchat-input input:disabled{ background:#f8fafc; color:#94a3b8; cursor:not-allowed }
.wcchat-send{ height:42px; padding:0 14px; border-radius:12px; border:0; background:var(--wcchat-accent) !important; color:#fff; font-weight:600; cursor:not-allowed; opacity:.85; transition:background .2s, opacity .2s }
.wcchat-send:not([disabled]){ opacity:1; cursor:pointer }

.wcchat-typing{ display:flex; gap:10px; align-items:flex-end }
.wcchat-typing .avatar{ width:30px; height:30px; border-radius:50%; overflow:hidden }
.wcchat-typing .avatar video{ width:100%; height:100%; object-fit:cover; display:block }
.wcchat-typing .dots{ display:inline-flex; gap:4px; padding:8px 12px; border:1px solid var(--border); background:#fff; border-radius:14px }
.wcchat-dot{ width:6px; height:6px; border-radius:50%; background:#9ca3af; animation:wc-dots 1.2s infinite }
.wcchat-dot:nth-child(2){ animation-delay:.15s }
.wcchat-dot:nth-child(3){ animation-delay:.3s }