diff --git a/app/Http/Controllers/InterviewController.php b/app/Http/Controllers/InterviewController.php
index c9c08fa..af1db53 100644
--- a/app/Http/Controllers/InterviewController.php
+++ b/app/Http/Controllers/InterviewController.php
@@ -31,6 +31,23 @@ public function index()
         return view('interview.index', compact('interviews', 'interviewers'));
     }
 
+    /**
+     * Display a specific Candidate Interview Live Review & Call Session.
+     */
+    public function show($id)
+    {
+        $user = Auth::user();
+
+        if (!$user->isAdmin() && strtolower($user->role) !== 'hr' && !$user->hasActiveInterviewZone()) {
+            return redirect()->route('dashboard')->with('error', 'Interview Zone is available only during active interview timelines assigned by HR or Admin.');
+        }
+
+        $interview = Interview::findOrFail($id);
+        $interviewers = User::orderBy('name', 'asc')->get();
+
+        return view('interview.show', compact('interview', 'interviewers'));
+    }
+
     /**
      * Store a new Candidate Interview session created by HR.
      */
diff --git a/resources/js/app.js b/resources/js/app.js
index 5c60800..6df38d5 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,4 +1,5 @@
 import { getMeteredIceServers, initMeteredIceServers, globalIceServers } from './metered.js';
+import './interview-call.js';
 
 window.globalIceServers = globalIceServers;
 window.getMeteredIceServers = getMeteredIceServers;
@@ -8,3 +9,4 @@ window.initMeteredIceServers = initMeteredIceServers;
 if (typeof window !== 'undefined') {
     window.getMeteredIceServers();
 }
