let currentVoiceWs = null;
let currentVoiceCallId = null;
let currentVoiceCallType = null;
let voiceWsHeartbeat = null;
let voiceActiveUsers = [];
let voiceAesKeyBytes = null;
let voiceAesCryptoKey = null;
let voiceUiContainer = null;

let micStream = null, audioContext = null, isAudioWorkletLoaded = false;
let micSourceNode = null, senderNode = null, receiverNode = null, audioEncoder = null;
let remoteAudio = {}, audioDecoders = {}, audioDecryptChains = {};
let knownVoiceUsers = new Set();
let isMicMuted = false;
let remoteVideos = {}, videoDecryptChains = {};
let camControl = null, screenControl = null;
let screenReceiverNode = null;
let voiceOutputAudio = null;
let voiceLoopSendPc = null, voiceLoopRecvPc = null;
let voicePlayoutDest = null;
let voiceLoopWatchdog = null;
let voiceRemoteStream = null;
let voiceLoopRestarts = 0;
let voiceDeviceChangeHandler = null;
let voiceDeviceChangeTimer = null;
let isVoiceSpeakerMode = false;

const SPEAKING_HANGOVER_MS = 400;

// ===== Voice connection resilience =====
// Every client broadcasts a tiny encrypted ping so peers can tell "quiet
// user" apart from "crashed/half-open socket". Peers silent for too long are
// dropped locally; a dead server socket triggers an automatic rejoin.
const VOICE_PEER_TIMEOUT_MS = 7000;
const VOICE_PING_INTERVAL_MS = 2000;
const VOICE_SERVER_TIMEOUT_MS = 10000;
const VOICE_MAX_RECONNECTS = 2;
let peerLastSeen = {};
let deadPeers = new Set();
let lastVoiceServerPacketAt = 0;
let voicePingTimer = null;
let voiceReconnectAttempts = 0;
let lastVoiceServerUrl = null;

function cleanupPeerMedia(userId) {
    for (const aid of [userId, `${userId}_screen`]) {
        if (remoteAudio[aid]) {
            if (audioDecryptChains[aid]) audioDecryptChains[aid].clear();
            delete remoteAudio[aid];
            delete audioDecryptChains[aid];
        }
    }
    for (const decoderId of Object.keys(remoteVideos)) {
        if (decoderId.split('-')[0] === userId) {
            try { if (remoteVideos[decoderId].decoder) remoteVideos[decoderId].decoder.close(); } catch (e) {}
            if (videoDecryptChains[decoderId]) videoDecryptChains[decoderId].clear();
            delete remoteVideos[decoderId];
            delete videoDecryptChains[decoderId];
        }
    }
}

function sendVoicePing() {
    if (!currentVoiceWs || currentVoiceWs.readyState !== WebSocket.OPEN || !voiceAesCryptoKey) return;
    const iv = crypto.getRandomValues(new Uint8Array(12));
    crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, new Uint8Array([Date.now() & 255])).then(cipher => {
        if (!currentVoiceWs || currentVoiceWs.readyState !== WebSocket.OPEN) return;
        const payload = new Uint8Array(14 + cipher.byteLength);
        payload[0] = 5; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
        currentVoiceWs.send(payload.buffer);
    }).catch(() => {});
}

let voiceDragState = false;
let voiceResizeAbort = null;

function clampVoiceWindowToViewport(popupEl) {
    const r = popupEl.getBoundingClientRect();
    const W = window.innerWidth, H = window.innerHeight;
    const w = Math.min(r.width, W);
    const h = Math.min(r.height, H);
    const l = Math.min(Math.max(r.left, 0), W - w);
    const t = Math.min(Math.max(r.top, 0), H - h);
    if (l !== r.left || t !== r.top || w !== r.width || h !== r.height) {
        popupEl.style.right = "auto";
        popupEl.style.bottom = "auto";
        popupEl.style.width = w + "px";
        popupEl.style.height = h + "px";
        popupEl.style.left = l + "px";
        popupEl.style.top = t + "px";
    }
}

let voiceVolumeState = {};

function getStoredVolume(type, clientId) {
    let v = voiceVolumeState[`${type}:${clientId}`];
    return v === undefined ? 100 : v;
}

// Voice device/media settings - persisted locally, edited from the in-call
// settings popup (microphone, speaker, camera, quality/fps, mic sensitivity).
const VOICE_SETTINGS_KEY = "larpix_voice_settings";
const VOICE_SENSITIVITY_DEFAULT = -65;
const VOICE_RES_OPTIONS = [
    { value: "480x360", label: "360p" },
    { value: "640x480", label: "480p" },
    { value: "1280x720", label: "720p" },
    { value: "1920x1080", label: "1080p" },
    { value: "source", label: "SOURCE" }
];
const VOICE_FPS_OPTIONS = [15, 24, 30, 60];
let voiceSettings = loadVoiceSettings();

function loadVoiceSettings() {
    const defaults = { micId: "", camId: "", speakerId: "", camRes: "1280x720", camFps: 24, screenRes: "1920x1080", screenFps: 30, sensitivity: VOICE_SENSITIVITY_DEFAULT };
    try {
        return Object.assign(defaults, JSON.parse(localStorage.getItem(VOICE_SETTINGS_KEY)) || {});
    } catch (e) {
        return defaults;
    }
}

function saveVoiceSettings() {
    try { localStorage.setItem(VOICE_SETTINGS_KEY, JSON.stringify(voiceSettings)); } catch (e) {}
}

function getVoiceMediaConfig(typeId) {
    return typeId === 1
        ? { res: voiceSettings.camRes, fps: parseInt(voiceSettings.camFps) || 24 }
        : { res: voiceSettings.screenRes, fps: parseInt(voiceSettings.screenFps) || 30 };
}

// Camera quality presets are treated as single-axis quality tiers (e.g. the
// longer edge of "1280x720"): the camera always opens at its NATIVE aspect
// ratio and is never steered toward a preset's own ratio like 4:3. Nothing is
// remembered - the actual geometry is detected from the live track settings
// every time (encoder config follows it automatically).

function buildVoiceMicConstraints(deviceId) {
    const constraints = { audio: { echoCancellation: false, noiseSuppression: false, autoGainControl: false } };
    if (deviceId) constraints.audio.deviceId = { exact: deviceId };
    return constraints;
}

async function switchVoiceMic(deviceId) {
    if (!audioContext || !senderNode) return;
    let newStream;
    try {
        newStream = await navigator.mediaDevices.getUserMedia(buildVoiceMicConstraints(deviceId));
    } catch (e) {
        showBlahNotification("error:call.microphone");
        return;
    }
    if (micStream) micStream.getTracks().forEach(t => t.stop());
    micStream = newStream;
    if (micSourceNode) { try { micSourceNode.disconnect(); } catch (e) {} }
    micSourceNode = audioContext.createMediaStreamSource(micStream);
    micSourceNode.connect(senderNode);
}

// Output device selection only applies where the web layer owns the output.
// With the native Android routing the OS owns the call audio path entirely.
async function applyVoiceSpeakerSink() {
    if (getNativeVoiceRouting() || !voiceSettings.speakerId) return;
    try { if (audioContext && audioContext.setSinkId) await audioContext.setSinkId(voiceSettings.speakerId); } catch (e) {}
    try { if (voiceOutputAudio && voiceOutputAudio.setSinkId) await voiceOutputAudio.setSinkId(voiceSettings.speakerId); } catch (e) {}
}

let voiceConnectedAt = null;
let voiceTimerInterval = null;
let voicePingMs = null;

function formatVoiceDuration(ms) {
    let totalSec = Math.floor(ms / 1000);
    let h = Math.floor(totalSec / 3600);
    let m = Math.floor((totalSec % 3600) / 60);
    let s = totalSec % 60;
    let mm = String(m).padStart(2, "0"), ss = String(s).padStart(2, "0");
    return h > 0 ? `${h}:${mm}:${ss}` : `${m}:${ss}`;
}

function updateVoicePing() {
    let pingEl = document.getElementById("voice-ping");
    if (pingEl) pingEl.innerText = voicePingMs !== null ? `${voicePingMs} ms` : "";
}

function isMobileVoiceDevice() {
    return /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent) && !!window.RTCPeerConnection;
}

function getNativeVoiceRouting() {
    try {
        return window.Capacitor && window.Capacitor.Plugins && window.Capacitor.Plugins.VoiceRouting ? window.Capacitor.Plugins.VoiceRouting : null;
    } catch (e) {
        return null;
    }
}

function teardownVoiceLoopback() {
    if (voiceLoopWatchdog) { clearTimeout(voiceLoopWatchdog); voiceLoopWatchdog = null; }
    document.removeEventListener("click", voicePlayRetry, true);
    window.removeEventListener("voicemodechanged", voiceModeChangedHandler);
    if (voiceDeviceChangeHandler && navigator.mediaDevices && navigator.mediaDevices.removeEventListener) {
        navigator.mediaDevices.removeEventListener("devicechange", voiceDeviceChangeHandler);
    }
    voiceDeviceChangeHandler = null;
    clearTimeout(voiceDeviceChangeTimer);
    if (voiceLoopSendPc) { try { voiceLoopSendPc.close(); } catch (e) {} voiceLoopSendPc = null; }
    if (voiceLoopRecvPc) { try { voiceLoopRecvPc.close(); } catch (e) {} voiceLoopRecvPc = null; }
    if (voicePlayoutDest) { try { voicePlayoutDest.disconnect(); } catch (e) {} voicePlayoutDest = null; }
    if (voiceOutputAudio) {
        try { voiceOutputAudio.pause(); } catch (e) {}
        voiceOutputAudio.srcObject = null;
        voiceOutputAudio.remove();
        voiceOutputAudio = null;
    }
    voiceRemoteStream = null;
}

function voicePlayRetry() {
    if (voiceOutputAudio) voiceOutputAudio.play().catch(() => {});
}

function int16ToBase64(view) {
    let bin = '';
    const u8 = new Uint8Array(view.buffer, view.byteOffset, view.byteLength);
    const STEP = 8192;
    for (let i = 0; i < u8.length; i += STEP) {
        bin += String.fromCharCode.apply(null, u8.subarray(i, Math.min(i + STEP, u8.length)));
    }
    return btoa(bin);
}

function handlePcmChunk(ev) {
    const native = getNativeVoiceRouting();
    if (!native || !native.nativeAudioFeed || !ev.data) return;
    try {
        native.nativeAudioFeed({ data: int16ToBase64(new Int16Array(ev.data)) }).catch(() => {});
    } catch (e) {}
}

function stopNativePlayback() {
    const native = getNativeVoiceRouting();
    if (native && native.nativeAudioStop) native.nativeAudioStop().catch(() => {});
}

// Fired natively when Android reverted MODE_IN_COMMUNICATION and the plugin
// restored it - Chromium's playout track must be re-initialized afterwards.
function voiceModeChangedHandler() {
    console.debug("Voice: native mode restore detected, replugging playout");
    setTimeout(() => replugVoiceOutputElement(), 150);
    setTimeout(() => replugVoiceOutputElement(), 700);
}

function voicePlayoutOk() {
    let connected = voiceLoopRecvPc && voiceLoopRecvPc.connectionState === "connected";
    let playing = voiceOutputAudio && !voiceOutputAudio.paused;
    return !!connected && !!playing;
}

// Re-attaching the stream forces the browser audio stack to re-initialize its
// output track - needed after communication device changes on Android.
async function replugVoiceOutputElement() {
    if (!voiceOutputAudio || !voiceRemoteStream) return;
    console.debug("Voice: replugging WebRTC playout element");
    try { voiceOutputAudio.pause(); } catch (e) {}
    voiceOutputAudio.srcObject = null;
    voiceOutputAudio.srcObject = voiceRemoteStream;
    try { await voiceOutputAudio.play(); } catch (e) {}
    applyVoiceSpeakerSink();
}

function fallbackVoiceToMediaOutput() {
    if (!receiverNode || !audioContext || !voicePlayoutDest) return;
    console.warn("Voice: WebRTC playout unavailable, falling back to media output");
    teardownVoiceLoopback();
    try { receiverNode.disconnect(); } catch (e) {}
    try { receiverNode.connect(audioContext.destination); } catch (e) {}
}

function recoverVoiceLoopback() {
    if (!receiverNode || !audioContext || !voicePlayoutDest) return;
    const native = getNativeVoiceRouting();

    // First aid: re-plug the playout element (fixes stuck routes after device switches)
    replugVoiceOutputElement().then(() => {
        setTimeout(() => {
            if (!voicePlayoutDest || voicePlayoutOk()) return;
            if (native && voiceLoopRestarts < 2) {
                voiceLoopRestarts++;
                console.warn("Voice: restarting WebRTC loopback (attempt " + voiceLoopRestarts + ")");
                const wasSpeaker = isVoiceSpeakerMode;
                teardownVoiceLoopback();
                isVoiceSpeakerMode = wasSpeaker;
                setupVoiceOutput();
            } else {
                fallbackVoiceToMediaOutput();
            }
        }, 800);
    });
}

