2:/* HOTFIX MODAL BUNDLE — 2026-03-07 | FILE: coproducer.php */
155:.ocModal{z-index:10040;background:rgba(3,6,14,.72);backdrop-filter:blur(10px)}
171:.ocEl{position:absolute;box-sizing:border-box;user-select:none;touch-action:none}.ocEl.selected{outline:2px solid rgba(245,158,11,.95);outline-offset:1px}.ocElText{color:#fff;font-weight:800;letter-spacing:.01em;text-shadow:0 8px 20px rgba(0,0,0,.35)}
188:.cpModal[hidden]{display:none!important}
189:.cpModal{position:fixed;inset:0;z-index:10060;background:rgba(2,6,14,.62);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px}
190:.cpModalCard{width:min(560px,96vw);max-height:88vh;overflow:auto;border-radius:18px;background:linear-gradient(180deg,rgba(19,24,35,.98),rgba(11,14,21,.98));color:#f5f7fb;border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 80px rgba(0,0,0,.48)}
191:.cpModalHead,.cpModalFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
192:.cpModalHead{border-bottom:1px solid rgba(255,255,255,.08)}
193:.cpModalFoot{border-top:1px solid rgba(255,255,255,.08)}
194:.cpModalTitle{font-size:16px;font-weight:800;letter-spacing:.02em}
195:.cpModalBody{padding:16px;display:grid;gap:12px}
196:.cpModal .fxRow{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:center}
197:.cpModal .fxRow label{font-size:13px;opacity:.86}
198:.cpModal .fxRow input[type="number"],.cpModal .fxRow select,.cpModal .fxRow input[type="color"],.cpModal .fxRow input[type="range"]{width:100%}
199:.cpModal .fxRow input[type="checkbox"]{justify-self:start;transform:scale(1.1)}
201:/* Modal core refactor v1 */
202:.appModalRoot,.overlay,.lkModal,.cpModal,#streamModalV3{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(2,6,14,.62);backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s ease;z-index:10050}
203:.appModalRoot.show,.overlay.show,.lkModal.show,.cpModal.show,#streamModalV3.show{opacity:1;visibility:visible;pointer-events:auto}
204:.overlay[aria-hidden="false"],.lkModal[aria-hidden="false"],.cpModal[aria-hidden="false"],#streamModalV3[aria-hidden="false"]{opacity:1;visibility:visible;pointer-events:auto}
205:.overlay[aria-hidden="true"],.lkModal[aria-hidden="true"],.cpModal[aria-hidden="true"],#streamModalV3[aria-hidden="true"]{opacity:0;visibility:hidden;pointer-events:none}
206:.overlay>.sheet,.overlay>.modalSheet,.overlay>.modalCard,.overlay>.ocShell,.overlay>.cpModalCard,.overlay>.streamCard,
207:.lkModal__panel,.cpModalCard,#streamModalV3>.streamCard{transform:translateY(14px) scale(.985);transition:transform .16s ease,opacity .16s ease;opacity:.98}
208:.overlay.show>.sheet,.overlay.show>.modalSheet,.overlay.show>.modalCard,.overlay.show>.ocShell,.overlay.show>.cpModalCard,.overlay.show>.streamCard,
209:.lkModal.show .lkModal__panel,.cpModal.show>.cpModalCard,#streamModalV3.show>.streamCard,
210:.overlay[aria-hidden="false"]>.sheet,.overlay[aria-hidden="false"]>.modalSheet,.overlay[aria-hidden="false"]>.modalCard,.overlay[aria-hidden="false"]>.ocShell,.overlay[aria-hidden="false"]>.cpModalCard,.overlay[aria-hidden="false"]>.streamCard,
211:.lkModal[aria-hidden="false"] .lkModal__panel,.cpModal[aria-hidden="false"]>.cpModalCard,#streamModalV3[aria-hidden="false"]>.streamCard{transform:translateY(0) scale(1);opacity:1}
212:.lkModal{z-index:10070}
213:.lkModal__backdrop{position:absolute;inset:0}
214:.lkModal__panel{position:relative;z-index:1;width:min(780px,96vw);max-height:88vh;overflow:auto;border-radius:18px;background:linear-gradient(180deg,rgba(19,24,35,.98),rgba(11,14,21,.98));color:#f5f7fb;border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 80px rgba(0,0,0,.48)}
215:.lkModal__hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
216:.lkModal__ttl{font-size:16px;font-weight:800;letter-spacing:.02em}
217:.lkModal__x{appearance:none;border:0;border-radius:10px;padding:8px 10px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
218:.lkModal__body{padding:16px}
219:.appModalNoScroll{overflow:hidden}
231:<link rel="stylesheet" href="assets/css/modules/feature-modal-core.css">
274:    document.querySelectorAll('.overlay,.lkModal,.cpModal,#streamModalV3').forEach(prep);
289:      const open = Array.from(document.querySelectorAll('.overlay.show,.lkModal.show,.cpModal.show,#streamModalV3.show,[aria-hidden="false"].overlay,[aria-hidden="false"].lkModal,[aria-hidden="false"].cpModal,[aria-hidden="false"]#streamModalV3'));
291:      if (top && typeof window.__modalHide === 'function') window.__modalHide(top);
298:<script id="cp-overlay-composer-hard-modal-patch">
303:  var MODAL_ID = 'cpOverlayHardModal';
304:  var MOUNT_ID = 'cpOverlayHardModalMount';
305:  var TITLE_ID = 'cpOverlayHardModalTitle';
308:    if (q('cpOverlayHardModalStyle')) return;
310:    css.id = 'cpOverlayHardModalStyle';
312:      '#' + MODAL_ID + '{position:fixed;inset:0;z-index:999999;display:none;}',
313:      '#' + MODAL_ID + '.show{display:block;}',
314:      '#' + MODAL_ID + ' .cp-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);}',
315:      '#' + MODAL_ID + ' .cp-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1600px,calc(100vw - 28px));height:min(900px,calc(100vh - 28px));display:grid;grid-template-rows:54px minmax(0,1fr);border:1px solid rgba(255,255,255,.14);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#132033,#08111b);box-shadow:0 24px 70px rgba(0,0,0,.55);}',
316:      '#' + MODAL_ID + ' .cp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.015)),linear-gradient(180deg,#1b2738,#101824);}',
317:      '#' + MODAL_ID + ' .cp-head h3{margin:0;font:700 13px/1.1 Arial,Helvetica,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#eef4ff;}',
318:      '#' + MODAL_ID + ' .cp-actions{display:flex;gap:8px;align-items:center;}',
319:      '#' + MODAL_ID + ' .cp-btn{padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));cursor:pointer;color:#eef4ff;font:700 11px/1 Arial,Helvetica,sans-serif;text-transform:uppercase;}',
320:      '#' + MODAL_ID + ' .cp-body{min-height:0;overflow:auto;padding:10px;background:linear-gradient(180deg,#08121d,#050912);}',
330:  function ensureModal(){
331:    if (q(MODAL_ID)) return q(MODAL_ID);
333:    var modal = document.createElement('div');
334:    modal.id = MODAL_ID;
335:    modal.setAttribute('aria-hidden', 'true');
336:    modal.innerHTML = [
337:      '<div class="cp-backdrop" data-close-overlay-modal="1"></div>',
342:            '<button class="cp-btn" id="cpOverlayHardModalClose" type="button">Close</button>',
348:    document.body.appendChild(modal);
350:    q('cpOverlayHardModalClose').addEventListener('click', function(ev){
353:      closeOverlayModal();
356:    modal.querySelector('[data-close-overlay-modal="1"]').addEventListener('click', function(ev){
359:      closeOverlayModal();
363:      if(ev.key === 'Escape' && modal.classList.contains('show')){
364:        closeOverlayModal();
368:    return modal;
373:      'overlayComposerModal',
376:      'graphicsComposerModal',
377:      'featureStudioModal'
420:  function showModal(){
421:    var modal = ensureModal();
422:    modal.classList.add('show');
423:    modal.setAttribute('aria-hidden', 'false');
424:    document.body.classList.add('appModalNoScroll');
427:  function hideModal(){
428:    var modal = ensureModal();
429:    modal.classList.remove('show');
430:    modal.setAttribute('aria-hidden', 'true');
431:    document.body.classList.remove('appModalNoScroll');
436:    var modal = ensureModal();
440:      showModal();
450:    if (panel.id === MODAL_ID || panel.closest('#' + MODAL_ID)) {
451:      showModal();
455:    if (panel === modal) return false;
457:    // prevent legacy inline modal shell from showing behind ours
458:    var legacy = q('overlayComposerModal');
488:    showModal();
492:  function closeOverlayModal(){
493:    var modal = ensureModal();
511:    hideModal();
551:      q('overlayComposerModal'),
559:      if (el.closest('#' + MODAL_ID)) return;
578:    ensureModal();
592:  if (document.readyState === 'loading') {
598:  window.openOverlayComposerHardModal = liftOverlayComposer;
599:  window.closeOverlayComposerHardModal = closeOverlayModal;
662:    document.querySelectorAll('.overlay,.lkModal,.cpModal,#streamModalV3').forEach(prep);
665:      const open = Array.from(document.querySelectorAll('.overlay.show,.lkModal.show,.cpModal.show,#streamModalV3.show,[aria-hidden="false"].overlay,[aria-hidden="false"].lkModal,[aria-hidden="false"].cpModal,[aria-hidden="false"]#streamModalV3'));
667:      if (top && typeof window.__modalHide === 'function') window.__modalHide(top);
674:<script id="cp-overlay-composer-hard-modal-patch">
679:  var MODAL_ID = 'cpOverlayHardModal';
680:  var MOUNT_ID = 'cpOverlayHardModalMount';
681:  var TITLE_ID = 'cpOverlayHardModalTitle';
684:    if (q('cpOverlayHardModalStyle')) return;
686:    css.id = 'cpOverlayHardModalStyle';
688:      '#' + MODAL_ID + '{position:fixed;inset:0;z-index:999999;display:none;}',
689:      '#' + MODAL_ID + '.show{display:block;}',
690:      '#' + MODAL_ID + ' .cp-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);}',
691:      '#' + MODAL_ID + ' .cp-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1600px,calc(100vw - 28px));height:min(900px,calc(100vh - 28px));display:grid;grid-template-rows:54px minmax(0,1fr);border:1px solid rgba(255,255,255,.14);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#132033,#08111b);box-shadow:0 24px 70px rgba(0,0,0,.55);}',
692:      '#' + MODAL_ID + ' .cp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.015)),linear-gradient(180deg,#1b2738,#101824);}',
693:      '#' + MODAL_ID + ' .cp-head h3{margin:0;font:700 13px/1.1 Arial,Helvetica,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#eef4ff;}',
694:      '#' + MODAL_ID + ' .cp-actions{display:flex;gap:8px;align-items:center;}',
695:      '#' + MODAL_ID + ' .cp-btn{padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));cursor:pointer;color:#eef4ff;font:700 11px/1 Arial,Helvetica,sans-serif;text-transform:uppercase;}',
696:      '#' + MODAL_ID + ' .cp-body{min-height:0;overflow:auto;padding:10px;background:linear-gradient(180deg,#08121d,#050912);}',
706:  function ensureModal(){
707:    if (q(MODAL_ID)) return q(MODAL_ID);
709:    var modal = document.createElement('div');
710:    modal.id = MODAL_ID;
711:    modal.setAttribute('aria-hidden', 'true');
712:    modal.innerHTML = [
713:      '<div class="cp-backdrop" data-close-overlay-modal="1"></div>',
718:            '<button class="cp-btn" id="cpOverlayHardModalClose" type="button">Close</button>',
724:    document.body.appendChild(modal);
726:    q('cpOverlayHardModalClose').addEventListener('click', function(ev){
729:      closeOverlayModal();
732:    modal.querySelector('[data-close-overlay-modal="1"]').addEventListener('click', function(ev){
735:      closeOverlayModal();
739:      if(ev.key === 'Escape' && modal.classList.contains('show')){
740:        closeOverlayModal();
744:    return modal;
749:      'overlayComposerModal',
752:      'graphicsComposerModal',
753:      'featureStudioModal'
796:  function showModal(){
797:    var modal = ensureModal();
798:    modal.classList.add('show');
799:    modal.setAttribute('aria-hidden', 'false');
800:    document.body.classList.add('appModalNoScroll');
803:  function hideModal(){
804:    var modal = ensureModal();
805:    modal.classList.remove('show');
806:    modal.setAttribute('aria-hidden', 'true');
807:    document.body.classList.remove('appModalNoScroll');
812:    var modal = ensureModal();
816:      showModal();
826:    if (panel.id === MODAL_ID || panel.closest('#' + MODAL_ID)) {
827:      showModal();
831:    if (panel === modal) return false;
833:    // prevent legacy inline modal shell from showing behind ours
834:    var legacy = q('overlayComposerModal');
864:    showModal();
868:  function closeOverlayModal(){
869:    var modal = ensureModal();
887:    hideModal();
927:      q('overlayComposerModal'),
935:      if (el.closest('#' + MODAL_ID)) return;
954:    ensureModal();
968:  if (document.readyState === 'loading') {
974:  window.openOverlayComposerHardModal = liftOverlayComposer;
975:  window.closeOverlayComposerHardModal = closeOverlayModal;
1061:#tab-gueststudio .guestStudioCard .state{padding:6px 10px;color:rgba(255,255,255,.72);font-size:11px;text-transform:uppercase}
1134:window.__STREAM_CFG = window.__STREAM_CFG || {};
1135:window.__STREAM_CFG.endpoint = <?php echo json_encode(getenv('STREAM_API_URL') ?: ''); ?>;
1136:window.__STREAM_CFG.token = <?php echo json_encode(getenv('STREAM_API_TOKEN') ?: ''); ?>;
1137:window.STREAM_API_URL = window.__STREAM_CFG.endpoint;
1138:window.STREAM_API_TOKEN = window.__STREAM_CFG.token;
1143:    const cfg = window.__STREAM_CFG || (window.__STREAM_CFG = {});
1169:  // Ensure openHtmlModal exists (real modal, not alert)
1170:  w.__modalShow = function(el){
1177:    document.documentElement.classList.add('appModalNoScroll');
1180:  w.__modalHide = function(el){
1187:    if (!document.querySelector('.overlay.show,.lkModal.show,.cpModal.show,#streamModalV3.show,[aria-hidden="false"].overlay,[aria-hidden="false"].lkModal,[aria-hidden="false"].cpModal,[aria-hidden="false"]#streamModalV3')) {
1188:      document.documentElement.classList.remove('appModalNoScroll');
1192:  w.__bindModalChrome = function(root, closeFn){
1193:    if (!root || root.__modalChromeBound) return root;
1194:    root.__modalChromeBound = true;
1195:    root.addEventListener('click', function(ev){ if (ev.target === root) closeFn ? closeFn() : w.__modalHide(root); });
1199:  if (typeof w.openHtmlModal !== 'function') {
1200:    w.openHtmlModal = function(modalIdOrTitle, titleOrHtml, htmlMaybe, onMount){
1201:      let modalId = 'globalModal';
1207:        title = String(modalIdOrTitle || '');
1210:        modalId = String(modalIdOrTitle || 'globalModal');
1216:      let root = document.getElementById(modalId);
1219:        root.id = modalId;
1220:        root.className = 'lkModal';
1224:          '<div class="lkModal__backdrop"></div>' +
1225:          '<div class="lkModal__panel" role="dialog" aria-modal="true">' +
1226:            '<div class="lkModal__hdr">' +
1227:              '<div class="lkModal__ttl"></div>' +
1228:              '<button type="button" class="lkModal__x" aria-label="Close">✕</button>' +
1230:            '<div class="lkModal__body"></div>' +
1234:      const close = ()=> w.__modalHide(root);
1235:      w.__bindModalChrome(root, close);
1236:      const x = root.querySelector('.lkModal__x');
1238:      root.querySelector('.lkModal__ttl').textContent = title;
1239:      const body = root.querySelector('.lkModal__body');
1241:      w.__modalShow(root);
1247:  // Wrap openBasicModal to use openHtmlModal instead of alert (if present later)
1248:  if (typeof w.openBasicModal === 'function') {
1249:    const prev = w.openBasicModal;
1250:    w.openBasicModal = function(title, html){
1251:      try { return w.openHtmlModal('basic', title, html); } catch(e){ return prev(title, html); }
1259:  if (typeof w.openStreamModal !== 'function') w.openStreamModal = function(){};
1299:// Global safety guards (avoid missing-function crashes that block modals)
1303:  if (typeof w.openStreamModal !== "function") w.openStreamModal = function(){};
1316:    <div class="overlay ocModal" id="overlayComposerModal" aria-hidden="true">
1558:                  <div class="title"><span class="pill ready">SELECTED GUEST</span></div>
1717:/* Preview state */
1722:const UI_STATE_STORE_KEY = "coproducer_ui_state_v1";
1730:function saveUiState(){
1736:      virtualSelected: fxState && fxState.virtuals ? String(fxState.virtuals.selected || 'single') : 'single'
1738:    localStorage.setItem(UI_STATE_STORE_KEY, JSON.stringify(payload));
1739:  }catch(err){ console.warn('saveUiState failed', err); }
1741:function loadUiState(){
1743:    const raw = localStorage.getItem(UI_STATE_STORE_KEY);
1748:  }catch(err){ console.warn('loadUiState failed', err); }
1750:function applyUiState(){
1755:    if (fxState && fxState.virtuals && s.virtualSelected) fxState.virtuals.selected = String(s.virtualSelected || 'single');
1759:  }catch(err){ console.warn('applyUiState failed', err); }
1775:    const payload = mediaItems.map(m => ({
1795:        mediaItems = j.items.map((m, idx)=>({
1809:        for (const m of mediaItems){
1828:    mediaItems = arr.map((m, idx)=>({
1842:    for (const m of mediaItems){
1890:let mediaItems = []; // {id,name,kind,url,thumb,audioNode?}
1949:const guidesModal = document.getElementById("guidesModal");
1950:const btnCloseGuidesModal = document.getElementById("btnCloseGuidesModal");
1964:function getGuidesModalEls(){
1966:    modal: document.getElementById("guidesModal"),
1967:    btnClose: document.getElementById("btnCloseGuidesModal"),
2078:function openGuestFramingModal(slotIdx){
2119:    openHtmlModal("guest-framing", "Guest Framing / Crop", html, (root)=>{
2171:    console.warn("openGuestFramingModal failed", e);
2177:function slotConnState(s){
2186:function hostConnState(){
2191:function deriveOnAirBadgeState(){
2196:  return hostConnState();
2229:if (qaStream) qaStream.onclick = ()=>{ openStreamModal(); }; 
2231:{ const __btnStream = document.getElementById("btnStream"); if (__btnStream) __btnStream.onclick = ()=>{ openStreamModal(); }; }
2257:    getConnState: (slot) => (typeof slotConnState === "function" ? slotConnState(slot) : ((slot && slot.connected) ? "LIVE" : "OFFLINE")),
2291:  if (typeof window.__modalShow === "function") window.__modalShow(skinOverlay);
2296:  if (typeof window.__modalHide === "function") window.__modalHide(skinOverlay);
2486:window.__LK_DEBUG = {
2497:  connectionState: "idle",
2503:window.streamState = { channels: [], summary: "IDLE", lastError: null, lastStatusAt: null };
2504:window.appState = { programLocked: false, onAirBadge: "OFFLINE", previewSource: null };
2505:function syncDebugState(){
2508:    window.appState = Object.assign({}, window.appState || {}, {
2547:      if (!room || room.state !== "connected") return;
2566:    if (document.visibilityState === "visible" && !pageIsUnloading && !intentionalLeave && room && room.state !== "connected"){
2640:      window.__LK_DEBUG.lastError = String(err && err.message ? err.message : err);
2734:  if (!force && room && room.state === "connected"){
2752:      window.__LK_DEBUG.connectionState = "connecting";
2753:      window.__LK_DEBUG.reconnecting = !!force;
2767:      window.__LK_DEBUG.activeLivekitUrl = ACTIVE_LIVEKIT_URL;
2768:      window.__LK_DEBUG.activeRoom = ACTIVE_LIVEKIT_ROOM;
2769:      window.__LK_DEBUG.tokenEndpoint = t.endpoint || null;
2770:      window.__LK_DEBUG.tokenRole = t.role || null;
2771:      window.__LK_DEBUG.lastError = null;
2772:      window.__LK_DEBUG.lastJoinTs = Date.now();
2794:      window.__LK_DEBUG.connectionState = String(room?.state || "connected");
2795:      window.__LK_DEBUG.reconnecting = false;
2822:      window.__LK_DEBUG.connectionState = "error";
2823:      window.__LK_DEBUG.reconnecting = false;
2824:      window.__LK_DEBUG.lastError = String(err && err.message ? err.message : err);
2927:    scr.innerHTML = `<div class="scrLabel">${slotConnState(s)}</div>`;
2937:    const st = slotConnState(s);
2998:    // Visual state
3007:    wireClickAndDbl(wrap, null, ()=>openGuestFramingModal(s.idx));
3008:    wireClickAndDbl(scr, null, ()=>openGuestFramingModal(s.idx));
3040:      <div class="stripTop"><b>${st.title}</b><span class="state" id="st-${st.idx}-state">OFFLINE</span></div>
3073:  // Apply strip state based on connected
3074:  updateMixerStates();
3077:function updateMixerStates(){
3080:    const el = document.getElementById(`st-${i}-state`);
3081:    if (el) el.textContent = slotConnState(s);
3086:  const elM = document.getElementById("st-5-state");
3124:  updateMixerStates();
3148:    const item = mediaItems.find(m => m.id === src?.id);
3152:    previewSrcLbl.textContent = slot ? slotConnState(slot) : "—";
3158:  saveUiState();
3174:    const st = slot ? slotConnState(slot) : "OFFLINE";
3198:    const item = mediaItems.find(m => m.id === previewSource.id);
3268:  const state = hostConnState();
3270:    onAirBadge.textContent = state;
3271:    onAirBadge.classList.toggle("live", state==="LIVE");
3272:    onAirBadge.classList.toggle("audio", state==="AUDIO");
3273:    onAirBadge.classList.toggle("offline", state==="OFFLINE");
3295:  ph.textContent = (state === "AUDIO") ? "AUDIO" : "OFFLINE";
3333:    mediaItems.unshift(tempItem);
3350:      const idx = mediaItems.findIndex(m => m.id === tempId);
3364:      if (idx >= 0) mediaItems[idx] = item; else mediaItems.unshift(item);
3372:      const idx = mediaItems.findIndex(m => m.id === tempId);
3373:      if (idx >= 0) mediaItems.splice(idx, 1);
3386:    btnRemoveMedia.disabled = !(previewSource?.type==="media" && mediaItems.length);
3389:    btnClearMedia.disabled = !mediaItems.length;
3395:  const idx = mediaItems.findIndex(m => m.id === id);
3397:  const item = mediaItems[idx];
3422:  mediaItems.splice(idx, 1);
3437:  const ids = mediaItems.map(m => m.id);
3550:  for (const item of mediaItems){
3590:  // prefer stored audio element (audio or video) for the selected preview media
3591:  const cur = previewSource?.type==="media" ? mediaItems.find(m=>m.id===previewSource.id) : null;
3602:  updateMixerStates();
3617:  for (const item of mediaItems){
3629:  if (audioCtx.state === "suspended"){
3707:function getCurrentProgramVideoSource(){
3792:    const src = getCurrentProgramVideoSource();
4182:      window.__LK_DEBUG.lastError = reason ? String(reason) : "disconnected";
4199:  // Track mute/unmute + unpublish updates (so UI reflects guest device state)
4268:   - Selected FX apply to PREVIEW mix; TAKE commits PREVIEW to PROGRAM.
4281:function getDefaultGuidesState(){
4296:let guidesState = getDefaultGuidesState();
4304:    Object.assign(guidesState, obj);
4308:  try{ localStorage.setItem(GUIDES_STORE_KEY, JSON.stringify(guidesState)); }catch(_){}
4327:const transitionDefs = [
4339:const overlayDefs = [
4346:const virtualDefs = [
4356:const fxState = {
4358:    selected: "cut",
4381:    selected:"single",
4400:      if (obj.transition) Object.assign(fxState.transition, obj.transition);
4402:        if (obj.overlays.enabled) Object.assign(fxState.overlays.enabled, obj.overlays.enabled);
4403:        if (obj.overlays.settings) Object.assign(fxState.overlays.settings, obj.overlays.settings);
4405:      if (obj.virtuals) Object.assign(fxState.virtuals, obj.virtuals);
4410:  try{ localStorage.setItem(FX_STORE_KEY, JSON.stringify(fxState)); }catch(_){}
4434:  // Also supports Shift+Click and Right-Click for settings paths so modal openers
4494:    for (const d of transitionDefs){
4495:      const el = makeThumb(d, fxState.transition.selected === d.id, d.name.toUpperCase()); el.title = "Click to select • Shift+Click / Right-click / Double-click for settings";
4498:          fxState.transition.selected = d.id;
4512:    for (const d of overlayDefs){
4513:      const on = !!fxState.overlays.enabled[d.id];
4517:          fxState.overlays.enabled[d.id] = !fxState.overlays.enabled[d.id];
4532:    for (const d of virtualDefs){
4533:      const el = makeThumb(d, fxState.virtuals.selected === d.id, d.name.toUpperCase()); el.title = "Click to select • Shift+Click / Right-click / Double-click for settings";
4536:          fxState.virtuals.selected = d.id;
4548:/* Settings modal (single reusable) */
4549:const fxModal = document.createElement("div");
4550:fxModal.className = "overlay";
4551:fxModal.id = "fxModal";
4552:fxModal.setAttribute("aria-hidden","true");
4553:fxModal.innerHTML = `
4565:document.body.appendChild(fxModal);
4567:/* Media editor modal (double click on media item) */
4568:const mediaModal = document.createElement("div");
4569:mediaModal.className = "overlay";
4570:mediaModal.id = "mediaModal";
4571:mediaModal.setAttribute("aria-hidden","true");
4572:mediaModal.innerHTML = `
4584:document.body.appendChild(mediaModal);
4586:const mediaTitle = mediaModal.querySelector("#mediaTitle");
4587:const mediaBody  = mediaModal.querySelector("#mediaBody");
4588:const mediaClose = mediaModal.querySelector("#mediaClose");
4589:const mediaSave  = mediaModal.querySelector("#mediaSave");
4590:let mediaModalId = null;
4592:mediaClose.onclick = ()=> closeMediaModal();
4593:mediaModal.addEventListener("click",(e)=>{ if (e.target === mediaModal) closeMediaModal(); });
4612:    if (String(value) === String(o.value)) opt.selected = true;
4638:  if (arguments.length >= 1) window.__lastMediaEditorId = arguments[0];
4639:  return __cpForceModalOpen('mediaModal');
4643:function closeMediaModal() {
4645:  return __cpForceModalClose('mediaModal');
4650:  if (!mediaModalId){ closeMediaModal(); return; }
4659:  setMediaSettings(mediaModalId, {
4683:  closeMediaModal();
4687:/* STREAM modal — Professional wiring (isolated) */
4696: *  POST {endpoint}/status { room, channels:[{id}] }  -> { channels:[{id,state,message,stats}] }
4727:function summarizeStreamState(map){
4728:  const vals = Object.values(map||{}).map(v => String(v?.state||"IDLE").toUpperCase());
4740:      state: map && map[ch.id] ? (map[ch.id].state || "IDLE") : "IDLE",
4743:    window.streamState = {
4745:      summary: summarizeStreamState(map||{}),
4749:    syncDebugState();
4837:/* UI (LEGACY STREAM MODAL DISABLED — use Clean V2 below) */
4839:const streamModal = document.createElement("div");
4840:streamModal.className="overlay";
4841:streamModal.id="streamModal";
4842:streamModal.setAttribute("aria-hidden","true");
4843:streamModal.innerHTML = `
4899:document.body.appendChild(streamModal);
4901:const streamClose = streamModal.querySelector("#streamClose");
4902:const streamEndpoint = streamModal.querySelector("#streamEndpoint");
4903:const streamToken = streamModal.querySelector("#streamToken");
4904:const streamSaveCfg = streamModal.querySelector("#streamSaveCfg");
4905:const streamTimeout = streamModal.querySelector("#streamTimeout");
4906:const streamPoll = streamModal.querySelector("#streamPoll");
4907:const streamAdd = streamModal.querySelector("#streamAdd");
4908:const streamStartEnabled = streamModal.querySelector("#streamStartEnabled");
4909:const streamStopAll = streamModal.querySelector("#streamStopAll");
4910:const streamList = streamModal.querySelector("#streamList");
4911:const streamRoomBadge = streamModal.querySelector("#streamRoomBadge");
4912:const streamLogEl = streamModal.querySelector("#streamLog");
4913:const streamCopyLog = streamModal.querySelector("#streamCopyLog");
4914:const streamClearLog = streamModal.querySelector("#streamClearLog");
4916:streamClose.onclick = ()=> closeStreamModal();
4917:streamModal.addEventListener("click",(e)=>{ if (e.target === streamModal) closeStreamModal(); });
4918:document.addEventListener("keydown",(e)=>{ if (e.key === "Escape" && streamModal.classList.contains("show")) closeStreamModal(); });
4920:function openStreamModal() {
4922:  return __cpForceModalOpen(document.getElementById('streamModalV3') ? 'streamModalV3' : 'streamModal');
4925:function closeStreamModal() {
4927:  __cpForceModalClose('streamModalV3');
4928:  return __cpForceModalClose('streamModal');
4984:function statusBadge(state){
4985:  const s = String(state||"IDLE").toUpperCase();
5053:    const st = statusMap && statusMap[ch.id] ? statusMap[ch.id] : { state:"IDLE", message:"" };
5066:        <div>${statusBadge(st.state)}</div>
5189:  if (!streamModal.classList.contains("show")) return;
5202:      map[it.id] = { state: it.state || "IDLE", message: it.message || "" };
5227:  // STREAM UI uses Clean V2 modal (see "STREAM UI CLEAN v2" marker).
5233:const fxTitle = fxModal.querySelector("#fxTitle");
5234:const fxBody  = fxModal.querySelector("#fxBody");
5235:const fxClose = fxModal.querySelector("#fxClose");
5236:const fxSave  = fxModal.querySelector("#fxSave");
5238:let fxModalCtx = null;
5240:fxClose.onclick = ()=>closeFxModal();
5241:fxModal.addEventListener("click",(e)=>{ if (e.target === fxModal) closeFxModal(); });
5250:    if (String(value) === String(o.value)) opt.selected = true;
5309:  if (mediaItems.length){
5311:    for (const m of mediaItems){
5320:  if (arguments.length >= 1) window.__lastFxKind = arguments[0];
5321:  if (arguments.length >= 2) window.__lastFxId = arguments[1];
5322:  if (arguments.length >= 3) window.__lastFxName = arguments[2];
5323:  return __cpForceModalOpen('fxModal');
5327:function closeFxModal() {
5329:  return __cpForceModalClose('fxModal');
5333:function readModalValues(){
5347:  if (!fxModalCtx){ closeFxModal(); return; }
5348:  const {kind, id} = fxModalCtx;
5349:  const v = readModalValues();
5352:    fxState.transition.settings[id] = fxState.transition.settings[id] || {};
5354:      fxState.transition.settings[id].dur = Math.max(80, Math.min(1800, parseInt(v.dur,10) || 520));
5355:      fxState.transition.settings[id].ease = String(v.ease || "ease");
5357:        fxState.transition.settings[id].color = String(v.color || "#000000");
5363:    fxState.overlays.settings[id] = fxState.overlays.settings[id] || {};
5364:    const s = fxState.overlays.settings[id];
5388:    closeFxModal();
5393:    fxState.virtuals.settings[id] = fxState.virtuals.settings[id] || {};
5394:    const s = fxState.virtuals.settings[id];
5408:    closeFxModal();
5416:  closeFxModal();
5434:  const els = getGuidesModalEls();
5439:  const els = getGuidesModalEls();
5440:  if (!els.modal) return;
5441:  if (els.standard) els.standard.value = guidesState.standard || "16:9";
5442:  if (els.safe) els.safe.value = String(guidesState.safe ?? 0.08);
5443:  if (els.grid) els.grid.checked = !!guidesState.grid;
5444:  if (els.ruler) els.ruler.checked = !!guidesState.ruler;
5445:  if (els.pixels) els.pixels.checked = !!guidesState.pixels;
5446:  if (els.pxw) els.pxw.value = String(guidesState.pxw ?? 1920);
5447:  if (els.pxh) els.pxh.value = String(guidesState.pxh ?? 1080);
5448:  if (els.color) els.color.value = guidesState.color || "#00ff88";
5449:  if (els.opacity) els.opacity.value = String(guidesState.opacity ?? 0.75);
5450:  if (els.thickness) els.thickness.value = String(guidesState.thickness ?? 1);
5454:  return __cpForceModalOpen('guidesModal');
5459:  return __cpForceModalClose('guidesModal');
5466:  const els = getGuidesModalEls();
5475:  guidesState.standard = preset;
5476:  guidesState.safe = Math.max(0, Math.min(0.20, parseFloat((els.safe && els.safe.value) || "0.08") || 0.08));
5477:  guidesState.grid = !!(els.grid && els.grid.checked);
5478:  guidesState.ruler = !!(els.ruler && els.ruler.checked);
5479:  guidesState.pixels = !!(els.pixels && els.pixels.checked);
5480:  guidesState.pxw = Math.max(1, parseInt((els.pxw && els.pxw.value) || String(fallback.w), 10) || fallback.w);
5481:  guidesState.pxh = Math.max(1, parseInt((els.pxh && els.pxh.value) || String(fallback.h), 10) || fallback.h);
5482:  guidesState.color = String((els.color && els.color.value) || "#00ff88");
5483:  guidesState.opacity = Math.max(0.10, Math.min(1.00, parseFloat((els.opacity && els.opacity.value) || "0.75") || 0.75));
5484:  guidesState.thickness = Math.max(1, Math.min(4, parseInt((els.thickness && els.thickness.value) || "1", 10) || 1));
5491:  guidesState = getDefaultGuidesState();
5498:  guidesState.enabled = guidesOn;
5509:  if (ev.target && ev.target.id === "btnCloseGuidesModal") closeGuidesSettings();
5513:  const gm = document.getElementById("guidesModal");
5521:  const els = getGuidesModalEls();
5526:  const gm = document.getElementById("guidesModal");
5556:  const sel = fxState.transition.selected || "cut";
5557:  const set = fxState.transition.settings[sel] || {};
5691:  // Snapshot old ON AIR state for swap-back into Preview
5724:    overlaysEnabled: deepClone(fxState.overlays.enabled),
5725:    overlaysSettings: deepClone(fxState.overlays.settings)
5741:    fxState.virtuals.selected = oldOnAir.virtualId;
5744:      fxState.virtuals.settings[oldOnAir.virtualId] = oldOnAir.virtualSettings;
5750:  // Refresh preview (Preview always shows current overlay tab state)
5752:  saveUiState();
5786:    const state = hostConnState();
5794:    ph.textContent = (state === "AUDIO") ? "AUDIO" : "RETURN";
5801:    const st = slot ? slotConnState(slot) : "OFFLINE";
5815:    const item = mediaItems.find(m => m.id === src.id);
5891:      // best-effort autoplay (usually allowed after user click that selected media / TAKE gesture)
6121:  const en = overlaysEnabled || fxState.overlays.enabled;
6122:  const st = overlaysSettings || fxState.overlays.settings;
6248:  const box = getAspectBox(w, h, guidesState.standard);
6250:  const guideColor = String(guidesState.color || "#00ff88");
6251:  const guideOpacity = Math.max(0.10, Math.min(1.00, Number(guidesState.opacity || 0.75)));
6252:  const guideThickness = Math.max(1, Math.min(4, Number(guidesState.thickness || 1)));
6260:  const safe = Math.max(0, Math.min(0.20, Number(guidesState.safe || 0)));
6279:  if (guidesState.grid){
6295:  if (guidesState.ruler){
6313:  if (guidesState.pixels){
6339:    virtualId: fxState.virtuals.selected || "single",
6340:    virtualSettings: deepClone(fxState.virtuals.settings[fxState.virtuals.selected || "single"] || {}),
6341:    overlaysEnabled: includeOverlays ? deepClone(fxState.overlays.enabled) : {lower:false, bug:false, ticker:false, full:false},
6342:    overlaysSettings: includeOverlays ? deepClone(fxState.overlays.settings) : deepClone(fxState.overlays.settings)
6400:  renderOverlays(ovs, fxState.overlays.enabled, fxState.overlays.settings);
6413:    overlaysEnabled: deepClone(fxState.overlays.enabled),
6414:    overlaysSettings: deepClone(fxState.overlays.settings)
6422:    const item = mediaItems.find(m=>m.id===previewSource.id);
6428:    previewSrcLbl.textContent = slot ? slotConnState(slot) : "—";
6432:  syncDebugState();
6440:  const state = programLocked ? "PROGRAM" : deriveOnAirBadgeState();
6442:    onAirBadge.textContent = state;
6443:    onAirBadge.classList.toggle("live", state==="LIVE" || state==="PROGRAM");
6444:    onAirBadge.classList.toggle("audio", state==="AUDIO");
6445:    onAirBadge.classList.toggle("offline", state==="OFFLINE");
6450:    syncDebugState();
6478:  ph.textContent = (state === "AUDIO") ? "AUDIO" : "OFFLINE";
6480:  syncDebugState();
6485:guidesOn = !!guidesState.enabled;
6492:loadUiState();
6498:applyUiState();
6500:syncDebugState();
6519:      overlaysEnabled: deepClone(fxState.overlays.enabled),
6520:      overlaysSettings: deepClone(fxState.overlays.settings)
6536:<script src="assets/js/feature-modal-core.js"></script>
6545:     - Clean modal layout, collapsible Advanced
6553:<div id="streamModalV3" aria-hidden="true">
6554:  <div class="box" role="dialog" aria-modal="true">
6640:<div id="guidesModal" class="cpModal" hidden aria-hidden="true">
6641:  <div class="cpModalCard guidesCard" role="dialog" aria-modal="true" aria-labelledby="guidesModalTitle">
6642:    <div class="cpModalHead">
6643:      <div class="cpModalTitle" id="guidesModalTitle">Preview Guides</div>
6644:      <button id="btnCloseGuidesModal" class="iconBtn" type="button" title="Close Guides Settings">
6648:    <div class="cpModalBody">
6660:    <div class="cpModalFoot">
6670:  function show(id){ var el = typeof id === 'string' ? q(id) : id; if(!el) return false; if(window.__modalShow) return window.__modalShow(el); el.hidden=false; el.setAttribute('aria-hidden','false'); el.classList.add('show'); return true; }
6671:  function hide(id){ var el = typeof id === 'string' ? q(id) : id; if(!el) return false; if(window.__modalHide) return window.__modalHide(el); el.classList.remove('show'); el.setAttribute('aria-hidden','true'); el.hidden=true; return true; }
6674:    ['guidesModal','fxModal','overlayComposerModal','skinOverlay','mediaModal','streamModal','streamModalV3','featureStudioModal'].forEach(bindBackdrop);
6686:    var btnGc = q('btnCloseGuidesModal');
6687:    if(btnGc && !btnGc.__lateCloseBound){ btnGc.__lateCloseBound=true; btnGc.addEventListener('click', function(ev){ ev.preventDefault(); ev.stopPropagation(); hide('guidesModal'); }, true); }
6689:    if(btnGsav && !btnGsav.__lateSaveBound){ btnGsav.__lateSaveBound=true; btnGsav.addEventListener('click', function(ev){ ev.preventDefault(); ev.stopPropagation(); if (typeof window.saveGuidesFromPanel === 'function') window.saveGuidesFromPanel(); else hide('guidesModal'); }, true); }
6693:    var fx=q('fxModal');
6714:        if(!id && el.getAttribute('data-composer-scene')==='1') id = (window.fxState&&window.fxState.overlays&&window.fxState.overlays.settings&&window.fxState.overlays.settings.composer&&window.fxState.overlays.settings.composer.sceneId) || 'composer';
6729:    var oc=q('overlayComposerModal');
6733:          if (typeof window.__ocOpenComposerInner === 'function') window.__ocOpenComposerInner(sceneId);
6744:      ['overlayComposerModal','guidesModal','fxModal','mediaModal','streamModal','streamModalV3','skinOverlay','featureStudioModal'].forEach(hide);
6747:  if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot, {once:true}); else boot();
6758:  if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', dedupeGuidesSettingsButton, {once:true});
6764:<div id="featureStudioModal" class="featureStudioModal" hidden aria-hidden="true">
6765:  <div class="featureStudioModal__backdrop" data-close-feature-studio="1"></div>
6766:  <div class="featureStudioModal__panel" role="dialog" aria-modal="true" aria-labelledby="featureStudioTitle">
6767:    <div class="featureStudioModal__head">
6769:        <div class="featureStudioModal__eyebrow">Studio</div>
6770:        <h3 id="featureStudioTitle" class="featureStudioModal__title">Studio</h3>
6772:      <div class="featureStudioModal__actions">
6779:    <div class="featureStudioModal__body" id="featureStudioMount"></div>
6792:function __cpForceModalOpen(id){
6803:  document.documentElement.classList.add('appModalNoScroll');
6804:  document.body.classList.add('appModalNoScroll');
6808:function __cpForceModalClose(id){
6820:    '.cpModal.show,.overlay.show,.lkModal.show,#streamModalV3.show,.featureStudioModal.show,#cpOverlayHardModal.show,#overlayComposerModal.show'
6823:    document.documentElement.classList.remove('appModalNoScroll');
6824:    document.body.classList.remove('appModalNoScroll');