+
diff --git a/resources/js/interview-call.js b/resources/js/interview-call.js
new file mode 100644
index 0000000..898c5b8
--- /dev/null
+++ b/resources/js/interview-call.js
@@ -0,0 +1,1833 @@
+/**
+ * Interview Call & Live Assessment Review Engine
+ * Handles WebRTC 2-Way Calling, Candidate Screen Sharing, Real-Time Sync,
+ * Proctoring Alerts, SOS Audio Ringtone, Tab Switching, and Silent Call Recording.
+ */
+
+// --- Global Audio Ringtone Synthesizer Engine ---
+export class CallRingtoneEngine {
+    constructor() {
+        this.ctx = null;
+        this.interval = null;
+        this.isPlaying = false;
+    }
+
+    init() {
+        try {
+            if (!this.ctx) {
+                const AudioCtx = window.AudioContext || window.webkitAudioContext;
+                this.ctx = new AudioCtx();
+            }
+            if (this.ctx && this.ctx.state === 'suspended') {
+                this.ctx.resume();
+            }
+        } catch (e) {
+            console.log('Audio init warning:', e);
+        }
+    }
+
+    start() {
+        this.init();
+        if (this.isPlaying) return;
+        this.isPlaying = true;
+
+        this.playTone();
+        if (this.interval) clearInterval(this.interval);
+        this.interval = setInterval(() => {
+            if (this.isPlaying) this.playTone();
+        }, 2400);
+    }
+
+    playTone() {
+        this.init();
+        if (!this.ctx || !this.isPlaying) return;
+        try {
+            const now = this.ctx.currentTime;
+            const osc1 = this.ctx.createOscillator();
+            const osc2 = this.ctx.createOscillator();
+            const gain = this.ctx.createGain();
+
+            osc1.type = 'sine';
+            osc2.type = 'sine';
+
+            osc1.frequency.setValueAtTime(523.25, now);
+            osc2.frequency.setValueAtTime(659.25, now);
+
+            gain.gain.setValueAtTime(0.001, now);
+            gain.gain.linearRampToValueAtTime(0.35, now + 0.08);
+            gain.gain.setValueAtTime(0.35, now + 1.1);
+            gain.gain.exponentialRampToValueAtTime(0.001, now + 1.3);
+
+            osc1.connect(gain);
+            osc2.connect(gain);
+            gain.connect(this.ctx.destination);
+
+            osc1.start(now);
+            osc2.start(now);
+
+            osc1.stop(now + 1.35);
+            osc2.stop(now + 1.35);
+        } catch (e) {}
+    }
+
+    stop() {
+        this.isPlaying = false;
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    }
+}
+
+export const callRingtone = new CallRingtoneEngine();
+
+// State variables
+let currentInterviewId = null;
+let interviewerPeer = null;
+let screenReceiverPeer = null;
+let interviewerLocalStream = null;
+let activeCall = null;
+let isInterviewerMicOn = true;
+let isInterviewerCamOn = true;
+let screenZoomLevel = 1.0;
+let candVidZoomLevel = 1.0;
+let activeViolations = [];
+let sosPollInterval = null;
+let acknowledgedViolationCount = 0;
+let sosDismissed = false;
+let sosAutoTriggerDisabled = false;
+let currentTabScreenshotEnabled = true;
+let interviewerSigChannel = null;
+let interviewerPeerConnection = null;
+let liveSyncChannel = null;
+let panelistMeshTiles = new Map();
+
+// Ringing & Call state
+let activeIncomingCall = null;
+let iAmTheCaller = false;
+let ringTimeoutTimer = null;
+const dismissedCallIds = new Set();
+const endedCallIds = new Set();
+let globalCallChannel = null;
+const adminPageLoadTimestamp = Date.now();
+
+let globalIceServers = window.globalIceServers || [
+    { urls: 'stun:stun.l.google.com:19302' }
+];
+
+export function getInitials(name) {
+    if (!name) return 'CD';
+    const parts = name.trim().split(/\s+/);
+    if (parts.length >= 2) {
+        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }
+    const str = name.trim();
+    if (str.length >= 2) {
+        return (str[0] + str[str.length - 1]).toUpperCase();
+    }
+    return str.toUpperCase();
+}
+
+export function zoomScreen(delta) {
+    screenZoomLevel = Math.max(0.5, Math.min(3.0, screenZoomLevel + delta));
+    const screenVid = document.getElementById('interviewer-screen-video');
+    if (screenVid) {
+        screenVid.style.transform = `scale(${screenZoomLevel})`;
+    }
+}
+
+export function resetZoomScreen() {
+    screenZoomLevel = 1.0;
+    zoomScreen(0);
+}
+
+export function toggleFullscreenScreen() {
+    const wrapper = document.getElementById('screen-wrapper');
+    if (!wrapper) return;
+    if (!document.fullscreenElement) {
+        wrapper.requestFullscreen().catch(err => console.log(err));
+    } else {
+        document.exitFullscreen();
+    }
+}
+
+export function zoomCandVideo(delta) {
+    if (delta === 0) candVidZoomLevel = 1.0;
+    else candVidZoomLevel = Math.max(0.5, Math.min(3.0, candVidZoomLevel + delta));
+    const vid = document.getElementById('interviewer-cand-video');
+    if (vid) {
+        vid.style.transform = `scale(${candVidZoomLevel})`;
+        vid.style.transformOrigin = 'center center';
+        vid.style.transition = 'transform 0.2s ease';
+    }
+}
+
+export function toggleSosAutoTrigger() {
+    sosAutoTriggerDisabled = !sosAutoTriggerDisabled;
+    const toggleSw = document.getElementById('sosToggle');
+    const btn = document.getElementById('sos-toggle-btn');
+
+    if (toggleSw) {
+        if (sosAutoTriggerDisabled) {
+            toggleSw.classList.remove('on');
+        } else {
+            toggleSw.classList.add('on');
+        }
+    }
+    if (btn) {
+        if (sosAutoTriggerDisabled) {
+            btn.innerHTML = '<i class="fa-solid fa-bell-slash mr-1"></i> SOS Auto-Trigger: OFF';
+            btn.className = 'px-3 py-1.5 text-xs font-semibold rounded-lg border border-red-500 bg-red-500/15 text-red-300';
+        } else {
+            btn.innerHTML = '<i class="fa-solid fa-bell mr-1"></i> SOS Auto-Trigger: ON';
+            btn.className = 'px-3 py-1.5 text-xs font-semibold rounded-lg border border-indigo-500 bg-indigo-500/15 text-indigo-300';
+        }
+    }
+}
+
+export function openReportPage() {
+    if (!currentInterviewId) return;
+    window.open(`/interviews/${currentInterviewId}/report`, '_blank');
+}
+
+export function toggleTabScreenshotCapture() {
+    if (!currentInterviewId) return;
+    const newStatus = !currentTabScreenshotEnabled;
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;
+    fetch(`/interviews/${currentInterviewId}/toggle-tab-screenshot`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': csrfToken
+        },
+        body: JSON.stringify({ enable: newStatus })
+    })
+    .then(r => r.json())
+    .then(res => {
+        if (res.success) {
+            currentTabScreenshotEnabled = res.enable_tab_switch_screenshot;
+            updateScreenshotToggleBtnUI(currentTabScreenshotEnabled);
+            if (typeof window.Swal !== 'undefined') {
+                window.Swal.fire({
+                    icon: 'info',
+                    title: 'Screenshot Setting Updated',
+                    text: res.message,
+                    timer: 2500,
+                    showConfirmButton: false,
+                    toast: true,
+                    position: 'top-end'
+                });
+            }
+        }
+    })
+    .catch(() => {});
+}
+
+export function updateScreenshotToggleBtnUI(enabled) {
+    const btn = document.getElementById('modal-toggle-screenshot-btn');
+    if (btn) {
+        if (enabled) {
+            btn.innerHTML = '<i class="fa-solid fa-camera mr-1"></i> ENABLED';
+            btn.className = 'px-2.5 py-1 text-xs font-bold bg-emerald-600 hover:bg-emerald-500 text-white rounded-md cursor-pointer border-none';
+        } else {
+            btn.innerHTML = '<i class="fa-solid fa-camera-retro mr-1"></i> DISABLED';
+            btn.className = 'px-2.5 py-1 text-xs font-bold bg-red-600 hover:bg-red-500 text-white rounded-md cursor-pointer border-none';
+        }
+    }
+}
+
+export function switchIdeTab(tab) {
+    const tabs = ['code', 'notes', 'drawing', 'recordings', 'screenshots'];
+    tabs.forEach(t => {
+        const contentEl = document.getElementById(`tab-content-${t}`);
+        const btnEl = document.getElementById(`tab-btn-${t}`);
+        if (contentEl) {
+            contentEl.style.display = (t === tab) ? 'block' : 'none';
+        }
+        if (btnEl) {
+            if (t === tab) {
+                btnEl.classList.add('bg-indigo-600', 'text-white', 'border-indigo-500');
+                btnEl.classList.remove('bg-white/5', 'text-slate-400', 'border-slate-700/60');
+            } else {
+                btnEl.classList.remove('bg-indigo-600', 'text-white', 'border-indigo-500');
+                btnEl.classList.add('bg-white/5', 'text-slate-400', 'border-slate-700/60');
+            }
+        }
+    });
+}
+
+export function triggerIncomingCallRing(callData, isRealtimeBroadcast = false) {
+    if (endedCallIds.has(callData.id) || dismissedCallIds.has(callData.id)) return;
+    if (iAmTheCaller && currentInterviewId == callData.id) return;
+    if (interviewerLocalStream && currentInterviewId == callData.id) return;
+
+    if (callData.call_started_at) {
+        const startedTime = new Date(callData.call_started_at).getTime();
+        const elapsedMs = Date.now() - startedTime;
+        if (elapsedMs > 8000 && !isRealtimeBroadcast) {
+            dismissedCallIds.add(callData.id);
+            return;
+        }
+    } else if (!isRealtimeBroadcast) {
+        dismissedCallIds.add(callData.id);
+        return;
+    }
+
+    activeIncomingCall = callData;
+    const nameEl = document.getElementById('incoming-cand-name');
+    const infoEl = document.getElementById('incoming-starter-info');
+    const modalEl = document.getElementById('incoming-call-modal');
+    if (nameEl) nameEl.innerText = callData.candidate_name;
+    if (infoEl) infoEl.innerText = '📞 Call initiated by: ' + (callData.starter_name || 'Panelist');
+    if (modalEl) modalEl.classList.add('active');
+    callRingtone.start();
+
+    if (ringTimeoutTimer) clearTimeout(ringTimeoutTimer);
+    let remainingMs = 8000;
+    if (callData.call_started_at) {
+        const startedTime = new Date(callData.call_started_at).getTime();
+        const elapsedMs = Date.now() - startedTime;
+        remainingMs = Math.max(1000, 8000 - elapsedMs);
+    }
+
+    ringTimeoutTimer = setTimeout(() => {
+        declineIncomingCall(true);
+    }, remainingMs);
+}
+
+export function pollGlobalActiveCalls() {
+    fetch('/interviews/active-calls', {
+        headers: { 'Accept': 'application/json' }
+    })
+    .then(r => r.json())
+    .then(data => {
+        if (!data || !data.active_calls || data.active_calls.length === 0) {
+            if (activeIncomingCall) declineIncomingCall(true);
+            return;
+        }
+
+        const incoming = data.active_calls.find(call => {
+            if (endedCallIds.has(call.id)) return false;
+            if (iAmTheCaller && currentInterviewId == call.id) return false;
+            if (interviewerLocalStream && currentInterviewId == call.id) return false;
+            if (dismissedCallIds.has(call.id)) return false;
+            return true;
+        });
+
+        if (incoming) {
+            const startedTime = incoming.call_started_at ? new Date(incoming.call_started_at).getTime() : 0;
+            if (startedTime > 0 && startedTime < (adminPageLoadTimestamp - 4000)) {
+                dismissedCallIds.add(incoming.id);
+                return;
+            }
+            if (!activeIncomingCall || activeIncomingCall.id !== incoming.id) {
+                triggerIncomingCallRing(incoming, false);
+            }
+        } else if (activeIncomingCall) {
+            declineIncomingCall(true);
+        }
+    })
+    .catch(() => {});
+}
+
+export function acceptIncomingCall() {
+    callRingtone.stop();
+    if (ringTimeoutTimer) {
+        clearTimeout(ringTimeoutTimer);
+        ringTimeoutTimer = null;
+    }
+    const modal = document.getElementById('incoming-call-modal');
+    if (modal) modal.classList.remove('active');
+
+    if (activeIncomingCall) {
+        const targetCall = activeIncomingCall;
+        activeIncomingCall = null;
+        if (window.location.pathname.includes('/interviews/' + targetCall.id)) {
+            startInterviewerCall(true);
+        } else {
+            window.location.href = `/interviews/${targetCall.id}?join_call=1`;
+        }
+    }
+}
+
+export function declineIncomingCall(silent = false) {
+    callRingtone.stop();
+    if (ringTimeoutTimer) {
+        clearTimeout(ringTimeoutTimer);
+        ringTimeoutTimer = null;
+    }
+    const modal = document.getElementById('incoming-call-modal');
+    if (modal) modal.classList.remove('active');
+
+    if (activeIncomingCall) {
+        dismissedCallIds.add(activeIncomingCall.id);
+        activeIncomingCall = null;
+    }
+
+    if (!silent && typeof window.Swal !== 'undefined') {
+        window.Swal.fire({
+            icon: 'info',
+            title: 'Call Missed / Declined',
+            text: 'You can click "Join Active Call" from the list whenever you are ready.',
+            timer: 3000,
+            showConfirmButton: false,
+            toast: true,
+            position: 'top-end'
+        });
+    }
+}
+
+export function subscribeLiveSync(interviewId) {
+    if (liveSyncChannel) {
+        try { liveSyncChannel.close(); } catch(e) {}
+    }
+    liveSyncChannel = new BroadcastChannel('live_sync_' + interviewId);
+    liveSyncChannel.onmessage = function(event) {
+        const data = event.data;
+        if (!data) return;
+
+        if (data.type === 'code_sync') {
+            if (data.language) {
+                const langEl = document.getElementById('modal-code-lang');
+                if (langEl) langEl.innerText = data.language.toUpperCase();
+            }
+            if (data.code !== undefined) {
+                const codeEl = document.getElementById('modal-code-display');
+                if (codeEl) codeEl.innerText = data.code || '// Candidate has not typed any code yet.';
+            }
+        } else if (data.type === 'notes_sync') {
+            if (data.notes !== undefined) {
+                const notesEl = document.getElementById('modal-notes-display');
+                if (notesEl) notesEl.innerText = data.notes || 'No candidate notes written yet.';
+            }
+        } else if (data.type === 'drawing_sync') {
+            const drawingImg = document.getElementById('modal-drawing-img');
+            const noDrawing = document.getElementById('no-drawing-placeholder');
+            if (data.drawing) {
+                if (drawingImg) {
+                    drawingImg.src = data.drawing;
+                    drawingImg.style.display = 'block';
+                }
+                if (noDrawing) noDrawing.style.display = 'none';
+            } else {
+                if (drawingImg) drawingImg.style.display = 'none';
+                if (noDrawing) noDrawing.style.display = 'block';
+            }
+        } else if (data.type === 'chat_message' || data.type === 'violation_logged' || data.type === 'violation_occurred') {
+            pollReviewData();
+        }
+    };
+
+    if (interviewerSigChannel) {
+        try { interviewerSigChannel.close(); } catch(e) {}
+    }
+    interviewerSigChannel = new BroadcastChannel('interview_call_' + interviewId);
+    interviewerSigChannel.onmessage = function(event) {
+        const data = event.data;
+        if (!data) return;
+        if (data.type === 'violation_occurred' || data.type === 'violation_logged' || data.type === 'candidate_joined' || data.type === 'tab_switch') {
+            setTimeout(pollReviewData, 200);
+        }
+    };
+}
+
+export function openReviewModal(id, name, uid, autoJoinCall = false) {
+    currentInterviewId = id;
+    acknowledgedViolationCount = 0;
+    sosDismissed = false;
+    sosAutoTriggerDisabled = false;
+
+    const toggleSw = document.getElementById('sosToggle');
+    if (toggleSw) toggleSw.classList.add('on');
+
+    const candNameEl = document.getElementById('modal-cand-name');
+    const candUidEl = document.getElementById('modal-cand-uid');
+    if (candNameEl) candNameEl.innerText = name;
+    if (candUidEl) candUidEl.innerText = 'Unique Submission ID: ' + uid;
+
+    const candInitials = getInitials(name);
+    const avatarCircle = document.getElementById('modal-cand-avatar-circle');
+    const avatarName = document.getElementById('cand-avatar-name');
+    if (avatarCircle) avatarCircle.innerText = candInitials;
+    if (avatarName) avatarName.innerText = name;
+
+    const reviewModal = document.getElementById('review-modal');
+    if (reviewModal) reviewModal.classList.add('active');
+
+    resetZoomScreen();
+    switchIdeTab('code');
+
+    subscribeLiveSync(id);
+    pollReviewData();
+    if (sosPollInterval) clearInterval(sosPollInterval);
+    sosPollInterval = setInterval(pollReviewData, 2500);
+
+    if (autoJoinCall) {
+        setTimeout(() => {
+            startInterviewerCall(true);
+        }, 400);
+    }
+}
+
+export function sendInterviewerPeerHeartbeat(action = 'heartbeat') {
+    if (!currentInterviewId) return;
+    const currentUserId = window.currentUserId || 0;
+    const currentUserName = window.currentUserName || 'Interviewer';
+    const currentUserRole = window.currentUserRole || 'interviewer';
+    const myPeerId = 'interviewer_' + currentInterviewId + '_' + currentUserId;
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;
+
+    fetch(`/interviews/${currentInterviewId}/peer-heartbeat`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': csrfToken
+        },
+        body: JSON.stringify({
+            peer_id: myPeerId,
+            name: currentUserName,
+            role: currentUserRole,
+            action: action
+        })
+    }).catch(() => {});
+}
+
+export function pollReviewData() {
+    if (!currentInterviewId) return;
+    if (interviewerLocalStream) {
+        sendInterviewerPeerHeartbeat('heartbeat');
+    }
+
+    fetch(`/interviews/${currentInterviewId}/poll`, {
+        headers: { 'Accept': 'application/json' }
+    })
+        .then(r => {
+            if (!r.ok) return null;
+            const contentType = r.headers.get('content-type');
+            if (!contentType || !contentType.includes('application/json')) return null;
+            return r.json();
+        })
+        .then(data => {
+            if (!data) return;
+
+            const currentUserId = window.currentUserId || 0;
+            const myPeerId = 'interviewer_' + currentInterviewId + '_' + currentUserId;
+
+            if (data.active_peers && Array.isArray(data.active_peers)) {
+                const activeIds = new Set(data.active_peers.map(p => p.peer_id));
+
+                data.active_peers.forEach(p => {
+                    if (p.peer_id && p.peer_id !== myPeerId) {
+                        let roleLabel = p.role === 'admin' ? ('Admin ' + (p.name || '')) : ('Panelist ' + (p.name || ''));
+                        if (p.peer_id.startsWith('interviewer_')) {
+                            if (interviewerLocalStream && interviewerPeer && interviewerPeer.open) {
+                                if (!panelistMeshTiles.has(p.peer_id)) {
+                                    try {
+                                        const outCall = interviewerPeer.call(p.peer_id, interviewerLocalStream);
+                                        if (outCall) {
+                                            outCall.on('stream', remoteStream => {
+                                                addOrUpdatePanelistTile(p.peer_id, remoteStream, roleLabel);
+                                            });
+                                        }
+                                    } catch(e) {}
+                                }
+                            }
+                        }
+                    }
+                });
+
+                panelistMeshTiles.forEach((_, pid) => {
+                    if (!activeIds.has(pid)) {
+                        removePanelistTile(pid);
+                    }
+                });
+            }
+
+            const codeLang = document.getElementById('modal-code-lang');
+            const codeDisplay = document.getElementById('modal-code-display');
+            const outputDisplay = document.getElementById('modal-output-display');
+            const notesDisplay = document.getElementById('modal-notes-display');
+
+            if (codeLang) codeLang.innerText = (data.submitted_language || 'UNKNOWN').toUpperCase();
+            if (codeDisplay) codeDisplay.innerText = data.submitted_code || '// Candidate has not typed any code yet.';
+            if (outputDisplay) outputDisplay.innerText = data.code_output || 'No execution output.';
+            if (notesDisplay) notesDisplay.innerText = data.candidate_notes || 'No candidate notes written yet.';
+
+            const drawingImg = document.getElementById('modal-drawing-img');
+            const noDrawing = document.getElementById('no-drawing-placeholder');
+            if (data.candidate_drawing) {
+                if (drawingImg) {
+                    drawingImg.src = data.candidate_drawing;
+                    drawingImg.style.display = 'block';
+                }
+                if (noDrawing) noDrawing.style.display = 'none';
+            } else {
+                if (drawingImg) drawingImg.style.display = 'none';
+                if (noDrawing) noDrawing.style.display = 'block';
+            }
+
+            // Saved recordings
+            const recContainer = document.getElementById('modal-recordings-container');
+            if (recContainer) {
+                const recPath = data.recording_path;
+                let recList = data.recordings || [];
+                if (recList.length === 0 && recPath) {
+                    recList = [{ url: recPath, created_at: new Date().toISOString(), original_index: 0 }];
+                }
+
+                if (recList.length > 0) {
+                    recList.sort((a, b) => {
+                        const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
+                        const timeB = b.created_at ? new Date(b.created_at).getTime() : 0;
+                        return timeB - timeA;
+                    });
+
+                    let recHtml = `<div class="text-xs text-sky-400 font-bold mb-2.5 flex justify-between items-center">
+                        <span>📹 Stored Video Sessions (${recList.length} recording${recList.length > 1 ? 's' : ''})</span>
+                        <span class="text-[0.65rem] text-slate-400">📜 Scroll to view older recordings</span>
+                    </div>`;
+
+                    recList.forEach((r, displayIdx) => {
+                        let videoUrl = typeof r === 'string' ? r : (r.stream_url || r.url || recPath);
+                        if (videoUrl && !videoUrl.startsWith('http') && !videoUrl.startsWith('/')) {
+                            videoUrl = '/' + videoUrl;
+                        }
+                        if (videoUrl && videoUrl.includes('/storage/')) {
+                            videoUrl = videoUrl.replace('/storage/', '/media-stream/');
+                        }
+                        const origIdx = (typeof r === 'object' && r.original_index !== undefined) ? r.original_index : displayIdx;
+                        const dateObj = (r && r.created_at) ? new Date(r.created_at) : new Date();
+                        const dateStr = dateObj.toLocaleDateString() + ' ' + dateObj.toLocaleTimeString();
+                        const downloadUrl = (typeof r === 'object' && r.download_url) ? r.download_url : (`/interviews/${currentInterviewId}/download-recording?index=${origIdx}`);
+                        const mimeType = (typeof r === 'object' && r.mime_type) ? r.mime_type : ((videoUrl && videoUrl.includes('.mp4')) ? 'video/mp4' : 'video/webm');
+
+                        recHtml += `<div class="bg-white/5 border border-slate-700/60 rounded-xl p-3 mb-3">
+                            <div class="flex justify-between items-center mb-2">
+                                <div>
+                                    <strong class="text-white text-xs">📹 Session Recording #${recList.length - displayIdx}</strong>
+                                    <span class="text-[0.7rem] text-slate-400 ml-2">📅 ${dateStr}</span>
+                                </div>
+                                <a href="${downloadUrl}" target="_blank" download class="bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs px-3 py-1 rounded-md text-decoration-none inline-flex items-center gap-1">
+                                    📥 Download Video
+                                </a>
+                            </div>
+                            <video controls preload="metadata" class="w-full max-h-[240px] rounded-lg bg-black outline-none border border-white/10">
+                                <source src="${videoUrl}" type="${mimeType}">
+                                <source src="${videoUrl}">
+                                Your browser does not support video playback.
+                            </video>
+                        </div>`;
+                    });
+                    recContainer.innerHTML = recHtml;
+                } else {
+                    recContainer.innerHTML = '<div class="text-slate-400 text-xs text-center pt-10">No video recordings saved for this candidate yet.</div>';
+                }
+            }
+
+            // Live Chat history
+            const chatHistory = document.getElementById('interviewer-chat-history');
+            const interviewerColors = ['#6366f1', '#10b981', '#f59e0b', '#ec4899', '#8b5cf6', '#06b6d4', '#f97316'];
+
+            if (chatHistory && data.warnings) {
+                if (data.warnings.length > 0) {
+                    let chatHtml = '';
+                    data.warnings.forEach(w => {
+                        const isCand = (w.sent_by === null || w.sent_by === undefined);
+                        const senderName = isCand 
+                            ? (data.candidate_name || 'Candidate') 
+                            : (w.sender ? w.sender.name : 'Interviewer');
+                        
+                        const color = isCand 
+                            ? '#38bdf8' 
+                            : interviewerColors[(w.sent_by || 1) % interviewerColors.length];
+
+                        const badgeLabel = isCand ? 'Candidate' : 'Panelist';
+                        const badgeClass = isCand ? 'bg-sky-500/20 text-sky-300 border-sky-500/30' : 'bg-indigo-500/20 text-indigo-300 border-indigo-500/30';
+
+                        chatHtml += `<div class="chat-message mb-2 p-2.5 rounded-lg border-l-2 transition-all w-full shrink-0" style="background: ${color}1a; border-color: ${color};">
+                            <div class="flex justify-between items-center mb-1 gap-2">
+                                <div class="flex items-center gap-1.5 min-w-0">
+                                    <span class="w-1.5 h-1.5 rounded-full shrink-0" style="background: ${color};"></span>
+                                    <strong class="text-xs truncate" style="color: ${color};">${senderName}</strong>
+                                    <span class="text-[9.5px] uppercase font-bold px-1.5 py-0.2 rounded ${badgeClass} border shrink-0">${badgeLabel}</span>
+                                </div>
+                                <span class="text-[10.5px] text-slate-500 shrink-0 font-mono">${new Date(w.created_at || Date.now()).toLocaleTimeString()}</span>
+                            </div>
+                            <div class="text-slate-200 text-xs leading-relaxed font-medium pl-3 break-words">${w.message}</div>
+                        </div>`;
+                    });
+                    chatHistory.className = 'bg-[#0d1220] border border-[#1b2233] rounded-[9px] h-[150px] overflow-y-auto p-3 flex flex-col gap-2 mb-2.5';
+                    chatHistory.innerHTML = chatHtml;
+                    chatHistory.scrollTop = chatHistory.scrollHeight;
+                } else {
+                    chatHistory.className = 'bg-[#0d1220] border border-[#1b2233] rounded-[9px] h-[150px] overflow-y-auto p-3 mb-2.5';
+                    chatHistory.innerHTML = '<div class="h-full w-full flex items-center justify-center text-xs text-[#5b637a] italic">No chat history. Send a message below.</div>';
+                }
+            }
+
+            currentTabScreenshotEnabled = (data.enable_tab_switch_screenshot !== undefined) ? Boolean(data.enable_tab_switch_screenshot) : true;
+            updateScreenshotToggleBtnUI(currentTabScreenshotEnabled);
+
+            // Screenshots container
+            const shotContainer = document.getElementById('modal-screenshots-container');
+            if (shotContainer) {
+                const shotList = data.tab_switch_screenshots || [];
+                if (shotList.length > 0) {
+                    let shotHtml = `<div class="text-xs text-amber-400 font-bold mb-2.5 flex justify-between items-center">
+                        <span>📸 Tab-Switch Screenshots Captured (${shotList.length})</span>
+                        <span class="text-[0.65rem] text-slate-400">Click image to enlarge full size</span>
+                    </div><div class="grid grid-cols-2 sm:grid-cols-3 gap-3">`;
+
+                    shotList.forEach((s) => {
+                        let url = typeof s === 'string' ? s : (s.url || s.full_url);
+                        if (url && !url.startsWith('http') && !url.startsWith('/')) {
+                            url = '/' + url;
+                        }
+                        const timeStr = (s && s.timestamp) ? new Date(s.timestamp).toLocaleTimeString() : '';
+                        shotHtml += `<div class="bg-white/5 border border-slate-700/60 rounded-lg p-2 text-center">
+                            <img src="${url}" class="w-full h-[110px] object-cover rounded-md cursor-pointer border border-white/10" onclick="window.open('${url}', '_blank')" title="Click to view full image" />
+                            <div class="text-[0.65rem] text-slate-400 mt-1">📅 ${timeStr}</div>
+                            <a href="${url}" target="_blank" download class="bg-amber-600 text-white text-[0.65rem] font-bold px-2 py-0.5 rounded inline-block mt-1">
+                                📥 View / Download
+                            </a>
+                        </div>`;
+                    });
+                    shotHtml += `</div>`;
+                    shotContainer.innerHTML = shotHtml;
+                } else {
+                    shotContainer.innerHTML = '<div class="text-slate-400 text-xs text-center pt-10">No tab-switch screenshots captured for this candidate yet.</div>';
+                }
+            }
+
+            // Header live pulse dot & buttons visibility
+            const livePulseDot = document.getElementById('live-call-pulse');
+            const recStartBtn = document.getElementById('btn-start-recording');
+            const recStopBtn = document.getElementById('btn-stop-recording');
+            const startBtn = document.getElementById('btn-start-call');
+            const leaveBtn = document.getElementById('btn-leave-call');
+            const endAllBtn = document.getElementById('btn-end-all-call');
+            const micBtn = document.getElementById('btn-toggle-interviewer-mic');
+            const camBtn = document.getElementById('btn-toggle-interviewer-cam');
+
+            const timelinePill = document.getElementById('timeline-status-pill');
+
+            if (data.call_status) {
+                if (data.call_status === 'active') {
+                    if (!interviewerLocalStream) {
+                        if (livePulseDot) livePulseDot.style.display = 'none';
+                        if (startBtn) {
+                            const icon = startBtn.querySelector('i');
+                            const span = startBtn.querySelector('span');
+                            if (icon) icon.className = 'fa-solid fa-phone';
+                            if (span) span.innerText = 'Join Call';
+                            startBtn.style.display = 'inline-flex';
+                        }
+                        if (leaveBtn) leaveBtn.style.display = 'none';
+                        if (endAllBtn) endAllBtn.style.display = 'none';
+                        if (micBtn) micBtn.style.display = 'none';
+                        if (camBtn) camBtn.style.display = 'none';
+
+                        if (timelinePill) {
+                            const icon = timelinePill.querySelector('i');
+                            const span = timelinePill.querySelector('span');
+                            if (icon) icon.className = 'fa-solid fa-circle text-[8px] animate-pulse';
+                            if (span) span.innerText = 'Call in progress';
+                            timelinePill.className = 'pill blue live inline-flex items-center gap-1.5 font-semibold text-[11px] px-2.5 py-1 rounded-full border border-[rgba(75,130,247,0.35)] text-[#4b82f7] bg-[rgba(75,130,247,0.12)]';
+                        }
+                    } else {
+                        if (livePulseDot) livePulseDot.style.display = 'inline-block';
+                        if (startBtn) startBtn.style.display = 'none';
+                        if (leaveBtn) leaveBtn.style.display = 'inline-flex';
+                        if (endAllBtn) endAllBtn.style.display = 'inline-flex';
+                        if (micBtn) micBtn.style.display = 'inline-flex';
+                        if (camBtn) camBtn.style.display = 'inline-flex';
+
+                        if (timelinePill) {
+                            const icon = timelinePill.querySelector('i');
+                            const span = timelinePill.querySelector('span');
+                            if (icon) icon.className = 'fa-solid fa-circle text-[8px] animate-pulse';
+                            if (span) span.innerText = 'Connected (Live)';
+                            timelinePill.className = 'pill blue live inline-flex items-center gap-1.5 font-semibold text-[11px] px-2.5 py-1 rounded-full border border-[rgba(75,130,247,0.35)] text-[#4b82f7] bg-[rgba(75,130,247,0.12)]';
+                        }
+                    }
+                    if (recStartBtn && (!adminMediaRecorder || adminMediaRecorder.state === 'inactive')) {
+                        recStartBtn.style.display = 'inline-flex';
+                    }
+                } else if (data.call_status === 'ended' || data.call_status === 'idle') {
+                    if (interviewerLocalStream && data.call_status === 'ended') leaveInterviewerCall();
+                    if (livePulseDot) livePulseDot.style.display = 'none';
+                    if (startBtn) {
+                        const icon = startBtn.querySelector('i');
+                        const span = startBtn.querySelector('span');
+                        if (icon) icon.className = 'fa-solid fa-phone';
+                        if (span) span.innerText = (data.call_status === 'ended') ? 'Restart call' : 'Start / Join Call';
+                        startBtn.style.display = 'inline-flex';
+                    }
+                    if (leaveBtn) leaveBtn.style.display = 'none';
+                    if (endAllBtn) endAllBtn.style.display = 'none';
+                    if (micBtn) micBtn.style.display = 'none';
+                    if (camBtn) camBtn.style.display = 'none';
+                    if (recStartBtn) recStartBtn.style.display = 'none';
+                    if (recStopBtn) recStopBtn.style.display = 'none';
+
+                    if (timelinePill && data.call_status === 'ended') {
+                        const icon = timelinePill.querySelector('i');
+                        const span = timelinePill.querySelector('span');
+                        if (icon) icon.className = 'fa-solid fa-circle text-[8px]';
+                        if (span) span.innerText = 'Call ended';
+                        timelinePill.className = 'pill red inline-flex items-center gap-1.5 font-semibold text-[11px] px-2.5 py-1 rounded-full border border-[rgba(239,74,95,0.32)] text-[#ef4a5f] bg-[rgba(239,74,95,0.1)]';
+                    }
+                }
+            }
+
+            // Proctoring logs
+            const logsDisplay = document.getElementById('modal-logs-display');
+            let logsHtml = '';
+            let currentViolations = [];
+
+            if (data.proctor_logs && data.proctor_logs.length > 0) {
+                data.proctor_logs.forEach(l => {
+                    let icoClass = 'amber';
+                    let faIcon = 'fa-solid fa-window-restore';
+                    let isFlag = false;
+
+                    if (l.type === 'focus_lost') { icoClass = 'amber'; faIcon = 'fa-solid fa-window-restore'; }
+                    else if (l.type === 'gaze_anomaly' || l.type === 'gaze_fixed_staring') { icoClass = 'amber'; faIcon = 'fa-solid fa-eye'; }
+                    else if (l.type === 'gaze_lower_device' || l.type === 'reading_external_device') { icoClass = 'red'; faIcon = 'fa-solid fa-mobile-screen'; isFlag = true; }
+                    else if (l.type === 'question_repeat_lower' || l.type === 'question_repetition') { icoClass = 'red'; faIcon = 'fa-solid fa-comments'; isFlag = true; }
+                    else if (l.type === 'talking_on_phone') { icoClass = 'red'; faIcon = 'fa-solid fa-phone'; isFlag = true; }
+                    else if (l.type === 'external_ai_detected') { icoClass = 'red'; faIcon = 'fa-solid fa-robot'; isFlag = true; }
+                    else if (l.type === 'tab_switch') { icoClass = 'amber'; faIcon = 'fa-solid fa-window-restore'; }
+
+                    if (['paste_event', 'tab_switch', 'focus_lost', 'gaze_anomaly', 'gaze_fixed_staring', 'gaze_lower_device', 'question_repeat_lower', 'question_repetition', 'external_ai_detected', 'talking_secondary_person', 'talking_on_phone', 'reading_external_device'].includes(l.type)) {
+                        currentViolations.push(l);
+                    }
+
+                    let screenshotLink = l.screenshot_url ? `<a href="${l.screenshot_url}" target="_blank" class="text-sky-400 underline ml-1 font-medium">[<i class="fa-solid fa-camera mr-0.5"></i> Screenshot]</a>` : '';
+                    let aiBadge = '';
+
+                    if (l.ai_verdict) {
+                        const confPct = Math.round((l.ai_verdict.confidence || 0.85) * 100);
+                        const engineName = l.ai_verdict.engine || 'AI Engine';
+                        const toolName = l.ai_verdict.ai_tool_detected ? ` &bull; Detected: <strong>${l.ai_verdict.ai_tool_detected}</strong>` : '';
+                        aiBadge = `<div class="mt-1 text-[11px] text-red-300"><b>AI inspector &middot; ${confPct}% cheating confidence</b> (${engineName}${toolName})</div>`;
+                        isFlag = true;
+                    }
+
+                    const formattedType = (l.type || 'violation').replace(/_/g, ' ');
+                    const titleCap = formattedType.charAt(0).toUpperCase() + formattedType.slice(1);
+
+                    logsHtml += `<div class="log-item flex gap-2.5 p-3 border-b border-[#1b2233] last:border-b-0 ${isFlag ? 'bg-[rgba(239,74,95,0.1)] flag' : ''}">
+                        <div class="log-ico w-6 h-6 rounded-md flex-shrink-0 flex items-center justify-center text-[11px] mt-0.5 ${icoClass === 'amber' ? 'bg-[rgba(240,169,57,0.12)] text-[#f0a939]' : 'bg-[rgba(239,74,95,0.1)] text-[#ef4a5f]'}">
+                            <i class="${faIcon}"></i>
+                        </div>
+                        <div>
+                            <div class="log-text text-xs leading-relaxed text-slate-300"><b class="text-white ${isFlag ? '!text-[#ef4a5f]' : ''}">${titleCap}</b> &mdash; ${l.details || ''}${screenshotLink}${aiBadge}</div>
+                            <div class="log-time text-[10.5px] text-slate-500 mt-0.5">${new Date(l.timestamp).toLocaleTimeString()}</div>
+                        </div>
+                    </div>`;
+                });
+            } else {
+                logsHtml = '<div class="p-4 text-center text-emerald-400 text-xs font-medium"><i class="fa-solid fa-circle-check mr-1"></i> Zero proctoring violations recorded.</div>';
+            }
+            if (logsDisplay) logsDisplay.innerHTML = logsHtml;
+
+            activeViolations = currentViolations;
+            const totalViolations = currentViolations.length;
+
+            // Trigger SOS Modal Popup and Ringtone Alarm ONLY if NEW unacknowledged violations occurred & SOS Auto-Trigger is active
+            if (totalViolations > 0 && totalViolations > acknowledgedViolationCount && !sosAutoTriggerDisabled) {
+                sosDismissed = false;
+                const newViolations = currentViolations.slice(acknowledgedViolationCount);
+                openSosModal(newViolations);
+            }
+        })
+        .catch(() => {});
+}
+
+export function openSosModal(specificViolations = null) {
+    let violationsToDisplay = specificViolations;
+    if (!violationsToDisplay || violationsToDisplay.length === 0) {
+        if (acknowledgedViolationCount > 0 && activeViolations.length > acknowledgedViolationCount) {
+            violationsToDisplay = activeViolations.slice(acknowledgedViolationCount);
+        } else {
+            violationsToDisplay = activeViolations;
+        }
+    }
+
+    let html = '';
+    if (violationsToDisplay && violationsToDisplay.length > 0) {
+        violationsToDisplay.forEach(v => {
+            let typeTitle = (v.type || '').toUpperCase();
+            if (v.type === 'external_ai_detected') {
+                typeTitle = 'candidate might use external ai';
+            } else if (v.type === 'tab_switch') {
+                typeTitle = 'Candidate Switched Browser Tab';
+            } else if (v.type === 'talking_on_phone') {
+                typeTitle = 'Candidate Talking on Phone';
+            } else if (v.type === 'reading_external_device') {
+                typeTitle = 'Candidate Reading from External Device';
+            } else if (v.type === 'question_repetition' || v.type === 'question_repeat_lower') {
+                typeTitle = 'Candidate Reading Question Out Loud';
+            } else if (v.type === 'gaze_anomaly' || v.type === 'gaze_lower_device') {
+                typeTitle = 'Candidate Lower Eye Gaze Detected';
+            }
+            const borderCol = v.type === 'external_ai_detected' ? 'border-red-500' : 'border-amber-500';
+            const textCol = v.type === 'external_ai_detected' ? 'text-red-300' : 'text-amber-300';
+
+            html += `<div class="mb-2.5 p-2 bg-white/5 rounded-md border-l-4 ${borderCol}">
+                <strong class="${textCol}">🚨 ${typeTitle}:</strong> ${v.details || 'Suspicious activity detected.'}
+                <div class="text-[0.65rem] text-slate-400 mt-1">Timestamp: ${new Date(v.timestamp).toLocaleTimeString()}</div>
+            </div>`;
+        });
+    } else {
+        html = '<div class="text-slate-300 text-sm">Potential proctoring alert flagged by engine.</div>';
+    }
+    const listEl = document.getElementById('sos-violation-list');
+    const modalEl = document.getElementById('sos-modal');
+    if (listEl) listEl.innerHTML = html;
+    if (modalEl) modalEl.classList.add('active');
+
+    try {
+        callRingtone.start();
+    } catch(e) {}
+}
+
+export function stopSosAlarm() {
+    try {
+        callRingtone.stop();
+    } catch(e) {}
+
+    const modalEl = document.getElementById('sos-modal');
+    if (modalEl) modalEl.classList.remove('active');
+    
+    acknowledgedViolationCount = activeViolations.length;
+    sosDismissed = true;
+}
+
+export function interviewerLogoutAction() {
+    const form = document.getElementById('logout-form');
+    if (typeof window.Swal !== 'undefined') {
+        window.Swal.fire({
+            title: 'Logout of Portal?',
+            text: 'Are you sure you want to log out of your session?',
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonColor: '#ef4444',
+            cancelButtonColor: '#475569',
+            confirmButtonText: 'Yes, Logout'
+        }).then((result) => {
+            if (result.isConfirmed && form) {
+                form.submit();
+            }
+        });
+    } else if (form) {
+        form.submit();
+    }
+}
+
+export function regenerateCandidatePassword() {
+    if (!currentInterviewId) return;
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;
+
+    if (typeof window.Swal !== 'undefined') {
+        window.Swal.fire({
+            title: 'Regenerate Candidate Password?',
+            text: 'This will invalidate the candidate\'s current password and issue a new system password.',
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#eab308',
+            cancelButtonColor: '#475569',
+            confirmButtonText: 'Regenerate Now'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                fetch(`/interviews/${currentInterviewId}/regenerate-password`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': csrfToken
+                    }
+                })
+                .then(r => r.json())
+                .then(res => {
+                    if (res.success) {
+                        window.Swal.fire({
+                            icon: 'success',
+                            title: 'New Password Generated!',
+                            text: 'New Candidate Passcode: ' + res.new_password,
+                            confirmButtonColor: '#6366f1'
+                        }).then(() => window.location.reload());
+                    }
+                });
+            }
+        });
+    }
+}
+
+export function blockCandidateAction() {
+    if (!currentInterviewId) return;
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;
+
+    if (typeof window.Swal !== 'undefined') {
+        window.Swal.fire({
+            title: '⛔ Block Candidate Email & IP?',
+            text: 'This will immediately terminate the candidate session and block their email and client IP address.',
+            icon: 'error',
+            showCancelButton: true,
+            confirmButtonColor: '#ef4444',
+            cancelButtonColor: '#475569',
+            confirmButtonText: 'Yes, Block Candidate'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                fetch(`/interviews/${currentInterviewId}/block-candidate`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': csrfToken
+                    }
+                })
+                .then(r => r.json())
+                .then(res => {
+                    if (res.success) {
+                        window.Swal.fire({
+                            icon: 'success',
+                            title: 'Candidate Blocked',
+                            text: res.message,
+                            confirmButtonColor: '#6366f1'
+                        }).then(() => {
+                            closeReviewModal();
+                            window.location.reload();
+                        });
+                    }
+                });
+            }
+        });
+    }
+}
+
+export function initMeteredIceServers() {
+    if (typeof window.getMeteredIceServers === 'function') {
+        return window.getMeteredIceServers().then(servers => {
+            if (Array.isArray(servers) && servers.length > 0) {
+                globalIceServers = servers;
+            }
+            return globalIceServers;
+        });
+    }
+    return Promise.resolve(globalIceServers);
+}
+
+export function safePlayMediaStream(videoElem, stream, isSelf = false) {
+    if (!videoElem || !stream) return;
+    if (isSelf) videoElem.muted = true;
+    if (videoElem.srcObject !== stream) {
+        videoElem.srcObject = stream;
+    }
+    const playPromise = videoElem.play();
+    if (playPromise !== undefined) {
+        playPromise.catch(err => {
+            if (err.name === 'AbortError' || err.name === 'NotAllowedError') {
+                videoElem.onloadedmetadata = () => {
+                    videoElem.play().catch(() => {});
+                };
+            }
+        });
+    }
+}
+
+export function addOrUpdatePanelistTile(peerId, stream, name = 'Panelist') {
+    const currentUserId = window.currentUserId || 0;
+    if (!peerId || peerId === ('interviewer_' + currentInterviewId + '_' + currentUserId)) return;
+    const grid = document.getElementById('panelist-mesh-grid');
+    if (!grid) return;
+
+    let tile = document.getElementById('panelist-tile-' + peerId);
+    let videoElem;
+
+    if (!tile) {
+        tile = document.createElement('div');
+        tile.id = 'panelist-tile-' + peerId;
+        tile.className = 'relative bg-[#050811] rounded-xl border-2 border-indigo-500 overflow-hidden h-[220px]';
+
+        videoElem = document.createElement('video');
+        videoElem.id = 'panelist-video-' + peerId;
+        videoElem.autoplay = true;
+        videoElem.playsInline = true;
+        videoElem.className = 'w-full h-full object-cover';
+
+        const labelDiv = document.createElement('div');
+        labelDiv.className = 'absolute bottom-1.5 left-1.5 bg-indigo-600/85 px-2 py-0.5 rounded text-[0.65rem] text-white font-semibold z-10';
+        labelDiv.innerText = '🎙️ ' + name;
+
+        tile.appendChild(videoElem);
+        tile.appendChild(labelDiv);
+        grid.appendChild(tile);
+    } else {
+        videoElem = document.getElementById('panelist-video-' + peerId);
+    }
+
+    if (videoElem && stream) {
+        safePlayMediaStream(videoElem, stream);
+    }
+
+    panelistMeshTiles.set(peerId, stream);
+}
+
+export function removePanelistTile(peerId) {
+    const tile = document.getElementById('panelist-tile-' + peerId);
+    if (tile) tile.remove();
+    panelistMeshTiles.delete(peerId);
+}
+
+export async function initInterviewerPeer() {
+    if (!currentInterviewId || typeof window.Peer === 'undefined') return;
+    await initMeteredIceServers();
+
+    const currentUserId = window.currentUserId || 0;
+    const currentUserName = window.currentUserName || 'Interviewer';
+    const myPeerId = 'interviewer_' + currentInterviewId + '_' + currentUserId;
+
+    if (interviewerPeer && !interviewerPeer.destroyed) {
+        try { interviewerPeer.destroy(); } catch(e) {}
+    }
+
+    interviewerPeer = new window.Peer(myPeerId, {
+        config: { iceServers: globalIceServers }
+    });
+
+    interviewerPeer.on('open', id => {
+        if (interviewerSigChannel) {
+            interviewerSigChannel.postMessage({
+                type: 'peer_joined',
+                peer_id: id,
+                user_id: currentUserId,
+                user_name: currentUserName,
+                role: 'interviewer'
+            });
+        }
+    });
+
+    interviewerPeer.on('call', call => {
+        const sendStream = interviewerLocalStream || new MediaStream();
+        try { call.answer(sendStream); } catch(e) {}
+
+        call.on('stream', remoteStream => {
+            if (call.peer === 'cand_' + currentInterviewId) {
+                const candVid = document.getElementById('interviewer-cand-video');
+                const placeholder = document.getElementById('cand-video-placeholder');
+                if (candVid) safePlayMediaStream(candVid, remoteStream);
+                if (placeholder) placeholder.style.display = 'none';
+            } else {
+                addOrUpdatePanelistTile(call.peer, remoteStream, 'Panelist');
+            }
+
+            const badge = document.getElementById('interviewer-call-status');
+            if (badge) {
+                badge.innerText = 'CONNECTED (LIVE)';
+                badge.className = 'px-2.5 py-1 text-xs font-semibold rounded-full bg-emerald-500/30 text-emerald-300 border border-emerald-500';
+            }
+        });
+    });
+
+    const screenPeerId = 'interviewer_screen_' + currentInterviewId;
+    if (screenReceiverPeer && !screenReceiverPeer.destroyed) {
+        try { screenReceiverPeer.destroy(); } catch(e) {}
+    }
+    screenReceiverPeer = new window.Peer(screenPeerId, {
+        config: { iceServers: globalIceServers }
+    });
+    screenReceiverPeer.on('call', call => {
+        call.answer();
+        call.on('stream', screenStream => {
+            const screenVid = document.getElementById('interviewer-screen-video');
+            const placeholder = document.getElementById('screen-video-placeholder');
+            if (screenVid) safePlayMediaStream(screenVid, screenStream);
+            if (placeholder) placeholder.style.display = 'none';
+        });
+    });
+}
+
+export function initInterviewerSigChannel() {
+    if (!currentInterviewId) return;
+    if (interviewerSigChannel) interviewerSigChannel.close();
+
+    interviewerSigChannel = new BroadcastChannel('webrtc_call_' + currentInterviewId);
+    const currentUserId = window.currentUserId || 0;
+    const currentUserName = window.currentUserName || 'Interviewer';
+    const myPeerId = 'interviewer_' + currentInterviewId + '_' + currentUserId;
+
+    interviewerSigChannel.onmessage = async (event) => {
+        const msg = event.data;
+        if (!msg) return;
+
+        if (msg.type === 'violation_occurred') {
+            pollReviewData();
+        }
+
+        if (msg.type === 'peer_joined' || msg.type === 'candidate_ready' || msg.type === 'peer_presence_ack' || msg.type === 'interviewer_joined') {
+            if (msg.peer_id && msg.peer_id !== myPeerId) {
+                if (msg.type === 'peer_joined') {
+                    interviewerSigChannel.postMessage({
+                        type: 'peer_presence_ack',
+                        peer_id: myPeerId,
+                        user_id: currentUserId,
+                        user_name: currentUserName,
+                        role: 'interviewer'
+                    });
+                }
+
+                if (interviewerLocalStream && interviewerPeer && interviewerPeer.open) {
+                    try {
+                        const outCall = interviewerPeer.call(msg.peer_id, interviewerLocalStream);
+                        if (outCall) {
+                            outCall.on('stream', remoteStream => {
+                                if (msg.peer_id === 'cand_' + currentInterviewId) {
+                                    const candVid = document.getElementById('interviewer-cand-video');
+                                    const placeholder = document.getElementById('cand-video-placeholder');
+                                    if (candVid) safePlayMediaStream(candVid, remoteStream);
+                                    if (placeholder) placeholder.style.display = 'none';
+                                } else {
+                                    addOrUpdatePanelistTile(msg.peer_id, remoteStream, msg.user_name || 'Panelist');
+                                }
+
+                                const badge = document.getElementById('interviewer-call-status');
+                                if (badge) {
+                                    badge.innerText = 'CONNECTED (LIVE)';
+                                    badge.className = 'px-2.5 py-1 text-xs font-semibold rounded-full bg-emerald-500/30 text-emerald-300 border border-emerald-500';
+                                }
+                            });
+                        }
+                    } catch(e) {}
+                }
+            }
+        } else if (msg.type === 'peer_left') {
+            if (msg.peer_id === 'cand_' + currentInterviewId) {
+                const placeholder = document.getElementById('cand-video-placeholder');
+                if (placeholder) placeholder.style.display = 'flex';
+            } else if (msg.peer_id) {
+                removePanelistTile(msg.peer_id);
+            }
+        } else if (msg.type === 'answer' && msg.sender === 'candidate' && interviewerPeerConnection) {
+            await interviewerPeerConnection.setRemoteDescription(new RTCSessionDescription(msg.answer));
+        } else if (msg.type === 'ice-candidate' && msg.sender === 'candidate' && interviewerPeerConnection && msg.candidate) {
+            try {
+                await interviewerPeerConnection.addIceCandidate(new RTCIceCandidate(msg.candidate));
+            } catch(e) {}
+        } else if (msg.type === 'end_call_all') {
+            leaveInterviewerCall(false);
+        }
+    };
+}
+
+export function startInterviewerCall(isRejoin = false) {
+    if (!currentInterviewId) return;
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;
+    const currentUserName = window.currentUserName || 'Interviewer';
+
+    if (!isRejoin) {
+        iAmTheCaller = true;
+        const candNameEl = document.getElementById('modal-cand-name');
+        const candName = candNameEl ? candNameEl.innerText : 'Candidate';
+        if (!globalCallChannel) {
+            globalCallChannel = new BroadcastChannel('global_call_alerts');
+        }
+        globalCallChannel.postMessage({
+            type: 'incoming_call',
+            interview_id: currentInterviewId,
+            candidate_name: candName,
+            starter_name: currentUserName,
+            call_started_at: new Date().toISOString()
+        });
+    }
+
+    initInterviewerSigChannel();
+
+    fetch(`/interviews/${currentInterviewId}/call-status`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': csrfToken
+        },
+        body: JSON.stringify({ call_status: 'active', is_rejoin: isRejoin })
+    });
+
+    const handleStream = (stream) => {
+        interviewerLocalStream = stream;
+        const selfVid = document.getElementById('interviewer-self-video');
+        const selfPlace = document.getElementById('self-video-placeholder');
+        if (selfVid) {
+            selfVid.muted = true;
+            safePlayMediaStream(selfVid, stream, true);
+        }
+        if (selfPlace) selfPlace.style.display = 'none';
+
+        const micBtn = document.getElementById('btn-toggle-interviewer-mic');
+        const camBtn = document.getElementById('btn-toggle-interviewer-cam');
+        const startBtn = document.getElementById('btn-start-call');
+        const leaveBtn = document.getElementById('btn-leave-call');
+        const endAllBtn = document.getElementById('btn-end-all-call');
+
+        if (micBtn) micBtn.style.display = 'inline-flex';
+        if (camBtn) camBtn.style.display = 'inline-flex';
+        if (startBtn) startBtn.style.display = 'none';
+        if (leaveBtn) leaveBtn.style.display = 'inline-flex';
+        if (endAllBtn) endAllBtn.style.display = 'inline-flex';
+
+        if (interviewerSigChannel) {
+            interviewerSigChannel.postMessage({ type: 'interviewer_joined', sender: 'interviewer' });
+        }
+
+        if (!interviewerPeer || interviewerPeer.destroyed) {
+            initInterviewerPeer();
+        }
+
+        const makePeerJSCall = () => {
+            if (!interviewerPeer || interviewerPeer.destroyed) return;
+            const candPeerId = 'cand_' + currentInterviewId;
+            activeCall = interviewerPeer.call(candPeerId, stream);
+
+            if (activeCall) {
+                activeCall.on('stream', candRemoteStream => {
+                    const candVid = document.getElementById('interviewer-cand-video');
+                    const placeholder = document.getElementById('cand-video-placeholder');
+                    if (candVid) safePlayMediaStream(candVid, candRemoteStream);
+                    if (placeholder) placeholder.style.display = 'none';
+
+                    candRemoteStream.onaddtrack = () => {
+                        if (placeholder) placeholder.style.display = 'none';
+                        if (candVid) safePlayMediaStream(candVid, candRemoteStream);
+                    };
+
+                    const badge = document.getElementById('interviewer-call-status');
+                    if (badge) {
+                        badge.innerText = 'CONNECTED (LIVE)';
+                        badge.className = 'px-2.5 py-1 text-xs font-semibold rounded-full bg-emerald-500/30 text-emerald-300 border border-emerald-500';
+                    }
+                });
+            }
+        };
+
+        if (interviewerPeer && interviewerPeer.open) {
+            makePeerJSCall();
+        } else if (interviewerPeer) {
+            interviewerPeer.on('open', makePeerJSCall);
+        }
+    };
+
+    const audioConstraints = {
+        echoCancellation: true,
+        noiseSuppression: true,
+        autoGainControl: true
+    };
+
+    navigator.mediaDevices.getUserMedia({ video: true, audio: audioConstraints })
+        .then(handleStream)
+        .catch(() => {
+            navigator.mediaDevices.getUserMedia({ video: true, audio: true })
+                .then(handleStream)
+                .catch(() => {
+                    navigator.mediaDevices.getUserMedia({ video: false, audio: true })
+                        .then(handleStream)
+                        .catch(() => {
+                            navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+                                .then(handleStream)
+                                .catch(err => console.log('WebRTC Stream init error:', err));
+                        });
+                });
+        });
+}
+
+export function leaveInterviewerCall(isExplicitEnd = true) {
+    sendInterviewerPeerHeartbeat('leave');
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;
+
+    if (currentInterviewId && isExplicitEnd) {
+        const endingId = currentInterviewId;
+        endedCallIds.add(endingId);
+        dismissedCallIds.add(endingId);
+
+        if (globalCallChannel) {
+            try {
+                globalCallChannel.postMessage({
+                    type: 'call_ended',
+                    interview_id: endingId
+                });
+            } catch(e) {}
+        }
+
+        if (interviewerSigChannel) {
+            try {
+                interviewerSigChannel.postMessage({ type: 'end_call_all', interview_id: endingId });
+            } catch(e) {}
+        }
+
+        fetch(`/interviews/${endingId}/call-status`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-TOKEN': csrfToken
+            },
+            body: JSON.stringify({ call_status: 'ended' })
+        }).catch(() => {});
+    }
+
+    if (interviewerLocalStream) {
+        try {
+            interviewerLocalStream.getTracks().forEach(t => t.stop());
+        } catch(e) {}
+        interviewerLocalStream = null;
+    }
+    if (activeCall) {
+        try { activeCall.close(); } catch(e) {}
+        activeCall = null;
+    }
+    if (interviewerPeer) {
+        try { interviewerPeer.destroy(); } catch(e) {}
+        interviewerPeer = null;
+    }
+    if (screenReceiverPeer) {
+        try { screenReceiverPeer.destroy(); } catch(e) {}
+        screenReceiverPeer = null;
+    }
+
+    const candPlace = document.getElementById('cand-video-placeholder');
+    const screenPlace = document.getElementById('screen-video-placeholder');
+    const selfPlace = document.getElementById('self-video-placeholder');
+    if (candPlace) candPlace.style.display = 'flex';
+    if (screenPlace) screenPlace.style.display = 'flex';
+    if (selfPlace) selfPlace.style.display = 'flex';
+
+    const candVid = document.getElementById('interviewer-cand-video');
+    if (candVid) candVid.srcObject = null;
+
+    const selfVid = document.getElementById('interviewer-self-video');
+    if (selfVid) selfVid.srcObject = null;
+
+    const livePulseDot = document.getElementById('live-call-pulse');
+    if (livePulseDot) livePulseDot.style.display = 'none';
+
+    const startBtn = document.getElementById('btn-start-call');
+    if (startBtn) {
+        const icon = startBtn.querySelector('i');
+        const span = startBtn.querySelector('span');
+        if (icon) icon.className = 'fa-solid fa-phone';
+        if (span) span.innerText = 'Restart Call';
+        startBtn.style.display = 'inline-flex';
+    }
+
+    const leaveBtn = document.getElementById('btn-leave-call');
+    if (leaveBtn) leaveBtn.style.display = 'none';
+
+    const endAllBtn = document.getElementById('btn-end-all-call');
+    if (endAllBtn) endAllBtn.style.display = 'none';
+
+    const micBtn = document.getElementById('btn-toggle-interviewer-mic');
+    if (micBtn) micBtn.style.display = 'none';
+
+    const camBtn = document.getElementById('btn-toggle-interviewer-cam');
+    if (camBtn) camBtn.style.display = 'none';
+
+    const timelinePill = document.getElementById('timeline-status-pill');
+    if (timelinePill) {
+        const icon = timelinePill.querySelector('i');
+        const span = timelinePill.querySelector('span');
+        if (icon) icon.className = 'fa-solid fa-circle text-[8px]';
+        if (span) span.innerText = 'Call ended';
+        timelinePill.className = 'pill red inline-flex items-center gap-1.5 font-semibold text-[11px] px-2.5 py-1 rounded-full border border-[rgba(239,74,95,0.32)] text-[#ef4a5f] bg-[rgba(239,74,95,0.1)]';
+    }
+}
+
+export function endCallForAll() {
+    const executeEndCall = () => {
+        callRingtone.stop();
+        const modal = document.getElementById('incoming-call-modal');
+        if (modal) modal.classList.remove('active');
+        activeIncomingCall = null;
+        iAmTheCaller = false;
+        leaveInterviewerCall(true);
+    };
+
+    if (typeof window.Swal !== 'undefined') {
+        window.Swal.fire({
+            title: '🛑 End Call for All Participants?',
+            text: 'This will terminate the 2-way call session for candidate and all panelists.',
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#ef4444',
+            cancelButtonColor: '#475569',
+            confirmButtonText: 'Yes, End Call for All'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                executeEndCall();
+            }
+        });
+    } else {
+        if (confirm('End Call for All Participants?')) {
+            executeEndCall();
+        }
+    }
+}
+
+// MediaRecorder recording
+let adminMediaRecorder = null;
+let adminRecordedChunks = [];
+let recAudioContext = null;
+
+export function startCallRecording() {
+    if (!currentInterviewId) {
+        alert('Please open an active candidate interview session first.');
+        return;
+    }
+
+    const candVid = document.getElementById('interviewer-cand-video');
+    const candidateStream = (candVid && candVid.srcObject) ? candVid.srcObject : null;
+    const streamToRecord = new MediaStream();
+
+    if (candidateStream) {
+        candidateStream.getVideoTracks().forEach(track => {
+            if (track.readyState === 'live') {
+                try { streamToRecord.addTrack(track); } catch(e) {}
+            }
+        });
+    }
+
+    if (streamToRecord.getVideoTracks().length === 0 && interviewerLocalStream) {
+        interviewerLocalStream.getVideoTracks().forEach(track => {
+            if (track.readyState === 'live') {
+                try { streamToRecord.addTrack(track); } catch(e) {}
+            }
+        });
+    }
+
+    const candAudioTracks = candidateStream ? candidateStream.getAudioTracks().filter(t => t.readyState === 'live') : [];
+    const adminAudioTracks = interviewerLocalStream ? interviewerLocalStream.getAudioTracks().filter(t => t.readyState === 'live') : [];
+
+    if (candAudioTracks.length > 0 || adminAudioTracks.length > 0) {
+        try {
+            const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+            if (recAudioContext) {
+                try { recAudioContext.close(); } catch(e) {}
+            }
+            recAudioContext = new AudioContextClass();
+            const audioDestination = recAudioContext.createMediaStreamDestination();
+
+            if (candAudioTracks.length > 0) {
+                const candAudioStream = new MediaStream(candAudioTracks);
+                const candSource = recAudioContext.createMediaStreamSource(candAudioStream);
+                candSource.connect(audioDestination);
+            }
+
+            if (adminAudioTracks.length > 0) {
+                const adminAudioStream = new MediaStream(adminAudioTracks);
+                const adminSource = recAudioContext.createMediaStreamSource(adminAudioStream);
+                adminSource.connect(audioDestination);
+            }
+
+            const mixedAudioTrack = audioDestination.stream.getAudioTracks()[0];
+            if (mixedAudioTrack) {
+                streamToRecord.addTrack(mixedAudioTrack);
+            }
+        } catch(e) {
+            const fallbackAudio = candAudioTracks[0] || adminAudioTracks[0];
+            if (fallbackAudio) {
+                try { streamToRecord.addTrack(fallbackAudio); } catch(err) {}
+            }
+        }
+    }
+
+    const activeTracks = streamToRecord.getTracks().filter(t => t.readyState === 'live');
+    if (activeTracks.length === 0) {
+        alert('No active video/audio stream available to record. Please start or join the call first.');
+        return;
+    }
+
+    adminRecordedChunks = [];
+    try {
+        let options = {};
+        if (typeof MediaRecorder.isTypeSupported === 'function') {
+            if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8,opus')) {
+                options = { mimeType: 'video/webm;codecs=vp8,opus' };
+            } else if (MediaRecorder.isTypeSupported('video/webm')) {
+                options = { mimeType: 'video/webm' };
+            }
+        }
+
+        try {
+            adminMediaRecorder = new MediaRecorder(streamToRecord, options);
+        } catch(errOpt) {
+            adminMediaRecorder = new MediaRecorder(streamToRecord);
+        }
+
+        adminMediaRecorder.ondataavailable = function(e) {
+            if (e.data && e.data.size > 0) {
+                adminRecordedChunks.push(e.data);
+            }
+        };
+
+        adminMediaRecorder.onstop = function() {
+            if (recAudioContext) {
+                try { recAudioContext.close(); } catch(e) {}
+                recAudioContext = null;
+            }
+            if (adminRecordedChunks.length === 0) return;
+            const recMime = adminMediaRecorder.mimeType || 'video/webm';
+            const isMp4 = recMime.includes('mp4');
+            const ext = isMp4 ? 'mp4' : 'webm';
+            const blobType = isMp4 ? 'video/mp4' : 'video/webm';
+
+            const blob = new Blob(adminRecordedChunks, { type: blobType });
+            uploadRecordedBlob(blob, ext);
+        };
+
+        adminMediaRecorder.start(1000);
+
+        const recStartBtn = document.getElementById('btn-start-recording');
+        const recStopBtn = document.getElementById('btn-stop-recording');
+        if (recStartBtn) recStartBtn.style.display = 'none';
+        if (recStopBtn) recStopBtn.style.display = 'inline-flex';
+
+        if (typeof window.Swal !== 'undefined') {
+            window.Swal.fire({
+                icon: 'info',
+                title: 'Recording Started',
+                text: 'Interview call recording is active (silent mode - candidate is not notified).',
+                toast: true,
+                position: 'top-end',
+                timer: 3000,
+                showConfirmButton: false
+            });
+        }
+    } catch(e) {
+        alert('Recording failed to initialize: ' + e.message);
+    }
+}
+
+export function stopCallRecording() {
+    if (adminMediaRecorder && adminMediaRecorder.state !== 'inactive') {
+        adminMediaRecorder.stop();
+    }
+    const recStartBtn = document.getElementById('btn-start-recording');
+    const recStopBtn = document.getElementById('btn-stop-recording');
+    if (recStartBtn) recStartBtn.style.display = 'inline-flex';
+    if (recStopBtn) recStopBtn.style.display = 'none';
+}
+
+export function uploadRecordedBlob(blob, ext = 'webm') {
+    if (!currentInterviewId) return;
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;
+
+    const formData = new FormData();
+    formData.append('video', blob, `interview_${currentInterviewId}_${Date.now()}.${ext}`);
+    formData.append('_token', csrfToken);
+
+    fetch(`/candidate/upload-recording/${currentInterviewId}`, {
+        method: 'POST',
+        body: formData
+    })
+    .then(r => r.json())
+    .then(res => {
+        if (res.success) {
+            if (typeof window.Swal !== 'undefined') {
+                window.Swal.fire({
+                    icon: 'success',
+                    title: 'Recording Saved!',
+                    text: 'Call recording saved successfully under Candidate Profile and Report.',
+                    toast: true,
+                    position: 'top-end',
+                    timer: 3500,
+                    showConfirmButton: false
+                });
+            }
+            pollReviewData();
+        }
+    })
+    .catch(err => console.log('Recording upload error:', err));
+}
+
+export function toggleInterviewerMic() {
+    if (!interviewerLocalStream) return;
+    const audioTracks = interviewerLocalStream.getAudioTracks();
+    if (audioTracks.length === 0) return;
+
+    isInterviewerMicOn = !isInterviewerMicOn;
+    audioTracks[0].enabled = isInterviewerMicOn;
+
+    const btn = document.getElementById('btn-toggle-interviewer-mic');
+    if (!btn) return;
+
+    const icon = btn.querySelector('i');
+    if (icon) {
+        icon.className = isInterviewerMicOn ? 'fa-solid fa-microphone' : 'fa-solid fa-microphone-slash';
+    }
+
+    btn.title = isInterviewerMicOn ? 'Mic On (Click to Mute)' : 'Mic Muted (Click to Unmute)';
+
+    if (isInterviewerMicOn) {
+        btn.classList.remove('bg-[#ef4a5f]', 'border-[#ef4a5f]', 'hover:bg-[#d63d51]', 'text-white');
+        btn.classList.add('bg-[#0d1220]', 'text-slate-300', 'border-[#232b3d]');
+    } else {
+        btn.classList.remove('bg-[#0d1220]', 'text-slate-300', 'border-[#232b3d]');
+        btn.classList.add('bg-[#ef4a5f]', 'border-[#ef4a5f]', 'hover:bg-[#d63d51]', 'text-white');
+    }
+}
+
+export function toggleInterviewerCam() {
+    const selfPlaceholder = document.getElementById('self-video-placeholder');
+    const selfVid = document.getElementById('interviewer-self-video');
+
+    isInterviewerCamOn = !isInterviewerCamOn;
+
+    const btn = document.getElementById('btn-toggle-interviewer-cam');
+    if (btn) {
+        const icon = btn.querySelector('i');
+        if (icon) {
+            icon.className = isInterviewerCamOn ? 'fa-solid fa-video' : 'fa-solid fa-video-slash';
+        }
+        btn.title = isInterviewerCamOn ? 'Cam On (Click to Turn Off)' : 'Cam Off (Click to Turn On)';
+
+        if (isInterviewerCamOn) {
+            btn.classList.remove('bg-[#ef4a5f]', 'border-[#ef4a5f]', 'hover:bg-[#d63d51]', 'text-white');
+            btn.classList.add('bg-[#0d1220]', 'text-slate-300', 'border-[#232b3d]');
+        } else {
+            btn.classList.remove('bg-[#0d1220]', 'text-slate-300', 'border-[#232b3d]');
+            btn.classList.add('bg-[#ef4a5f]', 'border-[#ef4a5f]', 'hover:bg-[#d63d51]', 'text-white');
+        }
+    }
+
+    if (interviewerLocalStream) {
+        const videoTracks = interviewerLocalStream.getVideoTracks();
+        if (videoTracks.length > 0) {
+            videoTracks[0].enabled = isInterviewerCamOn;
+        }
+    } else if (isInterviewerCamOn) {
+        navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+            .then(stream => {
+                interviewerLocalStream = stream;
+                if (selfVid) {
+                    selfVid.srcObject = stream;
+                    selfVid.play().catch(() => {});
+                }
+                if (selfPlaceholder) selfPlaceholder.style.display = 'none';
+            })
+            .catch(() => {});
+        return;
+    }
+
+    if (selfPlaceholder) selfPlaceholder.style.display = isInterviewerCamOn ? 'none' : 'flex';
+}
+
+export function closeReviewModal() {
+    if (sosPollInterval) clearInterval(sosPollInterval);
+    if (liveSyncChannel) {
+        try { liveSyncChannel.close(); } catch(e) {}
+        liveSyncChannel = null;
+    }
+    leaveInterviewerCall(true);
+    const modal = document.getElementById('review-modal');
+    if (modal) modal.classList.remove('active');
+}
+
+export function sendSilentWarning() {
+    const input = document.getElementById('warning-input');
+    if (!input) return;
+    const msg = input.value.trim();
+    if (!msg || !currentInterviewId) return;
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;
+
+    input.value = '';
+    if (liveSyncChannel) {
+        liveSyncChannel.postMessage({ type: 'chat_message', message: msg, sender: 'interviewer' });
+    }
+
+    fetch(`/interviews/${currentInterviewId}/warning`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': csrfToken
+        },
+        body: JSON.stringify({ message: msg })
+    })
+    .then(r => r.json())
+    .then(() => {
+        pollReviewData();
+    });
+}
+
+export function setCurrentInterviewId(id) {
+    currentInterviewId = id;
+}
+
+// Bind functions onto window object for template inline onclick handlers
+if (typeof window !== 'undefined') {
+    window.CallRingtoneEngine = CallRingtoneEngine;
+    window.callRingtone = callRingtone;
+    window.getInitials = getInitials;
+    window.zoomScreen = zoomScreen;
+    window.resetZoomScreen = resetZoomScreen;
+    window.toggleFullscreenScreen = toggleFullscreenScreen;
+    window.zoomCandVideo = zoomCandVideo;
+    window.toggleSosAutoTrigger = toggleSosAutoTrigger;
+    window.openReportPage = openReportPage;
+    window.toggleTabScreenshotCapture = toggleTabScreenshotCapture;
+    window.updateScreenshotToggleBtnUI = updateScreenshotToggleBtnUI;
+    window.switchIdeTab = switchIdeTab;
+    window.triggerIncomingCallRing = triggerIncomingCallRing;
+    window.pollGlobalActiveCalls = pollGlobalActiveCalls;
+    window.acceptIncomingCall = acceptIncomingCall;
+    window.declineIncomingCall = declineIncomingCall;
+    window.subscribeLiveSync = subscribeLiveSync;
+    window.openReviewModal = openReviewModal;
+    window.sendInterviewerPeerHeartbeat = sendInterviewerPeerHeartbeat;
+    window.pollReviewData = pollReviewData;
+    window.openSosModal = openSosModal;
+    window.stopSosAlarm = stopSosAlarm;
+    window.interviewerLogoutAction = interviewerLogoutAction;
+    window.regenerateCandidatePassword = regenerateCandidatePassword;
+    window.blockCandidateAction = blockCandidateAction;
+    window.startInterviewerCall = startInterviewerCall;
+    window.leaveInterviewerCall = leaveInterviewerCall;
+    window.endCallForAll = endCallForAll;
+    window.startCallRecording = startCallRecording;
+    window.stopCallRecording = stopCallRecording;
+    window.toggleInterviewerMic = toggleInterviewerMic;
+    window.toggleInterviewerCam = toggleInterviewerCam;
+    window.closeReviewModal = closeReviewModal;
+    window.sendSilentWarning = sendSilentWarning;
+    window.setCurrentInterviewId = setCurrentInterviewId;
+
+    // Attach listeners
+    ['click', 'keydown', 'touchstart'].forEach(evt => {
+        document.addEventListener(evt, () => callRingtone.init(), { passive: true });
+    });
+
+    globalCallChannel = new BroadcastChannel('global_call_alerts');
+    globalCallChannel.onmessage = (event) => {
+        const data = event.data;
+        if (!data) return;
+
+        if (data.type === 'incoming_call') {
+            triggerIncomingCallRing({
+                id: data.interview_id,
+                candidate_name: data.candidate_name,
+                submission_unique_id: data.submission_unique_id,
+                starter_name: data.starter_name,
+                call_started_at: data.call_started_at || new Date().toISOString()
+            }, true);
+        } else if (data.type === 'call_ended') {
+            endedCallIds.add(data.interview_id);
+            dismissedCallIds.add(data.interview_id);
+            callRingtone.stop();
+            if (ringTimeoutTimer) {
+                clearTimeout(ringTimeoutTimer);
+                ringTimeoutTimer = null;
+            }
+            const modal = document.getElementById('incoming-call-modal');
+            if (modal) modal.classList.remove('active');
+            if (activeIncomingCall && activeIncomingCall.id == data.interview_id) {
+                activeIncomingCall = null;
+            }
+        }
+    };
+
+    setInterval(pollGlobalActiveCalls, 1500);
+}
diff --git a/resources/views/components/audit-log-item.blade.php b/resources/views/components/audit-log-item.blade.php
new file mode 100644
index 0000000..f86ee70
--- /dev/null
+++ b/resources/views/components/audit-log-item.blade.php
@@ -0,0 +1,55 @@
+@props([
+    'type' => 'violation',
+    'details' => '',
+    'timestamp' => null,
+    'screenshotUrl' => null,
+    'aiVerdict' => null,
+])
+
+@php
+    $icoClass = 'amber';
+    $faIcon = 'fa-solid fa-window-restore';
+    $isFlag = false;
+
+    if ($type === 'focus_lost') {
+        $icoClass = 'amber'; $faIcon = 'fa-solid fa-window-restore';
+    } elseif (in_array($type, ['gaze_anomaly', 'gaze_fixed_staring'])) {
+        $icoClass = 'amber'; $faIcon = 'fa-solid fa-eye';
+    } elseif (in_array($type, ['gaze_lower_device', 'reading_external_device'])) {
+        $icoClass = 'red'; $faIcon = 'fa-solid fa-mobile-screen'; $isFlag = true;
+    } elseif (in_array($type, ['question_repeat_lower', 'question_repetition'])) {
+        $icoClass = 'red'; $faIcon = 'fa-solid fa-comments'; $isFlag = true;
+    } elseif ($type === 'talking_on_phone') {
+        $icoClass = 'red'; $faIcon = 'fa-solid fa-phone'; $isFlag = true;
+    } elseif ($type === 'external_ai_detected') {
+        $icoClass = 'red'; $faIcon = 'fa-solid fa-robot'; $isFlag = true;
+    } elseif ($type === 'tab_switch') {
+        $icoClass = 'amber'; $faIcon = 'fa-solid fa-window-restore';
+    }
+
+    $titleCap = ucfirst(str_replace('_', ' ', $type));
+    $timeStr = $timestamp ? \Carbon\Carbon::parse($timestamp)->format('H:i:s') : now()->format('H:i:s');
+@endphp
+
+<div {{ $attributes->merge(['class' => 'log-item flex gap-2.5 p-3 border-b border-[#1b2233] last:border-b-0 ' . ($isFlag ? 'bg-[rgba(239,74,95,0.1)] flag' : '')]) }}>
+    <div class="log-ico w-6 h-6 rounded-md flex-shrink-0 flex items-center justify-center text-[11px] mt-0.5 {{ $icoClass === 'amber' ? 'bg-[rgba(240,169,57,0.12)] text-[#f0a939]' : 'bg-[rgba(239,74,95,0.1)] text-[#ef4a5f]' }}">
+        <i class="{{ $faIcon }}"></i>
+    </div>
+    <div>
+        <div class="log-text text-xs leading-relaxed text-slate-300">
+            <b class="text-white {{ $isFlag ? '!text-[#ef4a5f]' : '' }}">{{ $titleCap }}</b> &mdash; {{ $details }}
+            @if($screenshotUrl)
+                <a href="{{ $screenshotUrl }}" target="_blank" class="text-sky-400 underline ml-1 font-medium">[<i class="fa-solid fa-camera mr-0.5"></i> Screenshot]</a>
+            @endif
+            @if($aiVerdict)
+                @php
+                    $confPct = round(($aiVerdict['confidence'] ?? 0.85) * 100);
+                    $engineName = $aiVerdict['engine'] ?? 'AI Engine';
+                    $toolName = !empty($aiVerdict['ai_tool_detected']) ? ' &bull; Detected: <strong>' . e($aiVerdict['ai_tool_detected']) . '</strong>' : '';
+                @endphp
+                <div class="mt-1 text-[11px] text-red-300"><b>AI inspector &middot; {{ $confPct }}% cheating confidence</b> ({!! $engineName . $toolName !!})</div>
+            @endif
+        </div>
+        <div class="log-time text-[10.5px] text-slate-500 mt-0.5">{{ $timeStr }}</div>
+    </div>
+</div>
diff --git a/resources/views/components/audit-log.blade.php b/resources/views/components/audit-log.blade.php
new file mode 100644
index 0000000..21000a0
--- /dev/null
+++ b/resources/views/components/audit-log.blade.php
@@ -0,0 +1,21 @@
+@props([
+    'logs' => [],
+])
+
+<div {{ $attributes->merge(['class' => 'bg-[#0d1220] border border-[#1b2233] rounded-[9px] max-h-[260px] overflow-y-auto']) }}>
+    @if(is_array($logs) && count($logs) > 0)
+        @foreach($logs as $log)
+            <x-audit-log-item
+                :type="$log['type'] ?? 'violation'"
+                :details="$log['details'] ?? ''"
+                :timestamp="$log['timestamp'] ?? null"
+                :screenshotUrl="$log['screenshot_url'] ?? null"
+                :aiVerdict="$log['ai_verdict'] ?? null"
+            />
+        @endforeach
+    @else
+        <div class="p-4 text-center text-[#21c274] text-xs font-medium">
+            <i class="fa-solid fa-circle-check mr-1"></i> Zero proctoring violations recorded.
+        </div>
+    @endif
+</div>
diff --git a/resources/views/components/button.blade.php b/resources/views/components/button.blade.php
new file mode 100644
index 0000000..a025502
--- /dev/null
+++ b/resources/views/components/button.blade.php
@@ -0,0 +1,41 @@
+@props([
+    'variant' => 'primary', // primary, secondary, danger, warning, success, ghost
+    'size' => 'md',        // sm, md, lg
+    'type' => 'button',
+    'icon' => null,
+])
+
+@php
+    $baseClasses = 'inline-flex items-center gap-1.5 rounded-lg border font-medium text-xs transition-all duration-150 cursor-pointer select-none whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed';
+
+    $variants = [
+        'default'   => 'bg-[#0d1220] text-slate-300 border-[#232b3d] hover:bg-[#161d2d] hover:text-white hover:border-[#3a4257]',
+        'secondary' => 'bg-[#0d1220] text-slate-300 border-[#232b3d] hover:bg-[#161d2d] hover:text-white hover:border-[#3a4257]',
+        'primary'   => 'bg-[#4b82f7] text-white border-[#4b82f7] hover:bg-[#3d6fe0] shadow-sm',
+        'success'   => 'bg-[#21c274] text-white border-[#21c274] hover:bg-[#1da865] shadow-sm',
+        'danger'    => 'bg-[#ef4a5f] text-white border-[#ef4a5f] hover:bg-[#d63d51] shadow-sm',
+        'warning'   => 'bg-[#f0a939] text-white border-[#f0a939] hover:bg-[#d8952d] shadow-sm',
+        'ghost'     => 'bg-transparent text-slate-400 border-transparent hover:bg-white/5 hover:text-slate-200',
+    ];
+
+    $sizes = [
+        'sm' => 'px-2.5 py-1.5 text-xs',
+        'md' => 'px-3 py-1.5 text-[12.5px]',
+        'lg' => 'px-4 py-2 text-sm',
+    ];
+
+    $classes = implode(' ', [
+        $baseClasses,
+        $variants[$variant] ?? $variants['secondary'],
+        $sizes[$size] ?? $sizes['md'],
+    ]);
+@endphp
+
+<button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}>
+    @if($icon)
+        <i class="{{ $icon }}"></i>
+    @endif
+    @if(trim($slot))
+        <span>{{ $slot }}</span>
+    @endif
+</button>
diff --git a/resources/views/components/card.blade.php b/resources/views/components/card.blade.php
new file mode 100644
index 0000000..00f9082
--- /dev/null
+++ b/resources/views/components/card.blade.php
@@ -0,0 +1,28 @@
+@props([
+    'title' => null,
+    'icon' => null,
+])
+
+<div {{ $attributes->merge(['class' => 'bg-[#121826] border border-[#1b2233] rounded-[12px] mb-4 overflow-hidden']) }}>
+    @if($title || $icon || isset($headerExtra))
+        <div class="flex items-center justify-between px-5 py-3.5 border-b border-[#1b2233]">
+            <div class="flex items-center gap-2.5 font-semibold text-[14.5px] tracking-tight text-white">
+                @if($icon)
+                    <i class="{{ $icon }} text-[#4b82f7] text-[13.5px]"></i>
+                @endif
+                @if($title)
+                    <span>{{ $title }}</span>
+                @endif
+            </div>
+            @if(isset($headerExtra))
+                <div class="flex items-center gap-2">
+                    {{ $headerExtra }}
+                </div>
+            @endif
+        </div>
+    @endif
+
+    <div>
+        {{ $slot }}
+    </div>
+</div>
diff --git a/resources/views/components/chat-message.blade.php b/resources/views/components/chat-message.blade.php
new file mode 100644
index 0000000..b940239
--- /dev/null
+++ b/resources/views/components/chat-message.blade.php
@@ -0,0 +1,42 @@
+@props([
+    'senderName' => 'Interviewer',
+    'isCandidate' => false,
+    'color' => '#6366f1',
+    'message' => '',
+    'timestamp' => null,
+])
+
+@php
+    $resolvedColor = $isCandidate ? '#38bdf8' : ($color ?? '#6366f1');
+    $timeStr = $timestamp ? \Carbon\Carbon::parse($timestamp)->format('H:i:s') : now()->format('H:i:s');
+    
+    // Hex to rgba helper for background opacity
+    $hex = ltrim($resolvedColor, '#');
+    if (strlen($hex) == 3) {
+        $r = hexdec(substr($hex,0,1).substr($hex,0,1));
+        $g = hexdec(substr($hex,1,1).substr($hex,1,1));
+        $b = hexdec(substr($hex,2,1).substr($hex,2,1));
+    } else {
+        $r = hexdec(substr($hex,0,2));
+        $g = hexdec(substr($hex,2,2));
+        $b = hexdec(substr($hex,4,2));
+    }
+    $bgRgba = "rgba({$r}, {$g}, {$b}, 0.1)";
+    $borderRgba = "rgba({$r}, {$g}, {$b}, 0.35)";
+@endphp
+
+<div {{ $attributes->merge(['class' => 'chat-message mb-2 p-2.5 rounded-lg border-l-2 transition-all']) }} style="background: {{ $bgRgba }}; border-color: {{ $resolvedColor }};">
+    <div class="flex justify-between items-center mb-1 gap-2">
+        <div class="flex items-center gap-1.5 min-w-0">
+            <span class="w-1.5 h-1.5 rounded-full shrink-0" style="background: {{ $resolvedColor }};"></span>
+            <strong class="text-xs truncate" style="color: {{ $resolvedColor }};">{{ $senderName }}</strong>
+            @if($isCandidate)
+                <span class="text-[9.5px] uppercase font-bold px-1.5 py-0.2 rounded bg-sky-500/20 text-sky-300 border border-sky-500/30 shrink-0">Candidate</span>
+            @else
+                <span class="text-[9.5px] uppercase font-bold px-1.5 py-0.2 rounded bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 shrink-0">Panelist</span>
+            @endif
+        </div>
+        <span class="text-[10.5px] text-slate-500 shrink-0 font-mono">{{ $timeStr }}</span>
+    </div>
+    <div class="text-slate-200 text-xs leading-relaxed font-medium pl-3 break-words">{{ $message }}</div>
+</div>
diff --git a/resources/views/components/chat-panel.blade.php b/resources/views/components/chat-panel.blade.php
new file mode 100644
index 0000000..c50b5b1
--- /dev/null
+++ b/resources/views/components/chat-panel.blade.php
@@ -0,0 +1,44 @@
+@props([
+    'warnings' => [],
+    'candidateName' => 'Candidate',
+])
+
+@php
+    $interviewerColors = [
+        '#6366f1', // Indigo
+        '#10b981', // Emerald
+        '#f59e0b', // Amber
+        '#ec4899', // Pink
+        '#8b5cf6', // Purple
+        '#06b6d4', // Cyan
+        '#f97316', // Orange
+    ];
+@endphp
+
+<div {{ $attributes->merge(['class' => 'bg-[#0d1220] border border-[#1b2233] rounded-[9px] h-[150px] overflow-y-auto p-3 flex flex-col gap-2']) }}>
+    @if(count($warnings) > 0)
+        @foreach($warnings as $w)
+            @php
+                $isCand = is_null($w->sent_by);
+                $senderName = $isCand 
+                    ? ($candidateName ?: 'Candidate') 
+                    : ($w->sender ? $w->sender->name : 'Interviewer');
+                
+                $color = $isCand 
+                    ? '#38bdf8' 
+                    : $interviewerColors[($w->sent_by ?? 1) % count($interviewerColors)];
+            @endphp
+            <x-chat-message
+                :senderName="$senderName"
+                :isCandidate="$isCand"
+                :color="$color"
+                :message="$w->message"
+                :timestamp="$w->created_at"
+            />
+        @endforeach
+    @else
+        <div class="h-full w-full flex items-center justify-center text-xs text-[#5b637a] italic">
+            No chat history. Send a message below.
+        </div>
+    @endif
+</div>
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
new file mode 100644
index 0000000..acdabde
--- /dev/null
+++ b/resources/views/components/modal.blade.php
@@ -0,0 +1,43 @@
+@props([
+    'id',
+    'title' => null,
+    'maxWidth' => '2xl',
+    'onClose' => null,
+])
+
+@php
+    $maxWidths = [
+        'sm'   => 'max-w-sm',
+        'md'   => 'max-w-md',
+        'lg'   => 'max-w-lg',
+        'xl'   => 'max-w-xl',
+        '2xl'  => 'max-w-2xl',
+        '5xl'  => 'max-w-5xl',
+        '7xl'  => 'max-w-7xl',
+        'full' => 'max-w-full mx-4',
+    ];
+
+    $maxWidthClass = $maxWidths[$maxWidth] ?? $maxWidths['2xl'];
+@endphp
+
+<div id="{{ $id }}" {{ $attributes->merge(['class' => 'admin-modal fixed inset-0 w-screen h-screen bg-slate-950/85 backdrop-blur-md flex items-center justify-center z-[1000] opacity-0 pointer-events-none transition-opacity duration-300 [&.active]:opacity-100 [&.active]:pointer-events-auto']) }}>
+    <div class="admin-modal-content bg-slate-900 border border-slate-700/60 rounded-2xl w-[90%] {{ $maxWidthClass }} p-7 shadow-2xl text-white max-h-[90vh] overflow-y-auto">
+        @if($title || isset($headerActions))
+            <div class="flex items-center justify-between pb-4 mb-4 border-b border-white/10">
+                @if($title)
+                    <h3 class="font-outfit text-xl font-bold text-white m-0">{{ $title }}</h3>
+                @endif
+                <div class="flex items-center gap-2">
+                    @if(isset($headerActions))
+                        {{ $headerActions }}
+                    @endif
+                    <button type="button" onclick="document.getElementById('{{ $id }}').classList.remove('active'); {{ $onClose ? $onClose . '();' : '' }}" class="bg-transparent border-none text-slate-400 hover:text-white text-2xl cursor-pointer leading-none px-1">&times;</button>
+                </div>
+            </div>
+        @endif
+
+        <div>
+            {{ $slot }}
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/pill.blade.php b/resources/views/components/pill.blade.php
new file mode 100644
index 0000000..865b722
--- /dev/null
+++ b/resources/views/components/pill.blade.php
@@ -0,0 +1,41 @@
+@props([
+    'variant' => 'info', // primary, secondary, success, danger, warning, info, ghost
+    'size' => 'md',      // sm, md
+    'icon' => null,
+])
+
+@php
+    $baseClasses = 'inline-flex items-center gap-1.5 font-semibold text-[11px] tracking-wide px-2.5 py-1 rounded-full border transition-colors duration-150 whitespace-nowrap';
+
+    $variants = [
+        'blue'      => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
+        'primary'   => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
+        'info'      => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
+        'red'       => 'text-[#ef4a5f] bg-[rgba(239,74,95,0.1)] border-[rgba(239,74,95,0.32)]',
+        'danger'    => 'text-[#ef4a5f] bg-[rgba(239,74,95,0.1)] border-[rgba(239,74,95,0.32)]',
+        'success'   => 'text-[#21c274] bg-[rgba(33,194,116,0.12)] border-[rgba(33,194,116,0.35)]',
+        'warning'   => 'text-[#f0a939] bg-[rgba(240,169,57,0.12)] border-[rgba(240,169,57,0.35)]',
+        'secondary' => 'text-slate-400 bg-[#0d1220] border-[#232b3d]',
+        'ghost'     => 'text-slate-400 bg-[#0d1220] border-[#232b3d]',
+    ];
+
+    $sizes = [
+        'sm' => 'px-2 py-0.5 text-[10.5px]',
+        'md' => 'px-2.5 py-1 text-[11px]',
+    ];
+
+    $classes = implode(' ', [
+        $baseClasses,
+        $variants[$variant] ?? $variants['ghost'],
+        $sizes[$size] ?? $sizes['md'],
+    ]);
+@endphp
+
+<span {{ $attributes->merge(['class' => $classes]) }}>
+    @if($icon)
+        <i class="{{ $icon }}"></i>
+    @endif
+    @if(trim($slot))
+        <span>{{ $slot }}</span>
+    @endif
+</span>
diff --git a/resources/views/components/tab-button.blade.php b/resources/views/components/tab-button.blade.php
new file mode 100644
index 0000000..f9a6a31
--- /dev/null
+++ b/resources/views/components/tab-button.blade.php
@@ -0,0 +1,26 @@
+@props([
+    'id' => null,
+    'active' => false,
+    'icon' => null,
+    'tabKey' => null,
+])
+
+@php
+    $baseClasses = 'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-md transition-colors duration-150 cursor-pointer select-none border-none';
+    $activeClasses = $active
+        ? 'bg-[#4b82f7] text-white shadow-sm active'
+        : 'bg-transparent text-slate-400 hover:text-slate-200';
+@endphp
+
+<button
+    @if($id) id="{{ $id }}" @endif
+    type="button"
+    @if($tabKey) data-tab="{{ $tabKey }}" @endif
+    {{ $attributes->merge(['class' => implode(' ', ['tab', $baseClasses, $activeClasses])]) }}>
+    @if($icon)
+        <i class="{{ $icon }} text-[11px]"></i>
+    @endif
+    @if(trim($slot))
+        <span>{{ $slot }}</span>
+    @endif
+</button>
diff --git a/resources/views/components/video-tile.blade.php b/resources/views/components/video-tile.blade.php
new file mode 100644
index 0000000..5b1177a
--- /dev/null
+++ b/resources/views/components/video-tile.blade.php
@@ -0,0 +1,57 @@
+@props([
+    'id',
+    'videoId',
+    'placeholderId',
+    'badgeText' => '',
+    'badgeId' => null,
+    'borderColor' => 'border-[#1b2233]',
+    'showZoom' => false,
+    'showFullscreen' => false,
+    'initials' => 'CD',
+    'avatarCircleId' => null,
+    'avatarNameId' => null,
+    'avatarTitle' => 'Video Stream',
+    'zoomInFn' => null,
+    'zoomOutFn' => null,
+    'zoomResetFn' => null,
+    'fullscreenFn' => null,
+    'containerId' => null,
+    'focused' => false,
+])
+
+<div id="{{ $id }}" {{ $attributes->merge(['class' => 'video-tile relative aspect-[16/11] bg-[#0d1220] border rounded-[10px] overflow-hidden flex flex-col items-center justify-center transition-all ' . ($focused ? 'border-[rgba(75,130,247,0.35)] shadow-[0_0_0_1px_rgba(75,130,247,0.35)]' : 'border-[#1b2233]')]) }}>
+    @if($showZoom || $showFullscreen)
+        <div class="tile-tools absolute top-2 right-2 z-20 flex gap-1">
+            @if($showZoom)
+                <button type="button" onclick="{{ $zoomInFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Zoom In"><i class="fa-solid fa-magnifying-glass-plus"></i></button>
+                <button type="button" onclick="{{ $zoomOutFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Zoom Out"><i class="fa-solid fa-magnifying-glass-minus"></i></button>
+                <button type="button" onclick="{{ $zoomResetFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Reset Zoom"><i class="fa-solid fa-rotate-left"></i></button>
+            @endif
+            @if($showFullscreen)
+                <button type="button" onclick="{{ $fullscreenFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Fullscreen"><i class="fa-solid fa-expand"></i></button>
+            @endif
+        </div>
+    @endif
+
+    @if($containerId)
+        <div id="{{ $containerId }}" class="w-full h-full overflow-auto">
+            <video id="{{ $videoId }}" autoplay playsinline class="w-full h-full object-contain origin-top-left transition-transform duration-200"></video>
+        </div>
+    @else
+        <video id="{{ $videoId }}" autoplay playsinline class="w-full h-full object-cover origin-center transition-transform duration-200"></video>
+    @endif
+
+    <div id="{{ $placeholderId }}" class="absolute inset-0 flex flex-col items-center justify-center bg-[#0d1220]/95 text-slate-400 text-xs z-10 p-3">
+        <div id="{{ $avatarCircleId }}" class="av w-[58px] h-[58px] rounded-full bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-white font-semibold text-[19px] mb-2.5 shadow-md shadow-[#4b82f7]/20">
+            {{ $initials }}
+        </div>
+        <div id="{{ $avatarNameId }}" class="name text-[13.5px] font-semibold text-white">{{ $avatarTitle }}</div>
+        <div class="status text-[11.5px] text-[#5b637a] mt-1 text-center px-3">
+            {{ $slot->isNotEmpty() ? $slot : "Waiting for candidate&hellip;" }}
+        </div>
+    </div>
+
+    <span class="tile-tag absolute left-2.5 bottom-2.5 text-[10px] font-semibold tracking-wide px-2 py-1 rounded-md bg-black/35 text-slate-400 border border-[#1b2233] z-10">
+        {{ $badgeText }}
+    </span>
+</div>
diff --git a/resources/views/interview/candidate_room.blade.php b/resources/views/interview/candidate_room.blade.php
index cd2ef7d..e92db91 100644
--- a/resources/views/interview/candidate_room.blade.php
+++ b/resources/views/interview/candidate_room.blade.php
@@ -1022,12 +1022,19 @@ function logViolation(type, details) {
                     'X-CSRF-TOKEN': '{{ csrf_token() }}'
                 },
                 body: JSON.stringify({ type: type, details: details })