function setupVoiceOutput() {
    if (!audioContext || !receiverNode) return;
    try { receiverNode.disconnect(); } catch (e) {}
    if (screenReceiverNode) {
        try { screenReceiverNode.disconnect(); } catch (e) {}
        screenReceiverNode.connect(audioContext.destination);
    }

    const native = getNativeVoiceRouting();

    // App + native plugin: the mixed call audio is played by a native AudioTrack
    // (USAGE_VOICE_COMMUNICATION), so it follows the call volume slider and the
    // earpiece/speaker switch. Nothing is output through the WebAudio graph.
    // The receiver worklet forwards mixed PCM straight here (~20 ms packets).
    if (native && isMobileVoiceDevice()) {
        stopNativePlayback();
        receiverNode.port.onmessage = handlePcmChunk;
        if (native.nativeAudioStart) native.nativeAudioStart({ sampleRate: audioContext.sampleRate }).catch(() => {});
        return;
    }

    if (!isMobileVoiceDevice()) {
        receiverNode.connect(audioContext.destination);
        return;
    }

    // Browser-only speaker mode plays through plain media output.
    // With the native plugin present, routing stays on the call path
    // and the speaker switch is handled natively.
    if (isVoiceSpeakerMode) {
        receiverNode.connect(audioContext.destination);
        return;
    }

    voiceLoopRestarts = 0;
    teardownVoiceLoopback();
    voicePlayoutDest = audioContext.createMediaStreamDestination();
    receiverNode.connect(voicePlayoutDest);

    voiceLoopSendPc = new RTCPeerConnection();
    voiceLoopRecvPc = new RTCPeerConnection();
    voiceLoopSendPc.onicecandidate = e => { if (e.candidate) try { voiceLoopRecvPc.addIceCandidate(e.candidate); } catch (err) {} };
    voiceLoopRecvPc.onicecandidate = e => { if (e.candidate) try { voiceLoopSendPc.addIceCandidate(e.candidate); } catch (err) {} };
    voiceLoopRecvPc.onconnectionstatechange = () => {
        const st = voiceLoopRecvPc && voiceLoopRecvPc.connectionState;
        if (st === "failed") recoverVoiceLoopback();
    };
    voiceLoopRecvPc.ontrack = e => {
        voiceRemoteStream = e.streams[0];
        if (!voiceOutputAudio) {
            voiceOutputAudio = document.createElement("audio");
            voiceOutputAudio.autoplay = true;
            voiceOutputAudio.setAttribute("playsinline", "");
            document.body.appendChild(voiceOutputAudio);
        }
        voiceOutputAudio.srcObject = voiceRemoteStream;
        voiceOutputAudio.play().catch(() => {});
        applyVoiceSpeakerSink();
    };
    document.addEventListener("click", voicePlayRetry, true);
    window.addEventListener("voicemodechanged", voiceModeChangedHandler);
    if (navigator.mediaDevices && navigator.mediaDevices.addEventListener) {
        voiceDeviceChangeHandler = () => {
            clearTimeout(voiceDeviceChangeTimer);
            // Audio route changed (BT/headset/speaker) - re-init the playout track
            voiceDeviceChangeTimer = setTimeout(() => replugVoiceOutputElement(), 400);
        };
        navigator.mediaDevices.addEventListener("devicechange", voiceDeviceChangeHandler);
    }
    voiceLoopSendPc.addTrack(voicePlayoutDest.stream.getAudioTracks()[0], voicePlayoutDest.stream);
    voiceLoopSendPc.createOffer()
        .then(offer => voiceLoopSendPc.setLocalDescription(offer))
        .then(() => voiceLoopRecvPc.setRemoteDescription(voiceLoopSendPc.localDescription))
        .then(() => voiceLoopRecvPc.createAnswer())
        .then(answer => voiceLoopRecvPc.setLocalDescription(answer))
        .then(() => voiceLoopSendPc.setRemoteDescription(voiceLoopRecvPc.localDescription))
        .catch(() => {
            recoverVoiceLoopback();
        });

    // Safety net: verify the WebRTC playout actually produces sound and repair it if not
    if (voiceLoopWatchdog) clearTimeout(voiceLoopWatchdog);
    voiceLoopWatchdog = setTimeout(() => {
        voiceLoopWatchdog = null;
        if (!voicePlayoutDest) return;
        voicePlayRetry();
        setTimeout(() => {
            if (!voicePlayoutDest || voicePlayoutOk()) return;
            recoverVoiceLoopback();
        }, 600);
    }, 4000);
}

window.toggleVoiceSpeakerMode = async function() {
    isVoiceSpeakerMode = !isVoiceSpeakerMode;
    let btn = document.getElementById("voice-btn-speaker");
    if (btn) btn.classList.toggle("voice-btn-active", isVoiceSpeakerMode);

    const native = getNativeVoiceRouting();
    if (native && native.setSpeaker) {
        // Native routing keeps playback on the call volume stream - only the
        // physical output (earpiece <-> loudspeaker) changes, like a phone call.
        // The native AudioTrack follows the communication device automatically.
        try { await native.setSpeaker({ enabled: isVoiceSpeakerMode }); } catch (e) {}
        setTimeout(() => replugVoiceOutputElement(), 250);
        setTimeout(() => replugVoiceOutputElement(), 900);
        setTimeout(() => { if (voicePlayoutDest && !voicePlayoutOk()) recoverVoiceLoopback(); }, 1700);
        return;
    }

    if (!receiverNode) return;
    try { receiverNode.disconnect(); } catch (e) {}

    if (!isVoiceSpeakerMode && voicePlayoutDest) {
        receiverNode.connect(voicePlayoutDest);
        if (voiceOutputAudio) voiceOutputAudio.play().catch(() => {});
    } else {
        receiverNode.connect(audioContext.destination);
        if (voiceOutputAudio) { try { voiceOutputAudio.pause(); } catch (e) {} }
    }
};

function setVoiceStatus(state) {
    let el = document.getElementById("voice-status");
    if (!el) return;
    el.classList.toggle("connected", state === "connected");
    el.classList.toggle("connecting", state === "connecting");
    el.classList.toggle("disconnected", state === "disconnected");

    let textEl = el.querySelector(".voice-status-text");
    if (state === "connected") {
        if (voiceConnectedAt === null) voiceConnectedAt = Date.now();
        if (!voiceTimerInterval) {
            voiceTimerInterval = setInterval(() => {
                let tickEl = document.querySelector("#voice-status .voice-status-text");
                if (tickEl && voiceConnectedAt !== null) tickEl.innerText = formatVoiceDuration(Date.now() - voiceConnectedAt);
            }, 1000);
        }
        if (textEl) textEl.innerText = formatVoiceDuration(Date.now() - voiceConnectedAt);
        updateVoicePing();
    } else {
        if (voiceTimerInterval) { clearInterval(voiceTimerInterval); voiceTimerInterval = null; }
        voiceConnectedAt = null;
        if (state === "disconnected") { voicePingMs = null; updateVoicePing(); }
        if (textEl) textEl.innerText = processBlah(state === "disconnected" ? "status.voice.disconnected" : "status.voice.connecting");
    }
}

function setTileSpeaking(clientId, speaking, streamDecoderId = null) {
    let tile = document.getElementById(`voice-tile-${clientId}`);
    if (streamDecoderId) {
        let streamTile = document.getElementById(`voice-tile-stream-${streamDecoderId}`);
        if (streamTile) tile = streamTile;
    }
    if (!tile) return;

    if (tile._speakingTimer) {
        clearTimeout(tile._speakingTimer);
        tile._speakingTimer = null;
    }

    if (speaking) {
        tile.classList.add("speaking");
        tile._speakingTimer = setTimeout(() => {
            tile._speakingTimer = null;
            tile.classList.remove("speaking");
        }, SPEAKING_HANGOVER_MS);
    } else {
        tile.classList.remove("speaking");
    }
}

function clearAllSpeaking() {
    for (const el of document.querySelectorAll(".voice-tile.speaking")) {
        if (el._speakingTimer) { clearTimeout(el._speakingTimer); el._speakingTimer = null; }
        el.classList.remove("speaking");
    }
}

setInterval(() => {
    const now = Date.now();
    let changed = false;
    for (const [decoderId, data] of Object.entries(remoteVideos)) {
        if (now - data.lastUpdate > 3000) {
            if (data.decoder) { try { data.decoder.close(); } catch (e) {} }
            if (videoDecryptChains[decoderId]) videoDecryptChains[decoderId].clear();
            delete remoteVideos[decoderId];
            delete videoDecryptChains[decoderId];
            changed = true;
        }
    }
    // Stale remote audio streams - quiet users send nothing, but their entry
    // is recreated on their very next packet, so pruning is always safe.
    for (const aid of Object.keys(remoteAudio)) {
        if (now - remoteAudio[aid].lastUpdate > 6000) {
            const rn = aid.endsWith("_screen") ? screenReceiverNode : receiverNode;
            if (rn) rn.port.postMessage({action: 'remove', clientId: aid});
            if (audioDecryptChains[aid]) audioDecryptChains[aid].clear();
            delete remoteAudio[aid];
            delete audioDecryptChains[aid];
        }
    }
    // Ghost peers: still on the room roster but totally silent (pings count as
    // life) - drop them locally until the server or the peer proves otherwise.
    let ghostRemoved = false;
    for (const u of voiceActiveUsers) {
        if (u === String(window.id)) continue;
        if (!peerLastSeen[u]) { peerLastSeen[u] = now; continue; }
        if (now - peerLastSeen[u] > VOICE_PEER_TIMEOUT_MS && !deadPeers.has(u)) {
            deadPeers.add(u);
            cleanupPeerMedia(u);
            ghostRemoved = true;
        }
    }
    if (ghostRemoved) {
        voiceActiveUsers = voiceActiveUsers.filter(u => !deadPeers.has(u));
        updateVoiceUIUsers();
    }
    // Half-open socket watchdog + backgrounded-tab audio recovery.
    if (currentVoiceWs && currentVoiceWs.readyState === WebSocket.OPEN) {
        const others = voiceActiveUsers.filter(u => u !== String(window.id)).length;
        // Alive peers ping every 2s regardless of mute, so total inbound
        // silence while others are present means the socket is dead.
        if (others > 0 && now - lastVoiceServerPacketAt > VOICE_SERVER_TIMEOUT_MS) {
            console.warn("Voice: no inbound traffic, forcing reconnect");
            try { currentVoiceWs.close(); } catch (e) {}
        } else if (audioContext && audioContext.state === 'suspended') {
            audioContext.resume().catch(() => {});
        }
    }
    if (changed) updateVoiceUIUsers();
}, 2000);

const voiceWorkletCode = `
class AudioProcessor extends AudioWorkletProcessor {

    constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; }
    process(inputs) {
        const input = inputs[0][0];
        if (!input) return true;
        let sumSquares = 0;
        for (let i = 0; i < input.length; i++) {
            let s = Math.max(-1, Math.min(1, input[i]));
            sumSquares += s * s;
            this.buffer[this.pointer++] = s < 0 ? s * 0x8000 : s * 0x7FFF;
            if (this.pointer >= 1024) {
                const rms = Math.sqrt(sumSquares / 1024);
                const db = 20 * Math.log10(rms || 0.0001);
                this.port.postMessage({ audioData: this.buffer.buffer, db: db },[this.buffer.buffer]);
                this.buffer = new Int16Array(1024);
                this.pointer = 0;
                sumSquares = 0;
            }
        } return true;
    }
}
class AudioReceiver extends AudioWorkletProcessor {
    // Jitter buffer targets in samples (@48 kHz):
    //   PREBUF_START  - initial prebuffer before first playback (~43 ms)
    //   PREBUF_RESUME - re-prebuffer after a starvation event (~32 ms)
    //   HARD_LIMIT    - burst ceiling (~128 ms): snap back to target immediately
    // Backlog slightly above target is drained by a gentle trim (1 sample per
    // quantum) instead of letting latency creep up to the hard limit.
    constructor(options) {
        super();
        this.users = {};
        this.volumes = {};
        const opts = (options && options.processorOptions) || {};
        this.forward = !!opts.forward;
        this.acc = new Int16Array(960); // ~20 ms @ 48 kHz
        this.accLen = 0;

        this.port.onmessage = (e) => {
            if (e.data.action === 'clear') { this.users = {}; this.volumes = {}; return; }
            if (e.data.action === 'setVolume') { this.volumes[e.data.clientId] = e.data.volume; return; }
            if (e.data.action === 'remove') { delete this.users[e.data.clientId]; return; }

            const { clientId, audioData } = e.data;
            if (!this.users[clientId]) this.users[clientId] = { buffer: new Int16Array(65536), readPtr: 0, writePtr: 0, buffering: true, started: false };
            const user = this.users[clientId];
            const intData = new Int16Array(audioData);
            for (let i = 0; i < intData.length; i++) {
                user.buffer[user.writePtr] = intData[i];
                user.writePtr = (user.writePtr + 1) % 65536;
            }
        };
    }
    process(inputs, outputs) {
        const output = outputs[0][0];
        if (!output) return true;
        output.fill(0);
        for (const id in this.users) {
            const user = this.users[id];
            let available = (user.writePtr - user.readPtr + 65536) % 65536;
            if (user.buffering && available >= (user.started ? 1536 : 2048)) { user.buffering = false; user.started = true; }

            if (!user.buffering) {
                if (available < output.length) { user.buffering = true; }
                else {
                    if (available > 6144) user.readPtr = (user.writePtr - 2048 + 65536) % 65536;
                    else if (available > 2049) user.readPtr = (user.readPtr + 1) % 65536;
                    let vol = this.volumes[id] !== undefined ? this.volumes[id] : 1.0;
                    for (let i = 0; i < output.length; i++) {
                        output[i] += (user.buffer[user.readPtr] / 32768) * vol;
                        user.readPtr = (user.readPtr + 1) % 65536;
                    }
                }
            }
        }
        if (this.forward && this.port) {
            for (let i = 0; i < output.length; i++) {
                const s = Math.max(-1, Math.min(1, output[i]));
                this.acc[this.accLen++] = s < 0 ? s * 0x8000 : s * 0x7FFF;
                if (this.accLen >= this.acc.length) {
                    this.port.postMessage(this.acc.buffer, [this.acc.buffer]);
                    this.acc = new Int16Array(960);
                    this.accLen = 0;
                }
            }
        }
        return true;
    }
}
registerProcessor('audio-sender', AudioProcessor);
registerProcessor('audio-receiver', AudioReceiver);`;

