.voice-salon-grid { display: grid; grid-template-columns: 300px 1fr 320px; gap: 24px; margin-top: 24px; }
        .online-scroll-list { max-height: 500px; overflow-y: auto; }
        .chat-msg-meta { font-size: 0.7rem; opacity: 0.75; margin-bottom: 4px; letter-spacing: 0.3px; }
        .call-ctrl-group { display: flex; justify-content: center; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
        @media (max-width: 1200px) { .voice-salon-grid { grid-template-columns: 260px 1fr 280px; gap: 20px; } }
        @media (max-width: 900px) { .voice-salon-grid { grid-template-columns: 1fr; gap: 20px; } }
        @media (max-width: 480px) { .voice-salon-grid { gap: 12px; margin-top: 12px; } .call-ctrl-group { gap: 12px; } }
        .call-btn:hover { transform: scale(1.02); filter: brightness(1.05); }
        .emoji-bomb { position: fixed; pointer-events: none; z-index: 9999; font-size: 28px; user-select: none; animation: bombFloat 1.2s ease-out forwards; }
        @keyframes bombFloat { 0% { transform: translate(0,0) scale(0.3); opacity: 0; } 30% { transform: translate(var(--tx,30px),var(--ty,-50px)) scale(1.2); opacity: 1; } 100% { transform: translate(var(--tx2,60px),var(--ty2,-120px)) scale(0.5); opacity: 0; } }
        .bomb-particle { position: fixed; pointer-events: none; z-index: 9998; width: 8px; height: 8px; border-radius: 50%; animation: bombParticle 0.8s ease-out forwards; }
        @keyframes bombParticle { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--px,40px),var(--py,-80px)) scale(0); opacity: 0; } }
        .bomb-flash { position: fixed; inset: 0; pointer-events: none; z-index: 9997; background: radial-gradient(circle at var(--fx,50%) var(--fy,40%), rgba(255,200,50,0.3) 0%, transparent 60%); animation: bombFlash 0.6s ease-out forwards; }
        @keyframes bombFlash { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
        .bomb-shake { animation: bombShake 0.5s ease-out; }
        @keyframes bombShake { 0%,100% { transform: translate(0); } 20% { transform: translate(-6px,3px); } 40% { transform: translate(5px,-2px); } 60% { transform: translate(-3px,-4px); } 80% { transform: translate(2px,2px); } }
        .emoji-picker { position: absolute; bottom: 70px; left: 20px; background: var(--noir-bg-elevated); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--noir-border-light); border-radius: 20px; padding: 12px; display: none; grid-template-columns: repeat(6, 1fr); gap: 10px; z-index: 300; box-shadow: var(--noir-shadow-lg); }
        .emoji-picker.show { display: grid; }
        .emoji-option { font-size: 28px; cursor: pointer; transition: transform 0.1s; text-align: center; padding: 6px; border-radius: 12px; }
        .emoji-option:hover { transform: scale(1.2); background: var(--noir-accent-subtle); }
        .user-selector-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; }
        .user-selector-card { background: var(--noir-bg-elevated); border-radius: 28px; width: 280px; padding: 20px; border: 1px solid var(--noir-border-light); animation: noir-scaleIn 0.2s; }
        .at-selector { position: absolute; background: var(--noir-bg-elevated); backdrop-filter: blur(16px); border: 1px solid var(--noir-border-light); border-radius: 20px; padding: 8px; min-width: 180px; z-index: 350; box-shadow: var(--noir-shadow-lg); display: none; flex-direction: column; gap: 6px; }
        .at-selector.show { display: flex; }
        .at-option { padding: 8px 12px; border-radius: 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.1s; }
        .at-option:hover { background: var(--noir-accent-subtle); }
        .at-avatar { width: 28px; height: 28px; background: var(--noir-accent); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; color: white; }
        .vu-bar { height: 6px; background: color-mix(in srgb, var(--text-primary) 8%, transparent); border-radius: 3px; overflow: hidden; margin: 0 8px; }
        .vu-fill { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #4ade80, #f0c040, #f87171); transition: width 0.08s; }
    </style>
<link rel="stylesheet" href="/mc-theme.css">
<link rel="stylesheet" href="/mc-compat.css">
<script src="/static/site-sync.js"></script>
</head>
<body class="mc-page">
<script src="/static/nav.js"></script>
<script src="/static/auth-check.js"></script>
<div id="loginPanel" class="noir-flex noir-items-center noir-justify-center" style="min-height:100vh;padding:24px;">
  <div class="noir-card noir-card-elevated" style="max-width:400px;width:100%;padding:32px 28px;border-radius:var(--noir-radius-xl);">
    <h2 class="noir-h4 noir-font-semibold" style="text-align:center;margin-bottom:4px;">登录语音聊天室</h2>
    <p class="noir-text-sm noir-text-tertiary" style="text-align:center;margin-bottom:24px;">实时语音 · 表情互动 · AI助手</p>
    <div class="noir-form-group"><input id="voiceUser" class="noir-input" placeholder="用户名" autocomplete="username"></div>
    <div class="noir-form-group"><input type="password" id="voicePass" class="noir-input" placeholder="密码"></div>
    <button id="voiceLoginBtn" class="noir-btn noir-btn-primary" style="width:100%;justify-content:center;">登录并连接</button>
    <div id="voiceLoginMsg" class="noir-text-xs" style="text-align:center;margin-top:12px;min-height:18px;color:#f87171;"></div>
    <div class="noir-text-sm noir-text-tertiary" style="text-align:center;margin-top:16px;">没有账号？<a href="/register.html" style="color:var(--noir-text-primary);">注册</a></div>
  </div>
</div>
<div id="voiceApp" style="max-width: 1400px; margin: 0 auto; padding: 24px 20px; display: none;">
    <div class="noir-flex noir-justify-between noir-items-center" style="flex-wrap: wrap; gap: 12px; margin-bottom: 28px;">
        <div><h1 class="noir-h3">语音聊天室</h1><div class="noir-flex noir-gap-3"><span class="noir-badge">实时通话</span><span class="noir-badge">@提及</span><span class="noir-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="vertical-align:-2px;margin-right:3px"><circle cx="12" cy="10" r="6" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="9" cy="9" r="1.5" fill="currentColor"/><circle cx="15" cy="9" r="1.5" fill="currentColor"/><path d="M12 16c-2 0-3.5.8-4 2h8c-.5-1.2-2-2-4-2z" fill="none" stroke="currentColor" stroke-width="1.2"/><rect x="7" y="5" width="2" height="2" rx="0.5" fill="currentColor"/><rect x="15" y="5" width="2" height="2" rx="0.5" fill="currentColor"/></svg>DeepSeek AI</span></div></div>
        <div class="noir-flex noir-gap-3"><span id="historyBadge" class="noir-badge">历史消息已加载</span><span id="wsStatus" class="noir-badge"><span class="noir-badge-dot" style="background:#f87171;"></span>未连接</span><a href="/" class="noir-btn noir-btn-ghost noir-btn-sm">主页</a><button id="logoutBtn" class="noir-btn noir-btn-secondary noir-btn-sm">退出</button></div>
    </div>
    <div class="voice-salon-grid">
        <div class="noir-card" style="background: var(--noir-bg-card); backdrop-filter: blur(12px); padding:0;"><div class="noir-card-header"><div class="noir-flex noir-justify-between noir-items-center"><span class="noir-h6">在线成员</span><span id="onlineCount" class="noir-badge" style="background:var(--noir-accent);">0</span><button id="refreshOnlineBtn" class="noir-btn-text">刷新</button></div></div><div class="noir-card-body"><div id="onlineUsersList" class="online-scroll-list" style="display:flex; flex-direction:column; gap:12px;"></div></div></div>
        <div class="noir-card" style="display: flex; flex-direction: column; height: 70vh; overflow: hidden; padding:0; position:relative;"><div id="chatMessageArea" style="flex:1; overflow-y: auto; padding:20px; gap:16px; display:flex; flex-direction:column;"></div><div class="noir-divider" style="margin:0;"></div><div class="noir-flex noir-gap-3" style="padding:16px; background: var(--noir-bg-secondary); position:relative;"><button id="bombTriggerBtn" class="noir-btn noir-btn-secondary" style="padding:0 16px; font-size:20px;"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style="vertical-align:-3px;margin-right:4px"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M12 8v5M12 16v0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M18 8l-2 2M6 8l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>炸</button><div id="emojiPicker" class="emoji-picker"><div class="emoji-option" data-emoji="😀">😀</div><div class="emoji-option" data-emoji="😂">😂</div><div class="emoji-option" data-emoji="❤️">❤️</div><div class="emoji-option" data-emoji="👍">👍</div><div class="emoji-option" data-emoji="🎉">🎉</div><div class="emoji-option" data-emoji="🔥">🔥</div></div><input type="text" id="chatInput" class="noir-input" placeholder="输入消息..." style="flex:1;"><button id="sendChatBtn" class="noir-btn noir-btn-primary">发送</button><div id="atSelector" class="at-selector"></div></div></div>
        <div class="noir-card" style="background: var(--noir-bg-card); backdrop-filter: blur(12px);"><div class="noir-card-header"><div class="noir-h6">通话控制台</div></div><div id="callStatusBox" class="noir-card" style="background: rgba(0,0,0,0.4); text-align:center; padding:12px;"><div id="callStateText">空闲中</div><div id="callPartnerName" class="noir-text-xs"></div></div>
        <div style="display:flex;gap:12px;margin:12px 0;">
          <div style="flex:1;text-align:center;"><div class="noir-text-xs noir-text-tertiary" style="margin-bottom:4px;">你的声音</div><div class="vu-bar" id="vuLocal"><div class="vu-fill" id="vuLocalFill"></div></div></div>
          <div style="flex:1;text-align:center;"><div class="noir-text-xs noir-text-tertiary" style="margin-bottom:4px;">对方声音</div><div class="vu-bar" id="vuRemote"><div class="vu-fill" id="vuRemoteFill"></div></div></div>
        </div>
        <div class="call-ctrl-group"><button id="toggleMuteBtn" class="noir-btn noir-btn-secondary">麦克风开启</button><button id="hangupCurrentBtn" class="noir-btn" style="background:#b53b3b; color:white;">挂断通话</button></div><div class="noir-divider"></div><div class="noir-text-xs noir-text-tertiary" style="text-align:center;">@用户名 可提及，@DeepSeek 召唤AI</div></div>
    </div>
</div>
<script>
(function(){'use strict';
var E=function(id){return document.getElementById(id)};
var currentUser=null,ws=null,peerConnection=null,localStream=null,currentCallTarget=null,isMuted=false,lastMsgIdSet=new Set(),pendingMessages=[],reconnectTimer=null,reconnectAttempts=0,MAX_RECONNECT=10;
var AI_API_KEY="sk-6be0c94b1d064201a403b7335901aeb1",AI_ENDPOINT="https://api.deepseek.com/v1/chat/completions",isAiProcessing=false;
var audioCtx=null,localAnalyser=null,remoteAnalyser=null,vuAnimId=null;
var voiceApp=E('voiceApp'),onlineUsersList=E('onlineUsersList'),onlineCountSpan=E('onlineCount'),chatMessageArea=E('chatMessageArea'),chatInput=E('chatInput'),sendChatBtn=E('sendChatBtn'),toggleMuteBtn=E('toggleMuteBtn'),hangupCurrentBtn=E('hangupCurrentBtn'),callStateText=E('callStateText'),callPartnerName=E('callPartnerName'),historyBadge=E('historyBadge'),wsStatusSpan=E('wsStatus'),refreshOnlineBtn=E('refreshOnlineBtn'),bombTriggerBtn=E('bombTriggerBtn'),emojiPicker=E('emojiPicker'),atSelector=E('atSelector');
var loginPanel=E('loginPanel'),voiceUser=E('voiceUser'),voicePass=E('voicePass'),voiceLoginBtn=E('voiceLoginBtn'),voiceLoginMsg=E('voiceLoginMsg');
var currentOnlineUsers=[],atOpen=false,atTriggerPos=null;
var storedUser=localStorage.getItem('username')||sessionStorage.getItem('username');
var storedPass=localStorage.getItem('userpass')||sessionStorage.getItem('userpass');
if(storedUser)voiceUser.value=storedUser;
voiceLoginBtn.addEventListener('click',function(){
  var u=voiceUser.value.trim(),p=voicePass.value;
  if(!u||!p){voiceLoginMsg.textContent='请填写用户名和密码';return}
  voiceLoginBtn.disabled=true;voiceLoginBtn.textContent='登录中...';voiceLoginMsg.textContent='';
  fetch('/api/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:u,password:p})})
  .then(function(r){return r.json()})
  .then(function(d){
    if(d.success){
      currentUser=u;
      localStorage.setItem('username',u);localStorage.setItem('userpass',p);
      loginPanel.style.display='none';voiceApp.style.display='block';
      initLocalStream().catch(function(){});
      loadChatHistory();connectWebSocket();
    }else{voiceLoginMsg.textContent=d.error||'登录失败'}
  }).catch(function(){voiceLoginMsg.textContent='网络错误'})
  .finally(function(){voiceLoginBtn.disabled=false;voiceLoginBtn.textContent='登录并连接'})
});
voicePass.addEventListener('keydown',function(e){if(e.key==='Enter')voiceLoginBtn.click()});
if(storedUser&&storedPass){voicePass.focus()}else{voiceUser.focus()}
if(storedUser&&storedPass){
  voiceUser.value=storedUser;voicePass.value=storedPass;
  setTimeout(function(){voiceLoginBtn.click()},300);
}
function getStoredUser(){return localStorage.getItem('username')||sessionStorage.getItem('username')}
function updateWsStatus(c){
  if(c){wsStatusSpan.innerHTML='<span class="noir-badge-dot" style="background:#4ade80;"></span> 已连接';reconnectAttempts=0}
  else {
    if(reconnectAttempts>0)wsStatusSpan.innerHTML='<span class="noir-badge-dot" style="background:#f59e0b;"></span> 重连中 ('+reconnectAttempts+')';
    else wsStatusSpan.innerHTML='<span class="noir-badge-dot" style="background:#f87171;"></span> 连接断开';
  }
}
function renderOnlineUsers(users){currentOnlineUsers=users||[];onlineCountSpan.innerText=currentOnlineUsers.length;onlineUsersList.innerHTML='';if(!currentOnlineUsers.length){onlineUsersList.innerHTML='<div class="noir-text-tertiary" style="text-align:center;">暂无在线成员</div>';return}currentOnlineUsers.forEach(function(u){var d=document.createElement('div');d.className='noir-flex noir-items-center noir-justify-between';d.style.cssText='padding:10px 12px;background:var(--noir-bg-tertiary);border-radius:12px;';d.innerHTML='<div class="noir-flex noir-items-center noir-gap-2"><div class="at-avatar">'+u.charAt(0).toUpperCase()+'</div><span>'+u+'</span></div><div class="noir-flex noir-gap-2">'+(u!==currentUser?'<button class="call-btn noir-btn noir-btn-sm noir-btn-secondary" data-user="'+u+'">呼叫</button>':'')+(u!==currentUser?'<button class="noir-btn noir-btn-sm noir-btn-ghost bomb-btn" data-user="'+u+'"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="vertical-align:-2px"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M12 8v5M12 16v0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M18 8l-2 2M6 8l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>':'')+'</div>';onlineUsersList.appendChild(d)});document.querySelectorAll('.call-btn').forEach(function(b){b.addEventListener('click',function(){startCall(b.dataset.user)})});document.querySelectorAll('.bomb-btn').forEach(function(b){b.addEventListener('click',function(e){e.stopPropagation();showBombSelector(b.dataset.user)})})}
function appendChatMessageToDom(from,text,isMe,smooth){var w=document.createElement('div');w.className='noir-message '+(isMe?'noir-message-user':'noir-message-assistant');var b=document.createElement('div');b.className='noir-message-bubble';var meta=document.createElement('div');meta.className='chat-msg-meta';meta.innerText=from+(isMe?' (你)':'');b.appendChild(meta);var t=document.createElement('div');t.className='noir-leading-relaxed';if(from==='DeepSeek')t.innerHTML=DOMPurify.sanitize(marked.parse(text));else t.innerText=text;b.appendChild(t);w.appendChild(b);chatMessageArea.appendChild(w);chatMessageArea.scrollTop=chatMessageArea.scrollHeight}
function sendChatMessage(text){if(!text||!text.trim())return;var msg=text.trim();if(msg.startsWith('@')){var space=msg.indexOf(' ');var target=space>0?msg.slice(1,space):msg.slice(1);var content=space>0?msg.slice(space+1).trim():'';if(target==='DeepSeek'&&content){appendChatMessageToDom('DeepSeek','思考中...',false,true);sendToDeepSeek(content);chatInput.value='';return}}if(ws&&ws.readyState===WebSocket.OPEN&&currentUser){ws.send(JSON.stringify({type:'chat',text:text}));chatInput.value=''}else{pendingMessages.push({type:'chat',text:text})}}
function sendToDeepSeek(text){isAiProcessing=true;fetch(AI_ENDPOINT,{method:'POST',headers:{'Content-Type':'application/json',Authorization:'Bearer '+AI_API_KEY},body:JSON.stringify({model:'deepseek-v4-flash',messages:[{role:'user',content:text}],stream:true})}).then(function(r){if(!r.ok){chatMessageArea.lastChild.querySelector('.noir-message-bubble').innerHTML='DeepSeek 不可用';return}var reader=r.body.getReader(),decoder=new TextDecoder(),buf='',full='';function read(){reader.read().then(function(part){if(part.done){isAiProcessing=false;return}buf+=decoder.decode(part.value,{stream:true});var lines=buf.split(/\n/);buf=lines.pop();lines.forEach(function(l){var t=l.trim();if(!t||t==='[DONE]')return;if(!t.startsWith('data: '))return;try{var j=JSON.parse(t.slice(6)),d=j?.choices?.[0]?.delta?.content;if(d){full+=d;chatMessageArea.lastChild.querySelector('.noir-message-bubble').innerHTML='<div class="chat-msg-meta">DeepSeek</div><div class="noir-leading-relaxed">'+DOMPurify.sanitize(marked.parse(full))+'</div>'}}catch(_){}});read()})}read()}).catch(function(e){chatMessageArea.lastChild.querySelector('.noir-message-bubble').innerHTML='DeepSeek 错误: '+e.message;isAiProcessing=false})}
function initLocalStream(){return navigator.mediaDevices.getUserMedia({audio:true}).then(function(s){localStream=s;if(!audioCtx)audioCtx=new(window.AudioContext||window.webkitAudioContext)();var src=audioCtx.createMediaStreamSource(s);localAnalyser=audioCtx.createAnalyser();localAnalyser.fftSize=256;src.connect(localAnalyser);startVUMeter();return true}).catch(function(){return false})}
function startVUMeter(){if(vuAnimId)return;function upd(){var lvl=0;if(localAnalyser){var d=new Uint8Array(localAnalyser.frequencyBinCount);localAnalyser.getByteFrequencyData(d);var sum=0;for(var i=0;i<d.length;i++)sum+=d[i];lvl=Math.min(100,sum/d.length/2.5);var lf=document.getElementById('vuLocalFill');if(lf)lf.style.width=lvl+'%'}if(remoteAnalyser){var d2=new Uint8Array(remoteAnalyser.frequencyBinCount);remoteAnalyser.getByteFrequencyData(d2);var sum2=0;for(var i=0;i<d2.length;i++)sum2+=d2[i];var rlvl=Math.min(100,sum2/d2.length/2.5);var rf=document.getElementById('vuRemoteFill');if(rf)rf.style.width=rlvl+'%'}vuAnimId=requestAnimationFrame(upd)}upd()}
function stopVUMeter(){if(vuAnimId){cancelAnimationFrame(vuAnimId);vuAnimId=null}var lf=document.getElementById('vuLocalFill');var rf=document.getElementById('vuRemoteFill');if(lf)lf.style.width='0';if(rf)rf.style.width='0'}
function startCall(target){if(!target||target===currentUser)return;currentCallTarget=target;callStateText.innerText='呼叫中...';callPartnerName.innerText=target;if(!localStream)initLocalStream().then(function(ok){if(!ok){callStateText.innerText='麦克风不可用';return}});peerConnection=new RTCPeerConnection({iceServers:[{urls:'stun:stun.l.google.com:19302'}]});if(localStream)localStream.getTracks().forEach(function(t){peerConnection.addTrack(t,localStream)});peerConnection.onicecandidate=function(e){if(e.candidate&&ws&&ws.readyState===WebSocket.OPEN)ws.send(JSON.stringify({type:'candidate',data:e.candidate,to:currentCallTarget}))};peerConnection.ontrack=function(e){var a=new Audio();a.srcObject=e.streams[0];a.play().catch(function(){});callStateText.innerText='通话中';callPartnerName.innerText=currentCallTarget;if(!audioCtx)audioCtx=new(window.AudioContext||window.webkitAudioContext)();var src=audioCtx.createMediaStreamSource(e.streams[0]);remoteAnalyser=audioCtx.createAnalyser();remoteAnalyser.fftSize=256;src.connect(remoteAnalyser);stopVUMeter();startVUMeter()};peerConnection.createOffer().then(function(o){peerConnection.setLocalDescription(o);if(ws&&ws.readyState===WebSocket.OPEN)ws.send(JSON.stringify({type:'offer',data:o,to:currentCallTarget}))})}
function handleOffer(offer,from){if(!localStream)initLocalStream();peerConnection=new RTCPeerConnection({iceServers:[{urls:'stun:stun.l.google.com:19302'}]});if(localStream)localStream.getTracks().forEach(function(t){peerConnection.addTrack(t,localStream)});peerConnection.onicecandidate=function(e){if(e.candidate&&ws&&ws.readyState===WebSocket.OPEN)ws.send(JSON.stringify({type:'candidate',data:e.candidate,to:from}))};peerConnection.ontrack=function(e){var a=new Audio();a.srcObject=e.streams[0];a.play().catch(function(){});currentCallTarget=from;callStateText.innerText='通话中';callPartnerName.innerText=from;if(!audioCtx)audioCtx=new(window.AudioContext||window.webkitAudioContext)();var src=audioCtx.createMediaStreamSource(e.streams[0]);remoteAnalyser=audioCtx.createAnalyser();remoteAnalyser.fftSize=256;src.connect(remoteAnalyser);stopVUMeter();startVUMeter()};peerConnection.setRemoteDescription(new RTCSessionDescription(offer));peerConnection.createAnswer().then(function(a){peerConnection.setLocalDescription(a);if(ws&&ws.readyState===WebSocket.OPEN)ws.send(JSON.stringify({type:'answer',data:a,to:from}))})}
function closePeerConnection(){if(peerConnection){peerConnection.onicecandidate=null;peerConnection.ontrack=null;peerConnection.close();peerConnection=null}currentCallTarget=null;callStateText.innerText='空闲中';callPartnerName.innerText=''}
function toggleMute(){if(!localStream)return;isMuted=!isMuted;localStream.getAudioTracks().forEach(function(t){t.enabled=!isMuted});toggleMuteBtn.innerText=isMuted?'麦克风静音':'麦克风开启'}
function hangupCurrent(){if(peerConnection)closePeerConnection()}
var BOMB_EMOJIS=['😀','😂','❤️','👍','🎉','🔥'];
function showBombSelector(target){var overlay=document.createElement('div');overlay.className='user-selector-overlay';overlay.innerHTML='<div class="user-selector-card"><div class="noir-h6">选择表情</div><div class="noir-flex" style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;">'+BOMB_EMOJIS.map(function(e){return'<div class="noir-btn noir-btn-ghost" style="font-size:24px;padding:8px;text-align:center;cursor:pointer;" data-emoji="'+e+'">'+e+'</div>'}).join('')+'</div><button class="noir-btn noir-btn-secondary" style="width:100%;">取消</button></div>';overlay.querySelector('.noir-btn-secondary').addEventListener('click',function(){overlay.remove()});overlay.querySelectorAll('[data-emoji]').forEach(function(o){o.addEventListener('click',function(){var em=o.dataset.emoji;if(ws&&ws.readyState===WebSocket.OPEN&&currentUser){ws.send(JSON.stringify({type:'emoji',emoji:em,to:target||''}))}spawnBomb(em,null);overlay.remove()})});document.body.appendChild(overlay)}
function spawnBomb(emoji,fromName){
  var targetEl=null;
  if(fromName&&fromName!==currentUser){
    var allUsers=onlineUsersList.querySelectorAll('div.noir-flex.noir-items-center');
    allUsers.forEach(function(row){if(row.textContent.includes(currentUser))targetEl=row})
  }else{
    var selfRow=onlineUsersList.querySelector('div.noir-flex.noir-items-center');
  }
  var sx=Math.random()*40+30,sy=Math.random()*20+10;
  var tx=Math.random()*60+20,ty=Math.random()*50+20;
  if(targetEl){var r=targetEl.getBoundingClientRect();tx=(r.left+r.width/2)/window.innerWidth*100;ty=(r.top+r.height/2)/window.innerHeight*100}
  var flash=document.createElement('div');flash.className='bomb-flash';flash.style.setProperty('--fx',tx+'%');flash.style.setProperty('--fy',ty+'%');document.body.appendChild(flash);setTimeout(function(){flash.remove()},700);
  var colors=['#ff0','#f80','#f44','#f0f','#0ff','#0f0'];
  for(var i=0;i<12;i++){var p=document.createElement('div');p.className='bomb-particle';p.style.left=sx+'%';p.style.top=sy+'%';p.style.background=colors[i%colors.length];p.style.setProperty('--px',(tx-sx+(Math.random()*40-20))+'%');p.style.setProperty('--py',(ty-sy+(Math.random()*40-20))+'%');p.style.animationDelay=(Math.random()*0.1)+'s';document.body.appendChild(p);setTimeout(function(){p.remove()},1000)}
  var b=document.createElement('div');b.className='emoji-bomb';b.textContent=emoji;b.style.left=sx+'%';b.style.top=sy+'%';b.style.setProperty('--tx',(tx-sx)*2+'%');b.style.setProperty('--ty',(ty-sy)*2+'%');b.style.setProperty('--tx2',(tx-sx)*2.5+'%');b.style.setProperty('--ty2',(ty-sy)*2.5+'%');document.body.appendChild(b);setTimeout(function(){b.remove()},1400);
  var app=document.getElementById('voiceApp');if(app){app.classList.add('bomb-shake');setTimeout(function(){app.classList.remove('bomb-shake')},550)}
}
function handleWsMessage(msg){switch(msg.type){case'loginOk':currentUser=msg.username;updateWsStatus(true);break;case'loginError':alert(msg.message||'登录失败');redirectToLogin();break;case'users':renderOnlineUsers(msg.users);break;case'chat':if(!msg.from||!msg.text)return;var id=msg.from+msg.time;if(lastMsgIdSet.has(id))return;lastMsgIdSet.add(id);appendChatMessageToDom(msg.from,msg.text,msg.from===currentUser,true);break;case'emoji':if(msg.emoji)spawnBomb(msg.emoji,msg.from);break;case'offer':handleOffer(msg.data,msg.from);break;case'answer':if(msg.data&&peerConnection)peerConnection.setRemoteDescription(new RTCSessionDescription(msg.data));break;case'candidate':if(msg.data&&peerConnection)peerConnection.addIceCandidate(new RTCIceCandidate(msg.data));break;case'ping':if(ws&&ws.readyState===WebSocket.OPEN)ws.send(JSON.stringify({type:'pong'}));break}}
function connectWebSocket(){
  if(ws&&ws.readyState===WebSocket.OPEN)return;
  try{ws.close()}catch(e){}
  var p=location.protocol==='https:'?'wss://wss.sinh.top/':'ws://wss.sinh.top/';
  ws=new WebSocket(p);
  var connTimeout=setTimeout(function(){
    if(ws.readyState!==WebSocket.OPEN){ws.close();updateWsStatus(false)}
  },8000);
  ws.onopen=function(){clearTimeout(connTimeout);updateWsStatus(true);if(currentUser)ws.send(JSON.stringify({type:'login',username:currentUser,token:(localStorage.getItem('token')||sessionStorage.getItem('token')||'')}));flushPendingMessages()};
  ws.onmessage=function(e){try{handleWsMessage(JSON.parse(e.data))}catch(ex){}};
  ws.onerror=function(){clearTimeout(connTimeout);updateWsStatus(false)};
  ws.onclose=function(){clearTimeout(connTimeout);updateWsStatus(false);attemptReconnect()}
}
function flushPendingMessages(){if(ws&&ws.readyState===WebSocket.OPEN)while(pendingMessages.length)ws.send(JSON.stringify(pendingMessages.shift()))}
function attemptReconnect(){
  if(reconnectTimer)return;
  if(reconnectAttempts>=MAX_RECONNECT){updateWsStatus(false);return}
  reconnectAttempts++;
  updateWsStatus(false);
  var delay=Math.min(1000*Math.pow(1.5,reconnectAttempts-1),15000);
  reconnectTimer=setTimeout(function(){if(currentUser)connectWebSocket();reconnectTimer=null},delay)
}
function loadChatHistory(){if(!currentUser)return;fetch('/api/public-chat').then(function(r){return r.json()}).then(function(ms){if(!Array.isArray(ms))return;chatMessageArea.innerHTML='';if(!ms.length){chatMessageArea.innerHTML='<div class="noir-text-tertiary" style="text-align:center;">暂无历史消息</div>';return}lastMsgIdSet.clear();ms.forEach(function(m){if(m.id)lastMsgIdSet.add(m.id);if(m.text&&m.text.startsWith('[BOMB]'))return;appendChatMessageToDom(m.from,m.text,m.from===currentUser,false)});historyBadge.innerText='已加载 '+ms.length+' 条'}).catch(function(e){})}
function logout(){if(reconnectTimer){clearTimeout(reconnectTimer);reconnectTimer=null}reconnectAttempts=MAX_RECONNECT;if(ws)ws.close();if(localStream)localStream.getTracks().forEach(function(t){t.stop()});localStream=null;closePeerConnection();if(currentUser)fetch('/api/logout',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:currentUser})});currentUser=null;localStorage.removeItem('username');localStorage.removeItem('userpass');sessionStorage.removeItem('username');sessionStorage.removeItem('userpass');lastMsgIdSet.clear();pendingMessages=[];voiceApp.style.display='none';loginPanel.style.display='flex';updateWsStatus(false)}
function closePeerConnection(){if(peerConnection){peerConnection.onicecandidate=null;peerConnection.ontrack=null;peerConnection.close();peerConnection=null}currentCallTarget=null;callStateText.innerText='空闲中';callPartnerName.innerText=''}
E('logoutBtn').addEventListener('click',logout);
E('sendChatBtn').addEventListener('click',function(){sendChatMessage(chatInput.value)});
E('toggleMuteBtn').addEventListener('click',toggleMute);
E('hangupCurrentBtn').addEventListener('click',hangupCurrent);
E('refreshOnlineBtn').addEventListener('click',function(){if(ws&&ws.readyState===WebSocket.OPEN&&currentUser)ws.send(JSON.stringify({type:'login',username:currentUser,token:(localStorage.getItem('token')||sessionStorage.getItem('token')||'')}))});
window.addEventListener('beforeunload',function(){if(ws)ws.close();if(localStream)localStream.getTracks().forEach(function(t){t.stop()})});
chatInput.addEventListener('input',function(){var val=chatInput.value,cursor=chatInput.selectionStart,lastAt=val.lastIndexOf('@',cursor-1);if(lastAt>=0&&(lastAt===0||val[lastAt-1]===' ')){var partial=val.slice(lastAt+1);atOpen=true;atTriggerPos=lastAt;showAtSelector(partial,lastAt)}else{atSelector.classList.remove('show');atOpen=false}});
function showAtSelector(partial,pos){var opts=[];currentOnlineUsers.forEach(function(u){if(u!==currentUser&&u.toLowerCase().includes(partial.toLowerCase()))opts.push({name:u,type:'user'})});if('DeepSeek'.toLowerCase().includes(partial.toLowerCase()))opts.push({name:'DeepSeek',type:'ai'});if(!opts.length){atSelector.classList.remove('show');return}atSelector.classList.add('show');atSelector.style.left=(pos*8+10)+'px';atSelector.style.bottom='60px';atSelector.innerHTML=opts.map(function(o){return'<div class="at-option" data-name="'+o.name+'"><div class="at-avatar" style="background:'+(o.type==='ai'?'var(--noir-accent)':'var(--noir-accent-subtle)')+'">'+o.name.charAt(0)+'</div><span>'+o.name+(o.type==='ai'?' (AI)':'')+'</span></div>'}).join('');atSelector.querySelectorAll('.at-option').forEach(function(o){o.addEventListener('click',function(){var name=o.dataset.name,before=chatInput.value.slice(0,atTriggerPos);chatInput.value=before+'@'+name+' ';atSelector.classList.remove('show');atOpen=false;chatInput.focus()})})}
document.addEventListener('click',function(e){if(!atSelector.contains(e.target)&&e.target!==chatInput){atSelector.classList.remove('show');atOpen=false}if(!emojiPicker.contains(e.target)&&e.target!==bombTriggerBtn)emojiPicker.classList.remove('show')});
bombTriggerBtn.addEventListener('click',function(e){e.stopPropagation();showBombSelector('')});
emojiPicker.querySelectorAll('.emoji-option').forEach(function(o){o.addEventListener('click',function(){spawnBomb(o.dataset.emoji,null);if(ws&&ws.readyState===WebSocket.OPEN&&currentUser)ws.send(JSON.stringify({type:'emoji',emoji:o.dataset.emoji,to:''}));emojiPicker.classList.remove('show')})});
})();
</script>
</body>
</html>