+            })
+            .then(r => r.json())
+            .then(res => {
+                if (typeof callSigChannel !== 'undefined' && callSigChannel) {
+                    callSigChannel.postMessage({ type: 'violation_occurred', violation_type: type, details: details });
+                }
+                if (typeof liveSyncChannel !== 'undefined' && liveSyncChannel) {
+                    liveSyncChannel.postMessage({ type: 'violation_logged', violation_type: type, details: details });
+                }
+                if (typeof pollReviewData === 'function') {
+                    pollReviewData();
+                }
             });
-
-            // Post message over BroadcastChannel to alert interviewer dashboard real-time
-            if (typeof callSigChannel !== 'undefined' && callSigChannel) {
-                callSigChannel.postMessage({ type: 'violation_occurred', violation_type: type, details: details });
-            }
         }
 
         // --- CANDIDATE REAL-TIME CALL RINGTONE SYNTHESIZER ---
diff --git a/resources/views/interview/index.blade.php b/resources/views/interview/index.blade.php
index 4497b69..73e21d5 100644
--- a/resources/views/interview/index.blade.php
+++ b/resources/views/interview/index.blade.php
@@ -8,254 +8,87 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
-    <script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
-    <script src="//cdn.metered.ca/sdk/video/1.4.6/sdk.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-
-    <style>
-        :root {
-            --bg-color: #0b0f19;
-            --card-bg: rgba(15, 23, 42, 0.65);
-            --card-border: rgba(255, 255, 255, 0.22);
-            --accent-primary: #6366f1;
-            --accent-secondary: #0078d4;
-            --text-main: #ffffff;
-            --text-muted: #d1d5db;
-        }
-
-        /* Scrollbars */
-        html, body, *, ::-webkit-scrollbar {
-            scrollbar-width: thin;
-            scrollbar-color: rgba(255, 255, 255, 0.4) rgba(15, 23, 42, 0.35);
-        }
-
-        ::-webkit-scrollbar {
-            width: 5px;
-            height: 5px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: rgba(15, 23, 42, 0.35);
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.4);
-            border-radius: 10px;
-        }
-
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-
-        body {
-            font-family: 'Instrument Sans', sans-serif;
-            background-color: var(--bg-color);
-            color: var(--text-main);
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .navbar {
-            height: 70px;
-            background: rgba(15, 23, 42, 0.8);
-            backdrop-filter: blur(16px);
-            border-bottom: 1px solid var(--card-border);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 4%;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-        }
-
-        .btn-nav {
-            color: #e5e7eb;
-            text-decoration: none;
-            font-size: 0.85rem;
-            font-weight: 500;
-            padding: 8px 16px;
-            border-radius: 8px;
-            border: 1px solid var(--card-border);
-            background: rgba(255, 255, 255, 0.03);
-            transition: all 0.25s ease;
-        }
-
-        .btn-nav:hover {
-            background: rgba(255, 255, 255, 0.08);
-            color: white;
-        }
-
-        .assessment-card {
-            background: var(--card-bg);
-            border: 1px solid var(--card-border);
-            border-radius: 20px;
-            padding: 28px;
-            backdrop-filter: blur(20px);
-            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
-            margin-bottom: 24px;
-        }
-
-        .table-responsive {
-            overflow-x: auto;
-            width: 100%;
-        }
-
-        .users-table {
-            width: 100%;
-            border-collapse: collapse;
-            font-size: 0.85rem;
-            text-align: left;
-        }
-
-        .users-table th {
-            padding: 12px 16px;
-            border-bottom: 1px solid var(--card-border);
-            color: var(--text-muted);
-            font-size: 0.75rem;
-            text-transform: uppercase;
-        }
-
-        .users-table td {
-            padding: 14px 16px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-            vertical-align: middle;
-        }
-
-        .badge {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 5px;
-            padding: 4px 10px;
-            border-radius: 9999px;
-            font-size: 0.7rem;
-            font-weight: 600;
-            white-space: nowrap;
-            line-height: 1.2;
-        }
-
-        .admin-modal {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background-color: rgba(11, 15, 25, 0.85);
-            backdrop-filter: blur(12px);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 1000;
-            opacity: 0;
-            pointer-events: none;
-            transition: all 0.3s ease;
-        }
-
-        .admin-modal.active {
-            opacity: 1;
-            pointer-events: auto;
-        }
-
-        .admin-modal-content {
-            background-color: #151b2c;
-            border: 1px solid var(--card-border);
-            border-radius: 20px;
-            width: 90%;
-            max-width: 900px;
-            padding: 28px;
-            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
-            color: white;
-            max-height: 90vh;
-            overflow-y: auto;
-        }
-
-        .form-input {
-            width: 100%;
-            padding: 10px 12px;
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid var(--card-border);
-            border-radius: 8px;
-            color: white;
-            font-size: 0.85rem;
-            outline: none;
-        }
-    </style>
 </head>
-<body>
+<body class="bg-[#0b0f19] text-white min-h-screen flex flex-col font-['Instrument_Sans',sans-serif]">
+
     <!-- Header Navbar -->
-    <header class="navbar">
-        <div style="display: flex; align-items: center; gap: 12px;">
-            <div style="width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #6366f1 0%, #0078d4 100%); display: flex; align-items: center; justify-content: center; font-weight: 700;">
-                ⚡
+    <header class="h-[70px] bg-slate-900/80 backdrop-blur-md border-b border-slate-700/60 flex items-center justify-between px-6 sticky top-0 z-50">
+        <div class="flex items-center gap-3">
+            <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-indigo-500 to-sky-600 flex items-center justify-center font-bold text-white shadow-md shadow-indigo-500/30">
+                <i class="fa-solid fa-bolt text-lg"></i>
             </div>
             <div>
-                <h1 style="font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 700; color: white; margin: 0;">Candidate Live Assessment Portal</h1>
-                <div style="font-size: 0.7rem; color: var(--text-muted);">Proctored IDE & Code Submissions</div>
+                <h1 class="font-outfit text-lg font-bold text-white m-0">Candidate Live Assessment Portal</h1>
+                <div class="text-xs text-slate-400">Proctored IDE & Code Submissions</div>
             </div>
         </div>
 
-        <div style="display: flex; gap: 12px;">
+        <div class="flex items-center gap-3">
             @if(Auth::user()->isAdmin())
-                <a href="{{ route('admin.dashboard') }}" class="btn-nav" style="border-color: #818cf8; color: #818cf8;">Control Panel</a>
+                <a href="{{ route('admin.dashboard') }}">
+                    <x-button variant="ghost" size="sm" icon="fa-solid fa-sliders" class="text-indigo-400 border-indigo-500/40">Control Panel</x-button>
+                </a>
             @endif
-            <a href="{{ route('onboarding.index') }}" class="btn-nav">Onboarding Hub</a>
-            <a href="{{ route('dashboard') }}" class="btn-nav">User Portal</a>
-            <form action="{{ route('logout') }}" method="POST" id="logout-form" style="display: inline;">
+            <a href="{{ route('onboarding.index') }}">
+                <x-button variant="secondary" size="sm" icon="fa-solid fa-rocket">Onboarding Hub</x-button>
+            </a>
+            <a href="{{ route('dashboard') }}">
+                <x-button variant="secondary" size="sm" icon="fa-solid fa-user">User Portal</x-button>
+            </a>
+            <form action="{{ route('logout') }}" method="POST" id="logout-form" class="inline">
                 @csrf
-                <button type="button" onclick="interviewerLogoutAction()" class="btn-nav" style="background: rgba(239,68,68,0.2); border-color: #ef4444; color: #fca5a5; font-weight: 600;">
-                    🚪 Logout
-                </button>
+                <x-button type="button" onclick="interviewerLogoutAction()" variant="danger" size="sm" icon="fa-solid fa-right-from-bracket" class="bg-red-500/20 text-red-300 border-red-500/40 font-semibold">
+                    Logout
+                </x-button>
             </form>
         </div>
     </header>
 
-    <main style="max-width: 1400px; width: 100%; margin: 30px auto; padding: 0 4%; flex: 1;">
+    <main class="max-w-[1400px] w-full mx-auto my-6 px-4 flex-1">
         @if(session('success'))
-            <div style="margin-bottom: 24px; background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: #34d399; padding: 12px 20px; border-radius: 12px; font-size: 0.9rem;">
+            <div class="mb-6 bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 px-5 py-3 rounded-xl text-sm">
                 {{ session('success') }}
             </div>
         @endif
+
         <!-- Global Admin Settings & Proctoring Control Panel -->
-        <section class="admin-card" style="margin-bottom: 25px; padding: 20px; background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%); border: 1.5px solid rgba(99, 102, 241, 0.35); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5); border-radius: 16px;">
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 12px;">
+        <section class="mb-6 p-5 bg-gradient-to-r from-slate-900/95 to-slate-800/95 border border-indigo-500/35 rounded-2xl shadow-xl">
+            <div class="flex justify-between items-center pb-3 mb-4 border-b border-white/10">
                 <div>
-                    <h3 style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 800; color: #ffffff; margin: 0; display: flex; align-items: center; gap: 8px;">
-                        ⚙️ Global Admin Proctoring & System Settings
+                    <h3 class="font-outfit text-xl font-bold text-white m-0 flex items-center gap-2">
+                        <i class="fa-solid fa-gear text-indigo-400"></i> Global Admin Proctoring & System Settings
                     </h3>
-                    <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 4px;">Master control panel for candidate assessment rules, system screen capturing, and module toggles</div>
+                    <div class="text-xs text-slate-400 mt-1">Master control panel for candidate assessment rules, system screen capturing, and module toggles</div>
                 </div>
-                <span class="badge" style="background: rgba(99, 102, 241, 0.2); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.4); font-weight: 700; padding: 6px 12px; font-size: 0.75rem;">
-                    🛡️ ADMIN CONTROL PANEL
-                </span>
+                <x-pill variant="primary" size="md" icon="fa-solid fa-shield-halved">
+                    ADMIN CONTROL PANEL
+                </x-pill>
             </div>
 
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px;">
-
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <!-- 1. Candidate System Screenshot Capture Master Toggle -->
-                <div style="padding: 16px; background: rgba(16, 185, 129, 0.08); border: 1.5px solid rgba(16, 185, 129, 0.3); border-radius: 12px;">
+                <div class="p-4 bg-emerald-500/10 border border-emerald-500/30 rounded-xl">
                     <form action="{{ route('admin.settings.screenshot-toggle') }}" method="POST">
                         @csrf
-                        <div style="margin-bottom: 12px;">
-                            <div style="font-size: 0.95rem; color: #ffffff; font-weight: 700; display: flex; align-items: center; gap: 6px;">
-                                📸 Candidate System Screenshot Capture
+                        <div class="mb-3">
+                            <div class="text-sm text-white font-bold flex items-center gap-2">
+                                <i class="fa-solid fa-camera text-emerald-400"></i> Candidate System Screenshot Capture
                             </div>
-                            <div style="font-size: 0.73rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4;">
+                            <div class="text-xs text-slate-400 mt-1 leading-relaxed">
                                 Captures candidate system desktop screen automatically on call start & tab switches. Admin can stop taking screenshots anytime across all candidates.
                             </div>
                         </div>
-                        <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08);">
-                            <span id="global-screenshot-status-text" style="font-size: 0.75rem; font-weight: 700; color: {{ \App\Models\Setting::get('enable_candidate_screenshots', '1') === '1' ? '#34d399' : '#fca5a5' }};">
+                        <div class="flex justify-between items-center pt-2.5 border-t border-white/10">
+                            <span id="global-screenshot-status-text" class="text-xs font-bold {{ \App\Models\Setting::get('enable_candidate_screenshots', '1') === '1' ? 'text-emerald-400' : 'text-red-400' }}">
                                 {{ \App\Models\Setting::get('enable_candidate_screenshots', '1') === '1' ? '🟢 ENABLED (Active)' : '🔴 STOPPED / DISABLED' }}
                             </span>
                             @if(Auth::user() && Auth::user()->isAdmin())