class TaskQueue {
    constructor() { this.queue = []; this.isProcessing = false; }
    enqueue(task) { this.queue.push(task); this.processNext(); }
    async processNext() {
        if (this.isProcessing || this.queue.length === 0) return;
        this.isProcessing = true;
        try { await this.queue.shift()(); } catch (e) { }
        this.isProcessing = false;
        this.processNext();
    }
    clear() { this.queue = []; }
}

async function initiateVoiceCall(roomId = null) {
    if (currentVoiceWs) {
        showBlahNotification("error:already.in.call");
        return;
    }
    currentVoiceCallType = window.currentRoomType === "groups" ? "groups" : "dms";
    currentVoiceCallId = roomId || window.currentDmId;
    
    showAction("action.call.init", "callinit");
    let res = await fetchEncrypted("room/voice/join", JSON.stringify({
        string1: currentVoiceCallType,
        string2: currentVoiceCallId
    }));
    clearAction("callinit");
    
    if (res.startsWith("success:")) {
        let bestIp = res.split("success:")[1];
        if (!bestIp.startsWith("ws://") && !bestIp.startsWith("wss://")) {
            bestIp = bestIp.includes("localhost") || bestIp.includes("127.0.0.1") ? "ws://" + bestIp : "wss://" + bestIp;
        }
        await startVoiceSession(bestIp);
    } else {
        showBlahNotification(res);
    }
}

async function startVoiceSession(serverUrl) {
    lastVoiceServerUrl = serverUrl;
    showVoiceUI();
    updateVoiceUIUsers();
    setVoiceStatus("connecting");
    updateVoiceChatTitle();
    
    try {
        const wsUrl = new URL(serverUrl);
        if (!wsUrl.pathname.endsWith("/ws")) {
            wsUrl.pathname = (wsUrl.pathname === "/" ? "" : wsUrl.pathname) + "/ws";
        }
        wsUrl.searchParams.set("room", currentVoiceCallId);
        wsUrl.searchParams.set("userId", window.id);
        wsUrl.searchParams.set("secret", "none"); 
        
        currentVoiceWs = new WebSocket(wsUrl.toString());
        currentVoiceWs.binaryType = 'arraybuffer';
        
        currentVoiceWs.onopen = async () => {
            setVoiceStatus("connected");
            let btn = document.getElementById("voice-btn-mic");
            if (btn) {
                if (isMicMuted) btn.classList.add("voice-btn-danger");
                else btn.classList.remove("voice-btn-danger");
            }
            
            const fetchUsers = async () => {
                if (!currentVoiceWs || currentVoiceWs.readyState !== WebSocket.OPEN || !currentVoiceCallId) return;
                try {
                    const baseUrl = currentVoiceWs.url.split('/ws')[0];
                    const httpUrl = baseUrl.replace('ws:', 'http:').replace('wss:', 'https:');
                    const t0 = performance.now();
                    const res = await fetch(`${httpUrl}/room/users?room=${currentVoiceCallId}`);
                    const usersRaw = await res.json();
                    voicePingMs = Math.round(performance.now() - t0);
                    updateVoicePing();
                    const rawUsers = usersRaw.map(u => String(u));
                    // Peers we locally declared dead stay hidden until either
                    // they send anything again or the server drops them.
                    for (const gone of [...deadPeers]) {
                        if (!rawUsers.includes(gone)) deadPeers.delete(gone);
                    }
                    const users = rawUsers.filter(u => !deadPeers.has(u));
                    let changed = (users.length !== voiceActiveUsers.length);
                    for(let u of users) if(!voiceActiveUsers.includes(u)) changed = true;
                    if(changed) {
                        voiceActiveUsers = users;
                        updateVoiceUIUsers();
                    }
                } catch (e) {}
            };
            fetchUsers();
            voiceWsHeartbeat = setInterval(fetchUsers, 5000);

            voiceReconnectAttempts = 0;
            lastVoiceServerPacketAt = Date.now();
            if (voicePingTimer) clearInterval(voicePingTimer);
            voicePingTimer = setInterval(sendVoicePing, VOICE_PING_INTERVAL_MS);

            // Reconnects reuse the live mic stream - only capture a new one
            // when the previous is gone (full teardown or track ended).
            if (!micStream || micStream.getTracks().some(t => t.readyState !== 'live')) {
                micStream = await navigator.mediaDevices.getUserMedia(buildVoiceMicConstraints(voiceSettings.micId));
                if (micSourceNode) { try { micSourceNode.disconnect(); } catch (e) {} micSourceNode = null; }
            }

            const nativeRouting = getNativeVoiceRouting();
            if (nativeRouting && nativeRouting.startCall) {
                try { await nativeRouting.startCall(); } catch (e) {}
            }

            if (!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)({sampleRate: 48000});
            if (!isAudioWorkletLoaded) {
                await audioContext.audioWorklet.addModule(URL.createObjectURL(new Blob([voiceWorkletCode], {type: 'application/javascript'})));
                senderNode = new AudioWorkletNode(audioContext, 'audio-sender');
                const forwardPcm = !!(getNativeVoiceRouting() && isMobileVoiceDevice());
                receiverNode = new AudioWorkletNode(audioContext, 'audio-receiver', {processorOptions: {forward: forwardPcm}});
                screenReceiverNode = new AudioWorkletNode(audioContext, 'audio-receiver');
                isAudioWorkletLoaded = true;
            }
            if (audioContext.state === 'suspended') await audioContext.resume();
            applyVoiceSpeakerSink();
            setupVoiceOutput();
            
            if (micSourceNode) {
                try { micSourceNode.disconnect(); } catch (e) {}
                micSourceNode = null;
            }
            micSourceNode = audioContext.createMediaStreamSource(micStream);
            micSourceNode.connect(senderNode);
            
            let vadHangover = 0;
            senderNode.port.onmessage = async (e) => {
                if (currentVoiceWs.readyState !== WebSocket.OPEN) return;
                // Backpressure valve: when the socket is congested, drop mic
                // frames instead of queueing them - queued audio would arrive
                // minutes late and drown the connection for every stream.
                if (currentVoiceWs.bufferedAmount > 256 * 1024) {
                    vadHangover = 0;
                    return;
                }
                const {audioData, db} = e.data;
                const sensitivity = voiceSettings.sensitivity;
                const percent = Math.max(0, Math.min(100, (db + 80) / 80 * 100));
                
                let micLevelBar = document.getElementById("voice-mic-level");
                let vdsLevelFill = document.getElementById("vds-sens-fill");
                if (micLevelBar) micLevelBar.style.width = percent + '%';
                if (vdsLevelFill) vdsLevelFill.style.width = percent + '%';
                
                if (db >= sensitivity) vadHangover = 75;
                let isSpeaking = vadHangover > 0 && !isMicMuted;
                setTileSpeaking(String(window.id), isSpeaking);

                if (vadHangover > 0 && !isMicMuted) {
                    vadHangover--;
                    if (micLevelBar) micLevelBar.style.backgroundColor = 'var(--big-green)';
                    if (vdsLevelFill) vdsLevelFill.style.backgroundColor = 'var(--big-green)';
                    
                    if (!voiceAesCryptoKey) return;
                    const iv = crypto.getRandomValues(new Uint8Array(12));
                    const cipher = await crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, audioData);
                    const payload = new Uint8Array(14 + cipher.byteLength);
                    payload[0] = 0; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
                    currentVoiceWs.send(payload.buffer);
                } else {
                    if (micLevelBar) micLevelBar.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
                    if (vdsLevelFill) vdsLevelFill.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
                }
            };
        };
        
        currentVoiceWs.onmessage = async (e) => {
            const arrayBuffer = e.data;
            const view = new DataView(arrayBuffer);
            let clientId = view.getBigUint64(0, true).toString();

            // Any inbound frame proves this peer (and the socket) are alive.
            lastVoiceServerPacketAt = Date.now();
            peerLastSeen[clientId] = lastVoiceServerPacketAt;
            if (deadPeers.has(clientId)) deadPeers.delete(clientId);

            const type = view.getUint8(8);
            if (type === 5) return; // liveness ping - presence already recorded
            
            if (!voiceActiveUsers.includes(clientId) && clientId !== String(window.id)) {
                const baseUrl = currentVoiceWs.url.split('/ws')[0];
                const httpUrl = baseUrl.replace('ws:', 'http:').replace('wss:', 'https:');
                fetch(`${httpUrl}/room/users?room=${currentVoiceCallId}`).then(res => res.json()).then(usersRaw => {
                    voiceActiveUsers = usersRaw.map(u => String(u)).filter(u => !deadPeers.has(u));
                    updateVoiceUIUsers();
                }).catch(()=>{});
            }
            
            const isKeyFrame = view.getUint8(9) === 1;
            const iv = new Uint8Array(arrayBuffer, 10, 12);
            const ciphertext = new Uint8Array(arrayBuffer, 22);
            
            if (!voiceAesCryptoKey) return; 
            
            if (type === 0 || type === 4) {
                const isScreenAudio = (type === 4);
                const audioId = isScreenAudio ? `${clientId}_screen` : clientId;
                if (!remoteAudio[audioId]) remoteAudio[audioId] = { lastUpdate: Date.now() };
                remoteAudio[audioId].lastUpdate = Date.now();
                
                if (!audioDecryptChains[audioId]) audioDecryptChains[audioId] = new TaskQueue();

                const targetReceiver = isScreenAudio ? screenReceiverNode : receiverNode;
                audioDecryptChains[audioId].enqueue(async () => {
                    try {
                        const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
                        if(targetReceiver) targetReceiver.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]);

                        setTileSpeaking(clientId, true, isScreenAudio ? `${clientId}-2` : null);
                    } catch (err) {}
                });
            } else if (type === 1 || type === 2) {
                const decoderId = `${clientId}-${type}`;
                if (!videoDecryptChains[decoderId]) videoDecryptChains[decoderId] = new TaskQueue();
                
                videoDecryptChains[decoderId].enqueue(async () => {
                    try {
                        const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
                        
                        if (!remoteVideos[decoderId]) {
                            const canvas = document.createElement('canvas');
                            remoteVideos[decoderId] = {
                                lastUpdate: Date.now(),
                                hasKeyFrame: false,
                                decoder: null,
                                canvas: canvas
                            };
                            updateVoiceUIUsers();
                        }
                        
                        const streamData = remoteVideos[decoderId];
                        streamData.lastUpdate = Date.now();
                        
                        if (!streamData.decoder) {
                            if (!isKeyFrame) return; 
                            const canvas = streamData.canvas;
                            const ctx = canvas.getContext('2d');
                            streamData.decoder = new VideoDecoder({
                                output: (frame) => {
                                    canvas.width = frame.displayWidth;
                                    canvas.height = frame.displayHeight;
                                    ctx.drawImage(frame, 0, 0, canvas.width, canvas.height);
                                    frame.close();
                                },
                                error: e => {
                                    if (remoteVideos[decoderId]) {
                                        try { remoteVideos[decoderId].decoder.close(); } catch(err) {}
                                        remoteVideos[decoderId].decoder = null;
                                        remoteVideos[decoderId].hasKeyFrame = false;
                                    }
                                }
                            });
                            streamData.decoder.configure({codec: 'av01.0.04M.08'});
                            streamData.hasKeyFrame = true;
                        }
                        
                        if (!streamData.hasKeyFrame) {
                            if (isKeyFrame) streamData.hasKeyFrame = true;
                            else return;
                        }
                        
                        const chunk = new EncodedVideoChunk({
                            type: isKeyFrame ? 'key' : 'delta',
                            timestamp: Math.trunc(performance.now() * 1000),
                            data: decryptedBuffer
                        });
                        
                        try {
                            streamData.decoder.decode(chunk);
                        } catch(err) {
                            try { streamData.decoder.close(); } catch(e){}
                            streamData.decoder = null;
                            streamData.hasKeyFrame = false;
                        }
                    } catch (err) {}
                });
            } else if (type === 3) {
                crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext).then(decrypted => {
                    const stoppedTypeId = new Uint8Array(decrypted)[0];
                    if (stoppedTypeId === 4) {
                        const audioId = `${clientId}_screen`;
                        if (remoteAudio[audioId]) {
                            if(audioDecryptChains[audioId]) audioDecryptChains[audioId].clear();
                            delete audioDecryptChains[audioId]; delete remoteAudio[audioId];
                            if(screenReceiverNode) screenReceiverNode.port.postMessage({ action: 'remove', clientId: audioId });
                        }
                    } else {
                        const decoderId = `${clientId}-${stoppedTypeId}`;
                        if (remoteVideos[decoderId]) {
                            try { if(remoteVideos[decoderId].decoder) remoteVideos[decoderId].decoder.close(); } catch (e) {}
                            if(videoDecryptChains[decoderId]) videoDecryptChains[decoderId].clear();
                            delete remoteVideos[decoderId]; delete videoDecryptChains[decoderId];
                            updateVoiceUIUsers();
                        }
                    }
                 }).catch(() => {});
            }
        };
        
        currentVoiceWs.onclose = (ev) => {
            // Server closes with reason "Kicked" when another connection took
            // our userId slot (second device/tab). Reconnecting would start an
            // infinite kick-war - give up cleanly instead. Any other close
            // (network drop, watchdog) is a reconnect candidate.
            if (ev && ev.reason === "Kicked") {
                endVoiceSession();
                return;
            }
            scheduleVoiceReconnect();
        };
        
    } catch(err) {
        console.error(err);
        showBlahNotification("error:call.connect.failed");
        endVoiceSession();
    }
}

