.dm-call{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:99999;width:180px;display:flex;flex-direction:column;align-items:center}
.dm-avatar{position:relative;width:180px;height:180px;border-radius:50%;border:2px solid #fff;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.2);display:flex;overflow:hidden}
.dm-avatar img{width:100%;height:100%;object-fit:cover}
.dm-avatar-video{width:210%;height:150%;object-fit:cover;background:#fff}
.hidden{display:none!important}
.dm-call button:not(.dm-tool-btn):not(.dm-sound-btn){border:0;border-radius:999px;padding:12px 20px;margin:5px;cursor:pointer;background:#111;color:#fff;font-size:15px}
.dm-call .status{font-size:13px;color:#666;margin-top:8px;text-align:center}
.dm-top-tools{display:flex;gap:6px;align-items:center;justify-content:flex-end;width:100%;margin-bottom:6px}
.dm-tool-btn{width:24px;height:24px;border-radius:999px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;background:rgba(8,16,33,.88);color:#fff;border:1px solid rgba(255,255,255,.55)}
.dm-tool-move{cursor:grab}
.dm-tool-close{cursor:pointer}
body.dm-dragging-widget .dm-tool-move{cursor:grabbing}
.dm-reopen{position:fixed;right:10px;top:10px;z-index:99999;background:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.3);padding:10px 14px;border-radius:999px;font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.dm-below-actions{display:flex;justify-content:center;margin-top:10px}
.dm-live-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.dm-circle-actions{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(0,0,0,.45)}
.dm-circle-actions button{padding:8px 14px;font-size:13px;margin:0}
.dm-avatar-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at 50% 45%,rgba(10,16,28,.55),rgba(8,10,16,.84));color:#fff;text-align:center;font-size:11px;font-weight:600;letter-spacing:.01em}
.dm-loader-dot{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.28);border-top-color:#7dd3fc;animation:dmSpin .8s linear infinite}
@keyframes dmSpin{to{transform:rotate(360deg)}}
.dm-sound-btn{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:2;width:36px;height:36px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;background:rgba(5,16,38,.9);color:#fff;border:1px solid rgba(255,255,255,.92);line-height:1}
.dm-sound-btn svg{width:18px;height:18px;fill:currentColor}
.dm-avatar.ringing{animation:dmRingPulse 1.1s ease-in-out infinite,dmRingShake .55s linear infinite;border-color:#22d3ee}
@keyframes dmRingPulse{0%{box-shadow:0 0 0 0 rgba(34,211,238,.55),0 8px 24px rgba(0,0,0,.2)}70%{box-shadow:0 0 0 16px rgba(34,211,238,0),0 8px 24px rgba(0,0,0,.2)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0),0 8px 24px rgba(0,0,0,.2)}}
@keyframes dmRingShake{0%{transform:translateX(0)}20%{transform:translateX(-1.5px)}40%{transform:translateX(1.5px)}60%{transform:translateX(-1px)}80%{transform:translateX(1px)}100%{transform:translateX(0)}}
#callBtn,#callBtnBottom{background:#19a34a;padding:14px 26px;font-size:16px;font-weight:700}
#cancelBtn{background:#111;color:#fff;padding:14px 26px;font-size:16px;font-weight:700}
@media(max-width:600px){
  .dm-call{right:18px;top:50%;transform:translateY(-50%);width:140px}
  .dm-avatar{width:140px;height:140px}
  .dm-call button:not(.dm-tool-btn):not(.dm-sound-btn){padding:11px 18px;font-size:14px}
  .dm-reopen{right:8px;top:8px;padding:9px 12px;font-size:12px}
}

/* Client self-preview bubble (bottom-right, circular, responsive) */
.dm-self-circle{position:fixed;right:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);width:96px;height:96px;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.25);background:#111;z-index:99998;pointer-events:none}
.dm-self-circle-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block;border-radius:50%}
@media(max-width:600px){
  .dm-self-circle{right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);width:152px;height:152px}
}