-                                <label style="display: inline-flex; align-items: center; gap: 6px; cursor: pointer;">
-                                    <input type="checkbox" name="enable_candidate_screenshots" value="1" onchange="this.form.submit()" {{ \App\Models\Setting::get('enable_candidate_screenshots', '1') === '1' ? 'checked' : '' }} style="accent-color: #10b981; width: 20px; height: 20px; cursor: pointer;">
-                                    <span style="font-size: 0.8rem; font-weight: 800; color: white; background: rgba(255,255,255,0.12); padding: 5px 12px; border-radius: 6px;">
+                                <label class="inline-flex items-center gap-2 cursor-pointer">
+                                    <input type="checkbox" name="enable_candidate_screenshots" value="1" onchange="this.form.submit()" {{ \App\Models\Setting::get('enable_candidate_screenshots', '1') === '1' ? 'checked' : '' }} class="accent-emerald-500 w-5 h-5 cursor-pointer">
+                                    <span class="text-xs font-bold text-white bg-white/10 px-3 py-1 rounded-md hover:bg-white/20 transition-colors">
                                         {{ \App\Models\Setting::get('enable_candidate_screenshots', '1') === '1' ? 'Stop Screenshot Capture' : 'Enable Screenshot Capture' }}
                                     </span>
                                 </label>
@@ -265,25 +98,25 @@
                 </div>
 
                 <!-- 2. Onboarding & Offboarding Module Master Toggle -->
-                <div style="padding: 16px; background: rgba(99, 102, 241, 0.08); border: 1.5px solid rgba(99, 102, 241, 0.3); border-radius: 12px;">
+                <div class="p-4 bg-indigo-500/10 border border-indigo-500/30 rounded-xl">
                     <form action="{{ route('admin.settings.onboarding-toggle') }}" method="POST">
                         @csrf
-                        <div style="margin-bottom: 12px;">
-                            <div style="font-size: 0.95rem; color: #ffffff; font-weight: 700; display: flex; align-items: center; gap: 6px;">
-                                🚀 Candidate Provisioning & Onboarding Module
+                        <div class="mb-3">
+                            <div class="text-sm text-white font-bold flex items-center gap-2">
+                                <i class="fa-solid fa-rocket text-indigo-400"></i> Candidate Provisioning & Onboarding Module
                             </div>
-                            <div style="font-size: 0.73rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4;">
+                            <div class="text-xs text-slate-400 mt-1 leading-relaxed">
                                 Master toggle to enable/disable automated candidate provisioning, onboarding checklists, and 1-click revocation.
                             </div>
                         </div>
-                        <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08);">
-                            <span style="font-size: 0.75rem; font-weight: 700; color: {{ \App\Models\Setting::get('onboarding_enabled', '1') === '1' ? '#34d399' : '#fca5a5' }};">
+                        <div class="flex justify-between items-center pt-2.5 border-t border-white/10">
+                            <span class="text-xs font-bold {{ \App\Models\Setting::get('onboarding_enabled', '1') === '1' ? 'text-emerald-400' : 'text-red-400' }}">
                                 {{ \App\Models\Setting::get('onboarding_enabled', '1') === '1' ? '🟢 ENABLED' : '🔴 DISABLED' }}
                             </span>
                             @if(Auth::user() && Auth::user()->isAdmin())
-                                <label style="display: inline-flex; align-items: center; gap: 6px; cursor: pointer;">
-                                    <input type="checkbox" name="onboarding_enabled" value="1" onchange="this.form.submit()" {{ \App\Models\Setting::get('onboarding_enabled', '1') === '1' ? 'checked' : '' }} style="accent-color: #10b981; width: 20px; height: 20px; cursor: pointer;">
-                                    <span style="font-size: 0.8rem; font-weight: 800; color: white; background: rgba(255,255,255,0.12); padding: 5px 12px; border-radius: 6px;">
+                                <label class="inline-flex items-center gap-2 cursor-pointer">
+                                    <input type="checkbox" name="onboarding_enabled" value="1" onchange="this.form.submit()" {{ \App\Models\Setting::get('onboarding_enabled', '1') === '1' ? 'checked' : '' }} class="accent-emerald-500 w-5 h-5 cursor-pointer">
+                                    <span class="text-xs font-bold text-white bg-white/10 px-3 py-1 rounded-md hover:bg-white/20 transition-colors">
                                         {{ \App\Models\Setting::get('onboarding_enabled', '1') === '1' ? 'Disable Onboarding' : 'Enable Onboarding' }}
                                     </span>
                                 </label>
@@ -291,35 +124,36 @@
                         </div>
                     </form>
                 </div>
-
             </div>
         </section>
 
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
+        <!-- Page Header Row -->
+        <div class="flex justify-between items-center mb-6">
             <div>
-                <h2 style="font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 700; color: white; margin: 0;">Live Interview Assessments</h2>
-                <div style="font-size: 0.8rem; color: var(--text-muted);">Temporary Candidate Access, Real-Time Proctored IDE, and Unique Code Records</div>
+                <h2 class="font-outfit text-2xl font-bold text-white m-0">Live Interview Assessments</h2>
+                <div class="text-xs text-slate-400 mt-0.5">Temporary Candidate Access, Real-Time Proctored IDE, and Unique Code Records</div>
             </div>
 
-            <button onclick="document.getElementById('create-interview-modal').classList.add('active')" class="btn-nav" style="background-color: var(--accent-primary); color: white; border-color: transparent; font-weight: 600; padding: 10px 18px; cursor: pointer;">
-                + Schedule Candidate Interview
-            </button>
+            <x-button onclick="document.getElementById('create-interview-modal').classList.add('active')" variant="primary" size="md" icon="fa-solid fa-plus">
+                Schedule Candidate Interview
+            </x-button>
         </div>
 
-        <div class="assessment-card">
-            <div class="table-responsive">
-                <table class="users-table">
+        <!-- Assessment Table Card -->
+        <div class="bg-slate-900/80 border border-slate-700/60 rounded-2xl p-6 shadow-2xl backdrop-blur-md">
+            <div class="overflow-x-auto w-full">
+                <table class="w-full text-left text-xs border-collapse">
                     <thead>
-                        <tr>
-                            <th>Candidate & Temp Pass</th>
-                            <th>Unique Submission ID</th>
-                            <th>Status & Validity</th>
-                            <th>Language</th>
-                            <th>Proctoring Alerts</th>
-                            <th style="text-align: right;">Review & Actions</th>
+                        <tr class="border-b border-slate-700/60 text-slate-400 uppercase text-[0.7rem] tracking-wider">
+                            <th class="py-3 px-4">Candidate & Temp Pass</th>
+                            <th class="py-3 px-4">Unique Submission ID</th>
+                            <th class="py-3 px-4">Status & Validity</th>
+                            <th class="py-3 px-4">Language</th>
+                            <th class="py-3 px-4">Proctoring Alerts</th>
+                            <th class="py-3 px-4 text-right">Review & Actions</th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody class="divide-y divide-white/5">
                         @forelse($interviews as $inv)
                             @php
                                 $logs = $inv->proctor_logs ?? [];
@@ -330,108 +164,105 @@
                                 $questionRepeat = count(array_filter($logs, fn($l) => in_array($l['type'] ?? '', ['question_repeat_lower', 'question_repetition'])));
                                 $externalAi = count(array_filter($logs, fn($l) => ($l['type'] ?? '') === 'external_ai_detected'));
                             @endphp
-                            <tr>
-                                <td>
+                            <tr class="hover:bg-white/[0.02] transition-colors">
+                                <td class="py-3.5 px-4">
                                     <div>
-                                        <strong style="color: white; font-size: 0.9rem;">{{ $inv->candidate_name }}</strong>
-                                        <div style="font-size: 0.75rem; color: var(--text-muted);">{{ $inv->candidate_email }} &bull; {{ $inv->candidate_phone }}</div>
-                                        <div style="margin-top: 4px; display: flex; flex-direction: column; gap: 4px;">
-                                            <div style="font-size: 0.75rem; color: #a7f3d0; background: rgba(16,185,129,0.1); padding: 2px 8px; border-radius: 6px; display: inline-block;">
-                                                🔑 Temp Pass: <strong>{{ $inv->temp_password }}</strong>
+                                        <strong class="text-white text-sm block">{{ $inv->candidate_name }}</strong>
+                                        <div class="text-xs text-slate-400 mt-0.5">{{ $inv->candidate_email }} &bull; {{ $inv->candidate_phone }}</div>
+                                        <div class="mt-1.5 flex flex-col gap-1">
+                                            <div class="text-[0.7rem] text-emerald-300 bg-emerald-500/10 px-2 py-0.5 rounded inline-block w-fit">
+                                                <i class="fa-solid fa-key text-[0.65rem] mr-1"></i> Temp Pass: <strong>{{ $inv->temp_password }}</strong>
                                             </div>
-                                            <div style="font-size: 0.7rem; color: #38bdf8;">
-                                                🌐 Login URL: <a href="{{ route('interview.candidate.login') }}" target="_blank" style="color: #38bdf8; text-decoration: underline;">{{ route('interview.candidate.login') }}</a>
+                                            <div class="text-[0.7rem] text-sky-400">
+                                                <i class="fa-solid fa-globe text-[0.65rem] mr-1"></i> Login URL: <a href="{{ route('interview.candidate.login') }}" target="_blank" class="text-sky-400 underline">{{ route('interview.candidate.login') }}</a>
                                             </div>
                                         </div>
                                     </div>
                                 </td>
-                                <td>
-                                    <code style="background: rgba(255,255,255,0.06); padding: 4px 8px; border-radius: 6px; color: #38bdf8; font-size: 0.75rem;">
+                                <td class="py-3.5 px-4">
+                                    <code class="bg-white/5 px-2 py-1 rounded text-sky-400 text-xs font-mono">
                                         {{ $inv->submission_unique_id }}
                                     </code>
                                 </td>
-                                <td>
+                                <td class="py-3.5 px-4">
                                     @if($inv->isExpired())
-                                        <span class="badge" style="background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3);">
-                                            EXPIRED
-                                        </span>
+                                        <x-pill variant="danger" size="sm">EXPIRED</x-pill>
                                     @elseif($inv->status === 'completed')
-                                        <span class="badge" style="background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3);">
-                                            COMPLETED
-                                        </span>
+                                        <x-pill variant="success" size="sm">COMPLETED</x-pill>
                                     @elseif($inv->call_status === 'active')
-                                        <span class="badge" style="background: rgba(16,185,129,0.3); color: #34d399; border: 1px solid #10b981; font-weight: 800; animation: acceptGlow 1.5s infinite alternate;">
-                                            🟢 📞 CALL IN PROGRESS
-                                        </span>
+                                        <x-pill variant="success" size="sm" icon="fa-solid fa-phone" class="animate-pulse font-extrabold">CALL IN PROGRESS</x-pill>
                                     @elseif($inv->isActiveTimeline())
-                                        <span class="badge" style="background: rgba(16,185,129,0.2); color: #34d399; border: 1px solid rgba(16,185,129,0.4);">
-                                            ⚡ TIMELINE LIVE
-                                        </span>
+                                        <x-pill variant="info" size="sm" icon="fa-solid fa-bolt">TIMELINE LIVE</x-pill>
                                     @else
-                                        <span class="badge" style="background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3);">
-                                            SCHEDULED
-                                        </span>
+                                        <x-pill variant="warning" size="sm">SCHEDULED</x-pill>
                                     @endif
-                                    <div style="font-size: 0.7rem; color: var(--text-muted); margin-top: 4px;">
+                                    <div class="text-[0.7rem] text-slate-400 mt-1">
                                         Timeline: {{ ($inv->scheduled_at ?? $inv->created_at)->format('M d, H:i') }} &ndash; {{ $inv->expires_at->format('H:i') }}
                                     </div>
                                 </td>
-                                <td>
-                                    <span class="badge" style="background: rgba(255,255,255,0.05); color: white; border: 1px solid var(--card-border); text-transform: uppercase;">
+                                <td class="py-3.5 px-4">
+                                    <x-pill variant="ghost" size="sm" class="uppercase font-bold">
                                         {{ $inv->language }}
-                                    </span>
+                                    </x-pill>
                                 </td>
-                                <td>
-                                    <div style="display: flex; flex-direction: column; gap: 2px; font-size: 0.75rem;">
-                                        <span style="color: {{ $tabSwitches > 0 ? '#ef4444' : 'var(--text-muted)' }}; font-weight: {{ $tabSwitches > 0 ? '700' : '400' }};">
-                                            🔴 Tab Switches: {{ $tabSwitches }}
+                                <td class="py-3.5 px-4">
+                                    <div class="flex flex-col gap-0.5 text-xs">
+                                        <span class="{{ $tabSwitches > 0 ? 'text-red-400 font-bold' : 'text-slate-400' }}">
+                                            <i class="fa-solid fa-circle text-[0.5rem] mr-1 text-red-500"></i> Tab Switches: {{ $tabSwitches }}
                                         </span>
-                                        <span style="color: {{ $focusLost > 0 ? '#fbbf24' : 'var(--text-muted)' }};">
-                                            🟡 Focus Loss / Overlay: {{ $focusLost }}
+                                        <span class="{{ $focusLost > 0 ? 'text-amber-400 font-semibold' : 'text-slate-400' }}">
+                                            <i class="fa-solid fa-circle text-[0.5rem] mr-1 text-amber-500"></i> Focus Loss / Overlay: {{ $focusLost }}
                                         </span>
-                                        <span style="color: {{ $gazeAlerts > 0 ? '#f43f5e' : 'var(--text-muted)' }};">
-                                            👁️ Eye Gaze Anomaly: {{ $gazeAlerts }}
+                                        <span class="{{ $gazeAlerts > 0 ? 'text-rose-400 font-semibold' : 'text-slate-400' }}">
+                                            <i class="fa-solid fa-eye mr-1"></i> Eye Gaze Anomaly: {{ $gazeAlerts }}
                                         </span>
                                         @if($lowerGaze > 0)
-                                            <span style="color: #ef4444; font-weight: 700;">
-                                                📱 Lower Gaze (>10s): {{ $lowerGaze }}
+                                            <span class="text-red-400 font-bold">
+                                                <i class="fa-solid fa-mobile-screen mr-1"></i> Lower Gaze (>10s): {{ $lowerGaze }}
                                             </span>
                                         @endif
                                         @if($questionRepeat > 0)
-                                            <span style="color: #f43f5e; font-weight: 700;">
-                                                🗣️ Question Repetition: {{ $questionRepeat }}
+                                            <span class="text-rose-400 font-bold">
+                                                <i class="fa-solid fa-comments mr-1"></i> Question Repetition: {{ $questionRepeat }}
                                             </span>
                                         @endif
                                         @if($externalAi > 0)
-                                            <span style="color: #ef4444; font-weight: 800; background: rgba(239,68,68,0.2); padding: 2px 6px; border-radius: 4px;">
-                                                🤖 Parakeet / External AI: {{ $externalAi }}
+                                            <span class="text-red-400 font-extrabold bg-red-500/20 px-1.5 py-0.5 rounded">
+                                                <i class="fa-solid fa-robot mr-1"></i> Parakeet / External AI: {{ $externalAi }}
                                             </span>
                                         @endif
                                     </div>
                                 </td>
-                                <td style="text-align: right; white-space: nowrap;">
-                                    <a href="{{ route('interview.report', $inv->id) }}" target="_blank" class="btn-nav" style="background: rgba(16,185,129,0.15); color: #34d399; border-color: rgba(16,185,129,0.3); font-weight: 600; padding: 6px 10px; margin-right: 4px;">
-                                        📄 Report
-                                    </a>
+                                <!-- Review & Actions: EXACTLY 2 BUTTONS USING FONT-AWESOME ICONS -->
+                                <td class="py-3.5 px-4 text-right whitespace-nowrap">
+                                    <div class="inline-flex items-center gap-2 justify-end">
+                                        <!-- Button 1: Report Download -->
+                                        <a href="{{ route('interview.report', $inv->id) }}" target="_blank" download>
+                                            <x-button variant="success" size="sm" icon="fa-solid fa-file-arrow-down" class="bg-emerald-500/15 border-emerald-500/30 text-emerald-300 hover:bg-emerald-500/25">
+                                                Report Download
+                                            </x-button>
+                                        </a>
 
-                                    @if($inv->call_status === 'active')
-                                        <button onclick="openReviewModal({{ $inv->id }}, '{{ addslashes($inv->candidate_name) }}', '{{ $inv->submission_unique_id }}', true)" class="btn-nav" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; font-weight: 800; padding: 6px 14px; margin-right: 4px; cursor: pointer; box-shadow: 0 0 15px rgba(16,185,129,0.6); animation: acceptGlow 1.5s infinite alternate;">
-                                            📞 Join Active Call
-                                        </button>
-                                    @else
-                                        <button onclick="openReviewModal({{ $inv->id }}, '{{ addslashes($inv->candidate_name) }}', '{{ $inv->submission_unique_id }}')" class="btn-nav" style="background: rgba(99,102,241,0.15); color: #818cf8; border-color: rgba(99,102,241,0.3); font-weight: 600; padding: 6px 12px; margin-right: 4px; cursor: pointer;">
-                                            📞 Join Call
-                                        </button>
-                                    @endif
-
-                                    <!-- <a href="{{ route('interview.room', $inv->submission_unique_id) }}" target="_blank" class="btn-nav" style="padding: 6px 10px; font-size: 0.75rem;">
-                                        Open IDE Link
-                                    </a> -->
+                                        <!-- Button 2: Join Call -->
+                                        @if($inv->call_status === 'active')
+                                            <a href="{{ route('interview.show', $inv->id) }}?join_call=1">
+                                                <x-button variant="success" size="sm" icon="fa-solid fa-phone-volume" class="animate-pulse font-extrabold shadow-md shadow-emerald-500/50">
+                                                    Join Active Call
+                                                </x-button>
+                                            </a>
+                                        @else
+                                            <a href="{{ route('interview.show', $inv->id) }}">
+                                                <x-button variant="primary" size="sm" icon="fa-solid fa-video" class="bg-indigo-500/15 border-indigo-500/30 text-indigo-300 hover:bg-indigo-500/25">
+                                                    Join Call
+                                                </x-button>
+                                            </a>
+                                        @endif
+                                    </div>
                                 </td>
                             </tr>
                         @empty
                             <tr>