function handleCallUpdate(data) {
    let parts = data.split(":");
    let roomId = parts[1];
    let state = [];
    if(parts.slice(2).join(":") !== "") {
        let stateRaw = JSON.parse(parts.slice(2).join(":"));
        state = stateRaw.map(u => String(u)).filter(u => !deadPeers.has(u));
    }
    voiceActiveUsers = state;
    
    if (currentVoiceCallId === roomId) {
        let myIdStr = String(window.id);
        if (!voiceAesKeyBytes && state.length === 1 && state[0] === myIdStr) {
            voiceAesKeyBytes = crypto.getRandomValues(new Uint8Array(32));
            crypto.subtle.importKey("raw", voiceAesKeyBytes, {name: "AES-GCM"}, false, ["encrypt", "decrypt"])
                .then(k => voiceAesCryptoKey = k);
        }
        if (voiceAesKeyBytes) {
            for (let u of state) {
                if (u !== myIdStr) sendVoiceSignalToUser(u, roomId);
            }
        }
        updateVoiceUIUsers();
        
        for (let u in remoteAudio) {
            let pureU = u.replace("_screen", "");
            if (!voiceActiveUsers.includes(pureU) && pureU !== myIdStr) {
                if (audioDecoders[u]) try { audioDecoders[u].close(); } catch(e){}
                delete audioDecoders[u];
                delete remoteAudio[u];
                const rn = u.endsWith("_screen") ? screenReceiverNode : receiverNode;
                if(rn) rn.port.postMessage({ action: 'remove', clientId: u });
            }
        }
        
        for (let decoderId in remoteVideos) {
            let pureU = decoderId.split('-')[0];
            if (!voiceActiveUsers.includes(pureU) && pureU !== myIdStr) {
                if (remoteVideos[decoderId].decoder) { try { remoteVideos[decoderId].decoder.close(); } catch(e){} }
                if (videoDecryptChains[decoderId]) videoDecryptChains[decoderId].clear();
                delete remoteVideos[decoderId];
                delete videoDecryptChains[decoderId];
                updateVoiceUIUsers();
            }
        }
    } else if (state.length > 0 && !state.includes(String(window.id))) {
        // Someone is in a call, and we are not. Show incoming call banner if it's the current room.
        if (window.currentDmId === roomId) {
            showIncomingCallUI(roomId);
        }
    } else if (state.length === 0) {
        dismissIncomingCall();
    }
}

async function resolveCallerInfo(roomId) {
    if (window.fetchEncrypted) {
        try {
            let infoPayload = await fetchEncrypted("group/info", roomId);
            if (infoPayload && infoPayload.startsWith("{")) {
                let info = JSON.parse(infoPayload);
                if (info.string2) {
                    let pfpUrl = null;
                    if (window.getGroupAvatarUrl) {
                        try { pfpUrl = await getGroupAvatarUrl(roomId, info.string2); } catch (e) {}
                    }
                    return { name: info.string2, pfpUrl };
                }
            }
        } catch (e) {}
    }

    let targetId = String(roomId);
    let parts = targetId.split('_');
    let myId = `${window.id};${window.host}`;
    if (parts.length === 2 && (parts[0] === myId || parts[1] === myId)) {
        targetId = parts[0] === myId ? parts[1] : parts[0];
    }

    let name = window.dmUsernameCache ? window.dmUsernameCache[targetId] : null;
    if (!name && window.fetchAsync) {
        try {
            let fetched = await window.fetchAsync(`${window.url}/idtoname?id=${targetId}`);
            if (fetched && !fetched.startsWith("error:")) {
                name = fetched;
                if (window.dmUsernameCache) window.dmUsernameCache[targetId] = fetched;
            }
        } catch (e) {}
    }

    let pfpUrl = window.dmPfpCache ? window.dmPfpCache[targetId] : null;
    if (!pfpUrl && window.getAvatarUrl) {
        try { pfpUrl = await window.getAvatarUrl(targetId, name || "User"); } catch (e) {}
        if (pfpUrl && window.dmPfpCache) window.dmPfpCache[targetId] = pfpUrl;
    }
    return { name: (name ? name.split(':')[0] : null) || processBlah("title.unknown"), pfpUrl };
}

function showIncomingCallUI(roomId) {
    if (document.getElementById("incoming-call-popup") || currentVoiceWs) return;

    let cachedName = window.dmUsernameCache ? window.dmUsernameCache[roomId] : null;
    if (cachedName && cachedName.includes(':')) cachedName = cachedName.split(':')[0];
    let cachedPfp = window.dmPfpCache ? window.dmPfpCache[roomId] : null;

    let incomingUi = document.createElement("div");
    incomingUi.id = "incoming-call-popup";
    incomingUi.innerHTML = `
        <img class="incoming-call-avatar" src="${cachedPfp || "assets/default_avatar.png"}" alt="">
        <div class="incoming-call-info">
            <span class="incoming-call-name">${cachedName || "..."}</span>
            <span class="incoming-call-subtitle">${processBlah("title.incoming.call")} · ${processBlah(`:desc.call.in.chat:${voiceActiveUsers.length}`)}</span>
        </div>
        <div class="incoming-call-actions">
            <button class="voice-call-btn accept" onclick="joinIncomingCall('${roomId}')">
                ${ICONS.call({width: "1rem", height: "1rem"})} ${processBlah("action.call.join")}
            </button>
            <button class="voice-call-btn decline" onclick="dismissIncomingCall()">
                ${ICONS.close({width: "1rem", height: "1rem"})} ${processBlah("action.call.decline")}
            </button>
        </div>
    `;
    document.body.appendChild(incomingUi);
    requestAnimationFrame(() => {
        requestAnimationFrame(() => incomingUi.classList.add("show"));
    });

    resolveCallerInfo(roomId).then(({name, pfpUrl}) => {
        if (!document.body.contains(incomingUi)) return;
        let nameEl = incomingUi.querySelector(".incoming-call-name");
        let avatarEl = incomingUi.querySelector(".incoming-call-avatar");
        if (nameEl) nameEl.innerText = name;
        if (avatarEl && pfpUrl) avatarEl.src = pfpUrl;
    });
}

function dismissIncomingCall() {
    let el = document.getElementById("incoming-call-popup");
    if (!el || el.classList.contains("hide")) return;
    el.classList.remove("show");
    el.classList.add("hide");
    setTimeout(() => el.remove(), 300);
}

function joinIncomingCall(roomId) {
    dismissIncomingCall();
    initiateVoiceCall(roomId);
}

async function sendVoiceSignalToUser(targetUserId, roomId) {
    try {
        let publicKeysRaw = await fetchAsync(`${url}/user/key/getpublic?id=${targetUserId}`);
        let publicKeys = JSON.parse(publicKeysRaw);
        let hybrid = await deriveHybridKeyToUser(publicKeys);
        
        let encForMember = await encryptAesGcmToBase64(uint8ToBase64(voiceAesKeyBytes), hybrid.aesKeyBytes);
        let setupPayloadJson = JSON.stringify({
            v: 1,
            ctMlKem: hybrid.ciphertextMlKemBase64,
            enc: encForMember
        });
        
        let payload = JSON.stringify({
            string1: currentVoiceCallType,
            string2: roomId,
            string3: JSON.stringify({ to: targetUserId, from: window.id, data: setupPayloadJson })
        });
        await fetchEncrypted("room/signal", payload);
    } catch(e) {
        console.error("Failed to send voice signal", e);
    }
}

async function handleRoomSignal(data) {
    let parts = data.split(":");
    let roomId = parts[1];
    let signalStr = parts.slice(2).join(":");
    let signalObj = JSON.parse(signalStr);
    
    if (String(signalObj.to) === String(window.id) && roomId === currentVoiceCallId && !voiceAesKeyBytes) {
        try {
            let setupData = JSON.parse(signalObj.data);
            let publicKeysRaw = await fetchAsync(`${url}/user/key/getpublic?id=${signalObj.from}`); 
            let otherPublicKeysObj = JSON.parse(publicKeysRaw);
            let aesKeyBytes = await deriveHybridKeyFromSetup(otherPublicKeysObj, setupData.ctMlKem);
            let decRoomKeyB64 = await decryptAesGcmFromBase64(setupData.enc, aesKeyBytes);
            voiceAesKeyBytes = base64ToUint8(decRoomKeyB64);
            voiceAesCryptoKey = await crypto.subtle.importKey("raw", voiceAesKeyBytes, {name: "AES-GCM"}, false, ["encrypt", "decrypt"]);
        } catch(e) {
            console.error("Signal decryption failed", e);
        }
    }
}

async function resolveVoiceChatTitle() {
    try {
        if (currentVoiceCallType === 'groups') {
            if (!currentVoiceCallId || !window.fetchEncrypted) return null;
            let infoPayload = await fetchEncrypted("group/info", currentVoiceCallId);
            if (infoPayload && infoPayload.startsWith("{")) {
                return JSON.parse(infoPayload).string2 || null;
            }
            return null;
        }
        if (!currentVoiceCallId) return null;
        let parts = String(currentVoiceCallId).split('_');
        let myId = `${window.id};${window.host}`;
        let targetId = parts[0] === myId ? parts[1] : parts[0];
        if (!targetId) return null;
        let name = window.dmUsernameCache ? window.dmUsernameCache[targetId] : null;
        if (!name && window.fetchAsync) {
            name = await window.fetchAsync(`${window.url}/idtoname?id=${targetId}`);
            if (name && !name.startsWith("error:") && window.dmUsernameCache) window.dmUsernameCache[targetId] = name;
        }
        if (!name || name.startsWith("error:")) return null;
        return name.split(':')[0];
    } catch (e) {
        return null;
    }
}

async function updateVoiceChatTitle() {
    let name = await resolveVoiceChatTitle();
    let el = document.querySelector("#voice-header .voice-title span");
    if (el && name) el.innerText = name;
}

// ===== In-call voice/device settings popup =====
let voiceDevicePopupEl = null;
let voiceLabelProbed = { mic: false, cam: false };

function hideVoiceDeviceSettings() {
    if (!voiceDevicePopupEl) return;
    closeOpenVoiceDropdown();
    document.removeEventListener('click', closeVoiceDeviceSettingsOnOutsideClick);
    let el = voiceDevicePopupEl;
    voiceDevicePopupEl = null;
    el.classList.remove('show');
    const settingsBtn = document.getElementById('voice-btn-settings');
    if (settingsBtn) settingsBtn.classList.remove('active');
    setTimeout(() => el.remove(), 250);
}

