@z-api/call 1.0.0-staging.0

package/dist/z-api-call.mjs

@@ -0,0 +1,1830 @@
+class B {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  on(t, e) {
+    return this.listeners.has(t) || this.listeners.set(t, /* @__PURE__ */ new Set()), this.listeners.get(t).add(e), this;
+  }
+  off(t, e) {
+    var a;
+    return (a = this.listeners.get(t)) == null || a.delete(e), this;
+  }
+  emit(t, ...e) {
+    const a = this.listeners.get(t);
+    if (a)
+      for (const i of a)
+        try {
+          i(...e);
+        } catch (s) {
+          console.error(`[ZAPICall] Event listener error (${String(t)}):`, s);
+        }
+  }
+  removeAllListeners() {
+    this.listeners.clear();
+  }
+}
+const V = 1e3, H = 3e4, O = 25e3;
+class F {
+  constructor(t, e, a) {
+    this.ws = null, this.reconnectMs = V, this.reconnectTimer = null, this.pingTimer = null, this.destroyed = !1, this.onJson = () => {
+    }, this.onBinary = () => {
+    }, this.onConnectionChange = () => {
+    }, this.baseUrl = t, this.instanceId = e, this.getToken = a;
+  }
+  buildUrl(t) {
+    const e = new URL(this.baseUrl);
+    return e.protocol = e.protocol === "https:" ? "wss:" : "ws:", e.pathname = "/ws/call", e.searchParams.set("instance", this.instanceId), e.searchParams.set("token", t), e.toString();
+  }
+  async connect() {
+    if (this.destroyed) return;
+    this.cleanup();
+    let t;
+    try {
+      t = await this.getToken();
+    } catch (i) {
+      console.warn("[ZAPICall] Failed to get token:", i), this.scheduleReconnect();
+      return;
+    }
+    if (this.destroyed) return;
+    const e = this.buildUrl(t);
+    console.log("[ZAPICall] Connecting to", e);
+    const a = new WebSocket(e);
+    a.binaryType = "arraybuffer", this.ws = a, a.onopen = () => {
+      console.log("[ZAPICall] WebSocket connected"), this.reconnectMs = V, this.onConnectionChange(!0), this.startPing();
+    }, a.onmessage = (i) => {
+      if (typeof i.data == "string")
+        try {
+          const s = JSON.parse(i.data);
+          console.log("[ZAPICall] <<", s.type, s), this.onJson(s);
+        } catch {
+        }
+      else i.data instanceof ArrayBuffer && this.onBinary(i.data);
+    }, a.onclose = (i) => {
+      if (console.log("[ZAPICall] WebSocket closed:", i.code, i.reason), this.stopPing(), this.onConnectionChange(!1), i.code === 4001) {
+        console.warn("[ZAPICall] Invalid credentials (4001), not reconnecting");
+        return;
+      }
+      this.scheduleReconnect();
+    }, a.onerror = (i) => {
+      console.warn("[ZAPICall] WebSocket error:", i);
+    };
+  }
+  send(t) {
+    var e;
+    ((e = this.ws) == null ? void 0 : e.readyState) === WebSocket.OPEN && this.ws.send(t);
+  }
+  sendJson(t) {
+    this.send(JSON.stringify(t));
+  }
+  isConnected() {
+    var t;
+    return ((t = this.ws) == null ? void 0 : t.readyState) === WebSocket.OPEN;
+  }
+  destroy() {
+    this.destroyed = !0, this.cleanup(), this.reconnectTimer && (clearTimeout(this.reconnectTimer), this.reconnectTimer = null);
+  }
+  cleanup() {
+    this.stopPing(), this.ws && (this.ws.onopen = null, this.ws.onmessage = null, this.ws.onclose = null, this.ws.onerror = null, (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING) && this.ws.close(), this.ws = null);
+  }
+  scheduleReconnect() {
+    this.destroyed || (this.reconnectTimer = setTimeout(() => {
+      this.connect();
+    }, this.reconnectMs), this.reconnectMs = Math.min(this.reconnectMs * 2, H));
+  }
+  startPing() {
+    this.pingTimer = setInterval(() => {
+      this.sendJson({ type: "ping" });
+    }, O);
+  }
+  stopPing() {
+    this.pingTimer && (clearInterval(this.pingTimer), this.pingTimer = null);
+  }
+}
+function U(c) {
+  const t = new Float32Array(c.length);
+  for (let e = 0; e < c.length; e++)
+    t[e] = c[e] / 32768;
+  return t;
+}
+function q(c) {
+  const t = new Int16Array(c.length);
+  for (let e = 0; e < c.length; e++) {
+    let a = c[e];
+    a > 1 ? a = 1 : a < -1 && (a = -1), t[e] = Math.round(a * 32767);
+  }
+  return t;
+}
+function j(c) {
+  if (c.length === 0) return 0;
+  let t = 0;
+  for (let e = 0; e < c.length; e++)
+    t += c[e] * c[e];
+  return Math.sqrt(t / c.length);
+}
+const P = 0.02, _ = 0.15;
+class $ {
+  constructor(t = 48e3) {
+    this.playbackCtx = null, this.micCtx = null, this.micStream = null, this.micProcessor = null, this.micSource = null, this.nextPlayTime = 0, this.destroyed = !1, this.onMicData = () => {
+    }, this.onAudioLevel = () => {
+    }, this.playLogCount = 0, this.sampleRate = t;
+  }
+  playPcm(t) {
+    if (this.destroyed || t.byteLength === 0) return;
+    if (this.playbackCtx || (this.playbackCtx = new AudioContext({ sampleRate: this.sampleRate }), this.nextPlayTime = this.playbackCtx.currentTime), this.playbackCtx.state === "suspended" && this.playbackCtx.resume(), this.playLogCount++, this.playLogCount <= 5 || this.playLogCount % 250 === 0) {
+      const o = new Int16Array(t);
+      let l = 0;
+      for (let p = 0; p < Math.min(o.length, 100); p++) {
+        const u = Math.abs(o[p]);
+        u > l && (l = u);
+      }
+      console.log(`[AudioEngine] playPcm #${this.playLogCount} bytes=${t.byteLength} ctxState=${this.playbackCtx.state} sampleRate=${this.sampleRate} maxSample=${l} nextPlayT=${this.nextPlayTime.toFixed(3)} ctxTime=${this.playbackCtx.currentTime.toFixed(3)}`);
+    }
+    const e = new Int16Array(t), a = U(e), i = j(a);
+    this.onAudioLevel(i);
+    const s = this.playbackCtx.createBuffer(1, a.length, this.sampleRate);
+    s.getChannelData(0).set(a);
+    const n = this.playbackCtx.createBufferSource();
+    n.buffer = s, n.connect(this.playbackCtx.destination);
+    const r = this.playbackCtx.currentTime;
+    this.nextPlayTime < r ? this.nextPlayTime = r + P : this.nextPlayTime - r > _ && (this.nextPlayTime = r + P), n.start(this.nextPlayTime), this.nextPlayTime += s.duration;
+  }
+  /** Start capturing microphone audio and sending as PCM Int16LE */
+  async startMic() {
+    this.destroyed || this.micStream || (this.micStream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        sampleRate: this.sampleRate,
+        channelCount: 1,
+        echoCancellation: !0,
+        noiseSuppression: !0,
+        autoGainControl: !0
+      }
+    }), this.micCtx = new AudioContext({ sampleRate: this.sampleRate }), this.micSource = this.micCtx.createMediaStreamSource(this.micStream), this.micProcessor = this.micCtx.createScriptProcessor(4096, 1, 1), this.micProcessor.onaudioprocess = (t) => {
+      if (this.destroyed) return;
+      const e = t.inputBuffer.getChannelData(0), a = q(e);
+      this.onMicData(a.buffer);
+    }, this.micSource.connect(this.micProcessor), this.micProcessor.connect(this.micCtx.destination));
+  }
+  stopMic() {
+    if (this.micProcessor && (this.micProcessor.disconnect(), this.micProcessor = null), this.micSource && (this.micSource.disconnect(), this.micSource = null), this.micStream) {
+      for (const t of this.micStream.getTracks())
+        t.stop();
+      this.micStream = null;
+    }
+    this.micCtx && (this.micCtx.close().catch(() => {
+    }), this.micCtx = null);
+  }
+  /** Resume AudioContext (must be called from user gesture for autoplay policy) */
+  resume() {
+    this.playbackCtx || (this.playbackCtx = new AudioContext({ sampleRate: this.sampleRate }), this.nextPlayTime = this.playbackCtx.currentTime), this.playbackCtx.state === "suspended" && this.playbackCtx.resume();
+  }
+  destroy() {
+    this.destroyed = !0, this.stopMic(), this.playbackCtx && (this.playbackCtx.close().catch(() => {
+    }), this.playbackCtx = null);
+  }
+}
+const W = 100, K = "avc1.42001E", G = 5;
+class J {
+  constructor() {
+    this.canvas = null, this.ctx = null, this.localVideo = null, this.localStream = null, this.captureCanvas = null, this.captureCtx = null, this.tempCanvas = null, this.tempCtx = null, this.captureInterval = null, this.h264Decoder = null, this.h264ErrorCount = 0, this.orientationMap = /* @__PURE__ */ new Map(), this.onCameraFrame = null, this.onEncodedCameraFrame = null, this.h264Encoder = null, this.encoderKeyFrameInterval = 3e3, this.lastKeyFrameTs = 0, this.h264NeedKeyFrame = !1, this.h264GotKeyFrame = !1, this.h264FrameIndex = 0;
+  }
+  setRemoteCanvas(t) {
+    this.canvas = t, this.ctx = t.getContext("2d");
+  }
+  renderFrame(t) {
+    if (!this.canvas || !this.ctx) return;
+    const { width: e, height: a, data: i, orientation: s, format: n, isKeyFrame: r, timestamp: o } = t;
+    if (!(e <= 0 || a <= 0)) {
+      if (n === W) {
+        this.decodeH264Frame(i, e, a, s, r, o);
+        return;
+      }
+      this.renderNV12Frame(i, e, a, s);
+    }
+  }
+  decodeH264Frame(t, e, a, i, s, n) {
+    if (t.byteLength === 0) return;
+    if (!this.h264GotKeyFrame) {
+      if (!s) return;
+      this.h264GotKeyFrame = !0;
+    }
+    if (!this.h264Decoder || this.h264Decoder.state === "closed") {
+      if (this.h264ErrorCount >= G || (this.h264Decoder = this.createH264Decoder(), !this.h264Decoder) || (this.h264GotKeyFrame = !1, !s)) return;
+      this.h264GotKeyFrame = !0;
+    }
+    this.h264FrameIndex++;
+    const r = this.h264FrameIndex * 66666;
+    this.orientationMap.set(r, i);
+    try {
+      this.h264Decoder.decode(new EncodedVideoChunk({
+        type: s ? "key" : "delta",
+        timestamp: r,
+        data: t
+      }));
+    } catch {
+      this.h264ErrorCount++, this.h264GotKeyFrame = !1;
+    }
+  }
+  createH264Decoder() {
+    if (typeof globalThis.VideoDecoder != "function") return null;
+    try {
+      const t = new VideoDecoder({
+        output: (e) => {
+          try {
+            if (!this.canvas || !this.ctx) {
+              e.close();
+              return;
+            }
+            const a = this.orientationMap.get(e.timestamp) ?? 1;
+            this.orientationMap.delete(e.timestamp);
+            const i = e.codedWidth, s = e.codedHeight, n = a === 2 || a === 4, r = n ? s : i, o = n ? i : s;
+            (this.canvas.width !== r || this.canvas.height !== o) && (this.canvas.width = r, this.canvas.height = o), this.ctx.save(), a === 2 ? (this.ctx.translate(r, 0), this.ctx.rotate(Math.PI / 2)) : a === 3 ? (this.ctx.translate(r, o), this.ctx.rotate(Math.PI)) : a === 4 && (this.ctx.translate(0, o), this.ctx.rotate(-Math.PI / 2)), this.ctx.drawImage(e, 0, 0), this.ctx.restore();
+          } finally {
+            e.close();
+          }
+        },
+        error: () => {
+          this.h264ErrorCount++, this.orientationMap.clear();
+        }
+      });
+      return t.configure({ codec: K, optimizeForLatency: !0 }), this.h264ErrorCount = 0, t;
+    } catch {
+      return null;
+    }
+  }
+  renderNV12Frame(t, e, a, i) {
+    if (!this.canvas || !this.ctx) return;
+    const s = i === 2 || i === 4, n = s ? a : e, r = s ? e : a;
+    if ((this.canvas.width !== n || this.canvas.height !== r) && (this.canvas.width = n, this.canvas.height = r), typeof globalThis.VideoFrame == "function")
+      try {
+        const u = new globalThis.VideoFrame(new Uint8Array(t), {
+          format: "NV12",
+          codedWidth: e,
+          codedHeight: a,
+          timestamp: 0
+        });
+        this.ctx.save(), i === 2 ? (this.ctx.translate(n, 0), this.ctx.rotate(Math.PI / 2)) : i === 3 ? (this.ctx.translate(n, r), this.ctx.rotate(Math.PI)) : i === 4 && (this.ctx.translate(0, r), this.ctx.rotate(-Math.PI / 2)), this.ctx.drawImage(u, 0, 0), this.ctx.restore(), u.close();
+        return;
+      } catch {
+      }
+    const o = new Uint8Array(t), l = this.nv12ToRgba(o, e, a), p = new ImageData(new Uint8ClampedArray(l.buffer), e, a);
+    i >= 2 && i <= 4 ? (this.tempCanvas || (this.tempCanvas = document.createElement("canvas"), this.tempCtx = this.tempCanvas.getContext("2d")), this.tempCanvas.width = e, this.tempCanvas.height = a, this.tempCtx.putImageData(p, 0, 0), this.ctx.save(), i === 2 ? (this.ctx.translate(n, 0), this.ctx.rotate(Math.PI / 2)) : i === 3 ? (this.ctx.translate(n, r), this.ctx.rotate(Math.PI)) : i === 4 && (this.ctx.translate(0, r), this.ctx.rotate(-Math.PI / 2)), this.ctx.drawImage(this.tempCanvas, 0, 0), this.ctx.restore()) : this.ctx.putImageData(p, 0, 0);
+  }
+  async startCamera(t, e = 640, a = 480, i = 15) {
+    this.localVideo = t;
+    const s = await navigator.mediaDevices.getUserMedia({
+      video: { width: { ideal: e }, height: { ideal: a }, frameRate: { ideal: i } },
+      audio: !1
+    });
+    this.localStream = s, t.srcObject = s, t.muted = !0, await t.play(), this.canUseH264Encoder() ? this.startH264Capture(s, e, a, i) : (this.captureCanvas = document.createElement("canvas"), this.captureCanvas.width = e, this.captureCanvas.height = a, this.captureCtx = this.captureCanvas.getContext("2d", { willReadFrequently: !0 }), this.captureInterval = setInterval(() => this.captureFrameRaw(), Math.floor(1e3 / i)));
+  }
+  stopCamera() {
+    if (this.captureInterval && (clearInterval(this.captureInterval), this.captureInterval = null), this.h264Encoder && this.h264Encoder.state !== "closed")
+      try {
+        this.h264Encoder.close();
+      } catch {
+      }
+    this.h264Encoder = null, this.localStream && (this.localStream.getTracks().forEach((t) => t.stop()), this.localStream = null), this.localVideo && (this.localVideo.srcObject = null, this.localVideo = null), this.captureCanvas = null, this.captureCtx = null;
+  }
+  canUseH264Encoder() {
+    return typeof globalThis.VideoEncoder == "function" && typeof globalThis.MediaStreamTrackProcessor == "function";
+  }
+  startH264Capture(t, e, a, i) {
+    const s = t.getVideoTracks()[0];
+    if (!s) return;
+    let n = e, r = a, o = 0;
+    const l = /* @__PURE__ */ new Map();
+    this.h264Encoder = new VideoEncoder({
+      output: (d, m) => {
+        var h, v;
+        if (!this.onEncodedCameraFrame) return;
+        const f = new ArrayBuffer(d.byteLength);
+        d.copyTo(f);
+        const g = d.type === "key", x = ((h = m == null ? void 0 : m.decoderConfig) == null ? void 0 : h.codedWidth) ?? n, w = ((v = m == null ? void 0 : m.decoderConfig) == null ? void 0 : v.codedHeight) ?? r;
+        let C = 0;
+        const y = l.get(d.timestamp);
+        y != null && (l.delete(d.timestamp), C = Date.now() - y);
+        const k = d.timestamp / 1e3;
+        this.onEncodedCameraFrame(f, x, w, k, g, C);
+      },
+      error: (d) => {
+        console.error("[VideoEngine] encoder error:", d);
+      }
+    }), this.h264Encoder.configure({
+      codec: "avc1.42001f",
+      width: n,
+      height: r,
+      bitrate: 5e5,
+      framerate: i,
+      latencyMode: "realtime",
+      bitrateMode: "constant",
+      avc: { format: "annexb" }
+    });
+    const u = new globalThis.MediaStreamTrackProcessor({ track: s }).readable.getReader();
+    (async () => {
+      for (; this.h264Encoder && this.h264Encoder.state !== "closed"; )
+        try {
+          const { value: d, done: m } = await u.read();
+          if (m || !d) break;
+          if (this.h264Encoder.state !== "configured") {
+            d.close();
+            continue;
+          }
+          const f = Date.now(), g = f - this.lastKeyFrameTs, x = this.h264NeedKeyFrame || g >= this.encoderKeyFrameInterval || o === 0;
+          l.set(d.timestamp, f), this.h264Encoder.encode(d, { keyFrame: x }), d.close(), o++, x && (this.lastKeyFrameTs = f, this.h264NeedKeyFrame = !1);
+        } catch {
+          break;
+        }
+    })();
+  }
+  captureFrameRaw() {
+    if (!this.captureCtx || !this.captureCanvas || !this.localVideo || !this.onCameraFrame || this.localVideo.readyState < 2) return;
+    const t = this.captureCanvas.width, e = this.captureCanvas.height;
+    this.captureCtx.drawImage(this.localVideo, 0, 0, t, e);
+    const a = this.captureCtx.getImageData(0, 0, t, e);
+    this.onCameraFrame(a.data.buffer, t, e);
+  }
+  nv12ToRgba(t, e, a) {
+    const i = new Uint8ClampedArray(e * a * 4), s = e * a;
+    for (let n = 0; n < a; n++)
+      for (let r = 0; r < e; r++) {
+        const o = n * e + r, l = s + (n >> 1) * e + (r & -2), p = t[o], u = t[l] - 128, b = t[l + 1] - 128, d = o * 4;
+        i[d] = M(p + 1.402 * b), i[d + 1] = M(p - 0.344 * u - 0.714 * b), i[d + 2] = M(p + 1.772 * u), i[d + 3] = 255;
+      }
+    return i;
+  }
+  clearCanvas() {
+    this.canvas && this.ctx && this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+  destroy() {
+    if (this.stopCamera(), this.h264Decoder && this.h264Decoder.state !== "closed")
+      try {
+        this.h264Decoder.close();
+      } catch {
+      }
+    this.h264Decoder = null, this.orientationMap.clear(), this.canvas = null, this.ctx = null;
+  }
+}
+function M(c) {
+  return c < 0 ? 0 : c > 255 ? 255 : c | 0;
+}
+class Z {
+  constructor() {
+    this.calls = /* @__PURE__ */ new Map();
+  }
+  addCall(t) {
+    this.calls.set(t.callId, { ...t });
+  }
+  updateState(t, e) {
+    const a = this.calls.get(t);
+    a && (a.state = e, e === "ended" && this.calls.delete(t));
+  }
+  updateIsVideo(t, e) {
+    const a = this.calls.get(t);
+    a && (a.isVideo = e);
+  }
+  removeCall(t) {
+    this.calls.delete(t);
+  }
+  getCall(t) {
+    return this.calls.get(t);
+  }
+  getActiveCall() {
+    for (const t of this.calls.values())
+      if (t.state === "accepted" || t.state === "active")
+        return t;
+  }
+  getRingingCalls() {
+    const t = [];
+    for (const e of this.calls.values())
+      (e.state === "ringing" || e.state === "preaccepted") && t.push(e);
+    return t;
+  }
+  getAllCalls() {
+    return Array.from(this.calls.values());
+  }
+  hasActiveCalls() {
+    for (const t of this.calls.values())
+      if (t.state !== "ended") return !0;
+    return !1;
+  }
+  clear() {
+    this.calls.clear();
+  }
+}
+function Y(c) {
+  const t = c.mode === "light", e = c.primaryColor || "#00a884", a = c.dangerColor || "#f44336", i = c.backgroundColor || (t ? "#f0f2f5" : "#202c33"), s = c.surfaceColor || (t ? "#ffffff" : "#111b21"), n = c.textColor || (t ? "#111b21" : "#e9edef"), r = c.textSecondaryColor || (t ? "#667781" : "#8696a0"), o = c.borderRadius || "16px", l = c.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", p = t ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.08)", u = t ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)", b = t ? "rgba(0,0,0,0.14)" : "rgba(255,255,255,0.15)", d = t ? "rgba(0,0,0,0.12)" : "rgba(0,0,0,0.3)", m = t ? "rgba(0,0,0,0.16)" : "rgba(0,0,0,0.4)", f = t ? "rgba(0,0,0,0.08)" : "rgba(255,255,255,0.06)", g = t ? "rgba(0,0,0,0.12)" : "rgba(255,255,255,0.1)";
+  return `
+    :host {
+      all: initial;
+      font-family: ${l};
+      color: ${n};
+      --primary: ${e};
+      --danger: ${a};
+      --bg: ${i};
+      --surface: ${s};
+      --text: ${n};
+      --text-sec: ${r};
+      --radius: ${o};
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    .zapi-call-root {
+      position: fixed;
+      z-index: 2147483647;
+      font-family: ${l};
+    }
+    .zapi-call-root.bottom-right { bottom: 20px; right: 20px; }
+    .zapi-call-root.bottom-left { bottom: 20px; left: 20px; }
+    .zapi-call-root.top-right { top: 20px; right: 20px; }
+    .zapi-call-root.top-left { top: 20px; left: 20px; }
+
+    /* Bubble */
+    .bubble {
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      background: var(--primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      box-shadow: 0 4px 12px ${d};
+      transition: transform 0.2s, box-shadow 0.2s;
+      position: relative;
+      user-select: none;
+    }
+    .bubble:hover { transform: scale(1.08); box-shadow: 0 6px 20px ${m}; }
+    .bubble:active { transform: scale(0.95); }
+    .bubble svg { width: 26px; height: 26px; color: #fff; }
+
+    .bubble .badge {
+      position: absolute;
+      top: -2px;
+      right: -2px;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: var(--danger);
+      color: #fff;
+      font-size: 11px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      display: none;
+    }
+    .bubble .badge.visible { display: flex; }
+
+    .bubble .conn-dot {
+      position: absolute;
+      bottom: 2px;
+      right: 2px;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: #f44336;
+      border: 2px solid var(--primary);
+    }
+    .bubble .conn-dot.connected { background: #4caf50; }
+
+    .bubble.ringing {
+      animation: bubble-pulse 1.5s ease-in-out infinite;
+    }
+    @keyframes bubble-pulse {
+      0%, 100% { box-shadow: 0 4px 12px ${d}; }
+      50% { box-shadow: 0 4px 12px ${d}, 0 0 0 12px rgba(0,168,132,0.2); }
+    }
+
+    /* Panel */
+    .panel {
+      position: absolute;
+      bottom: 66px;
+      right: 0;
+      width: 360px;
+      max-height: 560px;
+      background: var(--surface);
+      border-radius: var(--radius);
+      box-shadow: 0 8px 32px ${m};
+      overflow: hidden;
+      transform: translateY(10px);
+      opacity: 0;
+      pointer-events: none;
+      transition: transform 0.25s ease, opacity 0.25s ease;
+      display: flex;
+      flex-direction: column;
+    }
+    .panel.open {
+      transform: translateY(0);
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .zapi-call-root.bottom-left .panel { right: auto; left: 0; }
+    .zapi-call-root.top-right .panel { bottom: auto; top: 66px; }
+    .zapi-call-root.top-left .panel { bottom: auto; top: 66px; right: auto; left: 0; }
+
+    /* Panel header with tabs */
+    .panel-header {
+      background: var(--bg);
+      border-bottom: 1px solid ${f};
+      flex-shrink: 0;
+    }
+    .panel-header-top {
+      padding: 10px 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .panel-header-top h3 {
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--text);
+    }
+    .panel-header .close-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: transparent;
+      color: var(--text-sec);
+      cursor: pointer;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.2s;
+    }
+    .panel-header .close-btn:hover { background: ${p}; }
+    .panel-header .close-btn svg { width: 18px; height: 18px; }
+
+    /* Tabs */
+    .tabs {
+      display: flex;
+      padding: 0 8px;
+    }
+    .tab {
+      flex: 1;
+      padding: 10px 8px;
+      border: none;
+      background: transparent;
+      color: var(--text-sec);
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      transition: color 0.2s;
+      font-family: inherit;
+    }
+    .tab svg { width: 16px; height: 16px; }
+    .tab:hover { color: var(--text); }
+    .tab.active { color: var(--primary); }
+    .tab.active::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 16px;
+      right: 16px;
+      height: 2px;
+      background: var(--primary);
+      border-radius: 2px 2px 0 0;
+    }
+
+    /* Panel body / views */
+    .panel-body {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      min-height: 0;
+    }
+    .view {
+      display: none;
+      animation: view-in 0.2s ease;
+    }
+    .view.active { display: block; }
+    @keyframes view-in {
+      from { opacity: 0; transform: translateY(6px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    /* ── Dialer view ── */
+    .dialer {
+      padding: 8px 16px 14px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .dialer-display {
+      width: 100%;
+      height: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      margin-bottom: 8px;
+    }
+    .dialer-input {
+      width: 100%;
+      background: transparent;
+      border: none;
+      padding: 0 40px;
+      color: var(--text);
+      font-size: 28px;
+      font-weight: 300;
+      font-family: inherit;
+      text-align: center;
+      letter-spacing: 1.5px;
+      outline: none;
+      font-variant-numeric: tabular-nums;
+      caret-color: var(--primary);
+    }
+    .dialer-input::placeholder { color: var(--text-sec); font-size: 16px; font-weight: 400; letter-spacing: 0; }
+    .dialer-input.error::placeholder { color: #e74c3c; }
+    .backspace-btn {
+      position: absolute;
+      right: 0;
+      width: 36px;
+      height: 36px;
+      border: none;
+      background: transparent;
+      color: var(--text-sec);
+      cursor: pointer;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.2s, color 0.2s;
+    }
+    .backspace-btn:hover { background: ${p}; color: var(--text); }
+    .backspace-btn svg { width: 20px; height: 20px; }
+
+    /* Numpad */
+    .numpad {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 6px;
+      width: 100%;
+      max-width: 240px;
+      margin-bottom: 12px;
+    }
+    .numpad-key {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      border: none;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 22px;
+      font-weight: 400;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s, transform 0.1s;
+      user-select: none;
+      font-family: inherit;
+      justify-self: center;
+      line-height: 1;
+    }
+    .numpad-key:hover { background: ${u}; }
+    .numpad-key:active { transform: scale(0.92); background: ${b}; }
+    .numpad-key .sub {
+      font-size: 8px;
+      color: var(--text-sec);
+      letter-spacing: 1.5px;
+      margin-top: 1px;
+      font-weight: 600;
+    }
+
+    /* Call buttons */
+    .call-btns {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+    .call-btn {
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      border: none;
+      background: var(--primary);
+      color: #fff;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 16px rgba(0,168,132,0.3);
+      transition: transform 0.15s, box-shadow 0.15s;
+    }
+    .call-btn:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,168,132,0.4); }
+    .call-btn:active { transform: scale(0.95); }
+    .call-btn svg { width: 26px; height: 26px; }
+    .call-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      transform: none;
+      box-shadow: 0 4px 16px rgba(0,168,132,0.15);
+    }
+    .video-call-btn {
+      background: #2196f3;
+      box-shadow: 0 4px 16px rgba(33,150,243,0.3);
+    }
+    .video-call-btn:hover { box-shadow: 0 6px 24px rgba(33,150,243,0.4); }
+
+    /* ── Calls view ── */
+    .calls-view {
+      padding: 8px;
+    }
+
+    .empty-state {
+      padding: 40px 16px;
+      text-align: center;
+      color: var(--text-sec);
+      font-size: 13px;
+    }
+    .empty-state .icon {
+      font-size: 36px;
+      margin-bottom: 8px;
+    }
+
+    /* Call Card */
+    .call-card {
+      background: var(--bg);
+      border-radius: 12px;
+      padding: 14px;
+      margin-bottom: 8px;
+      animation: card-in 0.3s ease;
+    }
+    .call-card.ended {
+      opacity: 0.5;
+      animation: card-out 0.5s ease forwards;
+    }
+    @keyframes card-in {
+      from { transform: translateY(-8px); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
+    @keyframes card-out {
+      to { transform: translateY(8px); opacity: 0; }
+    }
+
+    .call-card-top {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+    }
+
+    .avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--surface);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .avatar svg { width: 22px; height: 22px; color: var(--text-sec); }
+    .avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+
+    .call-info { flex: 1; min-width: 0; }
+    .call-phone {
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--text);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .call-meta {
+      font-size: 12px;
+      color: var(--text-sec);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-top: 2px;
+    }
+    .call-meta svg { width: 13px; height: 13px; }
+
+    .state-badge {
+      padding: 3px 8px;
+      border-radius: 6px;
+      font-size: 11px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      flex-shrink: 0;
+    }
+    .state-badge.ringing {
+      background: #f9a825;
+      color: #000;
+      animation: badge-pulse 1.5s ease-in-out infinite;
+    }
+    .state-badge.preaccepted { background: #ff9800; color: #000; }
+    .state-badge.accepted { background: #2196f3; color: #fff; }
+    .state-badge.active { background: var(--primary); color: #fff; }
+    .state-badge.ended { background: var(--danger); color: #fff; }
+    @keyframes badge-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
+    .timer {
+      font-size: 22px;
+      font-weight: 300;
+      text-align: center;
+      margin: 8px 0;
+      font-variant-numeric: tabular-nums;
+      color: var(--text);
+    }
+
+    .call-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    .btn {
+      flex: 1;
+      padding: 10px 16px;
+      border: none;
+      border-radius: 24px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: transform 0.15s, opacity 0.15s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      font-family: inherit;
+    }
+    .btn:hover { transform: scale(1.03); }
+    .btn:active { transform: scale(0.97); }
+    .btn svg { width: 18px; height: 18px; }
+    .btn-accept { background: var(--primary); color: #fff; }
+    .btn-reject { background: var(--danger); color: #fff; }
+    .btn-mute {
+      width: 44px;
+      height: 44px;
+      flex: none;
+      border-radius: 50%;
+      background: var(--bg);
+      border: 1px solid ${g};
+      color: var(--text);
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .btn-mute:hover { background: ${p}; }
+    .btn-mute.muted { background: var(--danger); color: #fff; border-color: transparent; }
+    .btn-mute svg { width: 20px; height: 20px; }
+
+    /* ── In-Call view ── */
+    .incall-view {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+    .incall-view .audio-call-ui {
+      padding: 24px 16px;
+    }
+    .incall-avatar {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      background: var(--bg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 16px;
+    }
+    .incall-avatar svg { width: 40px; height: 40px; color: var(--text-sec); }
+    .incall-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+    .incall-phone {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--text);
+      margin-bottom: 4px;
+    }
+    .incall-state {
+      font-size: 14px;
+      color: var(--text-sec);
+      margin-bottom: 4px;
+    }
+    .incall-timer {
+      font-size: 28px;
+      font-weight: 300;
+      color: var(--text);
+      font-variant-numeric: tabular-nums;
+      margin-bottom: 20px;
+    }
+
+    /* Audio level bar */
+    .audio-level-wrap {
+      width: 100%;
+      max-width: 200px;
+      height: 6px;
+      background: var(--bg);
+      border-radius: 3px;
+      overflow: hidden;
+      margin-bottom: 28px;
+    }
+    .audio-level-bar {
+      height: 100%;
+      width: 0%;
+      background: var(--primary);
+      border-radius: 3px;
+      transition: width 0.1s ease;
+    }
+
+    /* In-call controls */
+    .incall-controls {
+      display: flex;
+      align-items: center;
+      gap: 32px;
+    }
+    .incall-btn {
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: transform 0.15s;
+    }
+    .incall-btn:hover { transform: scale(1.08); }
+    .incall-btn:active { transform: scale(0.95); }
+    .incall-btn svg { width: 24px; height: 24px; }
+    .incall-btn-mute {
+      background: var(--bg);
+      color: var(--text);
+      border: 1px solid ${g};
+    }
+    .incall-btn-mute.muted {
+      background: var(--danger);
+      color: #fff;
+      border-color: transparent;
+    }
+    .incall-btn-camera {
+      background: var(--bg);
+      color: var(--text);
+      border: 1px solid ${g};
+    }
+    .incall-btn-camera:hover { background: ${p}; }
+    .incall-btn-camera.muted {
+      color: var(--text-sec);
+    }
+    .incall-btn-end {
+      background: var(--danger);
+      color: #fff;
+      width: 64px;
+      height: 64px;
+    }
+    .incall-btn-end svg { width: 28px; height: 28px; }
+
+    /* ── Video Call ── */
+    .audio-call-ui {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .video-container {
+      position: relative;
+      width: 100%;
+      height: 420px;
+      overflow: hidden;
+      background: #000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0 0 12px 12px;
+    }
+    .remote-video {
+      max-width: 100%;
+      max-height: 100%;
+      display: block;
+      object-fit: contain;
+    }
+    .video-overlay-top {
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      padding: 16px;
+      background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
+      z-index: 2;
+    }
+    .video-caller-info {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .video-phone {
+      font-size: 15px;
+      font-weight: 600;
+      color: #fff;
+      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
+    }
+    .video-timer {
+      font-size: 14px;
+      font-weight: 500;
+      color: rgba(255,255,255,0.85);
+      font-variant-numeric: tabular-nums;
+      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
+    }
+    .video-overlay-bottom {
+      position: absolute;
+      bottom: 0; left: 0; right: 0;
+      padding: 20px;
+      background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 32px;
+      z-index: 2;
+    }
+    .video-overlay-bottom .incall-btn {
+      backdrop-filter: blur(8px);
+    }
+    .video-btn-mute {
+      background: rgba(255,255,255,0.2) !important;
+      color: #fff !important;
+      border: none !important;
+    }
+    .video-btn-mute.muted {
+      background: var(--danger) !important;
+    }
+    .video-btn-camera {
+      background: rgba(255,255,255,0.2) !important;
+      color: #fff !important;
+      border: none !important;
+    }
+    .video-btn-camera.muted {
+      background: rgba(255,255,255,0.1) !important;
+      color: rgba(255,255,255,0.5) !important;
+    }
+    .video-btn-end {
+      background: var(--danger) !important;
+      color: #fff !important;
+    }
+    .video-btn-end svg { width: 28px; height: 28px; }
+
+    /* ── Contacts view ── */
+    .contacts-wrapper {
+      display: flex;
+      flex-direction: column;
+      height: 400px;
+    }
+    .contacts-search-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 12px;
+      border-bottom: 1px solid ${f};
+      flex-shrink: 0;
+    }
+    .contacts-search-input-wrap {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      background: var(--bg);
+      border-radius: 20px;
+      padding: 0 12px;
+      height: 36px;
+    }
+    .contacts-search-input-wrap svg {
+      width: 16px;
+      height: 16px;
+      color: var(--text-sec);
+      flex-shrink: 0;
+    }
+    .contacts-search-input {
+      flex: 1;
+      border: none;
+      background: transparent;
+      color: var(--text);
+      font-size: 13px;
+      font-family: inherit;
+      outline: none;
+    }
+    .contacts-search-input::placeholder { color: var(--text-sec); }
+    .contacts-refresh-btn {
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: transparent;
+      color: var(--text-sec);
+      cursor: pointer;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.2s, color 0.2s;
+      flex-shrink: 0;
+    }
+    .contacts-refresh-btn:hover { background: ${p}; color: var(--text); }
+    .contacts-refresh-btn svg { width: 18px; height: 18px; }
+
+    .contacts-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 4px 8px;
+    }
+    .contacts-loading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 40px 16px;
+      color: var(--text-sec);
+      font-size: 13px;
+      gap: 12px;
+    }
+    .spinner {
+      width: 24px;
+      height: 24px;
+      border: 3px solid ${p};
+      border-top-color: var(--primary);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    .contact-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 8px;
+      border-radius: 10px;
+      cursor: default;
+      transition: background 0.15s;
+    }
+    .contact-item:hover { background: ${p}; }
+    .contact-avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: var(--bg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      overflow: hidden;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-sec);
+    }
+    .contact-avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .contact-info {
+      flex: 1;
+      min-width: 0;
+    }
+    .contact-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--text);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .contact-phone {
+      font-size: 12px;
+      color: var(--text-sec);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .contact-call-btn {
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: var(--primary);
+      color: #fff;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: transform 0.15s;
+    }
+    .contact-call-btn:hover { transform: scale(1.1); }
+    .contact-call-btn:active { transform: scale(0.95); }
+    .contact-call-btn svg { width: 16px; height: 16px; }
+
+    /* Hide header tabs during video call */
+    .incall-view .video-container[style*="flex"] ~ .panel-header { display: none; }
+  `;
+}
+const I = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.57.57a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.25 1.02l-2.2 2.2z"/></svg>', E = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08a.956.956 0 010-1.36C3.34 8.75 7.46 7 12 7s8.66 1.75 11.71 4.72c.18.18.29.44.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28a11.27 11.27 0 00-2.67-1.85.99.99 0 01-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z"/></svg>', X = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 00-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>', S = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5z"/><path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>', N = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z"/></svg>', z = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>', L = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>', T = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z"/></svg>', Q = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>', tt = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z"/></svg>', et = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 19c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6 1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12-8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-6 8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>', at = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 00-1.02.24l-2.2 2.2a15.045 15.045 0 01-6.59-6.59l2.2-2.21a.96.96 0 00.25-1A11.36 11.36 0 018.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 12h2c0-4.97-4.03-9-9-9v2c3.87 0 7 3.13 7 7zm-4 0h2c0-2.76-2.24-5-5-5v2c1.66 0 3 1.34 3 3z"/></svg>', it = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>', st = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 001.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 00-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 005.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>', nt = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>';
+function R(c) {
+  const t = Math.floor(c / 1e3), e = Math.floor(t / 60), a = t % 60;
+  return `${String(e).padStart(2, "0")}:${String(a).padStart(2, "0")}`;
+}
+function A(c) {
+  if (!c || c === "unknown") return c;
+  const t = c.replace(/\D/g, "");
+  return t.length <= 4 ? c : t.length === 13 && t.startsWith("55") ? `+${t.slice(0, 2)} (${t.slice(2, 4)}) ${t.slice(4, 9)}-${t.slice(9)}` : t.length === 12 && t.startsWith("55") ? `+${t.slice(0, 2)} (${t.slice(2, 4)}) ${t.slice(4, 8)}-${t.slice(8)}` : `+${t}`;
+}
+const rt = [
+  { digit: "1", sub: "" },
+  { digit: "2", sub: "ABC" },
+  { digit: "3", sub: "DEF" },
+  { digit: "4", sub: "GHI" },
+  { digit: "5", sub: "JKL" },
+  { digit: "6", sub: "MNO" },
+  { digit: "7", sub: "PQRS" },
+  { digit: "8", sub: "TUV" },
+  { digit: "9", sub: "WXYZ" },
+  { digit: "*", sub: "" },
+  { digit: "0", sub: "+" },
+  { digit: "#", sub: "" }
+];
+class ot {
+  constructor(t) {
+    this.open = !1, this.muted = !1, this.timers = /* @__PURE__ */ new Map(), this.timerStarts = /* @__PURE__ */ new Map(), this.currentView = "dialer", this.contactsLoaded = !1, this.contactsCache = [], this.pictureCache = /* @__PURE__ */ new Map(), this.pictureRequested = /* @__PURE__ */ new Set(), this.activeCallId = null, this.cameraOn = !1, this.incallTimer = null, this.config = t, this.host = document.createElement("div"), this.host.id = "zapi-call-widget", this.shadow = this.host.attachShadow({ mode: "closed" });
+    const e = document.createElement("style");
+    e.textContent = Y(t.theme), this.shadow.appendChild(e), this.buildDOM(), document.body.appendChild(this.host);
+  }
+  buildDOM() {
+    this.root = document.createElement("div"), this.root.className = `zapi-call-root ${this.config.position}`, this.panel = document.createElement("div"), this.panel.className = "panel";
+    const t = document.createElement("div");
+    t.className = "panel-header", t.innerHTML = `
+      <div class="panel-header-top">
+        <h3>Telefone</h3>
+        <button class="close-btn">${Q}</button>
+      </div>
+      <div class="tabs">
+        <button class="tab active" data-tab="dialer">${et} Discador</button>
+        <button class="tab" data-tab="calls">${at} Chamadas</button>
+        <button class="tab" data-tab="contacts">${it} Contatos</button>
+      </div>
+    `, t.querySelector(".close-btn").addEventListener("click", () => this.togglePanel(!1)), this.tabDialer = t.querySelector('[data-tab="dialer"]'), this.tabCalls = t.querySelector('[data-tab="calls"]'), this.tabContacts = t.querySelector('[data-tab="contacts"]'), this.tabDialer.addEventListener("click", () => this.switchView("dialer")), this.tabCalls.addEventListener("click", () => this.switchView("calls")), this.tabContacts.addEventListener("click", () => this.switchView("contacts")), this.panel.appendChild(t);
+    const e = document.createElement("div");
+    e.className = "panel-body", this.dialerView = document.createElement("div"), this.dialerView.className = "view active", this.buildDialerView(), e.appendChild(this.dialerView), this.callsView = document.createElement("div"), this.callsView.className = "view", this.callsView.innerHTML = `
+      <div class="calls-view">
+        <div class="empty-state">
+          <div class="icon">&#128222;</div>
+          <p>Nenhuma chamada ativa</p>
+        </div>
+      </div>
+    `, e.appendChild(this.callsView), this.contactsView = document.createElement("div"), this.contactsView.className = "view", this.buildContactsView(), e.appendChild(this.contactsView), this.incallView = document.createElement("div"), this.incallView.className = "view", this.buildInCallView(), e.appendChild(this.incallView), this.panel.appendChild(e), this.root.appendChild(this.panel), this.bubble = document.createElement("div"), this.bubble.className = "bubble", this.bubble.innerHTML = `
+      ${I}
+      <span class="badge">0</span>
+      <span class="conn-dot"></span>
+    `, this.badge = this.bubble.querySelector(".badge"), this.connDot = this.bubble.querySelector(".conn-dot"), this.bubble.addEventListener("click", () => {
+      this.togglePanel(), this.config.onResume();
+    }), this.root.appendChild(this.bubble), this.shadow.appendChild(this.root);
+  }
+  buildDialerView() {
+    const t = document.createElement("div");
+    t.className = "dialer";
+    const e = document.createElement("div");
+    e.className = "dialer-display", this.dialerInput = document.createElement("input"), this.dialerInput.className = "dialer-input", this.dialerInput.type = "tel", this.dialerInput.placeholder = "Digite o numero", this.dialerInput.addEventListener("keydown", (r) => {
+      r.key === "Enter" && this.handleMakeCall();
+    });
+    const a = document.createElement("button");
+    a.className = "backspace-btn", a.innerHTML = tt, a.addEventListener("click", () => {
+      this.dialerInput.value = this.dialerInput.value.slice(0, -1), this.dialerInput.focus();
+    }), e.appendChild(this.dialerInput), e.appendChild(a), t.appendChild(e);
+    const i = document.createElement("div");
+    i.className = "numpad";
+    for (const r of rt) {
+      const o = document.createElement("button");
+      o.className = "numpad-key", o.innerHTML = `<span>${r.digit}</span>${r.sub ? `<span class="sub">${r.sub}</span>` : ""}`, o.addEventListener("click", () => {
+        this.dialerInput.value += r.digit, this.dialerInput.focus();
+      }), i.appendChild(o);
+    }
+    t.appendChild(i);
+    const s = document.createElement("div");
+    s.className = "call-btns";
+    const n = document.createElement("button");
+    if (n.className = "call-btn", n.innerHTML = I, n.addEventListener("click", () => this.handleMakeCall(!1)), s.appendChild(n), this.config.showVideoDialButton) {
+      const r = document.createElement("button");
+      r.className = "call-btn video-call-btn", r.innerHTML = L, r.addEventListener("click", () => this.handleMakeCall(!0)), s.appendChild(r);
+    }
+    t.appendChild(s), this.dialerView.appendChild(t);
+  }
+  buildContactsView() {
+    const t = document.createElement("div");
+    t.className = "contacts-wrapper";
+    const e = document.createElement("div");
+    e.className = "contacts-search-row", e.innerHTML = `
+      <div class="contacts-search-input-wrap">
+        ${st}
+        <input class="contacts-search-input" type="text" placeholder="Buscar contato..." />
+      </div>
+      <button class="contacts-refresh-btn">${nt}</button>
+    `;
+    const a = e.querySelector(".contacts-search-input");
+    a.addEventListener("input", () => this.filterContacts(a.value)), e.querySelector(".contacts-refresh-btn").addEventListener("click", () => {
+      this.contactsLoaded = !1, this.loadContacts();
+    }), t.appendChild(e);
+    const s = document.createElement("div");
+    s.className = "contacts-list", s.innerHTML = '<div class="empty-state"><p>Clique na aba para carregar</p></div>', t.appendChild(s), this.contactsView.appendChild(t);
+  }
+  loadContacts() {
+    const t = this.contactsView.querySelector(".contacts-list");
+    t.innerHTML = '<div class="contacts-loading"><div class="spinner"></div><p>Carregando contatos...</p></div>', this.config.onRequestContacts();
+  }
+  filterContacts(t) {
+    const e = t.toLowerCase().trim(), a = this.contactsView.querySelector(".contacts-list"), i = e ? this.contactsCache.filter(
+      (s) => s.name.toLowerCase().includes(e) || s.phone.includes(e)
+    ) : this.contactsCache;
+    this.renderContactsList(a, i);
+  }
+  renderContactsList(t, e) {
+    if (e.length === 0) {
+      t.innerHTML = '<div class="empty-state"><p>Nenhum contato encontrado</p></div>';
+      return;
+    }
+    t.innerHTML = "";
+    for (const a of e) {
+      const i = document.createElement("div");
+      i.className = "contact-item";
+      const s = (a.short || a.name || "?").charAt(0).toUpperCase();
+      i.innerHTML = `
+        <div class="contact-avatar">${a.imgUrl ? `<img src="${a.imgUrl}" />` : `<span>${s}</span>`}</div>
+        <div class="contact-info">
+          <div class="contact-name">${a.name || a.phone}</div>
+          <div class="contact-phone">${a.phone}</div>
+        </div>
+        <button class="contact-call-btn">${I}</button>
+      `, i.querySelector(".contact-call-btn").addEventListener("click", () => {
+        const n = a.phone.replace(/[^0-9+]/g, "");
+        this.config.onMakeCall(n, !1);
+      }), t.appendChild(i);
+    }
+  }
+  updateContacts(t) {
+    this.contactsCache = t, this.contactsLoaded = !0;
+    const e = this.contactsView.querySelector(".contacts-list");
+    e && this.renderContactsList(e, t);
+  }
+  buildInCallView() {
+    const t = document.createElement("div");
+    t.className = "incall-view", t.innerHTML = `
+      <div class="video-container" style="display:none;">
+        <canvas class="remote-video"></canvas>
+        <div class="video-overlay-top">
+          <div class="video-caller-info">
+            <div class="video-phone"></div>
+            <div class="video-timer">00:00</div>
+          </div>
+        </div>
+        <div class="video-overlay-bottom">
+          <button class="incall-btn video-btn-mute">${S}</button>
+          <button class="incall-btn video-btn-camera">${T}</button>
+          <button class="incall-btn video-btn-end">${E}</button>
+        </div>
+      </div>
+      <div class="audio-call-ui">
+        <div class="incall-avatar">${z}</div>
+        <div class="incall-phone"></div>
+        <div class="incall-state"></div>
+        <div class="incall-timer">00:00</div>
+        <div class="audio-level-wrap">
+          <div class="audio-level-bar"></div>
+        </div>
+        <div class="incall-controls">
+          <button class="incall-btn incall-btn-mute">${S}</button>
+          <button class="incall-btn incall-btn-camera">${T}</button>
+          <button class="incall-btn incall-btn-end">${E}</button>
+        </div>
+      </div>
+    `, this.videoContainer = t.querySelector(".video-container"), this.remoteVideoCanvas = t.querySelector(".remote-video"), this.incallPhoneEl = t.querySelector(".incall-phone"), this.incallStateEl = t.querySelector(".incall-state"), this.incallTimerEl = t.querySelector(".incall-timer"), this.audioLevelBar = t.querySelector(".audio-level-bar"), this.videoPhoneEl = t.querySelector(".video-phone"), this.videoTimerEl = t.querySelector(".video-timer"), this.incallMuteBtn = t.querySelector(".incall-btn-mute"), this.incallMuteBtn.addEventListener("click", () => {
+      this.muted = !this.muted, this.config.onMute(this.muted), this.updateMuteButtons();
+    }), t.querySelector(".video-btn-mute").addEventListener("click", () => {
+      this.muted = !this.muted, this.config.onMute(this.muted), this.updateMuteButtons();
+    }), t.querySelectorAll(".video-btn-camera, .incall-btn-camera").forEach((n) => {
+      n.addEventListener("click", () => {
+        this.cameraOn = !this.cameraOn, this.config.onCamera(this.cameraOn), this.updateCameraButton();
+      });
+    }), t.querySelector(".incall-btn-end").addEventListener("click", () => {
+      this.activeCallId && this.config.onReject(this.activeCallId);
+    }), t.querySelector(".video-btn-end").addEventListener("click", () => {
+      this.activeCallId && this.config.onReject(this.activeCallId);
+    }), this.incallView.appendChild(t);
+  }
+  handleMakeCall(t = !1) {
+    const e = this.dialerInput.value.replace(/\s/g, "");
+    e && (this.config.onMakeCall(e, t), console.log("[ZAPICall] makeCall from widget:", e, t ? "(video)" : "(audio)"));
+  }
+  switchView(t) {
+    this.currentView = t, this.dialerView.classList.toggle("active", t === "dialer"), this.callsView.classList.toggle("active", t === "calls"), this.contactsView.classList.toggle("active", t === "contacts"), this.incallView.classList.toggle("active", t === "incall"), this.tabDialer.classList.toggle("active", t === "dialer"), this.tabCalls.classList.toggle("active", t === "calls"), this.tabContacts.classList.toggle("active", t === "contacts"), t === "contacts" && !this.contactsLoaded && this.loadContacts();
+  }
+  togglePanel(t) {
+    this.open = t !== void 0 ? t : !this.open, this.panel.classList.toggle("open", this.open);
+  }
+  updateCalls(t, e) {
+    this.connDot.classList.toggle("connected", e);
+    const a = t.filter((n) => n.state !== "ended"), i = t.filter((n) => n.state === "ringing" || n.state === "preaccepted" || n.state === "calling"), s = t.find((n) => n.state === "active") || t.find((n) => n.state === "accepted") || t.find((n) => n.state === "calling");
+    if (a.length > 0 ? (this.badge.textContent = String(a.length), this.badge.classList.add("visible")) : this.badge.classList.remove("visible"), this.bubble.classList.toggle("ringing", i.length > 0), i.length > 0 && !this.open && this.togglePanel(!0), s) {
+      this.activeCallId = s.callId, this.incallPhoneEl.textContent = s.notify || A(s.from), this.incallStateEl.textContent = this.stateLabel(s.state), this.videoPhoneEl && (this.videoPhoneEl.textContent = s.notify || A(s.from));
+      const n = this.incallView.querySelector(".incall-avatar");
+      n && n.dataset.avatarPhone !== s.from && (n.dataset.avatarPhone = s.from, n.innerHTML = this.renderAvatar(s.from)), s.state === "accepted" || s.state === "active" ? (this.timerStarts.has(s.callId) || this.timerStarts.set(s.callId, Date.now()), this.startInCallTimer(s.callId)) : this.stopInCallTimer(), this.currentView !== "incall" && this.switchView("incall");
+    } else this.currentView === "incall" && (this.activeCallId = null, this.stopInCallTimer(), i.length > 0 ? this.switchView("calls") : this.switchView("dialer"));
+    i.length > 0 && !s && this.currentView === "dialer" && this.switchView("calls"), this.renderCallsList(t);
+  }
+  renderCallsList(t) {
+    const e = this.callsView.querySelector(".calls-view");
+    if (t.length === 0) {
+      e.innerHTML = `
+        <div class="empty-state">
+          <div class="icon">&#128222;</div>
+          <p>Nenhuma chamada ativa</p>
+        </div>
+      `, this.clearAllTimers();
+      return;
+    }
+    e.innerHTML = "";
+    for (const a of t)
+      e.appendChild(this.buildCallCard(a));
+  }
+  buildCallCard(t) {
+    const e = document.createElement("div");
+    e.className = `call-card${t.state === "ended" ? " ended" : ""}`, e.dataset.callId = t.callId;
+    const a = t.state === "ringing" || t.state === "preaccepted", i = t.state === "calling", s = t.state === "accepted" || t.state === "active";
+    e.innerHTML = `
+      <div class="call-card-top">
+        <div class="avatar" data-avatar-phone="${t.from}">${this.renderAvatar(t.from)}</div>
+        <div class="call-info">
+          ${t.notify ? `<div class="call-name">${t.notify}</div>` : ""}
+          <div class="call-phone">${A(t.from)}</div>
+          <div class="call-meta">
+            ${t.isVideo ? L : I}
+            <span>${t.isVideo ? "Video" : "Audio"}${t.isGroup ? " (Grupo)" : ""}</span>
+          </div>
+        </div>
+        <span class="state-badge ${t.state}">${this.stateLabel(t.state)}</span>
+      </div>
+      ${s ? `<div class="timer" data-timer="${t.callId}">00:00</div>` : ""}
+      ${a ? `
+        <div class="call-actions">
+          <button class="btn btn-accept" data-accept="${t.callId}">
+            ${X} Aceitar
+          </button>
+          <button class="btn btn-reject" data-reject="${t.callId}">
+            ${E} Rejeitar
+          </button>
+        </div>
+      ` : ""}
+      ${i || s ? `
+        <div class="call-actions">
+          <button class="btn btn-reject" data-reject="${t.callId}" style="flex:1">
+            ${E} Encerrar
+          </button>
+        </div>
+      ` : ""}
+    `;
+    const n = e.querySelector(`[data-accept="${t.callId}"]`);
+    return n == null || n.addEventListener("click", () => {
+      this.config.onAccept(t.callId), this.config.onResume();
+    }), e.querySelectorAll(`[data-reject="${t.callId}"]`).forEach((o) => o.addEventListener("click", () => this.config.onReject(t.callId))), s && (this.timerStarts.has(t.callId) || this.timerStarts.set(t.callId, Date.now()), this.startTimer(t.callId, e)), t.state === "ended" && this.stopTimer(t.callId), e;
+  }
+  stateLabel(t) {
+    switch (t) {
+      case "ringing":
+        return "Chamando";
+      case "calling":
+        return "Ligando...";
+      case "preaccepted":
+        return "Conectando";
+      case "accepted":
+        return "Aceita";
+      case "active":
+        return "Ativa";
+      case "ended":
+        return "Encerrada";
+      default:
+        return t;
+    }
+  }
+  // Timers for call cards in list view
+  startTimer(t, e) {
+    this.stopTimer(t);
+    const a = this.timerStarts.get(t) || Date.now(), i = e.querySelector(`[data-timer="${t}"]`);
+    if (!i) return;
+    const s = () => {
+      i.textContent = R(Date.now() - a);
+    };
+    s(), this.timers.set(t, setInterval(s, 1e3));
+  }
+  stopTimer(t) {
+    const e = this.timers.get(t);
+    e && (clearInterval(e), this.timers.delete(t));
+  }
+  startInCallTimer(t) {
+    this.stopInCallTimer();
+    const e = this.timerStarts.get(t) || Date.now(), a = () => {
+      const i = R(Date.now() - e);
+      this.incallTimerEl.textContent = i, this.videoTimerEl && (this.videoTimerEl.textContent = i);
+    };
+    a(), this.incallTimer = setInterval(a, 1e3);
+  }
+  stopInCallTimer() {
+    this.incallTimer && (clearInterval(this.incallTimer), this.incallTimer = null), this.incallTimerEl.textContent = "00:00";
+  }
+  /** Show video container for video calls */
+  showVideo(t) {
+    if (!this.videoContainer) return;
+    this.videoContainer.style.display = t ? "flex" : "none";
+    const e = this.incallView.querySelector(".audio-call-ui");
+    e && (e.style.display = t ? "none" : ""), t && (this.videoPhoneEl.textContent = this.incallPhoneEl.textContent, this.videoTimerEl.textContent = this.incallTimerEl.textContent);
+  }
+  getRemoteCanvas() {
+    return this.remoteVideoCanvas;
+  }
+  resetCamera() {
+    this.cameraOn = !1, this.updateCameraButton();
+  }
+  updateMuteButtons() {
+    this.incallMuteBtn.classList.toggle("muted", this.muted), this.incallMuteBtn.innerHTML = this.muted ? N : S;
+    const t = this.incallView.querySelector(".video-btn-mute");
+    t && (t.classList.toggle("muted", this.muted), t.innerHTML = this.muted ? N : S);
+  }
+  updateCameraButton() {
+    this.incallView.querySelectorAll(".video-btn-camera, .incall-btn-camera").forEach((e) => {
+      e.classList.toggle("muted", !this.cameraOn), e.innerHTML = this.cameraOn ? L : T;
+    });
+  }
+  showMakeCallError(t) {
+    const e = t.includes("PHONE_NOT_ON_WHATSAPP") ? "Número não encontrado" : "Erro ao realizar chamada", a = this.dialerInput.placeholder;
+    this.dialerInput.value = "", this.dialerInput.placeholder = e, this.dialerInput.classList.add("error"), setTimeout(() => {
+      this.dialerInput.placeholder = a, this.dialerInput.classList.remove("error");
+    }, 3e3);
+  }
+  updateAudioLevel(t) {
+    const e = Math.min(100, Math.max(0, t * 100));
+    this.audioLevelBar.style.width = `${e}%`;
+  }
+  renderAvatar(t) {
+    const e = this.pictureCache.get(t);
+    return e ? `<img src="${e}" class="avatar-img" />` : (!this.pictureRequested.has(t) && t && (this.pictureRequested.add(t), this.config.onRequestProfilePicture(t)), z);
+  }
+  updateProfilePicture(t, e) {
+    if (this.pictureCache.set(t, e), !e) return;
+    const a = `<img src="${e}" class="avatar-img" />`;
+    this.shadow.querySelectorAll(`[data-avatar-phone="${t}"]`).forEach((i) => {
+      i.innerHTML = a;
+    });
+  }
+  clearAllTimers() {
+    for (const t of this.timers.values())
+      clearInterval(t);
+    this.timers.clear(), this.timerStarts.clear(), this.stopInCallTimer();
+  }
+  destroy() {
+    this.clearAllTimers(), this.host.remove();
+  }
+}
+class D extends B {
+  constructor(t) {
+    super(), this.widget = null, this.audioConfig = { sampleRate: 16e3, channels: 1 }, this.connected = !1, this.micStarted = !1, this.cameraStarted = !1, this.destroyed = !1, this.sdkId = "", this.contacts = [], this.opts = t, this.state = new Z(), this.audio = new $(this.audioConfig.sampleRate), this.video = new J(), this.ws = new F("https://staging-call.z-api.io", t.instanceId, t.getToken), this.ws.onJson = (e) => this.handleJsonMessage(e), this.ws.onBinary = (e) => this.handleBinaryMessage(e), this.ws.onConnectionChange = (e) => this.handleConnectionChange(e), this.audio.onMicData = (e) => {
+      const a = new ArrayBuffer(1 + e.byteLength);
+      new Uint8Array(a)[0] = 1, new Uint8Array(a, 1).set(new Uint8Array(e)), this.ws.send(a);
+    }, this.audio.onAudioLevel = (e) => {
+      var a;
+      this.emit("audio:level", e), (a = this.widget) == null || a.updateAudioLevel(e);
+    }, this.on("video:frame", (e) => this.video.renderFrame(e)), this.video.onEncodedCameraFrame = (e, a, i, s, n, r) => {
+      const o = new ArrayBuffer(22 + e.byteLength), l = new DataView(o);
+      l.setUint8(0, 3), l.setUint16(1, a, !0), l.setUint16(3, i, !0), l.setFloat64(5, s), l.setUint8(13, n ? 1 : 0), l.setFloat64(14, r), new Uint8Array(o, 22).set(new Uint8Array(e)), this.ws.send(o);
+    }, this.video.onCameraFrame = (e, a, i) => {
+      const s = this.rgbaToNv12(new Uint8Array(e), a, i), n = new ArrayBuffer(5 + s.byteLength), r = new DataView(n);
+      r.setUint8(0, 2), r.setUint16(1, a, !0), r.setUint16(3, i, !0), new Uint8Array(n, 5).set(s), this.ws.send(n);
+    }, t.autoWidget !== !1 && (this.widget = new ot({
+      position: t.position || "bottom-right",
+      theme: t.theme || {},
+      showVideoDialButton: t.showVideoDialButton === !0,
+      onAccept: (e) => this.accept(e),
+      onReject: (e) => this.reject(e),
+      onMute: (e) => this.mute(e),
+      onCamera: (e) => this.setCamera(e),
+      onResume: () => this.audio.resume(),
+      onMakeCall: (e, a) => this.makeCall(e, a),
+      onRequestContacts: () => this.requestContacts(),
+      onRequestProfilePicture: (e) => this.requestProfilePicture(e)
+    }), this.video.setRemoteCanvas(this.widget.getRemoteCanvas())), this.ws.connect();
+  }
+  // -- Public API --
+  accept(t) {
+    console.log("[ZAPICall] >> call:accept", t), this.ws.sendJson({ type: "call:accept", callId: t }), this.startMicIfNeeded();
+  }
+  reject(t) {
+    console.log("[ZAPICall] >> call:reject", t), this.ws.sendJson({ type: "call:reject", callId: t });
+  }
+  mute(t) {
+    this.ws.sendJson({ type: "call:mute", muted: t });
+  }
+  async setCamera(t) {
+    var e;
+    this.ws.sendJson({ type: "call:camera", enabled: t }), t ? (await this.startCameraIfNeeded(), (e = this.widget) == null || e.showVideo(!0)) : (this.video.stopCamera(), this.cameraStarted = !1);
+  }
+  isCameraActive() {
+    return this.cameraStarted;
+  }
+  makeCall(t, e = !1) {
+    var a, i;
+    console.log("[ZAPICall] >> call:make", t, e ? "(video)" : "(audio)"), this.audio.resume(), this.ws.sendJson({ type: "call:make", number: t, isVideo: e }), this.emit("call:make", t), (i = (a = this.opts).onMakeCall) == null || i.call(a, t);
+  }
+  getCalls() {
+    return this.state.getAllCalls();
+  }
+  getActiveCall() {
+    return this.state.getActiveCall();
+  }
+  isConnected() {
+    return this.connected;
+  }
+  getSdkId() {
+    return this.sdkId;
+  }
+  requestContacts() {
+    this.ws.sendJson({ type: "contacts:list" });
+  }
+  requestProfilePicture(t) {
+    this.ws.sendJson({ type: "profile:picture", phone: t });
+  }
+  getContacts() {
+    return this.contacts;
+  }
+  destroy() {
+    var t;
+    this.destroyed || (this.destroyed = !0, this.ws.destroy(), this.audio.destroy(), this.video.destroy(), (t = this.widget) == null || t.destroy(), this.state.clear(), this.removeAllListeners());
+  }
+  // -- Internal --
+  handleJsonMessage(t) {
+    var e, a, i, s, n, r, o, l, p, u, b, d, m, f, g, x, w, C, y, k;
+    switch (t.type) {
+      case "connected":
+        this.sdkId = t.sdkId || "", t.audioConfig && (t.audioConfig.sampleRate !== this.audioConfig.sampleRate && (this.audio.destroy(), this.audio = new $(t.audioConfig.sampleRate), this.audio.onMicData = (h) => {
+          const v = new ArrayBuffer(1 + h.byteLength);
+          new Uint8Array(v)[0] = 1, new Uint8Array(v, 1).set(new Uint8Array(h)), this.ws.send(v);
+        }, this.audio.onAudioLevel = (h) => {
+          var v;
+          this.emit("audio:level", h), (v = this.widget) == null || v.updateAudioLevel(h);
+        }), this.audioConfig = t.audioConfig);
+        break;
+      case "call:incoming": {
+        const h = {
+          callId: t.callId,
+          from: t.from,
+          notify: t.notify,
+          isVideo: t.isVideo,
+          isGroup: t.isGroup,
+          state: t.state || "ringing",
+          timestamp: t.timestamp
+        };
+        this.state.addCall(h), this.emit("call:incoming", h), (a = (e = this.opts).onIncomingCall) == null || a.call(e, h), (i = this.widget) == null || i.updateCalls(this.state.getAllCalls(), this.connected);
+        break;
+      }
+      case "call:outgoing": {
+        const h = {
+          callId: t.callId,
+          from: t.to,
+          isVideo: t.isVideo,
+          isGroup: !1,
+          state: "calling",
+          timestamp: Date.now()
+        };
+        this.state.addCall(h), this.emit("call:outgoing", h), (s = this.widget) == null || s.updateCalls(this.state.getAllCalls(), this.connected), this.startMicIfNeeded();
+        break;
+      }
+      case "call:state": {
+        if (!this.state.getCall(t.callId)) break;
+        if (this.state.updateState(t.callId, t.state), this.emit("call:state", t.callId, t.state), t.state === "accepted" || t.state === "active") {
+          this.startMicIfNeeded();
+          const h = this.state.getCall(t.callId);
+          h != null && h.isVideo ? ((n = this.widget) == null || n.showVideo(!0), this.startCameraIfNeeded()) : (this.video.stopCamera(), this.cameraStarted = !1, (r = this.widget) == null || r.showVideo(!1));
+        }
+        (o = this.widget) == null || o.updateCalls(this.state.getAllCalls(), this.connected);
+        break;
+      }
+      case "call:terminated": {
+        this.state.updateState(t.callId, "ended"), this.emit("call:terminated", t.callId, t.reason), (p = (l = this.opts).onCallTerminated) == null || p.call(l, t.callId), this.video.stopCamera(), this.video.clearCanvas(), this.cameraStarted = !1, (u = this.widget) == null || u.showVideo(!1), (b = this.widget) == null || b.resetCamera(), setTimeout(() => {
+          var h;
+          this.state.removeCall(t.callId), (h = this.widget) == null || h.updateCalls(this.state.getAllCalls(), this.connected), this.state.hasActiveCalls() || (this.audio.stopMic(), this.micStarted = !1);
+        }, 3e3), (d = this.widget) == null || d.updateCalls(this.state.getAllCalls(), this.connected);
+        break;
+      }
+      case "call:video-state": {
+        this.state.updateIsVideo(t.callId, t.isVideo), this.emit("call:video-state", t.callId, t.isVideo);
+        const h = this.state.getCall(t.callId);
+        h && (h.state === "accepted" || h.state === "active") && (t.isVideo ? (m = this.widget) == null || m.showVideo(!0) : (this.video.stopCamera(), this.cameraStarted = !1, (f = this.widget) == null || f.showVideo(!1))), (g = this.widget) == null || g.updateCalls(this.state.getAllCalls(), this.connected);
+        break;
+      }
+      case "call:claimed": {
+        this.state.removeCall(t.callId), this.emit("call:claimed", t.callId), (x = this.widget) == null || x.updateCalls(this.state.getAllCalls(), this.connected);
+        break;
+      }
+      case "call:dismissed": {
+        this.state.removeCall(t.callId), this.emit("call:dismissed", t.callId), (w = this.widget) == null || w.updateCalls(this.state.getAllCalls(), this.connected);
+        break;
+      }
+      case "contacts:list": {
+        this.contacts = t.contacts || [], this.emit("contacts:list", this.contacts), (C = this.widget) == null || C.updateContacts(this.contacts);
+        break;
+      }
+      case "profile:picture": {
+        this.emit("profile:picture", t.phone, t.url), (y = this.widget) == null || y.updateProfilePicture(t.phone, t.url);
+        break;
+      }
+      case "pong":
+        break;
+      case "error":
+        t.command === "call:make" && (this.emit("call:make:error", "", t.message || "UNKNOWN_ERROR"), (k = this.widget) == null || k.showMakeCallError(t.message || "UNKNOWN_ERROR")), this.emit("error", new Error(`${t.command}: ${t.message}`));
+        break;
+    }
+  }
+  handleBinaryMessage(t) {
+    if (t.byteLength < 2) return;
+    const e = new DataView(t), a = e.getUint8(0);
+    if (a === 1 && t.byteLength >= 16) {
+      const i = e.getUint16(1, !0), s = e.getUint16(3, !0), n = e.getUint8(5), r = e.getUint8(6), o = e.getUint8(7) !== 0, l = e.getFloat64(8, !1), p = t.slice(16), u = {
+        width: i,
+        height: s,
+        format: n,
+        orientation: r,
+        isKeyFrame: o,
+        timestamp: l,
+        data: p
+      };
+      this.emit("video:frame", u);
+      return;
+    }
+    if (a === 0 && t.byteLength % 2 === 1) {
+      this.audio.playPcm(t.slice(1));
+      return;
+    }
+    this.audio.playPcm(t);
+  }
+  handleConnectionChange(t) {
+    var e, a, i;
+    this.connected = t, t ? this.emit("connected") : this.emit("disconnected"), (a = (e = this.opts).onConnectionChange) == null || a.call(e, t), (i = this.widget) == null || i.updateCalls(this.state.getAllCalls(), t);
+  }
+  async startCameraIfNeeded() {
+    if (!(this.cameraStarted || this.destroyed)) {
+      this.cameraStarted = !0;
+      try {
+        const t = document.createElement("video");
+        t.style.display = "none", document.body.appendChild(t), await this.video.startCamera(t, 320, 240, 30);
+      } catch (t) {
+        console.warn("[ZAPICall] Camera start failed:", t), this.cameraStarted = !1;
+      }
+    }
+  }
+  rgbaToNv12(t, e, a) {
+    const i = e * a, s = new Uint8Array(i + (i >> 1));
+    for (let r = 0; r < a; r++)
+      for (let o = 0; o < e; o++) {
+        const l = (r * e + o) * 4;
+        s[r * e + o] = (66 * t[l] + 129 * t[l + 1] + 25 * t[l + 2] + 128 >> 8) + 16;
+      }
+    let n = i;
+    for (let r = 0; r < a; r += 2)
+      for (let o = 0; o < e; o += 2) {
+        const l = (r * e + o) * 4;
+        s[n++] = (-38 * t[l] - 74 * t[l + 1] + 112 * t[l + 2] + 128 >> 8) + 128, s[n++] = (112 * t[l] - 94 * t[l + 1] - 18 * t[l + 2] + 128 >> 8) + 128;
+      }
+    return s;
+  }
+  async startMicIfNeeded() {
+    if (!(this.micStarted || this.destroyed)) {
+      this.micStarted = !0;
+      try {
+        await this.audio.startMic();
+      } catch (t) {
+        this.emit("error", t instanceof Error ? t : new Error(String(t)));
+      }
+    }
+  }
+}
+const lt = { NV12: 0, I420: 1, RGB24: 2, RGBA: 3, H264: 100 }, dt = { Unknown: 0, Normal: 1, Rotate90: 2, Rotate180: 3, Rotate270: 4 };
+function ct(c) {
+  return new D(c);
+}
+const ht = {
+  init: ct,
+  Client: D
+};
+export {
+  lt as VideoFormat,
+  dt as VideoOrientation,
+  ht as ZAPICall,
+  D as ZAPICallClient,
+  ct as init
+};
+//# sourceMappingURL=z-api-call.mjs.map