-                                <td colspan="6" style="text-align: center; color: var(--text-muted); padding: 30px;">
+                                <td colspan="6" class="text-center text-slate-400 py-8">
                                     No candidate interview sessions found. Click "+ Schedule Candidate Interview" above to create one.
                                 </td>
                             </tr>
@@ -443,2214 +274,84 @@
     </main>
 
     <!-- Modal: Schedule Candidate Interview -->
-    <div id="create-interview-modal" class="admin-modal">
-        <div class="admin-modal-content" style="max-width: 600px;">
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-                <h3 style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 700; color: white; margin: 0;">Schedule Candidate Assessment</h3>
-                <button onclick="document.getElementById('create-interview-modal').classList.remove('active')" style="background:none; border:none; color:var(--text-muted); font-size:1.5rem; cursor:pointer;">&times;</button>
+    <x-modal id="create-interview-modal" title="Schedule Candidate Assessment" maxWidth="lg">
+        <form action="{{ route('interview.store') }}" method="POST">
+            @csrf
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-3.5 mb-3.5">
+                <div>
+                    <label class="block text-xs font-medium text-slate-400 mb-1">Candidate Name <span class="text-red-500">*</span></label>
+                    <input type="text" name="candidate_name" required placeholder="e.g. John Doe" class="w-full px-3 py-2 bg-white/5 border border-slate-700/60 rounded-lg text-white text-xs outline-none focus:border-indigo-500">
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-slate-400 mb-1">Candidate Email <span class="text-red-500">*</span></label>
+                    <input type="email" name="candidate_email" required placeholder="john@gmail.com" class="w-full px-3 py-2 bg-white/5 border border-slate-700/60 rounded-lg text-white text-xs outline-none focus:border-indigo-500">
+                </div>
             </div>
 
-            <form action="{{ route('interview.store') }}" method="POST">
-                @csrf
-                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;">
-                    <div>
-                        <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Candidate Name <span style="color:#ef4444;">*</span></label>
-                        <input type="text" name="candidate_name" required placeholder="e.g. John Doe" class="form-input">
-                    </div>
-                    <div>
-                        <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Candidate Email <span style="color:#ef4444;">*</span></label>
-                        <input type="email" name="candidate_email" required placeholder="john@gmail.com" class="form-input">
-                    </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3.5">
+                <div>
+                    <label class="block text-xs font-medium text-slate-400 mb-1">Phone Number <span class="text-red-500">*</span></label>
+                    <input type="text" name="candidate_phone" required placeholder="9876543210" class="w-full px-3 py-2 bg-white/5 border border-slate-700/60 rounded-lg text-white text-xs outline-none focus:border-indigo-500">
                 </div>
-
-                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px;">
-                    <div>
-                        <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Phone Number <span style="color:#ef4444;">*</span></label>
-                        <input type="text" name="candidate_phone" required placeholder="9876543210" class="form-input">
-                    </div>
-                    <div>
-                        <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Start Time (Timeline)</label>
-                        <input type="datetime-local" name="scheduled_at" value="{{ now()->format('Y-m-d\TH:i') }}" class="form-input" style="background: #151b2c;">
-                    </div>
-                    <div>
-                        <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Access Duration <span style="color:#ef4444;">*</span></label>
-                        <select name="valid_hours" required class="form-input" style="background: #151b2c;">
-                            <option value="1">1 Hour</option>
-                            <option value="2" selected>2 Hours</option>
-                            <option value="4">4 Hours</option>
-                            <option value="12">12 Hours</option>
-                            <option value="24">24 Hours</option>
-                        </select>
-                    </div>
+                <div>
+                    <label class="block text-xs font-medium text-slate-400 mb-1">Start Time (Timeline)</label>
+                    <input type="datetime-local" name="scheduled_at" value="{{ now()->format('Y-m-d\TH:i') }}" class="w-full px-3 py-2 bg-slate-900 border border-slate-700/60 rounded-lg text-white text-xs outline-none focus:border-indigo-500">
                 </div>
-
-                <div style="margin-bottom: 14px;">
-                    <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Coding Language <span style="color:#ef4444;">*</span></label>
-                    <select name="language" required class="form-input" style="background: #151b2c;">
-                        <option value="python">Python 3</option>
-                        <option value="cpp">C++ (GCC)</option>
-                        <option value="c">C (GCC)</option>
-                        <option value="java">Java 15</option>
-                        <option value="php">PHP 8.2 / Laravel</option>
-                        <option value="javascript">JavaScript (Node.js)</option>
+                <div>
+                    <label class="block text-xs font-medium text-slate-400 mb-1">Access Duration <span class="text-red-500">*</span></label>
+                    <select name="valid_hours" required class="w-full px-3 py-2 bg-slate-900 border border-slate-700/60 rounded-lg text-white text-xs outline-none focus:border-indigo-500">
+                        <option value="1">1 Hour</option>
+                        <option value="2" selected>2 Hours</option>
+                        <option value="4">4 Hours</option>
+                        <option value="12">12 Hours</option>
+                        <option value="24">24 Hours</option>
                     </select>
                 </div>
+            </div>
 
-                <div style="margin-bottom: 16px;">
-                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
-                        <label style="font-size:0.75rem; color:var(--text-muted); font-weight:500;">Assign Internal Interviewers / Panelists</label>
-                    </div>
-                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 120px; overflow-y: auto; background: rgba(0,0,0,0.3); padding: 10px; border-radius: 8px; border: 1px solid var(--card-border);">
-                        @foreach($interviewers as $usr)
-                            <label style="display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: white; cursor: pointer;">
-                                <input type="checkbox" name="assigned_interviewers[]" value="{{ $usr->id }}" style="accent-color: #6366f1;">
-                                {{ $usr->name }} ({{ $usr->email }})
-                            </label>
-                        @endforeach
-                    </div>
+            <div class="mb-3.5">
+                <label class="block text-xs font-medium text-slate-400 mb-1">Coding Language <span class="text-red-500">*</span></label>
+                <select name="language" required class="w-full px-3 py-2 bg-slate-900 border border-slate-700/60 rounded-lg text-white text-xs outline-none focus:border-indigo-500">
+                    <option value="python">Python 3</option>
+                    <option value="cpp">C++ (GCC)</option>
+                    <option value="c">C (GCC)</option>
+                    <option value="java">Java 15</option>
+                    <option value="php">PHP 8.2 / Laravel</option>
+                    <option value="javascript">JavaScript (Node.js)</option>
+                </select>
+            </div>
+
+            <div class="mb-4">
+                <div class="flex justify-between items-center mb-1.5">
+                    <label class="text-xs font-medium text-slate-400">Assign Internal Interviewers / Panelists</label>
                 </div>
-
-
-                <div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
-                    <button type="button" onclick="document.getElementById('create-interview-modal').classList.remove('active')" class="btn-nav">Cancel</button>
-                    <button type="submit" class="btn-nav" style="background: var(--accent-primary); color: white; border-color: transparent; font-weight: 600;">Create Session & Password</button>
-                </div>
-            </form>
-        </div>
-    </div>
-
-    <!-- Modal: Live Review, 2-Way Video Call, Screen Share, Large IDE Inspector & SOS Alert -->
-    <div id="review-modal" class="admin-modal">
-        <div class="admin-modal-content" style="max-width: 1150px;">
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px;">
-                <div>
-                    <h3 id="modal-cand-name" style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 700; color: white; margin: 0;">Review Candidate Session</h3>
-                    <div id="modal-cand-uid" style="font-size: 0.75rem; color: #38bdf8;"></div>
-                </div>
-
-                <div style="display: flex; gap: 8px; align-items: center;">
-                    <!-- TOGGLE SOS AUTO-TRIGGER ON/OFF FOR SESSION -->
-                    <button id="sos-toggle-btn" onclick="toggleSosAutoTrigger()" class="btn-nav" style="background: rgba(99,102,241,0.15); color: #818cf8; border-color: #6366f1; font-size: 0.75rem; font-weight: 600;" title="Panelists can turn off automatic SOS popups for this session">
-                        🔔 SOS Auto-Trigger: ON
-                    </button>
-
-                    <!-- GENERATE PDF REPORT BUTTON -->
-                    <button onclick="openReportPage()" class="btn-nav" style="background: rgba(16,185,129,0.15); color: #34d399; border-color: #10b981; font-size: 0.75rem; font-weight: 600;">
-                        📄 Generate PDF Report
-                    </button>
-
-                    <!-- SOS CHEATING ALERT BUTTON (Flashing Red) -->
-                    <button id="sos-alert-btn" onclick="openSosModal()" class="btn-nav" style="display: none; background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); color: white; border: none; font-weight: 800; padding: 6px 14px; box-shadow: 0 0 15px rgba(239,68,68,0.7); cursor: pointer; animation: sosPulse 1.2s infinite alternate;">
-                        🚨 candidate might cheating
-                    </button>
-
-                    <!-- REGENERATE CANDIDATE PASSWORD -->
-                    <button onclick="regenerateCandidatePassword()" class="btn-nav" style="background: rgba(234,179,8,0.15); color: #fde047; border-color: #eab308; font-size: 0.75rem; font-weight: 600;">
-                        🔑 Password
-                    </button>
-
-                    <!-- BLOCK CANDIDATE EMAIL & IP -->
-                    <button onclick="blockCandidateAction()" class="btn-nav" style="background: rgba(239,68,68,0.15); color: #fca5a5; border-color: #ef4444; font-size: 0.75rem; font-weight: 600;">
-                        ⛔ Block
-                    </button>
-
-                    <button onclick="closeReviewModal()" style="background:none; border:none; color:var(--text-muted); font-size:1.5rem; cursor:pointer;">&times;</button>
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 max-h-[120px] overflow-y-auto bg-black/30 p-2.5 rounded-lg border border-slate-700/60">
+                    @foreach($interviewers as $usr)
+                        <label class="flex items-center gap-2 text-xs text-white cursor-pointer hover:text-indigo-300">
+                            <input type="checkbox" name="assigned_interviewers[]" value="{{ $usr->id }}" class="accent-indigo-500">
+                            {{ $usr->name }} ({{ $usr->email }})
+                        </label>
+                    @endforeach
                 </div>
             </div>
 
-            <!-- LIVE 2-WAY VIDEO CALL & SCREEN SHARE PANEL -->
-            <div style="background: rgba(15,23,42,0.8); border: 1.5px solid #6366f1; border-radius: 16px; padding: 16px; margin-bottom: 20px;">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
-                    <div style="display: flex; align-items: center; gap: 8px;">
-                        <span style="font-size: 1.1rem;">📞</span>
-                        <strong style="color: white; font-size: 0.95rem;">Real-Time 2-Way Interview Call & Candidate Screen</strong>
-                        <span id="interviewer-call-status" class="badge" style="background: rgba(99,102,241,0.2); color: #818cf8;">DISCONNECTED</span>
-                    </div>
-
-                    <div style="display: flex; gap: 8px;">
-                        <button id="btn-start-call" onclick="startInterviewerCall()" class="btn-nav" style="background: #10b981; color: white; border: none; font-weight: 700; padding: 6px 14px; cursor: pointer;">
-                            📞 Start / Join Call
-                        </button>
-                        <button id="btn-start-recording" onclick="startCallRecording()" class="btn-nav" style="background: rgba(239,68,68,0.2); border-color: #ef4444; color: #fca5a5; font-weight: 700; padding: 6px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;">
-                            ⏺️ Record Call (Silent)
-                        </button>
-                        <button id="btn-stop-recording" onclick="stopCallRecording()" class="btn-nav" style="display: none; background: #ef4444; color: white; border: none; font-weight: 700; padding: 6px 14px; cursor: pointer; animation: pulse 1s infinite alternate;">
-                            ⏹️ Stop & Save Recording
-                        </button>
-                        <button id="btn-leave-call" onclick="leaveInterviewerCall()" class="btn-nav" style="display: none; background: rgba(234,179,8,0.2); border-color: #eab308; color: #fde047; font-size: 0.75rem; font-weight: 600;" title="Leave your individual connection without ending call for others">
-                            🚪 Leave Call
-                        </button>
-                        <button id="btn-end-all-call" onclick="endCallForAll()" class="btn-nav" style="display: none; background: #ef4444; color: white; border: none; font-weight: 700; font-size: 0.75rem; padding: 6px 12px; cursor: pointer;" title="End call for candidate and all panelists">
-                            🛑 End Call for All
-                        </button>
-                        <button id="btn-toggle-interviewer-mic" onclick="toggleInterviewerMic()" class="btn-nav" style="display: none; background: rgba(255,255,255,0.1); font-size: 0.75rem;">
-                            🎤 Mic On
-                        </button>
-                        <button id="btn-toggle-interviewer-cam" onclick="toggleInterviewerCam()" class="btn-nav" style="display: none; background: rgba(255,255,255,0.1); font-size: 0.75rem;">
-                            📷 Cam On
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Video Feeds Grid: Candidate Video, Candidate Screen (with Zoom controls), Panelist Video -->
-                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; min-height: 220px;">
-                    <!-- 1. Candidate Camera Stream (with Zoom Controls & Initials Avatar) -->
-                    <div id="cand-video-wrapper" style="position: relative; background: #050811; border-radius: 12px; border: 1.5px solid var(--card-border); overflow: hidden; height: 220px;">
-                        <div style="position: absolute; top: 6px; right: 6px; z-index: 20; display: flex; gap: 4px; background: rgba(0,0,0,0.7); padding: 3px 6px; border-radius: 6px; backdrop-filter: blur(4px);">
-                            <button onclick="zoomCandVideo(0.25)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Zoom In Candidate Video (🔍+)">🔍+</button>
-                            <button onclick="zoomCandVideo(-0.25)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Zoom Out Candidate Video (🔎-)">🔎-</button>
-                            <button onclick="zoomCandVideo(0)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Reset Zoom (↺)">↺</button>
-                        </div>
-
-                        <video id="interviewer-cand-video" autoplay playsinline style="width: 100%; height: 100%; object-fit: cover; transform-origin: center center; transition: transform 0.2s ease;"></video>
-                        <div id="cand-video-placeholder" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,23,42,0.95); color: #94a3b8; font-size: 0.75rem; z-index: 5;">
-                            <div id="modal-cand-avatar-circle" style="width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #6366f1 0%, #0078d4 100%); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; font-family: 'Outfit', sans-serif; color: white; margin-bottom: 6px; box-shadow: 0 0 15px rgba(99,102,241,0.4);">
-                                CD
-                            </div>
-                            <div id="cand-avatar-name" style="font-weight: 700; color: white;">Candidate Camera</div>
-                            <div style="font-size: 0.65rem; color: #38bdf8; margin-top: 2px;">Click 'Start / Join 2-Way Call' to connect</div>
-                        </div>
-                        <div style="position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,0.6); padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; color: #34d399; font-weight: 600; z-index: 10;">
-                            👤 Candidate Video <span id="cand-vid-zoom-badge" style="color: #38bdf8; font-size: 0.6rem;">(100%)</span>
-                        </div>
-                    </div>
-
-                    <!-- 2. Candidate Live Shared Screen (with Zoom In / Zoom Out Controls & Fullscreen) -->
-                    <div id="screen-wrapper" style="position: relative; background: #050811; border-radius: 12px; border: 1.5px solid #38bdf8; overflow: hidden; height: 220px;">
-                        <div style="position: absolute; top: 6px; right: 6px; z-index: 20; display: flex; gap: 4px; background: rgba(0,0,0,0.7); padding: 3px 6px; border-radius: 6px; backdrop-filter: blur(4px);">
-                            <button onclick="zoomScreen(0.25)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Zoom In (🔍+)">🔍+</button>
-                            <button onclick="zoomScreen(-0.25)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Zoom Out (🔎-)">🔎-</button>
-                            <button onclick="resetZoomScreen()" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Reset Zoom (↺)">↺</button>
-                            <button onclick="toggleFullscreenScreen()" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: #38bdf8; color: black; font-weight: bold;" title="Fullscreen (⛶)">⛶</button>
-                        </div>
-
-                        <div id="screen-zoom-container" style="width: 100%; height: 100%; overflow: auto;">
-                            <video id="interviewer-screen-video" autoplay playsinline style="width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; transition: transform 0.2s ease;"></video>
-                        </div>
-
-                        <div id="screen-video-placeholder" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,23,42,0.95); color: #94a3b8; font-size: 0.75rem; z-index: 5;">
-                            <div style="font-size: 2rem; margin-bottom: 4px;">🖥️</div>
-                            <div style="font-weight: 700; color: white;">Candidate Live Screen</div>
-                            <div style="font-size: 0.65rem; color: #94a3b8; margin-top: 2px;">Waiting for candidate to share screen...</div>
-                        </div>
-
-                        <div style="position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,0.6); padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; color: #38bdf8; font-weight: 600; z-index: 10;">
-                            🖥️ Shared Screen <span id="zoom-level-badge" style="color: #a7f3d0; margin-left: 4px;">(100%)</span>
-                        </div>
-                    </div>
-
-                    <!-- 3. Interviewer / Panelist Camera Stream -->
-                    <div style="position: relative; background: #050811; border-radius: 12px; border: 1.5px solid var(--card-border); overflow: hidden; height: 220px;">
-                        <video id="interviewer-self-video" autoplay muted playsinline style="width: 100%; height: 100%; object-fit: cover;"></video>
-                        <div id="self-video-placeholder" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,23,42,0.95); color: #94a3b8; font-size: 0.75rem; z-index: 5;">
-                            @php
-                                $usrWords = preg_split('/\s+/', trim(Auth::user()->name));
-                                if (count($usrWords) >= 2) {
-                                    $usrInitials = strtoupper(substr($usrWords[0], 0, 1) . substr(end($usrWords), 0, 1));
-                                } else {
-                                    $uStr = trim(Auth::user()->name);
-                                    $usrInitials = strtoupper(substr($uStr, 0, 1) . (strlen($uStr) > 1 ? substr($uStr, -1) : ''));
-                                }
-                            @endphp
-                            <div style="width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; font-family: 'Outfit', sans-serif; color: white; margin-bottom: 6px; box-shadow: 0 0 15px rgba(16,185,129,0.4);">
-                                {{ $usrInitials }}
-                            </div>
-                            <div style="font-weight: 700; color: white;">{{ Auth::user()->name }}</div>
-                            <div style="font-size: 0.65rem; color: #34d399; margin-top: 2px;">Panelist (Self)</div>
-                        </div>
-                        <div style="position: absolute; bottom: 6px; left: 6px; background: rgba(99,102,241,0.8); padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; color: white; font-weight: 600; z-index: 10;">
-                            🎙️ Panelist Self
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Secondary Panelist WebRTC Mesh Grid (Multi-Party Panelist Video Grid) -->
-                <div id="panelist-mesh-grid" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 12px;"></div>
-
+            <div class="flex justify-end gap-2.5 mt-5">
+                <x-button type="button" onclick="document.getElementById('create-interview-modal').classList.remove('active')" variant="secondary">
+                    Cancel
+                </x-button>
+                <x-button type="submit" variant="primary" icon="fa-solid fa-check">
+                    Create Session & Password
+                </x-button>
             </div>
-
-            <!-- LARGE CARD: CANDIDATE IDE & SYNCED NOTEBOOK / DRAWING INSPECTOR (Visible by default even if Screen Share is OFF) -->
-            <div style="background: #090d16; border: 1.5px solid var(--accent-primary); border-radius: 16px; padding: 20px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 10px;">
-                    <div style="display: flex; align-items: center; gap: 10px;">
-                        <span style="font-size: 1.2rem;">💻</span>
-                        <strong style="color: white; font-size: 1.05rem;">Candidate Live IDE & Workspace Inspector</strong>
-                        <span id="modal-code-lang" class="badge" style="background: rgba(99,102,241,0.2); color: #818cf8; font-size: 0.7rem;">PYTHON</span>
-                        <span style="font-size: 0.7rem; color: #34d399;">● Live Synced</span>
-                    </div>
-
-                    <!-- Tab Switcher for Code Solution, Notepad, Drawing, Saved Profile Video Recordings, Screenshots -->
-                    <div style="display: flex; gap: 6px;">
-                        <button id="tab-btn-code" onclick="switchIdeTab('code')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: #6366f1; color: white; border: none; font-weight: 700;">💻 Live IDE Code</button>
-                        <button id="tab-btn-notes" onclick="switchIdeTab('notes')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: rgba(255,255,255,0.05); color: #94a3b8; border: 1px solid var(--card-border);">📝 Candidate Notepad</button>
-                        <button id="tab-btn-drawing" onclick="switchIdeTab('drawing')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: rgba(255,255,255,0.05); color: #94a3b8; border: 1px solid var(--card-border);">🎨 Candidate Drawing</button>
-                        <button id="tab-btn-recordings" onclick="switchIdeTab('recordings')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: rgba(255,255,255,0.05); color: #94a3b8; border: 1px solid var(--card-border);">📹 Saved Recordings (.MP4)</button>
-                        <button id="tab-btn-screenshots" onclick="switchIdeTab('screenshots')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: rgba(255,255,255,0.05); color: #94a3b8; border: 1px solid var(--card-border);">📸 Tab Switch Screenshots</button>
-                    </div>
-                </div>
-
-                <div style="display: grid; grid-template-columns: 2.5fr 1fr; gap: 20px;">
-                    <!-- Left Column: Tab Content (Code Solution, Notepad, Canvas Drawing, Saved Recordings, Screenshots) -->
-                    <div>
-                        <!-- Tab 1: Live Code Solution & Terminal Output -->
-                        <div id="tab-content-code" style="display: block;">
-                            <div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Current Code Solution (Visible even if candidate does not share screen):</div>
-                            <pre id="modal-code-display" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 16px; font-family: monospace; font-size: 0.85rem; color: #38bdf8; min-height: 200px; max-height: 280px; overflow-y: auto; white-space: pre-wrap; margin-bottom: 12px;"></pre>
-
-                            <div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Execution Stdout / Stderr Output:</div>
-                            <pre id="modal-output-display" style="background: #02040a; border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; font-family: monospace; font-size: 0.75rem; color: #34d399; max-height: 90px; overflow-y: auto; white-space: pre-wrap;"></pre>
-                        </div>
-
-                        <!-- Tab 2: Candidate Notepad Content -->
-                        <div id="tab-content-notes" style="display: none;">
-                            <div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Candidate Live Notepad Notes (Auto-Synced):</div>
-                            <pre id="modal-notes-display" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 16px; font-family: monospace; font-size: 0.85rem; color: #e2e8f0; min-height: 250px; max-height: 350px; overflow-y: auto; white-space: pre-wrap;"></pre>
-                        </div>
-
-                        <!-- Tab 3: Candidate Canvas Drawing Image -->
-                        <div id="tab-content-drawing" style="display: none;">
-                            <div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Candidate Live Drawing / Architecture Diagram:</div>
-                            <div style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 10px; display: flex; justify-content: center; align-items: center; min-height: 250px;">
-                                <img id="modal-drawing-img" src="" alt="Candidate Drawing Board" style="max-width: 100%; max-height: 320px; display: none; border-radius: 8px; border: 1px dashed rgba(255,255,255,0.2);" />
-                                <div id="no-drawing-placeholder" style="color: #94a3b8; font-size: 0.8rem;">No drawing data submitted by candidate yet.</div>
-                            </div>
-                        </div>
-
-                        <!-- Tab 4: Saved Candidate Profile Video Recordings & MP4 Downloads -->
-                        <div id="tab-content-recordings" style="display: none;">
-                            <div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Saved Candidate Video Sessions (Sorted by Newest First):</div>
-                            <div id="modal-recordings-container" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; min-height: 250px; max-height: 420px; overflow-y: auto;">
-                                <div style="color: #94a3b8; font-size: 0.8rem; text-align: center; padding-top: 40px;">No video recordings saved for this candidate yet.</div>
-                            </div>
-                        </div>
-
-                        <!-- Tab 5: Candidate Tab-Switch Screenshots -->
-                        <div id="tab-content-screenshots" style="display: none;">
-                            <div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600; display: flex; justify-content: space-between; align-items: center;">
-                                <span>📸 Candidate Tab-Switch Captured Screenshots:</span>
-                                <div style="display: flex; align-items: center; gap: 8px;">
-                                    <span style="font-size: 0.7rem; color: #a7f3d0;">Admin Screenshot Capture:</span>
-                                    <button id="modal-toggle-screenshot-btn" onclick="toggleTabScreenshotCapture()" class="btn-nav" style="padding: 3px 10px; font-size: 0.7rem; background: #10b981; color: white; border: none; font-weight: 700; border-radius: 6px; cursor: pointer;">
-                                        📸 ENABLED
-                                    </button>
-                                </div>
-                            </div>
-                            <div id="modal-screenshots-container" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; min-height: 250px; max-height: 420px; overflow-y: auto;">
-                                <div style="color: #94a3b8; font-size: 0.8rem; text-align: center; padding-top: 40px;">No tab-switch screenshots captured for this candidate yet.</div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Right Column: Proctoring Audit & Silent Warning Form -->
-                    <div>
-                        <span style="font-size: 0.8rem; font-weight: 600; color: white;">Proctoring Audit:</span>
-                        <div id="modal-logs-display" style="background: rgba(0,0,0,0.4); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px; max-height: 200px; overflow-y: auto; margin-bottom: 14px; font-size: 0.7rem; color: var(--text-muted);">
-                            No violations recorded.
-                        </div>
-
-                        <!-- 2-Way Real-Time Chat Box in Review Modal -->
-                        <div style="background: rgba(15,23,42,0.8); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px;">
-                            <div style="font-size: 0.75rem; color: white; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px;">
-                                💬 2-Way Live Chat History:
-                            </div>
-                            <div id="interviewer-chat-history" style="background: #050811; border: 1px solid var(--card-border); border-radius: 8px; padding: 8px; height: 130px; overflow-y: auto; font-size: 0.7rem; margin-bottom: 8px;">
-                                <div style="color: #94a3b8; font-style: italic; text-align: center; padding-top: 40px;">No chat history. Send a message below.</div>
-                            </div>
-                            <div style="display: flex; gap: 6px;">
-                                <input type="text" id="warning-input" placeholder="Type message to candidate..." onkeydown="if(event.key==='Enter') sendSilentWarning()" class="form-input" style="font-size: 0.75rem; background: #0b0f19; color: #ffffff !important; border: 1px solid var(--card-border); padding: 6px 10px; flex: 1;">
-                                <button onclick="sendSilentWarning()" class="btn-nav" style="background: #6366f1; color: white; border: none; font-size: 0.75rem; font-weight: 600; padding: 6px 12px; cursor: pointer;">
-                                    Send
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div style="display: flex; justify-content: flex-end;">
-                <button type="button" onclick="closeReviewModal()" class="btn-nav">Close</button>
-            </div>
-        </div>
-    </div>
-
-    <!-- SOS CHEATING ALERT MODAL (FOR INTERVIEWER ONLY) -->
-    <div id="sos-modal" class="admin-modal" style="z-index: 9999;">
-        <div class="admin-modal-content" style="max-width: 520px; border: 2px solid #ef4444; background: #0f172a; box-shadow: 0 0 40px rgba(239,68,68,0.8);">
-            <div style="display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(239,68,68,0.3); padding-bottom: 12px; margin-bottom: 14px;">
-                <div style="font-size: 2.2rem;">🚨</div>
-                <div>
-                    <h3 style="color: #fca5a5; font-size: 1.25rem; font-weight: 800; margin: 0;">candidate might cheating</h3>
-                    <div style="font-size: 0.72rem; color: #94a3b8;">Proctoring engine flagged candidate cheating activity!</div>
-                </div>
-            </div>
-
-            <div id="sos-violation-list" style="background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 12px; padding: 14px; font-size: 0.8rem; color: #fca5a5; margin-bottom: 18px; max-height: 180px; overflow-y: auto;">
-                Violation details loading...
-            </div>
-
-            <div style="display: flex; gap: 10px; justify-content: flex-end;">
-                <button onclick="stopSosAlarm()" class="btn-nav" style="background: #ef4444; color: white; border: none; font-weight: 800; padding: 8px 16px; cursor: pointer;">
-                    🔕 Acknowledge & Stop SOS Alarm
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <!-- INCOMING CALL RING MODAL (REAL CALLING APP UI FOR PANELISTS) -->
-    <div id="incoming-call-modal" class="admin-modal" style="z-index: 10000; background: rgba(5, 8, 17, 0.85); backdrop-filter: blur(16px);">
-        <div class="admin-modal-content" style="max-width: 460px; background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 100%); border: 2px solid #6366f1; border-radius: 24px; padding: 32px; box-shadow: 0 0 50px rgba(99, 102, 241, 0.6); text-align: center;">
-
-            <div style="position: relative; width: 90px; height: 90px; margin: 0 auto 20px auto; display: flex; align-items: center; justify-content: center;">
-                <div style="position: absolute; inset: -15px; border-radius: 50%; border: 2px solid rgba(16, 185, 129, 0.6); animation: ringPulse 1.4s infinite ease-out;"></div>
-                <div style="position: absolute; inset: -30px; border-radius: 50%; border: 2px solid rgba(99, 102, 241, 0.4); animation: ringPulse 1.4s infinite ease-out 0.4s;"></div>
-                <div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #10b981 0%, #0078d4 100%); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 800; color: white; box-shadow: 0 10px 25px rgba(16, 185, 129, 0.5); z-index: 5;">
-                    📞
-                </div>
-            </div>
-
-            <div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: #34d399; font-weight: 800; margin-bottom: 6px;">
-                ⚡ INCOMING INTERVIEW CALL
-            </div>
-
-            <h3 id="incoming-cand-name" style="font-family: 'Outfit', sans-serif; font-size: 1.45rem; font-weight: 800; color: white; margin-bottom: 4px;">
-                Candidate Name
-            </h3>
-
-            <div id="incoming-starter-info" style="font-size: 0.82rem; color: #a5b4fc; margin-bottom: 16px;">
-                Initiated by Panelist
-            </div>
-
-            <div style="background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px; font-size: 0.78rem; color: #cbd5e1; margin-bottom: 24px; line-height: 1.4;">
-                Another interviewer has started calling the candidate. Click <strong>Accept Call</strong> to join live, or <strong>Decline</strong> if busy (you can join later anytime from the dashboard table).
-            </div>
-
-            <div style="display: flex; gap: 14px; justify-content: center;">
-                <button id="incoming-decline-btn" onclick="declineIncomingCall()" class="btn-nav" style="flex: 1; padding: 12px 18px; background: rgba(239, 68, 68, 0.2); border: 1.5px solid #ef4444; color: #fca5a5; font-weight: 700; font-size: 0.9rem; border-radius: 12px; cursor: pointer;">
-                    🚫 Decline / Miss
-                </button>
-                <button id="incoming-accept-btn" onclick="acceptIncomingCall()" class="btn-nav" style="flex: 1.3; padding: 12px 18px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border: none; color: white; font-weight: 800; font-size: 0.9rem; border-radius: 12px; box-shadow: 0 0 20px rgba(16, 185, 129, 0.6); cursor: pointer; animation: acceptGlow 1.5s infinite alternate;">
-                    📞 Accept Call
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <style>
-        @keyframes sosPulse {
-            0% { transform: scale(1); box-shadow: 0 0 10px rgba(239,68,68,0.5); }
-            100% { transform: scale(1.05); box-shadow: 0 0 25px rgba(239,68,68,1); }
-        }
-        @keyframes ringPulse {
-            0% { transform: scale(0.85); opacity: 1; }
-            100% { transform: scale(1.35); opacity: 0; }
-        }
-        @keyframes acceptGlow {
-            0% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.5); transform: scale(1); }
-            100% { box-shadow: 0 0 28px rgba(16, 185, 129, 0.9); transform: scale(1.03); }
-        }
-    </style>
+        </form>
+    </x-modal>
 
     <script>
         window.MAX_INTERVIEWERS = {{ config('interview.max_interviewer', 4) }};