function closeVoiceDeviceSettingsOnOutsideClick(ev) {
    if (!voiceDevicePopupEl) return;
    const t = ev.target;
    if (voiceDevicePopupEl.contains(t)) return;
    // Clicks in the floating dropdown layer or its anchor keep the popup open.
    if (openVoiceDropdown && (openVoiceDropdown.dd.contains(t) || openVoiceDropdown.anchor.contains(t))) return;
    hideVoiceDeviceSettings();
}

function categorizeVoiceDevices(devices) {
    const name = (list, fallbackBase) => list.map((d, i) => ({ deviceId: d.deviceId, label: d.label || `${fallbackBase} ${i + 1}` }));
    return {
        mics: name(devices.filter(d => d.kind === 'audioinput'), 'Microphone'),
        cams: name(devices.filter(d => d.kind === 'videoinput'), 'Camera'),
        speakers: name(devices.filter(d => d.kind === 'audiooutput'), 'Speaker')
    };
}

// Fast - safe to call on every popup open, blocks the UI for milliseconds.
async function enumerateVoiceDevices() {
    try {
        return categorizeVoiceDevices(await navigator.mediaDevices.enumerateDevices());
    } catch (e) {
        return { mics: [], cams: [], speakers: [] };
    }
}

// Labels are only exposed after permission was granted at least once. Probes
// (a short getUserMedia per kind) can take seconds - callers must render the
// popup first and only refresh with this afterwards.
async function ensureVoiceDeviceLabels() {
    let devices = [];
    try { devices = await navigator.mediaDevices.enumerateDevices(); } catch (e) { return null; }

    const micUnlabeled = devices.some(d => d.kind === 'audioinput' && !d.label);
    const camUnlabeled = devices.some(d => d.kind === 'videoinput' && !d.label);
    let probed = false;

    if (micUnlabeled && !voiceLabelProbed.mic) {
        voiceLabelProbed.mic = true;
        probed = true;
        try { const t = await navigator.mediaDevices.getUserMedia({ audio: true }); t.getTracks().forEach(t2 => t2.stop()); } catch (e) {}
    }
    if (camUnlabeled && !voiceLabelProbed.cam) {
        voiceLabelProbed.cam = true;
        probed = true;
        try { const t = await navigator.mediaDevices.getUserMedia({ video: true }); t.getTracks().forEach(t2 => t2.stop()); } catch (e) {}
    }

    return probed ? enumerateVoiceDevices() : null;
}

function restartVoiceCamIfActive() {
    if (!camControl) return;
    camControl.stop();
    // stop() is async (it releases the camera after awaits) - poll until the
    // control is actually gone before reopening, otherwise Android's camera
    // HAL is still busy and getUserMedia fails with NotReadableError.
    const attempt = (tries) => {
        setTimeout(() => {
            if (!currentVoiceWs) return;
            if (camControl) { if (tries < 20) attempt(tries + 1); return; }
            toggleVoiceCam();
        }, 300);
    };
    attempt(0);
}

// Selects render their option list as a fixed-position layer attached to
// <body> (portal) so it can escape the settings popup bounds and is never
// clipped by the scrolling popup body or distorted by its transform.
let openVoiceDropdown = null;

const voiceDropdownOutsideCloser = (ev) => {
    if (!openVoiceDropdown) return;
    const t = ev.target;
    if (openVoiceDropdown.dd.contains(t) || openVoiceDropdown.anchor.contains(t)) return;
    closeOpenVoiceDropdown();
};

function closeOpenVoiceDropdown() {
    const cur = openVoiceDropdown;
    if (!cur) return;
    openVoiceDropdown = null;
    cur.dd.classList.remove('vds-open');
    cur.anchor.classList.remove('open');
    setTimeout(() => cur.dd.remove(), 220);
    document.removeEventListener('click', voiceDropdownOutsideCloser, true);
    window.removeEventListener('resize', closeOpenVoiceDropdown);
    const bodyEl = document.getElementById('vds-body');
    if (bodyEl) bodyEl.removeEventListener('scroll', closeOpenVoiceDropdown);
}

function openVoiceFloatingDropdown(anchor, dd) {
    closeOpenVoiceDropdown();
    document.body.appendChild(dd);

    const margin = 8;
    const rect = anchor.getBoundingClientRect();
    dd.style.width = 'auto';
    dd.style.minWidth = rect.width + 'px';
    dd.style.left = Math.min(Math.max(rect.left, margin), Math.max(margin, window.innerWidth - rect.width - margin)) + 'px';

    const ddH = dd.offsetHeight;
    let top = rect.bottom + 6;
    if (top + ddH > window.innerHeight - margin) {
        top = Math.max(margin, rect.top - ddH - 6);
    }
    dd.style.top = top + 'px';

    anchor.classList.add('open');
    requestAnimationFrame(() => dd.classList.add('vds-open'));
    openVoiceDropdown = { dd, anchor };

    setTimeout(() => {
        document.addEventListener('click', voiceDropdownOutsideCloser, true);
        window.addEventListener('resize', closeOpenVoiceDropdown);
        const bodyEl = document.getElementById('vds-body');
        if (bodyEl) bodyEl.addEventListener('scroll', closeOpenVoiceDropdown);
    }, 0);
}

function createVoiceSelect(options, selectedValue, onChange) {
    const wrap = document.createElement('div');
    wrap.className = 'custom-select';
    const value = document.createElement('div');
    value.className = 'custom-select-value';
    const span = document.createElement('span');
    let current = String(options.find(o => String(o.value) === String(selectedValue))?.value ?? '');
    const currentOption = () => options.find(o => String(o.value) === current) || options[0];
    span.textContent = currentOption() ? currentOption().label : '';
    value.appendChild(span);
    value.insertAdjacentHTML('beforeend', ICONS.chevronDown({ className: 'chevron', style: 'width: 1.1rem; height: 1.1rem; opacity: 0.7;' }));

    value.onclick = () => {
        if (openVoiceDropdown && openVoiceDropdown.anchor === wrap) {
            closeOpenVoiceDropdown();
            return;
        }
        const dd = document.createElement('div');
        dd.className = 'custom-select-options vds-floating';
        for (const opt of options) {
            const el = document.createElement('div');
            el.className = 'custom-select-option';
            el.textContent = opt.label;
            if (String(opt.value) === current) el.classList.add('selected');
            el.onclick = (ev) => {
                // Keep the outside-click closer from treating this as an
                // outside click - the option layer lives outside the popup.
                ev.stopPropagation();
                current = String(opt.value);
                span.textContent = opt.label;
                closeOpenVoiceDropdown();
                onChange(current);
            };
            dd.appendChild(el);
        }
        openVoiceFloatingDropdown(wrap, dd);
    };

    wrap.appendChild(value);
    return wrap;
}

function voiceSettingRow(labelText, controlEl) {
    const row = document.createElement('div');
    row.className = 'vds-row';
    const label = document.createElement('label');
    label.textContent = labelText;
    row.appendChild(label);
    row.appendChild(controlEl);
    return row;
}

function buildQualityFpsGrid(mediaTypeId) {
    const grid = document.createElement('div');
    grid.className = 'vds-grid';
    const resOptions = VOICE_RES_OPTIONS.slice();
    const fpsOptions = VOICE_FPS_OPTIONS.map(f => ({ value: f, label: `${f} FPS` }));
    const cfg = getVoiceMediaConfig(mediaTypeId);

    const resWrap = document.createElement('div');
    resWrap.className = 'vds-cell';
    const resLabel = document.createElement('label');
    resLabel.textContent = processBlah(mediaTypeId === 1 ? 'label.voice.camera.quality' : 'label.voice.screen.quality');
    const resSelect = createVoiceSelect(resOptions, cfg.res, v => {
        if (mediaTypeId === 1) {
            voiceSettings.camRes = v;
            saveVoiceSettings();
            // Size changes reopen the camera cleanly - mutating capture size
            // mid-stream makes Android cameras flicker between sensor modes.
            restartVoiceCamIfActive();
        } else {
            voiceSettings.screenRes = v;
            saveVoiceSettings();
        }
    });
    resWrap.appendChild(resLabel);
    resWrap.appendChild(resSelect);

    const fpsWrap = document.createElement('div');
    fpsWrap.className = 'vds-cell';
    const fpsLabel = document.createElement('label');
    fpsLabel.textContent = processBlah(mediaTypeId === 1 ? 'label.voice.camera.fps' : 'label.voice.screen.fps');
    const fpsSelect = createVoiceSelect(fpsOptions, cfg.fps, v => {
        if (mediaTypeId === 1) {
            voiceSettings.camFps = parseInt(v);
            saveVoiceSettings();
            // Mid-stream frame-rate renegotiation can make Android cameras
            // wander between sensor modes (aspect ratio flicker) - reopen
            // cleanly instead, same as resolution changes.
            restartVoiceCamIfActive();
        } else {
            voiceSettings.screenFps = parseInt(v);
            saveVoiceSettings();
        }
    });
    fpsWrap.appendChild(fpsLabel);
    fpsWrap.appendChild(fpsSelect);

    grid.appendChild(resWrap);
    grid.appendChild(fpsWrap);
    return grid;
}

function clampVoiceDevicePopupToViewport(popup) {
    const W = window.innerWidth, H = window.innerHeight;
    const w = popup.offsetWidth, h = popup.offsetHeight;
    let left = Math.round((W - w) / 2), top = Math.round((H - h) / 2);
    left = Math.min(Math.max(left, 8), Math.max(8, W - w - 8));
    top = Math.min(Math.max(top, 8), Math.max(8, H - h - 8));
    popup.style.left = left + 'px';
    popup.style.top = top + 'px';
}

// Centered via explicit px coordinates (not CSS translate) so the opening
// animation never shifts the popup and dragging is a plain left/top change.
function makeVoiceDeviceSettingsDraggable(popup) {
    const header = popup.querySelector('#vds-header');
    let dragging = false, startX = 0, startY = 0, startL = 0, startT = 0;

    header.addEventListener('pointerdown', (e) => {
        if (e.button !== undefined && e.button !== 0) return;
        if (e.target.closest('#vds-close')) return;
        closeOpenVoiceDropdown();
        dragging = true;
        try { header.setPointerCapture(e.pointerId); } catch (err) {}
        const rect = popup.getBoundingClientRect();
        startL = rect.left; startT = rect.top;
        startX = e.clientX; startY = e.clientY;
        e.preventDefault();
    });
    header.addEventListener('pointermove', (e) => {
        if (!dragging) return;
        const W = window.innerWidth, H = window.innerHeight;
        let l = startL + (e.clientX - startX);
        let t = startT + (e.clientY - startY);
        l = Math.min(Math.max(l, 8), Math.max(8, W - popup.offsetWidth - 8));
        t = Math.min(Math.max(t, 8), Math.max(8, H - popup.offsetHeight - 8));
        popup.style.left = l + 'px';
        popup.style.top = t + 'px';
    });
    const stopDrag = () => { dragging = false; };
    header.addEventListener('pointerup', stopDrag);
    header.addEventListener('pointercancel', stopDrag);
}

function buildVoiceSettingsBody(body, nativeRouting, devices) {
    const deviceOptions = (list) => [{ value: '', label: processBlah('label.voice.default') }].concat(list.map(d => ({ value: d.deviceId, label: d.label })));

    // Microphone - switching mid-call swaps the captured track live.
    body.appendChild(voiceSettingRow(processBlah('label.voice.microphone'),
        createVoiceSelect(deviceOptions(devices.mics), voiceSettings.micId, v => {
            voiceSettings.micId = v;
            saveVoiceSettings();
            switchVoiceMic(v);
        })
    ));

    // Output device - not available with native Android routing (the OS owns
    // the call audio path there).
    if (!nativeRouting && devices.speakers.length > 0) {
        body.appendChild(voiceSettingRow(processBlah('label.voice.speaker'),
            createVoiceSelect(deviceOptions(devices.speakers), voiceSettings.speakerId, v => {
                voiceSettings.speakerId = v;
                saveVoiceSettings();
                applyVoiceSpeakerSink();
            })
        ));
    }

    // Camera device
    body.appendChild(voiceSettingRow(processBlah('label.voice.camera'),
        createVoiceSelect(deviceOptions(devices.cams), voiceSettings.camId, v => {
            voiceSettings.camId = v;
            saveVoiceSettings();
            restartVoiceCamIfActive();
        })
    ));

    // Quality/FPS - picked up live by the encoder config check.
    body.appendChild(buildQualityFpsGrid(1));

    // Screen share quality/FPS
    body.appendChild(buildQualityFpsGrid(2));

    // Mic input sensitivity (VAD threshold)
    const sensPercent = (voiceSettings.sensitivity + 80) / 80 * 100;
    const sensRow = document.createElement('div');
    sensRow.className = 'vds-row';
    sensRow.innerHTML = `
        <label>${processBlah('label.voice.sensitivity')} <span id="vds-sens-val">${voiceSettings.sensitivity} dB</span></label>
        <div class="vds-sens-meter">
            <div class="vds-sens-fill" id="vds-sens-fill"></div>
            <div class="vds-sens-mark" id="vds-sens-mark" style="left: ${sensPercent}%"></div>
            <input type="range" id="vds-sens-slider" min="-80" max="0" step="1" value="${voiceSettings.sensitivity}">
        </div>
    `;
    body.appendChild(sensRow);
    const sliderEl = sensRow.querySelector('#vds-sens-slider');
    const applySensitivity = (raw) => {
        const v = Math.max(-80, Math.min(0, Math.round(raw)));
        voiceSettings.sensitivity = v;
        saveVoiceSettings();
        const valEl = document.getElementById('vds-sens-val');
        const markEl = document.getElementById('vds-sens-mark');
        if (valEl) valEl.innerText = `${v} dB`;
        if (markEl) markEl.style.left = ((v + 80) / 80 * 100) + '%';
    };
    // Native touch-dragging of range thumbs is unreliable inside the WebView -
    // drive touch/pen drags explicitly from pointer events. Mouse stays native.
    const applyFromPointer = (e) => {
        const rect = sliderEl.getBoundingClientRect();
        if (rect.width <= 0) return;
        const pct = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
        applySensitivity(-80 + pct * 80);
        sliderEl.value = String(voiceSettings.sensitivity);
    };
    sliderEl.addEventListener('pointerdown', (e) => {
        if (e.pointerType === 'mouse') return;
        e.preventDefault(); // own the gesture - no native range handling
        try { sliderEl.setPointerCapture(e.pointerId); } catch (err) {}
        applyFromPointer(e);
    });
    sliderEl.addEventListener('pointermove', (e) => {
        if (e.pointerType === 'mouse') return;
        try { if (!sliderEl.hasPointerCapture(e.pointerId)) return; } catch (err) { return; }
        applyFromPointer(e);
    });
    sliderEl.addEventListener('pointerup', (e) => {
        try { if (sliderEl.hasPointerCapture(e.pointerId)) sliderEl.releasePointerCapture(e.pointerId); } catch (err) {}
    });
    sliderEl.oninput = function () { applySensitivity(parseInt(this.value)); };
}

window.showVoiceDeviceSettings = async function (e) {
    if (e) e.stopPropagation();
    if (voiceDevicePopupEl) { hideVoiceDeviceSettings(); return; }
    if (!voiceUiContainer) return;

    const nativeRouting = getNativeVoiceRouting();
    const popup = document.createElement('div');
    popup.id = 'voice-device-settings';
    popup.innerHTML = `
        <div id="vds-header">
            <span>${ICONS.settings({width: "1rem", height: "1rem"})} ${processBlah("action.call.settings")}</span>
            <button id="vds-close">${ICONS.close({width: "1rem", height: "1rem"})}</button>
        </div>
        <div id="vds-body"></div>
    `;
    // Hidden until positioned: base CSS keeps opacity 0 without .show.
    popup.style.left = '0px';
    popup.style.top = '0px';
    document.body.appendChild(popup);
    voiceDevicePopupEl = popup;
    makeVoiceDeviceSettingsDraggable(popup);
    popup.querySelector('#vds-close').onclick = hideVoiceDeviceSettings;

    const body = popup.querySelector('#vds-body');

    // Show immediately with a fast enumeration - never block on getUserMedia
    // label probes here, otherwise taps land on nothing and feel ignored.
    let devices = await enumerateVoiceDevices();
    if (!voiceDevicePopupEl || voiceDevicePopupEl !== popup) { popup.remove(); return; }

    buildVoiceSettingsBody(body, nativeRouting, devices);

    clampVoiceDevicePopupToViewport(popup);
    requestAnimationFrame(() => requestAnimationFrame(() => popup.classList.add('show')));
    const settingsBtn = document.getElementById('voice-btn-settings');
    if (settingsBtn) settingsBtn.classList.add('active');
    document.addEventListener('click', closeVoiceDeviceSettingsOnOutsideClick);

    // Upgrade generic labels ("Camera 1") in the background once probed.
    const refreshed = await ensureVoiceDeviceLabels();
    if (refreshed && voiceDevicePopupEl === popup) {
        closeOpenVoiceDropdown();
        body.innerHTML = '';
        buildVoiceSettingsBody(body, nativeRouting, refreshed);
    }
};

function showVoiceUI() {
    if (voiceUiContainer) return;
    
    voiceUiContainer = document.createElement("div");
    voiceUiContainer.id = "voice-call-popup";
    
    voiceUiContainer.innerHTML = `
        <div id="voice-header">
            <div class="voice-title">
                ${ICONS.call({width: "1.1rem", height: "1.1rem"})}
                <span>${processBlah("title.voice.chat")}</span>
            </div>
            <div id="voice-status" class="connecting">
                <span class="status-dot"></span>
                <span class="status-ping" id="voice-ping"></span>
                <span class="voice-status-text">${processBlah("status.voice.connecting")}</span>
            </div>
        </div>
        <div id="voice-users"></div>
        <div class="voice-mic-meter">
            <div id="voice-mic-level"></div>
        </div>
        <div id="voice-footer" class="voice-controls">
            <button id="voice-btn-mic" class="voice-btn" onclick="toggleVoiceMic()" title="${processBlah("action.call.mute")}">
                ${ICONS.mic({width: "1.4rem", height: "1.4rem"})}
            </button>
            <button id="voice-btn-cam" class="voice-btn" onclick="toggleVoiceCam()" title="${processBlah("action.call.camera")}">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>
            </button>
            <button id="voice-btn-screen" class="voice-btn" onclick="toggleVoiceScreen()" title="${processBlah("action.call.screen")}">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
            </button>
            <button id="voice-btn-settings" class="voice-btn" onclick="showVoiceDeviceSettings(event)" title="${processBlah("action.call.settings")}">
                ${ICONS.settings({width: "1.3rem", height: "1.3rem"})}
            </button>
            ${(isMobileVoiceDevice() && getNativeVoiceRouting()) ? `<button id="voice-btn-speaker" class="voice-btn${isVoiceSpeakerMode ? " voice-btn-active" : ""}" onclick="toggleVoiceSpeakerMode()" title="${processBlah("action.call.speaker")}">
                ${ICONS.speaker({width: "1.4rem", height: "1.4rem"})}
            </button>` : ""}
            <button id="voice-btn-hangup" class="voice-btn voice-btn-danger" onclick="endVoiceSession()" title="${processBlah("action.call.disconnect")}">
                ${ICONS.call({width: "1.4rem", height: "1.4rem"})}
            </button>
        </div>
    `;

    document.body.appendChild(voiceUiContainer);
    requestAnimationFrame(() => {
        requestAnimationFrame(() => voiceUiContainer.classList.add("show"));
    });
    
    let header = document.getElementById("voice-header");
    let startX, startY, initialLeft, initialTop;

    header.addEventListener('pointerdown', (e) => {
        if (e.button !== undefined && e.button !== 0) return;
        voiceDragState = true;
        try { header.setPointerCapture(e.pointerId); } catch (err) {}
        let rect = voiceUiContainer.getBoundingClientRect();
        initialLeft = rect.left;
        initialTop = rect.top;
        startX = e.clientX;
        startY = e.clientY;
        voiceUiContainer.style.right = "auto";
        voiceUiContainer.style.bottom = "auto";
        voiceUiContainer.style.left = initialLeft + "px";
        voiceUiContainer.style.top = initialTop + "px";
        clampVoiceWindowToViewport(voiceUiContainer);
    });

    header.addEventListener('pointermove', (e) => {
        if (!voiceDragState) return;
        let dx = e.clientX - startX;
        let dy = e.clientY - startY;
        voiceUiContainer.style.left = (initialLeft + dx) + "px";
        voiceUiContainer.style.top = (initialTop + dy) + "px";
        clampVoiceWindowToViewport(voiceUiContainer);
    });

    let stopDrag = () => { voiceDragState = false; };
    header.addEventListener('pointerup', stopDrag);
    header.addEventListener('pointercancel', stopDrag);

    ensureVoiceFooterFits(voiceUiContainer);

    ensureVoiceGridObserver();

    setupVoiceWindowResize();
}

// Raises the popup's min-width so the footer buttons always fit with the same
// side padding the footer uses, regardless of how many buttons are rendered.
function ensureVoiceFooterFits(popupEl) {
    let footer = popupEl.querySelector("#voice-footer");
    if (!footer) return;
    const cs = getComputedStyle(footer);
    let need = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
    const kids = Array.from(footer.children);
    const gap = parseFloat(cs.columnGap) || parseFloat(cs.gap) || 0;
    kids.forEach((kid, i) => {
        if (i > 0) need += gap;
        need += kid.offsetWidth;
    });
    const bcs = getComputedStyle(popupEl);
    need += ((parseFloat(bcs.borderLeftWidth) || 0) + (parseFloat(bcs.borderRightWidth) || 0));
    if (need > 0) {
        popupEl.style.minWidth = Math.ceil(need) + "px";
        clampVoiceWindowToViewport(popupEl);
    }
}

function setupVoiceWindowResize() {
    const popup = voiceUiContainer;
    if (!popup || popup.dataset.resizeInit) return;
    popup.dataset.resizeInit = "1";

    const minW = () => parseFloat(getComputedStyle(popup).minWidth) || 200;
    const minH = () => parseFloat(getComputedStyle(popup).minHeight) || 160;

    const applySize = (l, t, w, h) => {
        const W = window.innerWidth, H = window.innerHeight;
        w = Math.round(Math.min(Math.max(w, minW()), W));
        h = Math.round(Math.min(Math.max(h, minH()), H));
        l = Math.round(Math.min(Math.max(l, 0), W - w));
        t = Math.round(Math.min(Math.max(t, 0), H - h));
        popup.style.right = "auto";
        popup.style.bottom = "auto";
        popup.style.width = w + "px";
        popup.style.height = h + "px";
        popup.style.left = l + "px";
        popup.style.top = t + "px";
    };

    let edgeResizing = false;

    ["n", "s", "e", "w", "ne", "nw", "se", "sw"].forEach((dir) => {
        const handle = document.createElement("div");
        handle.className = `voice-resize-handle voice-resize-${dir}`;
        popup.appendChild(handle);

        handle.addEventListener("pointerdown", (e) => {
            if (e.button !== undefined && e.button !== 0) return;
            e.stopPropagation();
            e.preventDefault();
            edgeResizing = true;
            const sx = e.clientX, sy = e.clientY;
            const rect = popup.getBoundingClientRect();
            const sw = rect.width, sh = rect.height, sl = rect.left, st = rect.top;
            try { handle.setPointerCapture(e.pointerId); } catch (err) {}

            const onMove = (ev) => {
                const dx = ev.clientX - sx, dy = ev.clientY - sy;
                let w = sw, h = sh, l = sl, t = st;
                if (dir.includes("e")) w = sw + dx;
                if (dir.includes("s")) h = sh + dy;
                if (dir.includes("w")) {
                    w = sw - dx;
                    l = sl + (sw - w);
                }
                if (dir.includes("n")) {
                    h = sh - dy;
                    t = st + (sh - h);
                }
                applySize(l, t, w, h);
            };
            const onUp = () => {
                edgeResizing = false;
                handle.removeEventListener("pointermove", onMove);
                handle.removeEventListener("pointerup", onUp);
                handle.removeEventListener("pointercancel", onUp);
            };
            handle.addEventListener("pointermove", onMove);
            handle.addEventListener("pointerup", onUp);
            handle.addEventListener("pointercancel", onUp);
        });
    });

    // pinch-to-resize (dwa palce jak zoom)
    const pointers = new Map();
    let pinch = null;
    let suppressClick = false;

    popup.addEventListener("pointerdown", (e) => {
        pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
        if (pointers.size === 2 && !pinch && !voiceDragState && !edgeResizing) {
            const [a, b] = [...pointers.values()];
            const rect = popup.getBoundingClientRect();
            pinch = {
                dist: Math.max(20, Math.hypot(a.x - b.x, a.y - b.y)),
                w: rect.width,
                h: rect.height
            };
            suppressClick = true;
        }
        if (pointers.size >= 2 || pinch) {
            try { popup.setPointerCapture(e.pointerId); } catch (err) {}
        }
    });

    popup.addEventListener("pointermove", (e) => {
        if (!pointers.has(e.pointerId)) return;
        pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
        if (pointers.size === 2 && pinch) {
            const [a, b] = [...pointers.values()];
            const scale = Math.max(0.05, Math.hypot(a.x - b.x, a.y - b.y)) / pinch.dist;
            const rect = popup.getBoundingClientRect();
            const cx = rect.left + rect.width / 2;
            const cy = rect.top + rect.height / 2;
            applySize(cx - pinch.w * scale / 2, cy - pinch.h * scale / 2, pinch.w * scale, pinch.h * scale);
        }
    });

    const releasePointer = (e) => {
        pointers.delete(e.pointerId);
        if (pointers.size < 2) pinch = null;
        if (pointers.size === 0) setTimeout(() => { suppressClick = false; }, 250);
    };
    popup.addEventListener("pointerup", releasePointer);
    popup.addEventListener("pointercancel", releasePointer);

    popup.addEventListener("click", (e) => {
        if (suppressClick) {
            e.stopPropagation();
            e.preventDefault();
            suppressClick = false;
        }
    }, true);

    if (voiceResizeAbort) voiceResizeAbort.abort();
    voiceResizeAbort = new AbortController();
    window.addEventListener("resize", () => {
        clampVoiceWindowToViewport(popup);
    }, { signal: voiceResizeAbort.signal });
}