-
-        // function checkMaxInterviewers(checkboxElem) {
-        //     const checkedCount = document.querySelectorAll('input[name="assigned_interviewers[]"]:checked').length;
-        //     if (checkedCount > window.MAX_INTERVIEWERS) {
-        //         if (checkboxElem) checkboxElem.checked = false;
-        //         if (typeof Swal !== 'undefined') {
-        //             Swal.fire({
-        //                 icon: 'warning',
-        //                 title: 'Limit Exceeded',
-        //                 text: `You can select a maximum of ${window.MAX_INTERVIEWERS} internal interviewers per assessment session.`,
-        //                 confirmButtonColor: '#6366f1',
-        //                 toast: true,
-        //                 position: 'top-end',
-        //                 timer: 3500,
-        //                 showConfirmButton: false
-        //             });
-        //         } else {
-        //             alert(`Maximum ${window.MAX_INTERVIEWERS} internal interviewers allowed per session.`);
-        //         }
-        //     }
-        // }
-
-        var interviewerSigChannel = null;
-
-        let currentInterviewId = null;
-        let interviewerPeer = null;
-        let screenReceiverPeer = null;
-        let interviewerLocalStream = null;
-        let activeCall = null;
-        let isInterviewerMicOn = true;
-        let isInterviewerCamOn = true;
-        let screenZoomLevel = 1.0;
-
-        function getInitials(name) {
-            if (!name) return 'CD';
-            let parts = name.trim().split(/\s+/);
-            if (parts.length >= 2) {
-                return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-            }
-            let str = name.trim();
-            if (str.length >= 2) {
-                return (str[0] + str[str.length - 1]).toUpperCase();
-            }
-            return str.toUpperCase();
-        }
-
-        function zoomScreen(delta) {
-            screenZoomLevel = Math.max(0.5, Math.min(3.0, screenZoomLevel + delta));
-            const screenVid = document.getElementById('interviewer-screen-video');
-            const badge = document.getElementById('zoom-level-badge');
-            if (screenVid) {
-                screenVid.style.transform = `scale(${screenZoomLevel})`;
-            }
-            if (badge) {
-                badge.innerText = `(${Math.round(screenZoomLevel * 100)}%)`;
-            }
-        }
-
-        function resetZoomScreen() {
-            screenZoomLevel = 1.0;
-            zoomScreen(0);
-        }
-
-        function toggleFullscreenScreen() {
-            const wrapper = document.getElementById('screen-wrapper');
-            if (!wrapper) return;
-            if (!document.fullscreenElement) {
-                wrapper.requestFullscreen().catch(err => console.log(err));
-            } else {
-                document.exitFullscreen();
-            }
-        }
-
-        let activeViolations = [];
-        let sosPollInterval = null;
-        let acknowledgedViolationCount = 0;
-        let sosDismissed = false;
-        let sosAutoTriggerDisabled = false;
-
-        function toggleSosAutoTrigger() {
-            sosAutoTriggerDisabled = !sosAutoTriggerDisabled;
-            const btn = document.getElementById('sos-toggle-btn');
-            if (sosAutoTriggerDisabled) {
-                btn.innerText = '🔕 SOS Auto-Trigger: OFF';
-                btn.style.background = 'rgba(239,68,68,0.15)';
-                btn.style.color = '#fca5a5';
-                btn.style.borderColor = '#ef4444';
-            } else {
-                btn.innerText = '🔔 SOS Auto-Trigger: ON';
-                btn.style.background = 'rgba(99,102,241,0.15)';
-                btn.style.color = '#818cf8';
-                btn.style.borderColor = '#6366f1';
-            }
-        }
-
-        function openReportPage() {
-            if (!currentInterviewId) return;
-            const reportUrl = `{{ route('interview.report', ':id') }}`.replace(':id', currentInterviewId);
-            window.open(reportUrl, '_blank');
-        }
-
-        let currentTabScreenshotEnabled = true;
-
-        function toggleTabScreenshotCapture() {
-            if (!currentInterviewId) return;
-            const newStatus = !currentTabScreenshotEnabled;
-            fetch(`{{ route('interview.toggle-tab-screenshot', ':id') }}`.replace(':id', currentInterviewId), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                },
-                body: JSON.stringify({ enable: newStatus })
-            })
-            .then(r => r.json())
-            .then(res => {
-                if (res.success) {
-                    currentTabScreenshotEnabled = res.enable_tab_switch_screenshot;
-                    updateScreenshotToggleBtnUI(currentTabScreenshotEnabled);
-                    if (typeof Swal !== 'undefined') {
-                        Swal.fire({
-                            icon: 'info',
-                            title: 'Screenshot Setting Updated',
-                            text: res.message,
-                            timer: 2500,
-                            showConfirmButton: false,
-                            toast: true,
-                            position: 'top-end'
-                        });
-                    }
-                }
-            })
-            .catch(() => {});
-        }
-
-        function updateScreenshotToggleBtnUI(enabled) {
-            const btn = document.getElementById('modal-toggle-screenshot-btn');
-            if (btn) {
-                if (enabled) {
-                    btn.innerText = '📸 ENABLED';
-                    btn.style.background = '#10b981';
-                } else {
-                    btn.innerText = '🔕 DISABLED';
-                    btn.style.background = '#ef4444';
-                }
-            }
-        }
-
-        function switchIdeTab(tab) {
-            document.getElementById('tab-content-code').style.display = (tab === 'code') ? 'block' : 'none';
-            document.getElementById('tab-content-notes').style.display = (tab === 'notes') ? 'block' : 'none';
-            document.getElementById('tab-content-drawing').style.display = (tab === 'drawing') ? 'block' : 'none';
-            document.getElementById('tab-content-recordings').style.display = (tab === 'recordings') ? 'block' : 'none';
-            document.getElementById('tab-content-screenshots').style.display = (tab === 'screenshots') ? 'block' : 'none';
-
-            document.getElementById('tab-btn-code').style.background = (tab === 'code') ? '#6366f1' : 'rgba(255,255,255,0.05)';
-            document.getElementById('tab-btn-code').style.color = (tab === 'code') ? 'white' : '#94a3b8';
-
-            document.getElementById('tab-btn-notes').style.background = (tab === 'notes') ? '#6366f1' : 'rgba(255,255,255,0.05)';
-            document.getElementById('tab-btn-notes').style.color = (tab === 'notes') ? 'white' : '#94a3b8';
-
-            document.getElementById('tab-btn-drawing').style.background = (tab === 'drawing') ? '#06b6d4' : 'rgba(255,255,255,0.05)';
-            document.getElementById('tab-btn-drawing').style.color = (tab === 'drawing') ? 'white' : '#94a3b8';
-
-            document.getElementById('tab-btn-recordings').style.background = (tab === 'recordings') ? '#10b981' : 'rgba(255,255,255,0.05)';
-            document.getElementById('tab-btn-recordings').style.color = (tab === 'recordings') ? 'white' : '#94a3b8';
-
-            const shotBtn = document.getElementById('tab-btn-screenshots');
-            if (shotBtn) {
-                shotBtn.style.background = (tab === 'screenshots') ? '#f59e0b' : 'rgba(255,255,255,0.05)';
-                shotBtn.style.color = (tab === 'screenshots') ? 'white' : '#94a3b8';
-            }
-        }
-
-        // --- REAL-TIME CALL RINGTONE AUDIO SYNTHESIZER ---
-        class CallRingtoneEngine {
-            constructor() {
-                this.ctx = null;
-                this.interval = null;
-                this.isPlaying = false;
-            }
-
-            init() {
-                try {
-                    if (!this.ctx) {
-                        const AudioCtx = window.AudioContext || window.webkitAudioContext;
-                        this.ctx = new AudioCtx();
-                    }
-                    if (this.ctx && this.ctx.state === 'suspended') {
-                        this.ctx.resume();
-                    }
-                } catch(e) { console.log('Audio init:', e); }
-            }
-
-            start() {
-                this.init();
-                if (this.isPlaying) return;
-                this.isPlaying = true;
-
-                this.playTone();
-                if (this.interval) clearInterval(this.interval);
-                this.interval = setInterval(() => {
-                    if (this.isPlaying) this.playTone();
-                }, 2400);
-            }
-
-            playTone() {
-                this.init();
-                if (!this.ctx || !this.isPlaying) return;
-                try {
-                    const now = this.ctx.currentTime;
-                    const osc1 = this.ctx.createOscillator();
-                    const osc2 = this.ctx.createOscillator();
-                    const gain = this.ctx.createGain();
-
-                    osc1.type = 'sine';
-                    osc2.type = 'sine';
-
-                    // Loud, authentic phone call ring frequencies (C5 523Hz + E5 659Hz)
-                    osc1.frequency.setValueAtTime(523.25, now);
-                    osc2.frequency.setValueAtTime(659.25, now);
-
-                    gain.gain.setValueAtTime(0.001, now);
-                    gain.gain.linearRampToValueAtTime(0.35, now + 0.08);
-                    gain.gain.setValueAtTime(0.35, now + 1.1);
-                    gain.gain.exponentialRampToValueAtTime(0.001, now + 1.3);
-
-                    osc1.connect(gain);
-                    osc2.connect(gain);
-                    gain.connect(this.ctx.destination);
-
-                    osc1.start(now);
-                    osc2.start(now);
-
-                    osc1.stop(now + 1.35);
-                    osc2.stop(now + 1.35);
-                } catch(e) {}
-            }
-
-            stop() {
-                this.isPlaying = false;
-                if (this.interval) {
-                    clearInterval(this.interval);
-                    this.interval = null;
-                }
-            }
-        }
-        const callRingtone = new CallRingtoneEngine();
-
-        // Unlock browser AudioContext on user gesture anywhere on page
-        ['click', 'keydown', 'touchstart'].forEach(evt => {
-            document.addEventListener(evt, () => callRingtone.init(), { passive: true });
-        });
-
-        // Active Call Listening & Instant BroadcastChannel Signaling State
-        let activeIncomingCall = null;
-        let iAmTheCaller = false;
-        let ringTimeoutTimer = null;
-        const dismissedCallIds = new Set();
-        const endedCallIds = new Set();
-        const currentUserId = {{ Auth::id() }};
-        const globalCallChannel = new BroadcastChannel('global_call_alerts');
-        const adminPageLoadTimestamp = Date.now();
-
-        function triggerIncomingCallRing(callData, isRealtimeBroadcast = false) {
-            if (endedCallIds.has(callData.id) || dismissedCallIds.has(callData.id)) return;
-            if (iAmTheCaller && currentInterviewId == callData.id) return;
-            if (interviewerLocalStream && currentInterviewId == callData.id) return;
-
-            // Only play ringtone for real-time fresh calls initiated within the last 8 seconds
-            if (callData.call_started_at) {
-                const startedTime = new Date(callData.call_started_at).getTime();
-                const elapsedMs = Date.now() - startedTime;
-                if (elapsedMs > 8000 && !isRealtimeBroadcast) {
-                    dismissedCallIds.add(callData.id);
-                    return;
-                }
-            } else if (!isRealtimeBroadcast) {
-                dismissedCallIds.add(callData.id);
-                return;
-            }
-
-            activeIncomingCall = callData;
-            document.getElementById('incoming-cand-name').innerText = callData.candidate_name;
-            document.getElementById('incoming-starter-info').innerText = '📞 Call initiated by: ' + (callData.starter_name || 'Panelist');
-            document.getElementById('incoming-call-modal').classList.add('active');
-            callRingtone.start();
-
-            // Set 8-second auto-stop ring timeout
-            if (ringTimeoutTimer) clearTimeout(ringTimeoutTimer);
-            let remainingMs = 8000;
-            if (callData.call_started_at) {
-                const startedTime = new Date(callData.call_started_at).getTime();
-                const elapsedMs = Date.now() - startedTime;
-                remainingMs = Math.max(1000, 8000 - elapsedMs);
-            }
-
-            ringTimeoutTimer = setTimeout(() => {
-                declineIncomingCall(true);
-            }, remainingMs);
-        }
-
-        globalCallChannel.onmessage = (event) => {
-            const data = event.data;
-            if (!data) return;
-
-            if (data.type === 'incoming_call') {
-                triggerIncomingCallRing({
-                    id: data.interview_id,
-                    candidate_name: data.candidate_name,
-                    submission_unique_id: data.submission_unique_id,
-                    starter_name: data.starter_name,
-                    call_started_at: data.call_started_at || new Date().toISOString()
-                }, true);
-            } else if (data.type === 'call_ended') {
-                endedCallIds.add(data.interview_id);
-                dismissedCallIds.add(data.interview_id);
-                callRingtone.stop();
-                if (ringTimeoutTimer) {
-                    clearTimeout(ringTimeoutTimer);
-                    ringTimeoutTimer = null;
-                }
-                document.getElementById('incoming-call-modal').classList.remove('active');
-                if (activeIncomingCall && activeIncomingCall.id == data.interview_id) {
-                    activeIncomingCall = null;
-                }
-            }
-        };
-
-        function pollGlobalActiveCalls() {
-            fetch(`{{ route('interview.active-calls') }}`, {
-                headers: { 'Accept': 'application/json' }
-            })
-            .then(r => r.json())
-            .then(data => {
-                if (!data || !data.active_calls || data.active_calls.length === 0) {
-                    if (activeIncomingCall) {
-                        declineIncomingCall(true);
-                    }
-                    return;
-                }
-
-                const incoming = data.active_calls.find(call => {
-                    if (endedCallIds.has(call.id)) return false;
-                    if (iAmTheCaller && currentInterviewId == call.id) return false;
-                    if (interviewerLocalStream && currentInterviewId == call.id) return false;
-                    if (dismissedCallIds.has(call.id)) return false;
-                    return true;
-                });
-
-                if (incoming) {
-                    // Check if call was started before page refresh
-                    const startedTime = incoming.call_started_at ? new Date(incoming.call_started_at).getTime() : 0;
-                    if (startedTime > 0 && startedTime < (adminPageLoadTimestamp - 4000)) {
-                        // Ongoing call from before page reload: silent status update without ringtone
-                        dismissedCallIds.add(incoming.id);
-                        return;
-                    }
-
-                    if (!activeIncomingCall || activeIncomingCall.id !== incoming.id) {
-                        triggerIncomingCallRing(incoming, false);
-                    }
-                } else if (activeIncomingCall) {
-                    declineIncomingCall(true);
-                }
-            })
-            .catch(() => {});
-        }
-
-        // Poll for active calls every 1.5 seconds
-        setInterval(pollGlobalActiveCalls, 1500);
-
-        function acceptIncomingCall() {
-            callRingtone.stop();
-            if (ringTimeoutTimer) {
-                clearTimeout(ringTimeoutTimer);
-                ringTimeoutTimer = null;
-            }
-            document.getElementById('incoming-call-modal').classList.remove('active');
-
-            if (activeIncomingCall) {
-                const targetCall = activeIncomingCall;
-                activeIncomingCall = null;
-                openReviewModal(targetCall.id, targetCall.candidate_name, targetCall.submission_unique_id, true);
-            }
-        }
-
-        function declineIncomingCall(silent = false) {
-            callRingtone.stop();
-            if (ringTimeoutTimer) {
-                clearTimeout(ringTimeoutTimer);
-                ringTimeoutTimer = null;
-            }
-            document.getElementById('incoming-call-modal').classList.remove('active');
-
-            if (activeIncomingCall) {
-                dismissedCallIds.add(activeIncomingCall.id);
-                activeIncomingCall = null;
-            }
-
-            if (!silent && typeof Swal !== 'undefined') {
-                Swal.fire({
-                    icon: 'info',
-                    title: 'Call Missed / Declined',
-                    text: 'You can click "Join Active Call" from the list whenever you are ready.',
-                    timer: 3000,
-                    showConfirmButton: false,
-                    toast: true,
-                    position: 'top-end'
-                });
-            }
-        }
-
-        let liveSyncChannel = null;
-
-        function subscribeLiveSync(interviewId) {
-            if (liveSyncChannel) {
-                try { liveSyncChannel.close(); } catch(e) {}
-            }
-            liveSyncChannel = new BroadcastChannel('live_sync_' + interviewId);
-            liveSyncChannel.onmessage = function(event) {
-                const data = event.data;
-                if (!data) return;
-
-                if (data.type === 'code_sync') {
-                    if (data.language) {
-                        const langEl = document.getElementById('modal-code-lang');
-                        if (langEl) langEl.innerText = data.language.toUpperCase();
-                    }
-                    if (data.code !== undefined) {
-                        const codeEl = document.getElementById('modal-code-display');
-                        if (codeEl) codeEl.innerText = data.code || '// Candidate has not typed any code yet.';
-                    }
-                } else if (data.type === 'notes_sync') {
-                    if (data.notes !== undefined) {
-                        const notesEl = document.getElementById('modal-notes-display');
-                        if (notesEl) notesEl.innerText = data.notes || 'No candidate notes written yet.';
-                    }
-                } else if (data.type === 'drawing_sync') {
-                    const drawingImg = document.getElementById('modal-drawing-img');
-                    const noDrawing = document.getElementById('no-drawing-placeholder');
-                    if (data.drawing) {
-                        if (drawingImg) {
-                            drawingImg.src = data.drawing;
-                            drawingImg.style.display = 'block';
-                        }
-                        if (noDrawing) noDrawing.style.display = 'none';
-                    } else {
-                        if (drawingImg) drawingImg.style.display = 'none';
-                        if (noDrawing) noDrawing.style.display = 'block';
-                    }
-                } else if (data.type === 'chat_message') {
-                    pollReviewData();
-                }
-            };
-        }
-
-        function openReviewModal(id, name, uid, autoJoinCall = false) {
-            currentInterviewId = id;
-            acknowledgedViolationCount = 0;
-            sosDismissed = false;
-
-            document.getElementById('modal-cand-name').innerText = name;
-            document.getElementById('modal-cand-uid').innerText = 'Unique Submission ID: ' + uid;
-
-            const candInitials = getInitials(name);
-            const avatarCircle = document.getElementById('modal-cand-avatar-circle');
-            const avatarName = document.getElementById('cand-avatar-name');
-            if (avatarCircle) avatarCircle.innerText = candInitials;
-            if (avatarName) avatarName.innerText = name;
-
-            document.getElementById('review-modal').classList.add('active');
-            resetZoomScreen();
-            switchIdeTab('code');
-
-            subscribeLiveSync(id);
-            pollReviewData();
-            clearInterval(sosPollInterval);
-            sosPollInterval = setInterval(pollReviewData, 6000);
-
-            if (autoJoinCall) {
-                setTimeout(() => {
-                    startInterviewerCall(true);
-                }, 400);
-            }
-        }
-
-        function sendInterviewerPeerHeartbeat(action = 'heartbeat') {
-            if (!currentInterviewId) return;
-            const myPeerId = 'interviewer_' + currentInterviewId + '_' + currentUserId;
-            fetch(`{{ route('interview.peer-heartbeat', ':id') }}`.replace(':id', currentInterviewId), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                },
-                body: JSON.stringify({
-                    peer_id: myPeerId,
-                    name: '{{ addslashes(Auth::user()->name) }}',
-                    role: '{{ Auth::user()->is_admin ? "admin" : "interviewer" }}',
-                    action: action
-                })
-            }).catch(e => {});
-        }
-
-        function pollReviewData() {
-            if (!currentInterviewId) return;
-            if (interviewerLocalStream) {
-                sendInterviewerPeerHeartbeat('heartbeat');
-            }
-
-            fetch(`{{ route('interview.poll', ':id') }}`.replace(':id', currentInterviewId), {
-                headers: { 'Accept': 'application/json' }
-            })
-                .then(r => {
-                    if (!r.ok) return null;
-                    const contentType = r.headers.get('content-type');
-                    if (!contentType || !contentType.includes('application/json')) return null;
-                    return r.json();
-                })
-                .then(data => {
-                    if (!data) return;
-
-                    if (data.active_peers && Array.isArray(data.active_peers)) {
-                        const myPeerId = 'interviewer_' + currentInterviewId + '_' + currentUserId;
-                        const activeIds = new Set(data.active_peers.map(p => p.peer_id));
-
-                        data.active_peers.forEach(p => {
-                            if (p.peer_id && p.peer_id !== myPeerId) {
-                                let roleLabel = p.role === 'admin' ? ('Admin ' + (p.name || '')) : ('Panelist ' + (p.name || ''));
-                                if (p.peer_id.startsWith('interviewer_')) {
-                                    if (interviewerLocalStream && interviewerPeer && interviewerPeer.open) {
-                                        if (!panelistMeshTiles.has(p.peer_id)) {
-                                            try {
-                                                const outCall = interviewerPeer.call(p.peer_id, interviewerLocalStream);
-                                                if (outCall) {
-                                                    outCall.on('stream', remoteStream => {
-                                                        addOrUpdatePanelistTile(p.peer_id, remoteStream, roleLabel);
-                                                    });
-                                                }
-                                            } catch(e) {}
-                                        }
-                                    }
-                                }
-                            }
-                        });
-
-                        panelistMeshTiles.forEach((_, pid) => {
-                            if (!activeIds.has(pid)) {
-                                removePanelistTile(pid);
-                            }
-                        });
-                    }
-                    document.getElementById('modal-code-lang').innerText = (data.submitted_language || 'UNKNOWN').toUpperCase();
-                    document.getElementById('modal-code-display').innerText = data.submitted_code || '// Candidate has not typed any code yet.';
-                    document.getElementById('modal-output-display').innerText = data.code_output || 'No execution output.';
-                    document.getElementById('modal-notes-display').innerText = data.candidate_notes || 'No candidate notes written yet.';
-
-                    const drawingImg = document.getElementById('modal-drawing-img');
-                    const noDrawing = document.getElementById('no-drawing-placeholder');
-                    if (data.candidate_drawing) {
-                        drawingImg.src = data.candidate_drawing;
-                        drawingImg.style.display = 'block';
-                        noDrawing.style.display = 'none';
-                    } else {
-                        drawingImg.style.display = 'none';
-                        noDrawing.style.display = 'block';
-                    }
-
-                    // Render Candidate Saved Video Recordings in Profile Modal (Descending order by timestamp)
-                    const recContainer = document.getElementById('modal-recordings-container');
-                    if (recContainer) {
-                        const recPath = data.recording_path;
-                        let recList = data.recordings || [];
-
-                        if (recList.length === 0 && recPath) {
-                            recList = [{ url: recPath, created_at: new Date().toISOString(), original_index: 0 }];
-                        }
-
-                        if (recList.length > 0) {
-                            // Ensure descending order by created_at
-                            recList.sort((a, b) => {
-                                const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
-                                const timeB = b.created_at ? new Date(b.created_at).getTime() : 0;
-                                return timeB - timeA;
-                            });
-
-                            let recHtml = `<div style="font-size: 0.75rem; color: #38bdf8; font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
-                                <span>📹 Stored Video Sessions (${recList.length} recording${recList.length > 1 ? 's' : ''})</span>
-                                <span style="font-size: 0.65rem; color: #94a3b8;">📜 Scroll to view older recordings</span>
-                            </div>`;
-
-                            recList.forEach((r, displayIdx) => {
-                                let videoUrl = typeof r === 'string' ? r : (r.stream_url || r.url || recPath);
-                                if (videoUrl && !videoUrl.startsWith('http') && !videoUrl.startsWith('/')) {
-                                    videoUrl = '/' + videoUrl;
-                                }
-                                if (videoUrl && videoUrl.includes('/storage/')) {
-                                    videoUrl = videoUrl.replace('/storage/', '/media-stream/');
-                                }
-                                const origIdx = (typeof r === 'object' && r.original_index !== undefined) ? r.original_index : displayIdx;
-                                const dateObj = (r && r.created_at) ? new Date(r.created_at) : new Date();
-                                const dateStr = dateObj.toLocaleDateString() + ' ' + dateObj.toLocaleTimeString();
-                                const downloadUrl = (typeof r === 'object' && r.download_url) ? r.download_url : (`{{ route('interview.download-recording', ':id') }}`.replace(':id', currentInterviewId) + `?index=${origIdx}`);
-                                const mimeType = (typeof r === 'object' && r.mime_type) ? r.mime_type : ((videoUrl && videoUrl.includes('.mp4')) ? 'video/mp4' : 'video/webm');
-
-                                recHtml += `<div style="background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; margin-bottom: 12px; transition: all 0.2s ease;">
-                                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                                        <div>
-                                            <strong style="color: white; font-size: 0.8rem;">📹 Session Recording #${recList.length - displayIdx}</strong>
-                                            <span style="font-size: 0.7rem; color: #94a3b8; margin-left: 8px;">📅 ${dateStr}</span>
-                                        </div>
-                                        <a href="${downloadUrl}" target="_blank" download class="btn-nav" style="background: #10b981; color: white; border: none; font-size: 0.75rem; font-weight: 700; padding: 4px 12px; text-decoration: none; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px;">
-                                            📥 Download Video
-                                        </a>
-                                    </div>
-                                    <video controls preload="metadata" style="width: 100%; max-height: 240px; border-radius: 8px; background: #000; outline: none; border: 1px solid rgba(255,255,255,0.1);">
-                                        <source src="${videoUrl}" type="${mimeType}">
-                                        <source src="${videoUrl}">
-                                        Your browser does not support video playback.
-                                    </video>
-                                </div>`;
-                            });
-                            recContainer.innerHTML = recHtml;
-                        } else {
-                            recContainer.innerHTML = '<div style="color: #94a3b8; font-size: 0.8rem; text-align: center; padding-top: 40px;">No video recordings saved for this candidate yet.</div>';
-                        }
-                    }
-
-                    const chatHistory = document.getElementById('interviewer-chat-history');
-                    if (chatHistory && data.warnings && data.warnings.length > 0) {
-                        let chatHtml = '';
-                        data.warnings.forEach(w => {
-                            const isInterviewer = w.sent_by !== null;
-                            const senderName = isInterviewer ? (w.sender ? w.sender.name : 'You (Interviewer)') : (data.candidate_name || 'Candidate');
-                            const badgeColor = isInterviewer ? '#6366f1' : '#38bdf8';
-                            const bgColor = isInterviewer ? 'rgba(99,102,241,0.1)' : 'rgba(56,189,248,0.1)';
-
-                            chatHtml += `<div style="margin-bottom:8px; background:${bgColor}; padding:8px 10px; border-radius:8px; border-left:3px solid ${badgeColor};">
-                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
-                                    <strong style="color:${badgeColor}; font-size:0.75rem;">${senderName}</strong>
-                                    <span style="font-size:0.65rem; color:#94a3b8;">${new Date(w.created_at || Date.now()).toLocaleTimeString()}</span>
-                                </div>
-                                <div style="color: #ffffff !important; font-size:0.85rem; font-weight: 500; line-height:1.4;">${w.message}</div>
-                            </div>`;
-                        });
-                        chatHistory.innerHTML = chatHtml;
-                        chatHistory.scrollTop = chatHistory.scrollHeight;
-                    }
-
-                    // Update Tab Switch Screenshot Toggle UI State
-                    currentTabScreenshotEnabled = (data.enable_tab_switch_screenshot !== undefined) ? Boolean(data.enable_tab_switch_screenshot) : true;
-                    updateScreenshotToggleBtnUI(currentTabScreenshotEnabled);
-
-                    // Render Captured Tab-Switch Screenshots Gallery
-                    const shotContainer = document.getElementById('modal-screenshots-container');
-                    if (shotContainer) {
-                        const shotList = data.tab_switch_screenshots || [];
-                        if (shotList.length > 0) {
-                            let shotHtml = `<div style="font-size: 0.75rem; color: #f59e0b; font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
-                                <span>📸 Tab-Switch Screenshots Captured (${shotList.length})</span>
-                                <span style="font-size: 0.65rem; color: #94a3b8;">Click image to enlarge full size</span>
-                            </div><div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;">`;
-
-                            shotList.forEach((s, idx) => {
-                                let url = typeof s === 'string' ? s : (s.url || s.full_url);
-                                if (url && !url.startsWith('http') && !url.startsWith('/')) {
-                                    url = '/' + url;
-                                }
-                                const timeStr = (s && s.timestamp) ? new Date(s.timestamp).toLocaleTimeString() : '';
-                                shotHtml += `<div style="background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 8px; padding: 8px; text-align: center;">
-                                    <img src="${url}" style="width: 100%; height: 110px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 1px solid rgba(255,255,255,0.1);" onclick="window.open('${url}', '_blank')" title="Click to view full image" />
-                                    <div style="font-size: 0.65rem; color: #94a3b8; margin-top: 4px;">📅 ${timeStr}</div>
-                                    <a href="${url}" target="_blank" download class="btn-nav" style="background: #f59e0b; color: white; border: none; font-size: 0.65rem; font-weight: 700; padding: 3px 8px; text-decoration: none; border-radius: 4px; display: inline-block; margin-top: 4px;">
-                                        📥 View / Download
-                                    </a>
-                                </div>`;
-                            });
-                            shotHtml += `</div>`;
-                            shotContainer.innerHTML = shotHtml;
-                        } else {
-                            shotContainer.innerHTML = '<div style="color: #94a3b8; font-size: 0.8rem; text-align: center; padding-top: 40px;">No tab-switch screenshots captured for this candidate yet.</div>';
-                        }
-                    }
-
-                    // React to Global Call Status & Control Recording Button Availability
-                    const callStatusBadge = document.getElementById('interviewer-call-status');
-                    const recStartBtn = document.getElementById('btn-start-recording');
-                    const recStopBtn = document.getElementById('btn-stop-recording');
-
-                    if (callStatusBadge && data.call_status) {
-                        if (data.call_status === 'active') {
-                            if (!interviewerLocalStream) {
-                                callStatusBadge.innerText = 'CALL ACTIVE';
-                                callStatusBadge.style.background = 'rgba(16,185,129,0.2)';
-                                callStatusBadge.style.color = '#34d399';
-                                document.getElementById('btn-start-call').innerText = '📞 Join Call';
-                                document.getElementById('btn-start-call').style.background = '#6366f1';
-                                document.getElementById('btn-start-call').style.display = 'inline-block';
-                                document.getElementById('btn-leave-call').style.display = 'none';
-                                document.getElementById('btn-end-all-call').style.display = 'none';
-                            } else {
-                                callStatusBadge.innerText = 'CONNECTED (LIVE)';
-                                callStatusBadge.style.background = 'rgba(16,185,129,0.3)';
-                                callStatusBadge.style.color = '#34d399';
-                                document.getElementById('btn-start-call').style.display = 'none';
-                                document.getElementById('btn-leave-call').style.display = 'inline-block';
-                                document.getElementById('btn-end-all-call').style.display = 'inline-block';
-                            }
-                            // Recording button ONLY available when call has started
-                            if (recStartBtn && (!adminMediaRecorder || adminMediaRecorder.state === 'inactive')) {
-                                recStartBtn.style.display = 'inline-flex';
-                            }
-                        } else if (data.call_status === 'ended' || data.call_status === 'idle') {
-                            if (interviewerLocalStream && data.call_status === 'ended') leaveInterviewerCall();
-                            callStatusBadge.innerText = (data.call_status === 'ended') ? 'CALL ENDED' : 'DISCONNECTED';
-                            callStatusBadge.style.background = (data.call_status === 'ended') ? 'rgba(239,68,68,0.2)' : 'rgba(99,102,241,0.2)';
-                            callStatusBadge.style.color = (data.call_status === 'ended') ? '#fca5a5' : '#818cf8';
-                            document.getElementById('btn-start-call').innerText = (data.call_status === 'ended') ? '📞 Restart Call' : '📞 Start / Join Call';
-                            document.getElementById('btn-start-call').style.background = '#10b981';
-                            document.getElementById('btn-start-call').style.display = 'inline-block';
-                            document.getElementById('btn-leave-call').style.display = 'none';
-                            document.getElementById('btn-end-all-call').style.display = 'none';
-
-                            // Recording button HIDDEN when call is not active
-                            if (recStartBtn) recStartBtn.style.display = 'none';
-                            if (recStopBtn) recStopBtn.style.display = 'none';
-                        }
-                    }
-
-                    let logsHtml = '';
-                    let currentViolations = [];
-
-                    if (data.proctor_logs && data.proctor_logs.length > 0) {
-                        data.proctor_logs.forEach(l => {
-                            let icon = '🔴';
-                            if (l.type === 'focus_lost') icon = '🟡';
-                            if (l.type === 'gaze_anomaly' || l.type === 'gaze_fixed_staring') icon = '👁️';
-                            if (l.type === 'gaze_lower_device' || l.type === 'reading_external_device') icon = '📱';
-                            if (l.type === 'question_repeat_lower' || l.type === 'question_repetition') icon = '🗣️';
-                            if (l.type === 'talking_on_phone') icon = '📞';
-                            if (l.type === 'external_ai_detected') icon = '🤖';
-                            if (l.type === 'tab_switch') icon = '📸';
-
-                            if (['paste_event', 'tab_switch', 'focus_lost', 'gaze_anomaly', 'gaze_fixed_staring', 'gaze_lower_device', 'question_repeat_lower', 'question_repetition', 'external_ai_detected', 'talking_secondary_person', 'talking_on_phone', 'reading_external_device'].includes(l.type)) {
-                                currentViolations.push(l);
-                            }
-
-                            let screenshotLink = l.screenshot_url ? `<a href="${l.screenshot_url}" target="_blank" style="color: #38bdf8; text-decoration: underline; margin-left: 6px;">[📸 View Screenshot]</a>` : '';
-                            let aiBadge = '';
-
-                            if (l.ai_verdict) {
-                                const confPct = Math.round((l.ai_verdict.confidence || 0.85) * 100);
-                                const engineName = l.ai_verdict.engine || 'AI Engine';
-                                const toolName = l.ai_verdict.ai_tool_detected ? ` &bull; Detected: <strong style="color:#fde047;">${l.ai_verdict.ai_tool_detected}</strong>` : '';
-
-                                aiBadge = `<div style="margin-top: 4px; padding: 4px 8px; background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.4); border-radius: 6px; font-size: 0.7rem; color: #a5b4fc;">
-                                    🤖 <strong>AI Inspector (${engineName}):</strong> ${confPct}% Cheating Confidence${toolName}
-                                </div>`;
-                            }
-
-                            logsHtml += `<div style="margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.05); padding-bottom:6px;">
-                                <strong>${icon} ${l.type.toUpperCase()}:</strong> ${l.details || ''}${screenshotLink}
-                                ${aiBadge}
-                                <div style="font-size:0.65rem; color:#94a3b8; margin-top:2px;">${new Date(l.timestamp).toLocaleTimeString()}</div>
-                            </div>`;
-                        });
-                    } else {
-                        logsHtml = '<div style="color:#34d399;">✅ Zero proctoring violations recorded.</div>';
-                    }
-                    document.getElementById('modal-logs-display').innerHTML = logsHtml;
-
-                    activeViolations = currentViolations;
-                    const totalViolations = currentViolations.length;
-                    const sosBtn = document.getElementById('sos-alert-btn');
-
-                    if (totalViolations > 0) {
-                        sosBtn.style.display = 'inline-block';
-
-                        // AUTOMATIC SOS TRIGGER & RE-ARMING ON NEW CHEATING EVENTS (IF NOT MUTED BY PANEL)
-                        if (totalViolations > acknowledgedViolationCount && !sosAutoTriggerDisabled) {
-                            sosDismissed = false;
-                            sosBtn.style.animation = 'sosPulse 1.2s infinite alternate';
-                            const hasExternalAi = currentViolations.some(v => v.type === 'external_ai_detected');
-                            const hasTabSwitch = currentViolations.some(v => v.type === 'tab_switch');
-                            const hasPhoneTalk = currentViolations.some(v => v.type === 'talking_on_phone');
-                            if (hasExternalAi) {
-                                sosBtn.innerText = '🚨 candidate might use external ai';
-                                sosBtn.style.background = 'linear-gradient(135deg, #ef4444 0%, #b91c1c 100%)';
-                            } else if (hasPhoneTalk) {
-                                sosBtn.innerText = '📞 Candidate Talking on Phone';
-                                sosBtn.style.background = 'linear-gradient(135deg, #ef4444 0%, #b91c1c 100%)';
-                            } else if (hasTabSwitch) {
-                                sosBtn.innerText = '📸 Candidate Switched Browser Tab';
-                                sosBtn.style.background = 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)';
-                            } else {
-                                sosBtn.innerText = '🚨 Candidate Proctoring Violation Alert';
-                                sosBtn.style.background = 'linear-gradient(135deg, #ef4444 0%, #b91c1c 100%)';
-                            }
-                            openSosModal();
-                        }
-                    } else {
-                        sosBtn.style.display = 'none';
-                    }
-                })
-                .catch(() => {});
-        }
-
-        function openSosModal() {
-            let html = '';
-            if (activeViolations.length > 0) {
-                activeViolations.forEach(v => {
-                    let typeTitle = v.type.toUpperCase();
-                    if (v.type === 'external_ai_detected') {
-                        typeTitle = 'candidate might use external ai';
-                    } else if (v.type === 'tab_switch') {
-                        typeTitle = 'Candidate Switched Browser Tab';
-                    } else if (v.type === 'talking_on_phone') {
-                        typeTitle = 'Candidate Talking on Phone';
-                    } else if (v.type === 'reading_external_device') {
-                        typeTitle = 'Candidate Reading from External Device';
-                    } else if (v.type === 'question_repetition' || v.type === 'question_repeat_lower') {
-                        typeTitle = 'Candidate Reading / Repeating Question Out Loud';
-                    } else if (v.type === 'gaze_anomaly' || v.type === 'gaze_lower_device') {
-                        typeTitle = 'Candidate Lower Eye Gaze Detected';
-                    }
-                    html += `<div style="margin-bottom: 10px; padding: 8px; background: rgba(255,255,255,0.04); border-radius: 6px; border-left: 3px solid ${v.type === 'external_ai_detected' ? '#ef4444' : '#f59e0b'};">
-                        <strong style="color: ${v.type === 'external_ai_detected' ? '#fca5a5' : '#fde047'};">🚨 ${typeTitle}:</strong> ${v.details || 'Suspicious candidate activity detected.'}
-                        <div style="font-size: 0.65rem; color: #94a3b8; margin-top: 3px;">Timestamp: ${new Date(v.timestamp).toLocaleTimeString()}</div>
-                    </div>`;
-                });
-            } else {
-                html = '<div>Potential proctoring alert flagged by engine.</div>';
-            }
-            document.getElementById('sos-violation-list').innerHTML = html;
-            document.getElementById('sos-modal').classList.add('active');
-        }
-
-        function stopSosAlarm() {
-            document.getElementById('sos-modal').classList.remove('active');
-            acknowledgedViolationCount = activeViolations.length;
-            sosDismissed = true;
-
-            const sosBtn = document.getElementById('sos-alert-btn');
-            if (sosBtn) {
-                sosBtn.style.animation = 'none';
-                sosBtn.innerText = '✅ SOS Muted (Auto-rearm active)';
-                sosBtn.style.background = '#475569';
-            }
-        }
-
-        function interviewerLogoutAction() {
-            if (typeof Swal !== 'undefined') {
-                Swal.fire({
-                    title: 'Logout of Portal?',
-                    text: 'Are you sure you want to log out of your session?',
-                    icon: 'question',
-                    showCancelButton: true,
-                    confirmButtonColor: '#ef4444',
-                    cancelButtonColor: '#475569',
-                    confirmButtonText: 'Yes, Logout'
-                }).then((result) => {
-                    if (result.isConfirmed) {
-                        document.getElementById('logout-form').submit();
-                    }
-                });
-            } else {
-                document.getElementById('logout-form').submit();
-            }
-        }
-
-        function regenerateCandidatePassword() {
-            if (!currentInterviewId) return;
-
-            if (typeof Swal !== 'undefined') {
-                Swal.fire({
-                    title: 'Regenerate Candidate Password?',
-                    text: 'This will invalidate the candidate\'s current password and issue a new system password.',
-                    icon: 'warning',
-                    showCancelButton: true,
-                    confirmButtonColor: '#eab308',
-                    cancelButtonColor: '#475569',
-                    confirmButtonText: 'Regenerate Now'
-                }).then((result) => {
-                    if (result.isConfirmed) {
-                        fetch(`{{ route('interview.regenerate-password', ':id') }}`.replace(':id', currentInterviewId), {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                            }
-                        })
-                        .then(r => r.json())
-                        .then(res => {
-                            if (res.success) {
-                                Swal.fire({
-                                    icon: 'success',
-                                    title: 'New Password Generated!',
-                                    text: 'New Candidate Passcode: ' + res.new_password,
-                                    confirmButtonColor: '#6366f1'
-                                }).then(() => location.reload());
-                            }
-                        });
-                    }
-                });
-            }
-        }
-
-        function blockCandidateAction() {
-            if (!currentInterviewId) return;
-
-            if (typeof Swal !== 'undefined') {
-                Swal.fire({
-                    title: '⛔ Block Candidate Email & IP?',
-                    text: 'This will immediately terminate the candidate session and block their email and client IP address.',
-                    icon: 'error',
-                    showCancelButton: true,
-                    confirmButtonColor: '#ef4444',
-                    cancelButtonColor: '#475569',
-                    confirmButtonText: 'Yes, Block Candidate'
-                }).then((result) => {
-                    if (result.isConfirmed) {
-                        fetch(`{{ route('interview.block-candidate', ':id') }}`.replace(':id', currentInterviewId), {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                            }
-                        })
-                        .then(r => r.json())
-                        .then(res => {
-                            if (res.success) {
-                                Swal.fire({
-                                    icon: 'success',
-                                    title: 'Candidate Blocked',
-                                    text: res.message,
-                                    confirmButtonColor: '#6366f1'
-                                }).then(() => {
-                                    closeReviewModal();
-                                    location.reload();
-                                });
-                            }
-                        });
-                    }
-                });
-            }
-        }
-
-        // Metered TURN Server Integration (Managed via window.getMeteredIceServers in app.js / metered.js)
-        let globalIceServers = window.globalIceServers || [
-            { urls: 'stun:stun.l.google.com:19302' }
-        ];
-
-        function initMeteredIceServers() {
-            if (typeof window.getMeteredIceServers === 'function') {
-                return window.getMeteredIceServers().then(servers => {
-                    if (Array.isArray(servers) && servers.length > 0) {
-                        globalIceServers = servers;
-                    }
-                    return globalIceServers;
-                });
-            }
-            return Promise.resolve(globalIceServers);
-        }
-
-        // Initiate TURN credentials pre-fetch immediately
-        initMeteredIceServers();
-
-
-
-        function safePlayMediaStream(videoElem, stream, isSelf = false) {
-            if (!videoElem || !stream) return;
-            if (isSelf) {
-                videoElem.muted = true;
-            }
-            if (videoElem.srcObject !== stream) {
-                videoElem.srcObject = stream;
-            }
-            const playPromise = videoElem.play();
-            if (playPromise !== undefined) {
-                playPromise.catch(err => {
-                    if (err.name === 'AbortError') {
-                        videoElem.onloadedmetadata = () => {
-                            videoElem.play().catch(() => {});
-                        };
-                    } else if (err.name === 'NotAllowedError') {
-                        videoElem.play().catch(() => {});
-                    } else {
-                        console.log('Media play warning:', err);
-                    }
-                });
-            }
-        }
-
-        let panelistMeshTiles = new Map();
-
-        function addOrUpdatePanelistTile(peerId, stream, name = 'Panelist') {
-            if (!peerId || peerId === ('interviewer_' + currentInterviewId + '_' + currentUserId)) return;
-            const grid = document.getElementById('panelist-mesh-grid');
-            if (!grid) return;
-
-            let tile = document.getElementById('panelist-tile-' + peerId);
-            let videoElem;
-
-            if (!tile) {
-                tile = document.createElement('div');
-                tile.id = 'panelist-tile-' + peerId;
-                tile.style.position = 'relative';
-                tile.style.background = '#050811';
-                tile.style.borderRadius = '12px';
-                tile.style.border = '1.5px solid #6366f1';
-                tile.style.overflow = 'hidden';
-                tile.style.height = '220px';
-
-                videoElem = document.createElement('video');
-                videoElem.id = 'panelist-video-' + peerId;
-                videoElem.autoplay = true;
-                videoElem.playsInline = true;
-                videoElem.style.width = '100%';
-                videoElem.style.height = '100%';
-                videoElem.style.objectFit = 'cover';
-
-                const labelDiv = document.createElement('div');
-                labelDiv.style.position = 'absolute';
-                labelDiv.style.bottom = '6px';
-                labelDiv.style.left = '6px';
-                labelDiv.style.background = 'rgba(99,102,241,0.85)';
-                labelDiv.style.padding = '2px 8px';
-                labelDiv.style.borderRadius = '4px';
-                labelDiv.style.fontSize = '0.65rem';
-                labelDiv.style.color = 'white';
-                labelDiv.style.fontWeight = '600';
-                labelDiv.style.zIndex = '10';
-                labelDiv.innerText = '🎙️ ' + name;
-
-                tile.appendChild(videoElem);
-                tile.appendChild(labelDiv);
-                grid.appendChild(tile);
-            } else {
-                videoElem = document.getElementById('panelist-video-' + peerId);
-            }
-
-            if (videoElem && stream) {
-                safePlayMediaStream(videoElem, stream);
-            }
-
-            panelistMeshTiles.set(peerId, stream);
-        }
-
-        function removePanelistTile(peerId) {
-            const tile = document.getElementById('panelist-tile-' + peerId);
-            if (tile) tile.remove();
-            panelistMeshTiles.delete(peerId);
-        }
-
-        async function initInterviewerPeer() {
-            if (!currentInterviewId || typeof Peer === 'undefined') return;
-            await initMeteredIceServers();
-
-            const myPeerId = 'interviewer_' + currentInterviewId + '_' + currentUserId;
-            if (interviewerPeer && !interviewerPeer.destroyed) {
-                try { interviewerPeer.destroy(); } catch(e) {}
-            }
-
-            interviewerPeer = new Peer(myPeerId, {
-                config: {
-                    iceServers: globalIceServers
-                }
-            });
-
-            interviewerPeer.on('open', id => {
-                console.log('Interviewer WebRTC Peer Registered:', id);
-                if (interviewerSigChannel) {
-                    interviewerSigChannel.postMessage({
-                        type: 'peer_joined',
-                        peer_id: id,
-                        user_id: currentUserId,
-                        user_name: '{{ addslashes(Auth::user()->name) }}',
-                        role: 'interviewer'
-                    });
-                }
-            });
-
-            interviewerPeer.on('call', call => {
-                const sendStream = interviewerLocalStream || new MediaStream();
-                try { call.answer(sendStream); } catch(e) {}
-
-                call.on('stream', remoteStream => {
-                    if (call.peer === 'cand_' + currentInterviewId) {
-                        const candVid = document.getElementById('interviewer-cand-video');
-                        const placeholder = document.getElementById('cand-video-placeholder');
-                        if (candVid) safePlayMediaStream(candVid, remoteStream);
-                        if (placeholder) placeholder.style.display = 'none';
-                    } else {
-                        addOrUpdatePanelistTile(call.peer, remoteStream, 'Panelist');
-                    }
-
-                    const badge = document.getElementById('interviewer-call-status');
-                    if (badge) {
-                        badge.innerText = 'CONNECTED (LIVE)';
-                        badge.style.background = 'rgba(16,185,129,0.3)';
-                        badge.style.color = '#34d399';
-                    }
-                });
-            });
-
-            const screenPeerId = 'interviewer_screen_' + currentInterviewId;
-            if (screenReceiverPeer && !screenReceiverPeer.destroyed) {
-                try { screenReceiverPeer.destroy(); } catch(e) {}
-            }
-            screenReceiverPeer = new Peer(screenPeerId, {
-                config: {
-                    iceServers: globalIceServers
-                }
-            });
-            screenReceiverPeer.on('call', call => {
-                call.answer();
-                call.on('stream', screenStream => {
-                    const screenVid = document.getElementById('interviewer-screen-video');
-                    const placeholder = document.getElementById('screen-video-placeholder');
-                    if (screenVid) safePlayMediaStream(screenVid, screenStream);
-                    if (placeholder) placeholder.style.display = 'none';
-                });
-            });
-        }
-
-        let candVidZoomLevel = 1.0;
-        function zoomCandVideo(delta) {
-            if (delta === 0) candVidZoomLevel = 1.0;
-            else candVidZoomLevel = Math.max(0.5, Math.min(3.0, candVidZoomLevel + delta));
-            const vid = document.getElementById('interviewer-cand-video');
-            if (vid) {
-                vid.style.transform = `scale(${candVidZoomLevel})`;
-                vid.style.transformOrigin = 'center center';
-                vid.style.transition = 'transform 0.2s ease';
-            }
-            const badge = document.getElementById('cand-vid-zoom-badge');
-            if (badge) badge.innerText = `(${Math.round(candVidZoomLevel * 100)}%)`;
-        }
-
-        let interviewerPeerConnection = null;
-        interviewerSigChannel = null;
-
-        function initInterviewerSigChannel() {
-            if (!currentInterviewId) return;
-            if (interviewerSigChannel) interviewerSigChannel.close();
-
-            interviewerSigChannel = new BroadcastChannel('webrtc_call_' + currentInterviewId);
-
-            interviewerSigChannel.onmessage = async (event) => {
-                const msg = event.data;
-                if (!msg) return;
-
-                if (msg.type === 'violation_occurred') {
-                    pollReviewData();
-                }
-
-                const myPeerId = 'interviewer_' + currentInterviewId + '_' + currentUserId;
-
-                if (msg.type === 'peer_joined' || msg.type === 'candidate_ready' || msg.type === 'peer_presence_ack' || msg.type === 'interviewer_joined') {
-                    if (msg.peer_id && msg.peer_id !== myPeerId) {
-                        if (msg.type === 'peer_joined') {
-                            interviewerSigChannel.postMessage({
-                                type: 'peer_presence_ack',
-                                peer_id: myPeerId,
-                                user_id: currentUserId,
-                                user_name: '{{ addslashes(Auth::user()->name) }}',
-                                role: 'interviewer'
-                            });
-                        }
-
-                        if (interviewerLocalStream && interviewerPeer && interviewerPeer.open) {
-                            try {
-                                const outCall = interviewerPeer.call(msg.peer_id, interviewerLocalStream);
-                                if (outCall) {
-                                    outCall.on('stream', remoteStream => {
-                                        if (msg.peer_id === 'cand_' + currentInterviewId) {
-                                            const candVid = document.getElementById('interviewer-cand-video');
-                                            const placeholder = document.getElementById('cand-video-placeholder');
-                                            if (candVid) safePlayMediaStream(candVid, remoteStream);
-                                            if (placeholder) placeholder.style.display = 'none';
-                                        } else {
-                                            addOrUpdatePanelistTile(msg.peer_id, remoteStream, msg.user_name || 'Panelist');
-                                        }
-
-                                        const badge = document.getElementById('interviewer-call-status');
-                                        if (badge) {
-                                            badge.innerText = 'CONNECTED (LIVE)';
-                                            badge.style.background = 'rgba(16,185,129,0.3)';
-                                            badge.style.color = '#34d399';
-                                        }
-                                    });
-                                }
-                            } catch(e) {}
-                        }
-                    }
-                } else if (msg.type === 'peer_left') {
-                    if (msg.peer_id === 'cand_' + currentInterviewId) {
-                        const placeholder = document.getElementById('cand-video-placeholder');
-                        if (placeholder) placeholder.style.display = 'flex';
-                    } else if (msg.peer_id) {
-                        removePanelistTile(msg.peer_id);
-                    }
-                } else if (msg.type === 'answer' && msg.sender === 'candidate' && interviewerPeerConnection) {
-                    await interviewerPeerConnection.setRemoteDescription(new RTCSessionDescription(msg.answer));
-                } else if (msg.type === 'ice-candidate' && msg.sender === 'candidate' && interviewerPeerConnection && msg.candidate) {
-                    try {
-                        await interviewerPeerConnection.addIceCandidate(new RTCIceCandidate(msg.candidate));
-                    } catch(e) {}
-                } else if (msg.type === 'end_call_all') {
-                    leaveInterviewerCall(false);
-                }
-            };
-        }
-
-
-        async function createInterviewerPeerConnection() {
-            if (interviewerPeerConnection) return interviewerPeerConnection;
-            await initMeteredIceServers();
-
-            interviewerPeerConnection = new RTCPeerConnection({
-                iceServers: globalIceServers
-            });
-
-            if (interviewerLocalStream) {
-                interviewerLocalStream.getTracks().forEach(track => {
-                    interviewerPeerConnection.addTrack(track, interviewerLocalStream);
-                });
-            }
-
-            interviewerPeerConnection.ontrack = (event) => {
-                const candVid = document.getElementById('interviewer-cand-video');
-                const placeholder = document.getElementById('cand-video-placeholder');
-                if (candVid && event.streams[0]) {
-                    safePlayMediaStream(candVid, event.streams[0]);
-                }
-                if (placeholder) placeholder.style.display = 'none';
-
-                document.getElementById('interviewer-call-status').innerText = 'CONNECTED (LIVE)';
-                document.getElementById('interviewer-call-status').style.background = 'rgba(16,185,129,0.3)';
-                document.getElementById('interviewer-call-status').style.color = '#34d399';
-            };
-
-            interviewerPeerConnection.onconnectionstatechange = async () => {
-                const state = interviewerPeerConnection.connectionState;
-                if (state === 'connected') {
-                    const badge = document.getElementById('interviewer-call-status');
-                    if (badge) {
-                        badge.innerText = 'CONNECTED (LIVE)';
-                        badge.style.background = 'rgba(16,185,129,0.3)';
-                        badge.style.color = '#34d399';
-                    }
-                } else if (state === 'failed' || state === 'disconnected') {
-                    console.warn('Interviewer P2P Connection State:', state);
-                }
-            };
-
-            interviewerPeerConnection.onicecandidate = (event) => {
-                if (event.candidate) {
-                    interviewerSigChannel.postMessage({ type: 'ice-candidate', candidate: event.candidate, sender: 'interviewer' });
-                }
-            };
-
-            return interviewerPeerConnection;
-        }
-
-        async function sendOfferToCandidate() {
-            const pc = await createInterviewerPeerConnection();
-            const offer = await pc.createOffer();
-            await pc.setLocalDescription(offer);
-            interviewerSigChannel.postMessage({ type: 'offer', offer: offer, sender: 'interviewer' });
-        }
-
-        async function handleCandidateOffer(offer) {
-            const pc = await createInterviewerPeerConnection();
-            await pc.setRemoteDescription(new RTCSessionDescription(offer));
-            const answer = await pc.createAnswer();
-            await pc.setLocalDescription(answer);
-            interviewerSigChannel.postMessage({ type: 'answer', answer: answer, sender: 'interviewer' });
-        }
-
-        function startInterviewerCall(isRejoin = false) {
-            if (!currentInterviewId) return;
-
-            if (!isRejoin) {
-                iAmTheCaller = true;
-
-                // Broadcast instant incoming call alert to all open tabs/windows
-                const candName = document.getElementById('modal-cand-name') ? document.getElementById('modal-cand-name').innerText : 'Candidate';
-                globalCallChannel.postMessage({
-                    type: 'incoming_call',
-                    interview_id: currentInterviewId,
-                    candidate_name: candName,
-                    starter_name: '{{ Auth::user()->name }}',
-                    call_started_at: new Date().toISOString()
-                });
-            }
-
-            initInterviewerSigChannel();
-
-            // Notify backend that call session is active
-            fetch(`{{ route('interview.call-status', ':id') }}`.replace(':id', currentInterviewId), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                },
-                body: JSON.stringify({ call_status: 'active', is_rejoin: isRejoin })
-            });
-
-            const handleStream = (stream) => {
-                interviewerLocalStream = stream;
-                const selfVid = document.getElementById('interviewer-self-video');
-                if (selfVid) {
-                    selfVid.muted = true;
-                    safePlayMediaStream(selfVid, stream, true);
-                }
-                document.getElementById('self-video-placeholder').style.display = 'none';
-
-                document.getElementById('btn-toggle-interviewer-mic').style.display = 'inline-block';
-                document.getElementById('btn-toggle-interviewer-cam').style.display = 'inline-block';
-                document.getElementById('btn-start-call').style.display = 'none';
-                document.getElementById('btn-leave-call').style.display = 'inline-block';
-                document.getElementById('btn-end-all-call').style.display = 'inline-block';
-
-                // Broadcast interviewer joined to candidate
-                if (interviewerSigChannel) {
-                    interviewerSigChannel.postMessage({ type: 'interviewer_joined', sender: 'interviewer' });
-                }
-
-                // PeerJS connection
-                if (!interviewerPeer || interviewerPeer.destroyed) {
-                    initInterviewerPeer();
-                }
-
-                const makePeerJSCall = () => {
-                    if (!interviewerPeer || interviewerPeer.destroyed) return;
-                    const candPeerId = 'cand_' + currentInterviewId;
-                    activeCall = interviewerPeer.call(candPeerId, stream);
-
-                    if (activeCall) {
-                        activeCall.on('stream', candRemoteStream => {
-                            const candVid = document.getElementById('interviewer-cand-video');
-                            const placeholder = document.getElementById('cand-video-placeholder');
-                            if (candVid) {
-                                safePlayMediaStream(candVid, candRemoteStream);
-                            }
-                            if (placeholder) placeholder.style.display = 'none';
-
-                            candRemoteStream.onaddtrack = () => {
-                                if (placeholder) placeholder.style.display = 'none';
-                                if (candVid) safePlayMediaStream(candVid, candRemoteStream);
-                            };
-
-                            document.getElementById('interviewer-call-status').innerText = 'CONNECTED (LIVE)';
-                            document.getElementById('interviewer-call-status').style.background = 'rgba(16,185,129,0.3)';
-                            document.getElementById('interviewer-call-status').style.color = '#34d399';
-                        });
-                    }
-                };
-
-                if (interviewerPeer && interviewerPeer.open) {
-                    makePeerJSCall();
-                } else if (interviewerPeer) {
-                    interviewerPeer.on('open', makePeerJSCall);
-                }
-            };
-
-            const audioConstraints = {
-                echoCancellation: true,
-                noiseSuppression: true,
-                autoGainControl: true
-            };
-
-            navigator.mediaDevices.getUserMedia({ video: true, audio: audioConstraints })
-                .then(handleStream)
-                .catch(() => {
-                    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
-                        .then(handleStream)
-                        .catch(() => {
-                            navigator.mediaDevices.getUserMedia({ video: false, audio: true })
-                                .then(handleStream)
-                                .catch(() => {
-                                    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
-                                        .then(handleStream)
-                                        .catch(err => console.log('WebRTC Stream init:', err));
-                                });
-                        });
-                });
-        }
-
-        function leaveInterviewerCall(isExplicitEnd = true) {
-            sendInterviewerPeerHeartbeat('leave');
-            if (currentInterviewId && isExplicitEnd) {
-                const endingId = currentInterviewId;
-                endedCallIds.add(endingId);
-                dismissedCallIds.add(endingId);
-
-                if (typeof globalCallChannel !== 'undefined' && globalCallChannel) {
-                    try {
-                        globalCallChannel.postMessage({
-                            type: 'call_ended',
-                            interview_id: endingId
-                        });
-                    } catch(e) {}
-                }
-
-                if (typeof callSigChannel !== 'undefined' && callSigChannel) {
-                    try {
-                        callSigChannel.postMessage({ type: 'end_call_all', interview_id: endingId });
-                    } catch(e) {}
-                }
-
-                if (typeof interviewerSigChannel !== 'undefined' && interviewerSigChannel) {
-                    try {
-                        interviewerSigChannel.postMessage({ type: 'end_call_all', interview_id: endingId });
-                    } catch(e) {}
-                }
-
-                fetch(`{{ route('interview.call-status', ':id') }}`.replace(':id', endingId), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                    },
-                    body: JSON.stringify({ call_status: 'ended' })
-                }).catch(e => {});
-            }
-
-            if (interviewerLocalStream) {
-                try {
-                    interviewerLocalStream.getTracks().forEach(t => t.stop());
-                } catch(e) {}
-                interviewerLocalStream = null;
-            }
-            if (activeCall) {
-                try { activeCall.close(); } catch(e) {}
-                activeCall = null;
-            }
-            if (interviewerPeer) {
-                try { interviewerPeer.destroy(); } catch(e) {}
-                interviewerPeer = null;
-            }
-            if (screenReceiverPeer) {
-                try { screenReceiverPeer.destroy(); } catch(e) {}
-                screenReceiverPeer = null;
-            }
-
-            const candPlace = document.getElementById('cand-video-placeholder');
-            const screenPlace = document.getElementById('screen-video-placeholder');
-            const selfPlace = document.getElementById('self-video-placeholder');
-            if (candPlace) candPlace.style.display = 'flex';
-            if (screenPlace) screenPlace.style.display = 'flex';
-            if (selfPlace) selfPlace.style.display = 'flex';
-
-            const candVid = document.getElementById('interviewer-cand-video');
-            if (candVid) candVid.srcObject = null;
-
-            const selfVid = document.getElementById('interviewer-self-video');
-            if (selfVid) selfVid.srcObject = null;
-
-            const startBtn = document.getElementById('btn-start-call');
-            if (startBtn) {
-                startBtn.innerText = '📞 Call Candidate';
-                startBtn.style.display = 'inline-block';
-                startBtn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
-                startBtn.onclick = startInterviewerCall;
-            }
-
-            const leaveBtn = document.getElementById('btn-leave-call');
-            if (leaveBtn) leaveBtn.style.display = 'none';
-
-            const endAllBtn = document.getElementById('btn-end-all-call');
-            if (endAllBtn) endAllBtn.style.display = 'none';
-
-            const micBtn = document.getElementById('btn-toggle-interviewer-mic');
-            if (micBtn) micBtn.style.display = 'none';
-
-            const camBtn = document.getElementById('btn-toggle-interviewer-cam');
-            if (camBtn) camBtn.style.display = 'none';
-
-            const statusBadge = document.getElementById('interviewer-call-status');
-            if (statusBadge) {
-                statusBadge.innerText = 'CALL ENDED';
-                statusBadge.style.background = 'rgba(239,68,68,0.2)';
-                statusBadge.style.color = '#fca5a5';
-            }
-        }
-
-        function endCallForAll() {
-            const executeEndCall = () => {
-                if (typeof callRingtone !== 'undefined' && callRingtone) {
-                    try { callRingtone.stop(); } catch(e) {}
-                }
-                const modal = document.getElementById('incoming-call-modal');
-                if (modal) modal.classList.remove('active');
-                activeIncomingCall = null;
-
-                iAmTheCaller = false;
-                leaveInterviewerCall(true);
-            };
-
-            if (typeof Swal !== 'undefined') {
-                Swal.fire({
-                    title: '🛑 End Call for All Participants?',
-                    text: 'This will terminate the 2-way call session for candidate and all panelists.',
-                    icon: 'warning',
-                    showCancelButton: true,
-                    confirmButtonColor: '#ef4444',
-                    cancelButtonColor: '#475569',
-                    confirmButtonText: 'Yes, End Call for All'
-                }).then((result) => {
-                    if (result.isConfirmed) {
-                        executeEndCall();
-                    }
-                });
-            } else {
-                if (confirm('End Call for All Participants?')) {
-                    executeEndCall();
-                }
-            }
-        }
-
-        // --- SILENT CALL RECORDING ENGINE FOR INTERVIEWERS & ADMINS ---
-        let adminMediaRecorder = null;
-        let adminRecordedChunks = [];
-        let recAudioContext = null;
-
-        function startCallRecording() {
-            if (!currentInterviewId) {
-                alert('Please open an active candidate interview session first.');
-                return;
-            }
-
-            const candVid = document.getElementById('interviewer-cand-video');
-            let candidateStream = (candVid && candVid.srcObject) ? candVid.srcObject : null;
-            let streamToRecord = new MediaStream();
-
-            // 1. Add Video Track (Candidate video or Interviewer fallback)
-            if (candidateStream) {
-                candidateStream.getVideoTracks().forEach(track => {
-                    if (track.readyState === 'live') {
-                        try { streamToRecord.addTrack(track); } catch(e) {}
-                    }
-                });
-            }
-
-            if (streamToRecord.getVideoTracks().length === 0 && interviewerLocalStream) {
-                interviewerLocalStream.getVideoTracks().forEach(track => {
-                    if (track.readyState === 'live') {
-                        try { streamToRecord.addTrack(track); } catch(e) {}
-                    }
-                });
-            }
-
-            // 2. Mix Multiple Audio Tracks into a SINGLE Audio Track via Web Audio API
-            // (MediaRecorder standard throws DOMException if streamToRecord has >1 audio track)
-            const candAudioTracks = candidateStream ? candidateStream.getAudioTracks().filter(t => t.readyState === 'live') : [];
-            const adminAudioTracks = interviewerLocalStream ? interviewerLocalStream.getAudioTracks().filter(t => t.readyState === 'live') : [];
-
-            if (candAudioTracks.length > 0 || adminAudioTracks.length > 0) {
-                try {
-                    const AudioContextClass = window.AudioContext || window.webkitAudioContext;
-                    if (recAudioContext) {
-                        try { recAudioContext.close(); } catch(e) {}
-                    }
-                    recAudioContext = new AudioContextClass();
-                    const audioDestination = recAudioContext.createMediaStreamDestination();
-
-                    if (candAudioTracks.length > 0) {
-                        const candAudioStream = new MediaStream(candAudioTracks);
-                        const candSource = recAudioContext.createMediaStreamSource(candAudioStream);
-                        candSource.connect(audioDestination);
-                    }
-
-                    if (adminAudioTracks.length > 0) {
-                        const adminAudioStream = new MediaStream(adminAudioTracks);
-                        const adminSource = recAudioContext.createMediaStreamSource(adminAudioStream);
-                        adminSource.connect(audioDestination);
-                    }
-
-                    const mixedAudioTrack = audioDestination.stream.getAudioTracks()[0];
-                    if (mixedAudioTrack) {
-                        streamToRecord.addTrack(mixedAudioTrack);
-                    }
-                } catch(e) {
-                    console.warn('Web Audio API mixing fallback:', e);
-                    const fallbackAudio = candAudioTracks[0] || adminAudioTracks[0];
-                    if (fallbackAudio) {
-                        try { streamToRecord.addTrack(fallbackAudio); } catch(err) {}
-                    }
-                }
-            }
-
-            const activeTracks = streamToRecord.getTracks().filter(t => t.readyState === 'live');
-            if (activeTracks.length === 0) {
-                alert('No active video/audio stream available to record. Please start or join the call first.');
-                return;
-            }
-
-            adminRecordedChunks = [];
-            try {
-                let options = {};
-                if (typeof MediaRecorder.isTypeSupported === 'function') {
-                    if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8,opus')) {
-                        options = { mimeType: 'video/webm;codecs=vp8,opus' };
-                    } else if (MediaRecorder.isTypeSupported('video/webm')) {
-                        options = { mimeType: 'video/webm' };
-                    }
-                }
-
-                try {
-                    adminMediaRecorder = new MediaRecorder(streamToRecord, options);
-                } catch(errOpt) {
-                    adminMediaRecorder = new MediaRecorder(streamToRecord);
-                }
-
-                adminMediaRecorder.ondataavailable = function(e) {
-                    if (e.data && e.data.size > 0) {
-                        adminRecordedChunks.push(e.data);
-                    }
-                };
-
-                adminMediaRecorder.onstop = function() {
-                    if (recAudioContext) {
-                        try { recAudioContext.close(); } catch(e) {}
-                        recAudioContext = null;
-                    }
-                    if (adminRecordedChunks.length === 0) return;
-                    const recMime = adminMediaRecorder.mimeType || 'video/webm';
-                    const isMp4 = recMime.includes('mp4');
-                    const ext = isMp4 ? 'mp4' : 'webm';
-                    const blobType = isMp4 ? 'video/mp4' : 'video/webm';
-
-                    const blob = new Blob(adminRecordedChunks, { type: blobType });
-                    uploadRecordedBlob(blob, ext);
-                };
-
-                adminMediaRecorder.start(1000);
-
-                document.getElementById('btn-start-recording').style.display = 'none';
-                document.getElementById('btn-stop-recording').style.display = 'inline-flex';
-
-                if (typeof Swal !== 'undefined') {
-                    Swal.fire({
-                        icon: 'info',
-                        title: 'Recording Started',
-                        text: 'Interview call recording is active (silent mode - candidate is not notified).',
-                        toast: true,
-                        position: 'top-end',
-                        timer: 3000,
-                        showConfirmButton: false
-                    });
-                }
-            } catch(e) {
-                console.error('MediaRecorder error:', e);
-                alert('Recording failed to initialize: ' + e.message);
-            }
-        }
-
-        function stopCallRecording() {
-            if (adminMediaRecorder && adminMediaRecorder.state !== 'inactive') {
-                adminMediaRecorder.stop();
-            }
-
-            document.getElementById('btn-start-recording').style.display = 'inline-flex';
-            document.getElementById('btn-stop-recording').style.display = 'none';
-        }
-
-        function uploadRecordedBlob(blob, ext = 'webm') {
-            if (!currentInterviewId) return;
-
-            const formData = new FormData();
-            formData.append('video', blob, `interview_${currentInterviewId}_${Date.now()}.${ext}`);
-            formData.append('_token', '{{ csrf_token() }}');
-
-            fetch(`{{ route('interview.upload-recording', ':id') }}`.replace(':id', currentInterviewId), {
-                method: 'POST',
-                body: formData
-            })
-            .then(r => r.json())
-            .then(res => {
-                if (res.success) {
-                    if (typeof Swal !== 'undefined') {
-                        Swal.fire({
-                            icon: 'success',
-                            title: 'Recording Saved!',
-                            text: 'Call recording saved successfully under Candidate Profile and Report.',
-                            toast: true,
-                            position: 'top-end',
-                            timer: 3500,
-                            showConfirmButton: false
-                        });
-                    }
-                    pollReviewData();
-                }
-            })
-            .catch(err => console.log('Recording upload error:', err));
-        }
-
-        function toggleInterviewerMic() {
-            if (!interviewerLocalStream) return;
-            const audioTracks = interviewerLocalStream.getAudioTracks();
-            if (audioTracks.length > 0) {
-                isInterviewerMicOn = !isInterviewerMicOn;
-                audioTracks[0].enabled = isInterviewerMicOn;
-                const btn = document.getElementById('btn-toggle-interviewer-mic');
-                btn.innerText = isInterviewerMicOn ? '🎤 Mic On' : '🔇 Mic Muted';
-                btn.style.background = isInterviewerMicOn ? 'rgba(255,255,255,0.1)' : 'rgba(239,68,68,0.3)';
-            }
-        }
-
-        function toggleInterviewerCam() {
-            const selfPlaceholder = document.getElementById('self-video-placeholder');
-            const selfVid = document.getElementById('interviewer-self-video');
-
-            isInterviewerCamOn = !isInterviewerCamOn;
-            const btn = document.getElementById('btn-toggle-interviewer-cam');
-            btn.innerText = isInterviewerCamOn ? '📷 Cam On' : '🚫 Cam Off';
-            btn.style.background = isInterviewerCamOn ? 'rgba(255,255,255,0.1)' : 'rgba(239,68,68,0.3)';
-
-            if (interviewerLocalStream) {
-                const videoTracks = interviewerLocalStream.getVideoTracks();
-                if (videoTracks.length > 0) {
-                    videoTracks[0].enabled = isInterviewerCamOn;
-                }
-            } else if (isInterviewerCamOn) {
-                navigator.mediaDevices.getUserMedia({ video: true, audio: false })
-                    .then(stream => {
-                        interviewerLocalStream = stream;
-                        if (selfVid) {
-                            selfVid.srcObject = stream;
-                            selfVid.play().catch(e => console.log(e));
-                        }
-                        if (selfPlaceholder) selfPlaceholder.style.display = 'none';
-                    })
-                    .catch(err => console.log('Interviewer cam preview:', err));
-                return;
-            }
-
-            if (selfPlaceholder) selfPlaceholder.style.display = isInterviewerCamOn ? 'none' : 'flex';
-        }
-
-        function endInterviewerCall() {
-            leaveInterviewerCall(true);
-        }
-
-        function closeReviewModal() {
-            clearInterval(sosPollInterval);
-            if (liveSyncChannel) {
-                try { liveSyncChannel.close(); } catch(e) {}
-                liveSyncChannel = null;
-            }
-            leaveInterviewerCall(true);
-            const modal = document.getElementById('review-modal');
-            if (modal) modal.classList.remove('active');
-        }
-
-        function sendSilentWarning() {
-            const input = document.getElementById('warning-input');
-            const msg = input.value.trim();
-            if (!msg || !currentInterviewId) return;
-
-            input.value = '';
-            if (typeof liveSyncChannel !== 'undefined' && liveSyncChannel) {
-                liveSyncChannel.postMessage({ type: 'chat_message', message: msg, sender: 'interviewer' });
-            }
-
-            fetch(`{{ route('interview.warning', ':id') }}`.replace(':id', currentInterviewId), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                },
-                body: JSON.stringify({ message: msg })
-            })
-            .then(r => r.json())
-            .then(res => {
-                pollReviewData();
-            });
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const urlParams = new URLSearchParams(window.location.search);
-            const openId = urlParams.get('open_interview');
-            const autoJoin = urlParams.get('join_call') === '1';
-
-            if (openId) {
-                fetch(`{{ route('interview.poll', ':id') }}`.replace(':id', openId), {
-                    headers: { 'Accept': 'application/json' }
-                })
-                .then(r => r.json())
-                .then(data => {
-                    if (data && data.status) {
-                        openReviewModal(parseInt(openId), data.candidate_name || 'Candidate', data.submission_unique_id || openId, autoJoin);
-                    }
-                });
-            }
-        });
+        window.currentUserId = {{ Auth::id() }};
+        window.currentUserName = "{{ addslashes(Auth::user()->name) }}";
+        window.currentUserRole = "{{ Auth::user()->is_admin ? 'admin' : 'interviewer' }}";
+        window.csrfToken = "{{ csrf_token() }}";
     </script>
 </body>
 </html>