function updateVoiceUIUsers() {
    let container = document.getElementById("voice-users");
    if (!container) return;
    
    for (let u of voiceActiveUsers) {
        let div = document.getElementById(`voice-tile-${u}`);
        if (!div) {
            div = document.createElement("div");
            div.className = "voice-tile tile-enter";
            div.id = `voice-tile-${u}`;
            div.onclick = (e) => showVoiceUserSettings(u, e);
            setTimeout(() => div.classList.remove("tile-enter"), 400);
            
            div.innerHTML = `
                <div class="voice-tile-name" id="voice-name-${u}">${u}</div>
                <div class="voice-tile-icons" id="voice-icons-${u}"></div>
            `;
            container.appendChild(div);
        }
        
        let authorName = window.dmUsernameCache ? window.dmUsernameCache[u] : null;
        if (!authorName && window.fetchAsync) {
            authorName = u;
            window.fetchAsync(`${window.url}/idtoname?id=${u}`).then(async fullUsername => {
                if (fullUsername && !fullUsername.startsWith("error:")) {
                    if (window.dmUsernameCache) window.dmUsernameCache[u] = fullUsername;
                    if (window.dmPfpCache && window.getAvatarUrl) window.dmPfpCache[u] = await window.getAvatarUrl(u, fullUsername);
                    updateVoiceUIUsers();
                }
            });
        }
        let resolvedName = authorName && authorName !== u ? authorName : null;
        if (!resolvedName && u === String(window.id) && window.username) resolvedName = window.host ? `${window.username}:${window.host}` : window.username;
        
        let avatarRes = window.dmPfpCache ? window.dmPfpCache[u] : null;
        let avatarUrl = avatarRes ? avatarRes : "assets/default_avatar.png"; 
        
        if (!avatarRes && window.getAvatarUrl) {
            getAvatarUrl(u, authorName || "User").then(url => {
                if(url) {
                    window.dmPfpCache[u] = url;
                    let el = document.getElementById(`voice-tile-${u}`);
                    if (el) el.style.backgroundImage = `url('${url.replace(/'/g, "\\'")}')`;
                }
            });
        }
        
        div.style.backgroundImage = `url('${avatarUrl.replace(/'/g, "\\'")}')`;
        let nameEl = document.getElementById(`voice-name-${u}`);
        if (nameEl) nameEl.innerText = resolvedName ? `${resolvedName} (${u})` : String(u);
    }
    
    Array.from(container.children).forEach(child => {
        if (child.id.startsWith("voice-tile-") && !child.id.startsWith("voice-tile-stream-")) {
            let u = child.id.replace("voice-tile-", "");
            if (!voiceActiveUsers.includes(u)) {
                child.remove();
            }
        }
    });
    
    for (let decoderId in remoteVideos) {
        let streamData = remoteVideos[decoderId];
        let clientId = decoderId.split('-')[0];
        let type = decoderId.split('-')[1];
        
        let div = document.getElementById(`voice-tile-stream-${decoderId}`);
        if (!div) {
            div = document.createElement("div");
            div.className = "voice-tile tile-enter";
            div.id = `voice-tile-stream-${decoderId}`;
            div.onclick = (e) => showVoiceUserSettings(clientId, e, true);
            setTimeout(() => div.classList.remove("tile-enter"), 400);
            
            let mediaEl = streamData.canvas || streamData.video;
            if (mediaEl) {
                div.appendChild(mediaEl);
            }
            
            let nameDiv = document.createElement("div");
            nameDiv.className = "voice-tile-name";
            nameDiv.id = `voice-stream-name-${decoderId}`;
            div.appendChild(nameDiv);
            container.appendChild(div);
        }
        
        let authorName = window.dmUsernameCache ? window.dmUsernameCache[clientId] : null;
        if (!authorName && clientId === String(window.id) && window.username) authorName = window.host ? `${window.username}:${window.host}` : window.username;

        let streamLabel = processBlah(type == '1' ? "label.stream.cam" : "label.stream.screen");
        let baseName = authorName && authorName !== clientId ? `${authorName} (${clientId})` : clientId;

        let nameEl = document.getElementById(`voice-stream-name-${decoderId}`);
        if (nameEl) nameEl.innerText = `${baseName} · ${streamLabel}`;
    }
    
    Array.from(container.children).forEach(child => {
        if (child.id.startsWith("voice-tile-stream-")) {
            let decoderId = child.id.replace("voice-tile-stream-", "");
            if (!remoteVideos[decoderId]) {
                child.remove();
            }
        }
    });
    
    let orderedTiles = [];
    for (let u of voiceActiveUsers) {
        let userTile = document.getElementById(`voice-tile-${u}`);
        if (userTile) orderedTiles.push(userTile);
        for (let decoderId in remoteVideos) {
            if (decoderId.split('-')[0] === u) {
                let streamTile = document.getElementById(`voice-tile-stream-${decoderId}`);
                if (streamTile) orderedTiles.push(streamTile);
            }
        }
    }
    for (let tile of orderedTiles) {
        container.appendChild(tile);
    }

    relayoutVoiceTiles();
}

let voiceGridRO = null;

function ensureVoiceGridObserver() {
    let container = document.getElementById("voice-users");
    if (!container || !container.isConnected || container.dataset.roInit) return;
    container.dataset.roInit = "1";
    if (!voiceGridRO) {
        voiceGridRO = new ResizeObserver(() => relayoutVoiceTiles());
    }
    voiceGridRO.observe(container);
}

function relayoutVoiceTiles() {
    let container = document.getElementById("voice-users");
    if (!container || !container.isConnected) return;

    const tiles = Array.from(container.children).filter(el => el.classList.contains("voice-tile"));
    const n = tiles.length;
    if (!n) return;

    const rootFs = parseFloat(getComputedStyle(document.documentElement).fontSize);
    const cs = getComputedStyle(container);
    const innerW = container.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
    const innerH = container.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);

    if (!isFinite(innerW) || !isFinite(innerH) || !isFinite(rootFs) || innerW <= 0 || innerH <= 0 || rootFs <= 0) {
        container.style.removeProperty("--voice-tile-w");
        container.style.removeProperty("--voice-tile-h");
        delete container.dataset.layoutSig;
        return;
    }

    const minCol = 6.25 * rootFs;
    const minRow = 7 * rootFs;
    const gap = 0.75 * rootFs;

    const maxCols = Math.max(1, Math.floor((innerW + gap) / (minCol + gap)));
    const cols = Math.min(n, maxCols);
    const rows = Math.ceil(n / cols);
    const w = Math.floor((innerW - gap * (cols - 1)) / cols);
    const h = Math.floor(Math.max(minRow, (innerH - gap * (rows - 1)) / rows));

    const sig = `${n}:${cols}:${w}x${h}`;
    if (container.dataset.layoutSig === sig) return;
    container.dataset.layoutSig = sig;

    container.style.setProperty("--voice-tile-w", w + "px");
    container.style.setProperty("--voice-tile-h", h + "px");
}

let voiceSettingsState = null;

function hideVoiceUserSettings() {
    let popup = document.getElementById("voice-user-settings");
    if (popup) popup.remove();
    voiceSettingsState = null;
    document.removeEventListener('click', closeVoiceUserSettingsOnOutsideClick);
}

function closeVoiceUserSettingsOnOutsideClick(ev) {
    let popup = document.getElementById("voice-user-settings");
    if (!popup) {
        hideVoiceUserSettings();
        return;
    }
    if (!popup.contains(ev.target)) hideVoiceUserSettings();
}

function showVoiceUserSettings(clientId, e, isStream = false) {
    e.stopPropagation();

    if (voiceSettingsState && voiceSettingsState.clientId === clientId && voiceSettingsState.isStream === isStream) {
        hideVoiceUserSettings();
        return;
    }
    hideVoiceUserSettings();

    voiceSettingsState = { clientId, isStream };

    let popup = document.createElement("div");
    popup.id = "voice-user-settings";
    popup.innerHTML = isStream ? `
        <div class="voice-setting-row">
            <label>${processBlah("label.stream.volume")} <span id="val-screen-${clientId}">${getStoredVolume('screen', clientId)}%</span></label>
            <input type="range" min="0" max="200" value="${getStoredVolume('screen', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'screen')">
        </div>
    ` : `
        <div class="voice-setting-row">
            <label>${processBlah("label.user.volume")} <span id="val-vol-${clientId}">${getStoredVolume('vol', clientId)}%</span></label>
            <input type="range" min="0" max="200" value="${getStoredVolume('vol', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'vol')">
        </div>
    `;

    document.body.appendChild(popup);
    let rect = popup.getBoundingClientRect();
    let left = e.clientX;
    let top = e.clientY;
    if (left + 200 > window.innerWidth) left = window.innerWidth - 210;
    if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10;
    popup.style.left = left + "px";
    popup.style.top = top + "px";
    requestAnimationFrame(() => {
        requestAnimationFrame(() => popup.classList.add("open"));
    });

    document.addEventListener('click', closeVoiceUserSettingsOnOutsideClick);
}

window.updateVoiceVol = function(clientId, val, type) {
    voiceVolumeState[`${type}:${clientId}`] = val;
    let el = document.getElementById(`val-${type}-${clientId}`);
    if (el) el.innerText = val + '%';
    const audioId = type === 'screen' ? `${clientId}_screen` : clientId;
    const volumeMultiplier = parseInt(val) / 100.0;
    const rn = type === 'screen' ? screenReceiverNode : receiverNode;
    if (rn) {
        rn.port.postMessage({ action: 'setVolume', clientId: audioId, volume: volumeMultiplier });
    }
};

function toggleVoiceMic() {
    isMicMuted = !isMicMuted;
    if (isMicMuted) setTileSpeaking(String(window.id), false);
    let btn = document.getElementById("voice-btn-mic");
    if (btn) {
        if (isMicMuted) {
            btn.classList.add("voice-btn-danger");
        } else {
            btn.classList.remove("voice-btn-danger");
        }
    }
}

// Tears down only the transport-level state (socket, remote streams, key),
// keeping the UI, mic stream and AudioContext alive for an automatic rejoin.
function teardownVoiceTransport() {
    if (voicePingTimer) { clearInterval(voicePingTimer); voicePingTimer = null; }
    if (voiceWsHeartbeat) { clearInterval(voiceWsHeartbeat); voiceWsHeartbeat = null; }
    if (camControl) { try { camControl.stop(); } catch (e) {} camControl = null; }
    if (screenControl) { try { screenControl.stop(); } catch (e) {} screenControl = null; }
    if (currentVoiceWs) {
        try { currentVoiceWs.onclose = null; currentVoiceWs.close(); } catch (e) {}
        currentVoiceWs = null;
    }
    for (const decoderId of Object.keys(remoteVideos)) {
        try { if (remoteVideos[decoderId].decoder) remoteVideos[decoderId].decoder.close(); } catch (e) {}
    }
    remoteVideos = {};
    videoDecryptChains = {};
    remoteAudio = {};
    audioDecryptChains = {};
    peerLastSeen = {};
    deadPeers.clear();
    if (receiverNode) receiverNode.port.postMessage({action: 'clear'});
    if (screenReceiverNode) screenReceiverNode.port.postMessage({action: 'clear'});
    voiceAesKeyBytes = null;
    voiceAesCryptoKey = null;
    lastVoiceServerPacketAt = Date.now();
}

function scheduleVoiceReconnect() {
    if (!currentVoiceCallId || !lastVoiceServerUrl) {
        // Real hangup already ran its cleanup.
        return;
    }
    if (voiceReconnectAttempts >= VOICE_MAX_RECONNECTS) {
        showBlahNotification("error:voice.reconnect.failed");
        endVoiceSession();
        return;
    }
    voiceReconnectAttempts++;
    setVoiceStatus("connecting");
    teardownVoiceTransport();
    setTimeout(async () => {
        if (!currentVoiceCallId || !lastVoiceServerUrl) return;
        try {
            await startVoiceSession(lastVoiceServerUrl);
        } catch (err) {
            console.warn("Voice reconnect failed", err);
            scheduleVoiceReconnect();
        }
    }, 800);
}

function endVoiceSession() {
    setVoiceStatus("disconnected");
    hideVoiceDeviceSettings();

    const nativeRouting = getNativeVoiceRouting();
    if (nativeRouting && nativeRouting.stopCall) {
        try { nativeRouting.stopCall(); } catch (e) {}
    }
    isVoiceSpeakerMode = false;
    voiceLoopRestarts = 0;
    stopNativePlayback();

    if (currentVoiceCallId) {
        let payload = JSON.stringify({ string1: currentVoiceCallType, string2: currentVoiceCallId });
        if (window.fetchEncrypted) window.fetchEncrypted("room/voice/leave", payload).catch(()=>{});
    }
    
    if (currentVoiceWs) {
        try { currentVoiceWs.close(); } catch(e){}
        currentVoiceWs = null;
    }
    if (micStream) {
        micStream.getTracks().forEach(t => t.stop());
        micStream = null;
    }
    if (micSourceNode) { micSourceNode.disconnect(); micSourceNode = null; }
    if (audioEncoder) { try { audioEncoder.close(); } catch(e){} audioEncoder = null; }
    
    if (voiceWsHeartbeat) { clearInterval(voiceWsHeartbeat); voiceWsHeartbeat = null; }
    if (voicePingTimer) { clearInterval(voicePingTimer); voicePingTimer = null; }
    peerLastSeen = {};
    deadPeers.clear();
    
    for (let id in audioDecoders) {
        try { audioDecoders[id].close(); } catch(e){}
    }
    for (let id in audioDecryptChains) {
        if(audioDecryptChains[id]) audioDecryptChains[id].clear();
    }
    audioDecoders = {};
    audioDecryptChains = {};
    remoteAudio = {};
    
    if (receiverNode) {
        receiverNode.port.postMessage({ action: 'clear' });
        try { receiverNode.disconnect(); } catch (e) {}
    }
    if (screenReceiverNode) {
        screenReceiverNode.port.postMessage({ action: 'clear' });
        try { screenReceiverNode.disconnect(); } catch (e) {}
    }
    teardownVoiceLoopback();
    
    if (camControl) { camControl.stop(); camControl = null; }
    if (screenControl) { screenControl.stop(); screenControl = null; }
    
    for (let id in remoteVideos) {
        if (remoteVideos[id].decoder) { try { remoteVideos[id].decoder.close(); } catch(e){} }
    }
    remoteVideos = {};
    videoDecryptChains = {};
    
    voiceAesKeyBytes = null;
    voiceAesCryptoKey = null;
    currentVoiceWs = null;
    currentVoiceCallType = null;
    currentVoiceCallId = null;
    
    clearAllSpeaking();

    if (voiceResizeAbort) {
        voiceResizeAbort.abort();
        voiceResizeAbort = null;
    }

    if (voiceGridRO) {
        voiceGridRO.disconnect();
        voiceGridRO = null;
    }

    if (voiceUiContainer) {
        let popupEl = voiceUiContainer;
        voiceUiContainer = null;
        popupEl.classList.remove("show");
        popupEl.classList.add("hide");
        setTimeout(() => popupEl.remove(), 350);
    }
}

async function startHardwareVideo(btnEl, streamPromise, typeLabel, typeId) {
    try {
        const stream = await streamPromise;
        const videoTrack = stream.getVideoTracks()[0];
        const videoEl = document.createElement('video');
        videoEl.srcObject = stream; videoEl.muted = true; videoEl.playsInline = true; videoEl.autoplay = true; videoEl.play();

        const decoderId = window.id + '-' + typeId;
        remoteVideos[decoderId] = { video: videoEl };
        updateVoiceUIUsers();

        btnEl.classList.add('voice-btn-active');
        let screenAudioEncoder = null, screenAudioSourceNode = null, screenSenderNode = null;

        if (typeId === 2) {
            const audioTracks = stream.getAudioTracks();
            if (audioTracks.length > 0) {
                screenAudioSourceNode = audioContext.createMediaStreamSource(stream);
                screenSenderNode = new AudioWorkletNode(audioContext, 'audio-sender');
                screenSenderNode.port.onmessage = async (e) => {
                    if (currentVoiceWs?.readyState !== WebSocket.OPEN || !voiceAesCryptoKey) return;
                    // Same backpressure valve as the mic sender.
                    if (currentVoiceWs.bufferedAmount > 256 * 1024) return;
                    const iv = crypto.getRandomValues(new Uint8Array(12));
                    const cipher = await crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, e.data.audioData);
                    const payload = new Uint8Array(14 + cipher.byteLength);
                    payload[0] = 4; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
                    currentVoiceWs.send(payload.buffer);
                };
                screenAudioSourceNode.connect(screenSenderNode);
            }
        }

        const getCurrentConfig = () => {
            const mediaCfg = getVoiceMediaConfig(typeId);
            const fps = mediaCfg.fps;
            const resVal = mediaCfg.res;
            const settings = videoTrack.getSettings();
            let sourceWidth = settings.width || 1280, sourceHeight = settings.height || 720, width, height;
            if (resVal === "source") { width = sourceWidth; height = sourceHeight; } else {
                const [targetW, targetH] = resVal.split('x').map(Number);
                const ratio = Math.min(targetW / sourceWidth, targetH / sourceHeight);
                if (ratio < 1) { width = sourceWidth * ratio; height = sourceHeight * ratio; } else { width = sourceWidth; height = sourceHeight; }
            }
            width = Math.floor(width / 2) * 2; height = Math.floor(height / 2) * 2;
            // A WebSocket relay saturates fast: uncapped w*h*fps bitrates
            // (several Mb/s) choke the shared call socket, which stalls audio
            // for everyone. Keep generous-but-safe ceilings per stream type.
            const bitrate = Math.min(Math.floor(width * height * fps * 0.07), typeId === 1 ? 2_000_000 : 3_000_000);
            return { width, height, fps, bitrate };
        };

        let currentConfig = getCurrentConfig(), isRunning = true, frameCount = 0;
        const encoder = new VideoEncoder({
            output: async (chunk) => {
                if (currentVoiceWs?.readyState !== WebSocket.OPEN || !voiceAesCryptoKey) return;
                const buffer = new ArrayBuffer(chunk.byteLength); chunk.copyTo(buffer);
                const iv = crypto.getRandomValues(new Uint8Array(12));
                const cipher = await crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, buffer);
                const payload = new Uint8Array(14 + cipher.byteLength);
                payload[0] = typeId; payload[1] = chunk.type === 'key' ? 1 : 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
                currentVoiceWs.send(payload.buffer);
            }, error: (e) => { stopFunction(); }
        });
        encoder.configure({codec: 'av01.0.04M.08', width: currentConfig.width, height: currentConfig.height, framerate: currentConfig.fps, bitrate: currentConfig.bitrate, latencyMode: 'realtime'});

            // Transient capture-mode wobbles must not thrash the encoder -
            // commit only after ~300 ms stable. Camera size/fps changes arrive
            // via a clean reopen (see buildQualityFpsGrid); the screen share
            // surface is never re-constrained, the encoder just rescales.
            let pendingCfg = null, pendingAt = 0;
            const cfgEquals = (a, b) => !!a && !!b && a.width === b.width && a.height === b.height && a.fps === b.fps;

            const encodeLoop = () => {
                if (!isRunning) return;
                const newConfig = getCurrentConfig();
                let forceKeyframe = false;
                if (!cfgEquals(newConfig, currentConfig)) {
                    if (!cfgEquals(newConfig, pendingCfg)) {
                        pendingCfg = newConfig;
                        pendingAt = performance.now();
                    } else if (performance.now() - pendingAt > 300) {
                        currentConfig = newConfig; forceKeyframe = true; frameCount = 0; pendingCfg = null;
                        encoder.configure({codec: 'av01.0.04M.08', width: currentConfig.width, height: currentConfig.height, framerate: currentConfig.fps, bitrate: currentConfig.bitrate, latencyMode: 'realtime'});
                    }
                } else if (pendingCfg) {
                    pendingCfg = null; // wiggle reverted on its own - ignore
                }

                if (encoder.state === 'configured' && encoder.encodeQueueSize <= 2 && currentVoiceWs.bufferedAmount < 1024 * 256 && videoEl.readyState >= 2) {
                let frame = null;
                try {
                    frame = new VideoFrame(videoEl, {timestamp: Math.trunc(performance.now() * 1000)});
                    frameCount++;
                    encoder.encode(frame, {keyFrame: forceKeyframe || (frameCount % (currentConfig.fps * 2)) === 0});
                } catch (err) { } finally { if (frame) frame.close(); }
            }
            setTimeout(encodeLoop, 1000 / currentConfig.fps);
        };
        setTimeout(encodeLoop, 500);

        videoTrack.onended = () => { if(isRunning) stopFunction(); };
        const stopFunction = async () => {
            if (!isRunning) return;
            isRunning = false; try { encoder.close(); } catch (e) {} stream.getTracks().forEach(t => t.stop());
            
            delete remoteVideos[decoderId];
            updateVoiceUIUsers();
            btnEl.classList.remove('voice-btn-active');

            if (currentVoiceWs?.readyState === WebSocket.OPEN && voiceAesCryptoKey) {
                const buffer = new Uint8Array([typeId]); const iv = crypto.getRandomValues(new Uint8Array(12));
                const cipher = await crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, buffer);
                const payload = new Uint8Array(14 + cipher.byteLength);
                payload[0] = 3; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14); currentVoiceWs.send(payload.buffer);
            }

            if (typeId === 2) {
                if (screenAudioSourceNode) { screenAudioSourceNode.disconnect(); screenAudioSourceNode = null; }
                if (screenSenderNode) { screenSenderNode.disconnect(); screenSenderNode = null; }
                if (screenAudioEncoder) { try { screenAudioEncoder.close(); } catch (e) {} screenAudioEncoder = null; }
                if (currentVoiceWs?.readyState === WebSocket.OPEN && voiceAesCryptoKey) {
                    const bufferAudioInfo = new Uint8Array([4]); const ivA = crypto.getRandomValues(new Uint8Array(12));
                    const cipherA = await crypto.subtle.encrypt({name: "AES-GCM", iv: ivA}, voiceAesCryptoKey, bufferAudioInfo);
                    const payloadA = new Uint8Array(14 + cipherA.byteLength);
                    payloadA[0] = 3; payloadA[1] = 0; payloadA.set(ivA, 2); payloadA.set(new Uint8Array(cipherA), 14); currentVoiceWs.send(payloadA.buffer);
                }
                screenControl = null;
            } else if (typeId === 1) { camControl = null; }
        };
        return { stop: stopFunction };
    } catch (e) { console.error(e); alert(processBlah(`:error.call.unsupported:${typeLabel}`)); return null; }
}

// Opens the camera honoring the saved device/quality. A saved deviceId can
// become stale (device list changes across sessions) - fall back to the
// default camera instead of failing with OverconstrainedError.
async function getVoiceCamStream() {
    const camCfg = getVoiceMediaConfig(1);
    const constraintsFor = (deviceId) => {
        const video = {frameRate: {ideal: camCfg.fps}};
        if (camCfg.res !== "source") {
            const [w, h] = camCfg.res.split('x').map(Number);
            // Single-axis ideal: no implied aspect ratio, the camera keeps its
            // native one and only the resolution tier changes.
            video.width = {ideal: Math.max(w, h)};
        }
        if (deviceId) video.deviceId = {exact: deviceId};
        return {video};
    };
    try {
        return await navigator.mediaDevices.getUserMedia(constraintsFor(voiceSettings.camId));
    } catch (e) {
        if (!voiceSettings.camId) throw e;
        voiceSettings.camId = "";
        saveVoiceSettings();
        return navigator.mediaDevices.getUserMedia(constraintsFor(undefined));
    }
}

function toggleVoiceCam() {
    let btn = document.getElementById("voice-btn-cam");
    if (camControl) {
        camControl.stop();
    } else {
        getVoiceCamStream().then(stream => {
            startHardwareVideo(btn, Promise.resolve(stream), "Camera", 1).then(ctrl => camControl = ctrl);
        }).catch(err => alert(processBlah(`:error.call.camera:${err.message || err.name || "?"}`)));
    }
}

function toggleVoiceScreen() {
    let btn = document.getElementById("voice-btn-screen");
    if (screenControl) {
        screenControl.stop();
    } else {
        if (!navigator.mediaDevices.getDisplayMedia) { alert(processBlah("error.call.screen.unsupported")); return; }
        navigator.mediaDevices.getDisplayMedia({
            video: true, audio: { autoGainControl: false, echoCancellation: false, noiseSuppression: false }, systemAudio: "include", selfBrowserSurface: "exclude"
        }).then(stream => {
            startHardwareVideo(btn, Promise.resolve(stream), "Screen", 2).then(ctrl => screenControl = ctrl);
        }).catch(err => alert(processBlah(`:error.call.screen:${err.message || err.name || "?"}`)));
    }
}