diff --git a/resources/views/interview/show.blade.php b/resources/views/interview/show.blade.php
new file mode 100644
index 0000000..b0b99fc
--- /dev/null
+++ b/resources/views/interview/show.blade.php
@@ -0,0 +1,423 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <title>{{ $interview->candidate_name }} - Assessment Review | SingleLogin</title>
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+    <script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
+    <script src="//cdn.metered.ca/sdk/video/1.4.6/sdk.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+    <style>
+        :root {
+            --bg: #0a0e17;
+            --panel: #121826;
+            --panel-2: #0d1220;
+            --border: #232b3d;
+            --border-soft: #1b2233;
+            --text: #e8ebf3;
+            --text-dim: #9199ad;
+            --text-faint: #5b637a;
+            --accent: #4b82f7;
+            --accent-soft: rgba(75,130,247,0.12);
+            --accent-border: rgba(75,130,247,0.35);
+            --success: #21c274;
+            --danger: #ef4a5f;
+            --danger-soft: rgba(239,74,95,0.1);
+            --warning: #f0a939;
+            --warning-soft: rgba(240,169,57,0.12);
+            --radius: 12px;
+            --mono: 'JetBrains Mono', monospace;
+            --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        }
+
+        body {
+            background: radial-gradient(1200px 600px at 15% -10%, rgba(75,130,247,0.06), transparent 60%), var(--bg);
+            color: var(--text);
+            font-family: var(--sans);
+        }
+
+        /* Toggle switch */
+        .toggle {
+            width: 32px; height: 18px; border-radius: 20px; background: var(--panel-2);
+            border: 1px solid var(--border); position: relative; cursor: pointer; flex-shrink: 0;
+            display: inline-block;
+        }
+        .toggle::after {
+            content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
+            border-radius: 50%; background: var(--text-faint); transition: left .15s ease;
+        }
+        .toggle.on { background: var(--accent-soft); border-color: var(--accent-border); }
+        .toggle.on::after { left: 16px; background: var(--accent); }
+
+        /* Accordion disclosure */
+        details.meta summary {
+            list-style: none; cursor: pointer; user-select: none;
+        }
+        details.meta summary::-webkit-details-marker { display: none; }
+        details.meta summary i.chev { transition: transform .15s ease; }
+        details.meta[open] summary i.chev { transform: rotate(180deg); }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col antialiased">
+
+    <div class="max-w-[1320px] w-full mx-auto px-7 py-5 pb-16 flex-1">
+
+        <!-- Top bar -->
+        <div class="flex items-center justify-between pb-4 mb-4 border-b border-[#1b2233]">
+            <div class="flex items-center gap-3">
+                <a href="{{ route('interview.index') }}" class="w-9 h-9 rounded-xl bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-sm text-white shadow-[0_4px_14px_rgba(75,130,247,0.35)] no-underline">
+                    <i class="fa-solid fa-bolt"></i>
+                </a>
+                <div>
+                    <h1 class="text-base font-semibold text-white m-0 tracking-tight">Candidate Assessment Review</h1>
+                    <p class="text-xs text-[#5b637a] m-0 mt-0.5">Live proctored session &amp; review room</p>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-1.5">
+                <a href="{{ route('interview.index') }}">
+                    <x-button variant="ghost" icon="fa-solid fa-arrow-left">Back to assessments</x-button>
+                </a>
+                @if(Auth::user()->isAdmin())
+                    <a href="{{ route('admin.dashboard') }}">
+                        <x-button variant="ghost" icon="fa-solid fa-sliders">Control panel</x-button>
+                    </a>
+                @endif
+                <form action="{{ route('logout') }}" method="POST" id="logout-form" class="inline">
+                    @csrf
+                    <x-button type="button" onclick="interviewerLogoutAction()" variant="ghost" icon="fa-solid fa-arrow-right-from-bracket">Logout</x-button>
+                </form>
+            </div>
+        </div>
+
+        @if(session('success'))
+            <div class="mb-4 bg-[#21c274]/15 border border-[#21c274]/35 text-[#21c274] px-4 py-2.5 rounded-lg text-xs font-medium">
+                {{ session('success') }}
+            </div>
+        @endif
+
+        <!-- Session Panel -->
+        <div class="bg-[#121826] border border-[#1b2233] rounded-[12px] mb-4 overflow-hidden">
+            <div class="flex items-center justify-between p-5 gap-4 flex-wrap">
+                <div class="flex items-center gap-3.5">
+                    @php
+                        $parts = preg_split('/\s+/', trim($interview->candidate_name));
+                        $candInitials = count($parts) >= 2 ? strtoupper(substr($parts[0],0,1).substr(end($parts),0,1)) : strtoupper(substr($interview->candidate_name,0,2));
+                    @endphp
+                    <div class="w-[42px] h-[42px] rounded-full bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-white font-semibold text-[15px] shrink-0">
+                        {{ $candInitials }}
+                    </div>
+                    <div>
+                        <h2 id="modal-cand-name" class="text-[15px] font-semibold text-white m-0 mb-0.5">{{ $interview->candidate_name }}</h2>
+                        <div class="text-xs text-[#5b637a] font-mono">{{ $interview->candidate_email }} &middot; {{ $interview->candidate_phone }}</div>
+                    </div>
+                </div>
+
+                <div class="flex items-center gap-1.5 flex-wrap">
+                    @if($interview->isExpired())
+                        <x-pill id="timeline-status-pill" variant="red" icon="fa-solid fa-circle">Expired</x-pill>
+                    @elseif($interview->status === 'completed')
+                        <x-pill id="timeline-status-pill" variant="success" icon="fa-solid fa-circle">Completed</x-pill>
+                    @elseif($interview->call_status === 'active')
+                        <x-pill id="timeline-status-pill" variant="blue" class="live" icon="fa-solid fa-circle">Call in progress</x-pill>
+                    @elseif($interview->isActiveTimeline())
+                        <x-pill id="timeline-status-pill" variant="blue" class="live" icon="fa-solid fa-circle">Timeline live</x-pill>
+                    @else
+                        <x-pill id="timeline-status-pill" variant="secondary" icon="fa-solid fa-clock">Scheduled</x-pill>
+                    @endif
+
+                    <div class="w-px h-[18px] bg-[#232b3d] mx-1"></div>
+
+                    <div class="flex items-center gap-2 text-xs text-[#9199ad] cursor-pointer" onclick="toggleSosAutoTrigger()">
+                        <span class="toggle on" id="sosToggle"></span> SOS auto-trigger
+                    </div>
+
+                    <div class="w-px h-[18px] bg-[#232b3d] mx-1"></div>
+
+                    <x-button onclick="regenerateCandidatePassword()" variant="secondary" icon="fa-solid fa-key">Password</x-button>
+                    <x-button onclick="openReportPage()" variant="secondary" icon="fa-solid fa-file-pdf">PDF report</x-button>
+                    <x-button onclick="blockCandidateAction()" variant="secondary" icon="fa-solid fa-ban">Block</x-button>
+                </div>
+            </div>
+
+            <!-- Submission Details Disclosure Accordion -->
+            <details class="meta border-t border-[#1b2233]">
+                <summary class="flex items-center gap-2 px-5 py-2.5 text-xs text-[#5b637a] font-medium hover:text-[#9199ad] transition-colors">
+                    <i class="fa-solid fa-chevron-down chev text-[10px]"></i> Show submission details
+                </summary>
+                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2.5 px-5 pb-4">
+                    <div class="bg-[#0d1220] border border-[#1b2233] rounded-lg p-2.5">
+                        <div class="text-[10.5px] text-[#5b637a] uppercase tracking-wider mb-1">Submission ID</div>
+                        <div id="modal-cand-uid" class="text-xs font-mono text-[#9199ad] break-all">{{ $interview->submission_unique_id }}</div>
+                    </div>
+                    <div class="bg-[#0d1220] border border-[#1b2233] rounded-lg p-2.5">
+                        <div class="text-[10.5px] text-[#5b637a] uppercase tracking-wider mb-1">Temp Pass</div>
+                        <div class="text-xs font-mono text-[#9199ad]">{{ $interview->temp_password }}</div>
+                    </div>
+                    <div class="bg-[#0d1220] border border-[#1b2233] rounded-lg p-2.5">
+                        <div class="text-[10.5px] text-[#5b637a] uppercase tracking-wider mb-1">Language</div>
+                        <div class="text-xs font-mono text-[#9199ad] uppercase">{{ $interview->language }}</div>
+                    </div>
+                    <div class="bg-[#0d1220] border border-[#1b2233] rounded-lg p-2.5">
+                        <div class="text-[10.5px] text-[#5b637a] uppercase tracking-wider mb-1">Timeline</div>
+                        <div class="text-xs font-mono text-[#9199ad]">{{ ($interview->scheduled_at ?? $interview->created_at)->format('M d, H:i') }} &ndash; {{ $interview->expires_at->format('H:i') }}</div>
+                    </div>
+                </div>
+            </details>
+        </div>
+
+        <!-- Call Panel -->
+        <x-card>
+            <x-slot:headerExtra>
+                <div class="flex items-center gap-2">
+                    <!-- 1. Mic Toggle (Icon Only) -->
+                    <x-button id="btn-toggle-interviewer-mic" onclick="toggleInterviewerMic()" variant="ghost" icon="fa-solid fa-microphone" style="display: none;" title="Mic On / Mute"></x-button>
+
+                    <!-- 2. Cam Toggle (Icon Only) -->
+                    <x-button id="btn-toggle-interviewer-cam" onclick="toggleInterviewerCam()" variant="ghost" icon="fa-solid fa-video" style="display: none;" title="Cam On / Off"></x-button>
+
+                    <!-- 3. Start / Join / Restart Call -->
+                    <x-button id="btn-start-call" onclick="startInterviewerCall()" variant="primary" icon="fa-solid fa-phone">
+                        Start / Join Call
+                    </x-button>
+
+                    <!-- 4. Record Call (Silent) -->
+                    <x-button id="btn-start-recording" onclick="startCallRecording()" variant="secondary" icon="fa-solid fa-circle-dot">
+                        Record Call (Silent)
+                    </x-button>
+                    <x-button id="btn-stop-recording" onclick="stopCallRecording()" variant="danger" icon="fa-solid fa-square" style="display: none;" class="animate-pulse" title="Stop &amp; Save Recording"></x-button>
+
+                    <!-- 5. Leave Call -->
+                    <x-button id="btn-leave-call" onclick="leaveInterviewerCall()" variant="secondary" icon="fa-solid fa-arrow-right-from-bracket" style="display: none;">
+                        Leave Call
+                    </x-button>
+
+                    <!-- 6. End Call for All (Icon Only, Far Right) -->
+                    <x-button id="btn-end-all-call" onclick="endCallForAll()" variant="danger" icon="fa-solid fa-phone-slash" style="display: none;" title="End Call for All"></x-button>
+                </div>
+            </x-slot:headerExtra>
+
+            <!-- Video Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-3.5 p-5">
+                <!-- Candidate Video -->
+                <x-video-tile
+                    id="cand-video-wrapper"
+                    videoId="interviewer-cand-video"
+                    placeholderId="cand-video-placeholder"
+                    badgeText="Candidate video"
+                    badgeId="cand-vid-zoom-badge"
+                    showZoom="true"
+                    zoomInFn="zoomCandVideo(0.25)"
+                    zoomOutFn="zoomCandVideo(-0.25)"
+                    zoomResetFn="zoomCandVideo(0)"
+                    avatarCircleId="modal-cand-avatar-circle"
+                    avatarNameId="cand-avatar-name"
+                    avatarTitle="{{ $interview->candidate_name }}"
+                    initials="{{ $candInitials }}">
+                    Waiting for candidate&hellip;
+                </x-video-tile>
+
+                <!-- Candidate Shared Screen -->
+                <x-video-tile
+                    id="screen-wrapper"
+                    videoId="interviewer-screen-video"
+                    placeholderId="screen-video-placeholder"
+                    badgeText="Shared screen"
+                    badgeId="zoom-level-badge"
+                    focused="true"
+                    showZoom="true"
+                    showFullscreen="true"
+                    zoomInFn="zoomScreen(0.25)"
+                    zoomOutFn="zoomScreen(-0.25)"
+                    zoomResetFn="resetZoomScreen()"
+                    fullscreenFn="toggleFullscreenScreen()"
+                    containerId="screen-zoom-container"
+                    avatarTitle="Candidate live screen"
+                    initials="CD">
+                    Waiting for candidate to share screen&hellip;
+                </x-video-tile>
+
+                <!-- Panelist Self -->
+                @php
+                    $usrWords = preg_split('/\s+/', trim(Auth::user()->name));
+                    $usrInitials = count($usrWords) >= 2 ? strtoupper(substr($usrWords[0],0,1).substr(end($usrWords),0,1)) : strtoupper(substr(trim(Auth::user()->name),0,2));
+                @endphp
+                <x-video-tile
+                    id="self-video-wrapper"
+                    videoId="interviewer-self-video"
+                    placeholderId="self-video-placeholder"
+                    badgeText="Panelist self"
+                    avatarTitle="{{ Auth::user()->name }}"
+                    initials="{{ $usrInitials }}">
+                    Panelist (self)
+                </x-video-tile>
+            </div>
+
+            <!-- Multi-Party Panelist Video Grid -->
+            <div id="panelist-mesh-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3.5 px-5 pb-5"></div>
+        </x-card>
+
+        <!-- Inspector Panel -->
+        <x-card>
+            <div class="inline-flex gap-1 p-1 bg-[#0d1220] border border-[#1b2233] rounded-[10px] mx-5 mt-4">
+                <x-tab-button id="tab-btn-code" tabKey="code" active="true" icon="fa-solid fa-code" onclick="switchIdeTab('code')">Live IDE code</x-tab-button>
+                <x-tab-button id="tab-btn-notes" tabKey="notes" active="false" icon="fa-solid fa-note-sticky" onclick="switchIdeTab('notes')">Candidate notepad</x-tab-button>
+                <x-tab-button id="tab-btn-drawing" tabKey="drawing" active="false" icon="fa-solid fa-pen" onclick="switchIdeTab('drawing')">Candidate drawing</x-tab-button>
+                <x-tab-button id="tab-btn-recordings" tabKey="recordings" active="false" icon="fa-solid fa-film" onclick="switchIdeTab('recordings')">Saved recordings</x-tab-button>
+                <x-tab-button id="tab-btn-screenshots" tabKey="screenshots" active="false" icon="fa-solid fa-image" onclick="switchIdeTab('screenshots')">Tab switch screenshots</x-tab-button>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-5 gap-4 p-5">
+                <!-- Left 3 Cols: Tab Content -->
+                <div class="lg:col-span-3">
+                    <!-- Tab 1: Live IDE Code -->
+                    <div id="tab-content-code" class="block">
+                        <div class="text-[11.5px] text-[#5b637a] mb-2 font-medium">Current code solution &mdash; visible even if candidate does not share screen</div>
+                        <pre id="modal-code-display" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3.5 font-mono text-[13px] text-[#6ee7c9] min-h-[220px] max-h-[300px] overflow-y-auto whitespace-pre-wrap"></pre>
+
+                        <div class="text-[11.5px] text-[#5b637a] mt-4 mb-2 font-medium">Execution stdout / stderr</div>
+                        <pre id="modal-output-display" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3 font-mono text-xs text-[#5b637a] max-h-[100px] overflow-y-auto whitespace-pre-wrap"></pre>
+                    </div>
+
+                    <!-- Tab 2: Candidate Notepad -->
+                    <div id="tab-content-notes" class="hidden">
+                        <div class="text-[11.5px] text-[#5b637a] mb-2 font-medium">Candidate live notepad notes (auto-synced)</div>
+                        <pre id="modal-notes-display" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3.5 font-mono text-xs text-slate-200 min-h-[250px] max-h-[350px] overflow-y-auto whitespace-pre-wrap"></pre>
+                    </div>
+
+                    <!-- Tab 3: Candidate Canvas Drawing -->
+                    <div id="tab-content-drawing" class="hidden">
+                        <div class="text-[11.5px] text-[#5b637a] mb-2 font-medium">Candidate live drawing / architecture diagram</div>
+                        <div class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3 flex justify-center items-center min-h-[250px]">
+                            <img id="modal-drawing-img" src="" alt="Candidate Drawing Board" class="max-w-full max-h-[320px] hidden rounded-lg border border-dashed border-[#232b3d]" />
+                            <div id="no-drawing-placeholder" class="text-[#5b637a] text-xs">No drawing data submitted by candidate yet.</div>
+                        </div>
+                    </div>
+
+                    <!-- Tab 4: Saved Video Recordings -->
+                    <div id="tab-content-recordings" class="hidden">
+                        <div class="text-[11.5px] text-[#5b637a] mb-2 font-medium">Saved candidate video sessions (sorted by newest first)</div>
+                        <div id="modal-recordings-container" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3 min-h-[250px] max-h-[420px] overflow-y-auto">
+                            <div class="text-[#5b637a] text-xs text-center pt-10">No video recordings saved for this candidate yet.</div>
+                        </div>
+                    </div>
+
+                    <!-- Tab 5: Tab-Switch Screenshots -->
+                    <div id="tab-content-screenshots" class="hidden">
+                        <div class="text-[11.5px] text-[#5b637a] mb-2 font-medium flex justify-between items-center">
+                            <span>Candidate tab-switch captured screenshots</span>
+                            <div class="flex items-center gap-2">
+                                <span class="text-xs text-[#9199ad]">Admin Screenshot Capture:</span>
+                                <x-button id="modal-toggle-screenshot-btn" onclick="toggleTabScreenshotCapture()" variant="success" size="sm" icon="fa-solid fa-camera">
+                                    ENABLED
+                                </x-button>
+                            </div>
+                        </div>
+                        <div id="modal-screenshots-container" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3 min-h-[250px] max-h-[420px] overflow-y-auto">
+                            <div class="text-[#5b637a] text-xs text-center pt-10">No tab-switch screenshots captured for this candidate yet.</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Right 2 Cols: Audit Log & Chat -->
+                <div class="lg:col-span-2">
+                    <h3 class="text-[12.5px] font-semibold text-white mb-2.5 flex items-center gap-2 m-0">
+                        Proctoring logs
+                    </h3>
+
+                    <x-audit-log id="modal-logs-display" :logs="$interview->proctor_logs ?? []" />
+
+                    <div class="mt-4">
+                        <h3 class="text-[12.5px] font-semibold text-white mb-2.5 flex items-center gap-2 m-0">
+                            Live Chat
+                        </h3>
+                        <x-chat-panel id="interviewer-chat-history" class="mb-2.5" :warnings="$interview->warnings ?? []" :candidateName="$interview->candidate_name" />
+                        <div class="flex gap-2">
+                            <input type="text" id="warning-input" placeholder="Type message to candidate&hellip;" onkeydown="if(event.key==='Enter') sendSilentWarning()" class="flex-1 bg-[#0d1220] border border-[#232b3d] rounded-lg px-3 py-2 text-white text-xs outline-none focus:border-[rgba(75,130,247,0.35)] placeholder-[#5b637a]">
+                            <x-button onclick="sendSilentWarning()" variant="primary" icon="fa-solid fa-paper-plane">Send</x-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </x-card>
+
+    </div>
+
+    <!-- SOS CHEATING ALERT MODAL -->
+    <x-modal id="sos-modal" title="candidate might cheating" maxWidth="lg" onClose="stopSosAlarm">
+        <div id="sos-violation-list" class="bg-[rgba(239,74,95,0.1)] border border-[rgba(239,74,95,0.32)] rounded-lg p-3.5 text-xs text-[#ef4a5f] mb-4 max-h-[180px] overflow-y-auto">
+            Violation details loading...
+        </div>
+        <div class="flex justify-end gap-2">
+            <x-button onclick="stopSosAlarm()" variant="secondary" size="md" icon="fa-solid fa-xmark">
+                Close
+            </x-button>
+            <x-button onclick="stopSosAlarm()" variant="danger" size="md" icon="fa-solid fa-bell-slash">
+                Acknowledge &amp; Stop SOS Alarm
+            </x-button>
+        </div>
+    </x-modal>
+
+    <!-- INCOMING CALL RING MODAL -->
+    <x-modal id="incoming-call-modal" maxWidth="md">
+        <div class="text-center p-2">
+            <div class="relative w-[90px] h-[90px] mx-auto mb-5 flex items-center justify-center">
+                <div class="absolute -inset-4 rounded-full border-2 border-[#21c274]/60 animate-ping"></div>
+                <div class="w-20 h-20 rounded-full bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-3xl font-extrabold text-white shadow-xl shadow-[#4b82f7]/50 z-10">
+                    <i class="fa-solid fa-phone"></i>
+                </div>
+            </div>
+
+            <div class="text-xs uppercase tracking-wider text-[#21c274] font-extrabold mb-1">
+                ⚡ INCOMING INTERVIEW CALL
+            </div>
+
+            <h3 id="incoming-cand-name" class="font-outfit text-2xl font-extrabold text-white mb-1">
+                {{ $interview->candidate_name }}
+            </h3>
+
+            <div id="incoming-starter-info" class="text-xs text-[#4b82f7] mb-4">
+                Initiated by Panelist
+            </div>
+
+            <div class="bg-white/5 border border-white/10 rounded-xl p-3 text-xs text-slate-300 mb-6 leading-relaxed">
+                Another interviewer has started calling the candidate. Click <strong>Accept Call</strong> to join live, or <strong>Decline</strong> if busy.
+            </div>
+
+            <div class="flex gap-3 justify-center">
+                <x-button id="incoming-decline-btn" onclick="declineIncomingCall()" variant="danger" size="md" icon="fa-solid fa-xmark" class="flex-1">
+                    Decline / Miss
+                </x-button>
+                <x-button id="incoming-accept-btn" onclick="acceptIncomingCall()" variant="success" size="md" icon="fa-solid fa-phone" class="flex-[1.3] font-extrabold animate-pulse">
+                    Accept Call
+                </x-button>
+            </div>
+        </div>
+    </x-modal>
+
+    <!-- Page Initialization Script -->
+    <script>
+        window.currentUserId = {{ Auth::id() }};
+        window.currentUserName = "{{ addslashes(Auth::user()->name) }}";
+        window.currentUserRole = "{{ Auth::user()->is_admin ? 'admin' : 'interviewer' }}";
+        window.csrfToken = "{{ csrf_token() }}";
+
+        document.addEventListener('DOMContentLoaded', function() {
+            openReviewModal(
+                {{ $interview->id }},
+                "{{ addslashes($interview->candidate_name) }}",
+                "{{ $interview->submission_unique_id }}",
+                {{ request('join_call') == '1' ? 'true' : 'false' }}
+            );
+        });
+    </script>
+</body>
+</html>
diff --git a/routes/web.php b/routes/web.php
index 51e26e7..cd4fcd9 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -74,6 +74,7 @@
     // Candidate Assessment Management for HR & Panelists
     Route::get('/interviews', [InterviewController::class, 'index'])->name('interview.index');
     Route::get('/interviews/active-calls', [InterviewController::class, 'getActiveCalls'])->name('interview.active-calls');
+    Route::get('/interviews/{id}', [InterviewController::class, 'show'])->name('interview.show');
     Route::post('/interviews', [InterviewController::class, 'store'])->name('interview.store');
     Route::post('/interviews/{id}/warning', [InterviewController::class, 'sendWarning'])->name('interview.warning');
     Route::get('/interviews/{id}/poll', [InterviewController::class, 'getPollData'])->name('interview.poll');