Spaces:

MetiMiester
/

BubbleGuard

Running

App Files Files Community

MetiMiester commited on Aug 15, 2025

Commit

d33cc84

verified ·

1 Parent(s): 81c8695

Update index.html

Browse files

Files changed (1) hide show

index.html +417 -420

index.html CHANGED Viewed

@@ -1,420 +1,417 @@
-<!doctype html>
-<html lang="en" data-bs-theme="light">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
-  <title>BubbleGuard – Safe Chat</title>
-  <link rel="icon" href="/logo.png">
-  <!-- Bootstrap 5.3 -->
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-  <!-- Apple-style theme -->
-  <link href="/styles.css" rel="stylesheet">
-</head>
-<body>
-  <div class="app">
-    <!-- Header -->
-    <header class="glass py-2 px-3">
-      <div class="container-fluid d-flex align-items-center gap-3">
-        <button class="btn btn-ico" type="button" aria-label="Back" title="Back">‹</button>
-        <div class="d-flex align-items-center gap-2">
-          <img src="/logo.png" alt="" class="rounded-3 header-logo" onerror="this.style.display='none'">
-          <div class="d-flex flex-column lh-1">
-            <div class="app-title">BubbleGuard</div>
-            <div id="health" class="subtle" aria-live="polite">Checking…</div>
-          </div>
-        </div>
-        <div class="ms-auto d-flex align-items-center gap-1">
-          <button id="theme" class="btn btn-ico" type="button" aria-label="Toggle theme" title="Appearance">🌓</button>
-        </div>
-      </div>
-    </header>
-    <!-- Chat -->
-    <main id="chat" class="container chat-wrap" aria-live="polite" aria-label="Chat history">
-      <!-- Greeting -->
-      <div class="row-start">
-        <img src="/avatar_female.png" alt="" class="avatar" onerror="this.style.display='none'">
-        <div class="bubble-them bubble shadow-bubble">
-          <div class="copy">Hey there 💖 Welcome to BubbleGuard’s safe chat! Share pics, voice notes, or messages — we’ll keep it kind.</div>
-          <div class="meta">now</div>
-        </div>
-      </div>
-    </main>
-    <!-- Composer -->
-    <footer class="composer-wrap">
-      <!-- Reply banner -->
-      <div id="replyBanner" class="reply-banner d-none" role="status" aria-live="polite">
-        <div class="rb-body">
-          <div class="rb-line">
-            <span class="rb-label">Replying to</span>
-            <span id="replySnippet" class="rb-snippet"></span>
-          </div>
-          <button id="replyCancel" class="btn-ico rb-close" aria-label="Cancel reply">✕</button>
-        </div>
-      </div>
-      <div class="container composer">
-        <input id="fileImg" type="file" accept="image/*" class="d-none" aria-hidden="true">
-        <button id="btnImg" class="btn btn-ico" title="Attach image" aria-label="Attach image">＋</button>
-        <div class="input-shell">
-          <!-- UPDATED placeholder text here -->
-          <textarea id="input" rows="1" placeholder="Write a message here…" class="form-control input-ios" aria-label="Message input"></textarea>
-          <div id="typing" class="typing d-none" aria-hidden="true">
-            <span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span>
-          </div>
-        </div>
-        <div class="audio-controls d-flex align-items-center gap-1">
-          <button id="btnStart" class="btn btn-ico" title="Record" aria-label="Start recording">🎤</button>
-          <button id="btnStop"  class="btn btn-ico" title="Stop"   aria-label="Stop recording" disabled>⏹</button>
-          <span id="recTimer" class="pill subtle d-none" aria-live="polite">00:00</span>
-        </div>
-        <button id="btnSend" class="btn send-ios" aria-label="Send">↑</button>
-      </div>
-      <!-- Toast -->
-      <div class="toast-zone">
-        <div id="toast" class="toast ios-toast" role="alert" aria-live="assertive" aria-atomic="true">
-          <div class="toast-body" id="toastBody">Hello</div>
-        </div>
-      </div>
-    </footer>
-  </div>
-  <!-- Bootstrap JS -->
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-  <!-- App Script -->
-  <script>
-    // ---------- Config ----------
-    const baseURL = ''; // same-origin; set full origin if tunneling under a subpath
-    const api = (p) => baseURL + p;
-    // ---------- Theme ----------
-    const setTheme = (t)=> document.documentElement.setAttribute('data-bs-theme', t);
-    const saved = localStorage.getItem('bg-theme');
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    setTheme(saved || (prefersDark ? 'dark' : 'light'));
-    document.getElementById('theme').onclick = () => {
-      const cur = document.documentElement.getAttribute('data-bs-theme');
-      const next = cur === 'dark' ? 'light' : 'dark';
-      setTheme(next); localStorage.setItem('bg-theme', next);
-    };
-    // ---------- Health ----------
-    (async () => {
-      try {
-        const r = await fetch(api('/health'));
-        if (!r.ok) throw 0;
-        const j = await r.json();
-        const t = j.text_thresholds || {};
-        const h = document.getElementById('health');
-        h.textContent = `Online · ${j.device} · T=${t.TEXT_UNSAFE_THR ?? '-'} · S=${t.SHORT_MSG_UNSAFE_THR ?? '-'}`;
-      } catch {
-        document.getElementById('health').textContent = 'Offline';
-      }
-    })();
-    // ---------- DOM helpers ----------
-    const $ = (id)=>document.getElementById(id);
-    const chat = $('chat'), input=$('input'), typing=$('typing');
-    const btnSend=$('btnSend'), btnImg=$('btnImg'), fileImg=$('fileImg');
-    const btnStart=$('btnStart'), btnStop=$('btnStop'), recTimer=$('recTimer');
-    const toastEl = $('toast'), toastBody = $('toastBody');
-    const toast = new bootstrap.Toast(toastEl, { delay: 4200 });
-    const timeNow = () => new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
-    const scrollBottom = () => { chat.scrollTop = chat.scrollHeight; };
-    const showToast = (msg) => { toastBody.textContent = msg; toast.show(); };
-    const esc = (s)=>s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-    // ---------- Reactions & Reply state ----------
-    const REACTIONS = ["👍","❤️","😂","😮","😢"];
-    let replyTarget = null; // { el, text }
-    function markDelivered(bubble, double=false){
-      const meta = bubble.querySelector('.meta');
-      if(!meta) return;
-      let ticks = meta.querySelector('.ticks');
-      if(!ticks){
-        ticks = document.createElement('span');
-        ticks.className = 'ticks';
-        meta.appendChild(ticks);
-      }
-      ticks.innerHTML = double ? '<span class="tick-double"></span>' : '<span class="tick-solo"></span>';
-    }
-    function showReactionsPop(bubble){
-      hideReactionsPop();
-      const pop = document.createElement('div');
-      pop.className = 'react-pop';
-      pop.setAttribute('role','menu');
-      REACTIONS.forEach(e=>{
-        const b=document.createElement('button');
-        b.type='button'; b.textContent=e; b.setAttribute('aria-label',`React ${e}`);
-        b.onclick = (ev)=>{ ev.stopPropagation(); toggleReaction(bubble, e); hideReactionsPop(); };
-        pop.appendChild(b);
-      });
-      bubble.appendChild(pop);
-      setTimeout(()=>document.addEventListener('click', hideReactionsPop, { once:true }), 0);
-    }
-    function hideReactionsPop(){
-      document.querySelectorAll('.react-pop').forEach(p=>p.remove());
-    }
-    function toggleReaction(bubble, emoji){
-      bubble._reactions = bubble._reactions || new Map();
-      const meKey = `me:${emoji}`;
-      if(bubble._reactions.has(meKey)) bubble._reactions.delete(meKey);
-      else bubble._reactions.set(meKey, 1);
-      renderReactions(bubble);
-    }
-    function renderReactions(bubble){
-      const counts = {};
-      (bubble._reactions||new Map()).forEach((v,k)=>{
-        const em = k.split(':')[1];
-        counts[em] = (counts[em]||0) + 1;
-      });
-      let row = bubble.querySelector('.react-row');
-      if(!row){
-        row = document.createElement('div'); row.className='react-row';
-        bubble.appendChild(row);
-      }
-      row.innerHTML = '';
-      Object.entries(counts).sort((a,b)=>b[1]-a[1]).forEach(([em,c])=>{
-        const chip = document.createElement('span');
-        chip.className='react-chip';
-        chip.innerHTML = `${em} <span class="count">${c}</span>`;
-        row.appendChild(chip);
-      });
-      if(Object.keys(counts).length===0) row.remove();
-    }
-    function startReply(bubble){
-      const textNode = bubble.querySelector('.copy')?.textContent ?? '';
-      replyTarget = { el: bubble, text: textNode.trim().slice(0, 60) };
-      $('replySnippet').textContent = replyTarget.text || '(media)';
-      $('replyBanner').classList.remove('d-none');
-      bubble.classList.add('swipe-hint');
-      setTimeout(()=>bubble.classList.remove('swipe-hint'), 900);
-    }
-    function cancelReply(){
-      replyTarget = null;
-      $('replyBanner').classList.add('d-none');
-    }
-    $('replyCancel').onclick = cancelReply;
-    // ---------- Bubble creators ----------
-    function armBubbleInteractions(bubble, isThem=false){
-      // Reactions: long-press / right-click
-      let pressTimer = null;
-      const startPress = ()=>{ pressTimer=setTimeout(()=>showReactionsPop(bubble), 380); };
-      const endPress   = ()=>{ clearTimeout(pressTimer); };
-      bubble.addEventListener('contextmenu', (e)=>{ e.preventDefault(); showReactionsPop(bubble); });
-      bubble.addEventListener('pointerdown', startPress);
-      bubble.addEventListener('pointerup', endPress);
-      bubble.addEventListener('pointerleave', endPress);
-      // Swipe-to-reply on "them" bubbles (mobile)
-      if(isThem){
-        let sx=0, dx=0;
-        bubble.addEventListener('touchstart', (e)=>{ sx = e.touches[0].clientX; dx=0; }, {passive:true});
-        bubble.addEventListener('touchmove', (e)=>{
-          dx = e.touches[0].clientX - sx;
-          if(dx>12) bubble.style.transform = `translateX(${Math.min(dx, 72)}px)`;
-        }, {passive:true});
-        bubble.addEventListener('touchend', ()=>{
-          if(dx>56) startReply(bubble);
-          bubble.style.transform = '';
-        });
-      }
-    }
-    function bubbleMe(html) {
-      const row = document.createElement('div'); row.className='row-end';
-      row.innerHTML = `
-        <div class="bubble-you bubble shadow-bubble">
-          <div class="copy">${html}</div>
-          <div class="meta">${timeNow()}</div>
-        </div>
-        <img src="/avatar_male.png" alt="" class="avatar" onerror="this.style.display='none'">
-      `;
-      chat.appendChild(row); scrollBottom();
-      const b = row.querySelector('.bubble-you');
-      armBubbleInteractions(b, false);
-      setTimeout(()=>markDelivered(b, true), 450);
-      return b;
-    }
-    function bubbleThem(html) {
-      const row = document.createElement('div'); row.className='row-start';
-      row.innerHTML = `
-        <img src="/avatar_female.png" alt="" class="avatar" onerror="this.style.display='none'">
-        <div class="bubble-them bubble shadow-bubble">
-          <div class="copy">${html}</div>
-          <div class="meta">${timeNow()}</div>
-        </div>
-      `;
-      chat.appendChild(row); scrollBottom();
-      const b = row.querySelector('.bubble-them');
-      armBubbleInteractions(b, true);
-      return b;
-    }
-    // ---------- Blast helper (block animation) ----------
-    function blastBubble({ html, side='you', preview=true, icon='🚫', removeDelay=900 }){
-      const content = preview
-        ? `<span class="unsafe-icon" aria-hidden="true">${icon}</span><span class="unsafe-preview">${html}</span>`
-        : `<span class="unsafe-icon" aria-hidden="true">${icon}</span>`;
-      const bubble = side === 'you' ? bubbleMe(content) : bubbleThem(content);
-      bubble.classList.add('bubble-blast');
-      setTimeout(()=> bubble.closest('.row-start, .row-end')?.remove(), removeDelay);
-    }
-    // ---------- Input behavior ----------
-    function setTyping(on){ typing.classList.toggle('d-none', !on); }
-    input.addEventListener('input', ()=>{
-      input.style.height='auto';
-      input.style.height=Math.min(input.scrollHeight, 140)+'px';
-    });
-    input.addEventListener('keydown',(e)=>{
-      if(e.key==='Escape'){ input.value=''; input.style.height='auto'; }
-      if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); sendText(); }
-    });
-    // Normalize curly quotes/apostrophes BEFORE sending
-    function normalizeInputText(text){
-      return text.replace(/[’‘]/g, "'").replace(/[“”]/g, '"').replace(/\s+/g, ' ').trim();
-    }
-    // ---------- Send text ----------
-    async function sendText(){
-      let t = input.value;
-      t = normalizeInputText(t);
-      if(!t) return;
-      // If replying, prefix a quote (client-side only)
-      if(replyTarget){
-        const quoted = replyTarget.text ? `> ${replyTarget.text}\n` : '';
-        t = `${quoted}${t}`;
-      }
-      setTyping(true); btnSend.disabled=true;
-      try{
-        const fd = new FormData(); fd.append('text', t);
-        const r = await fetch(api('/check_text'),{method:'POST', body:fd});
-        const j = await r.json();
-        if (r.ok && j && typeof j.safe !== 'undefined') {
-          if (j.safe) {
-            bubbleMe(esc(t));
-            cancelReply();
-          } else {
-            blastBubble({ html: esc(t), side: 'you', preview: true, icon: '🚫' });
-            const reason = j.reason ? ` (${j.reason}${j.unsafe_prob!=null?` · p=${(+j.unsafe_prob).toFixed(2)}`:''})` : '';
-            showToast('Message blocked as unsafe' + reason);
-          }
-        } else {
-          showToast('Unexpected response');
-        }
-      }catch(e){ showToast('Error: '+e); }
-      finally{
-        input.value=''; input.style.height='auto';
-        setTyping(false); btnSend.disabled=false;
-      }
-    }
-    btnSend.onclick = sendText;
-    // ---------- Image: click & drag-drop ----------
-    btnImg.onclick = ()=> fileImg.click();
-    fileImg.onchange = async ()=>{ if(fileImg.files[0]) await handleImage(fileImg.files[0]); fileImg.value=''; };
-    async function handleImage(file){
-      setTyping(true);
-      try{
-        const fd = new FormData(); fd.append('file', file);
-        const r = await fetch(api('/check_image'),{method:'POST', body:fd});
-        const j = await r.json();
-        if(j.safe){
-          const url = URL.createObjectURL(file);
-          bubbleMe(`<img src="${url}" class="chat-image" alt="Sent image">`);
-        } else {
-          blastBubble({ html: 'Image blocked', side: 'you', preview: false, icon: '🖼️' });
-          const reason = j.unsafe_prob!=null?` (p=${(+j.unsafe_prob).toFixed(2)})`:''; showToast('Image blocked as unsafe' + reason);
-        }
-      }catch(e){ showToast('Error: '+e); }
-      finally{ setTyping(false); }
-    }
-    // Drag & Drop (image only)
-    ['dragenter','dragover'].forEach(ev=>document.addEventListener(ev, e=>{ e.preventDefault(); chat.classList.add('drop'); }, false));
-    ;['dragleave','drop'].forEach(ev=>document.addEventListener(ev, e=>{ e.preventDefault(); chat.classList.remove('drop'); }, false));
-    document.addEventListener('drop', async (e)=>{
-      const f = e.dataTransfer?.files?.[0];
-      if(!f) return;
-      if (f.type.startsWith('image/')) await handleImage(f);
-      else showToast('Only images supported via drop.');
-    }, false);
-    // ---------- Voice ----------
-    let mediaStream=null, mediaRecorder=null, chunks=[], tick=null, startTs=0;
-    const pickMime = () => {
-      const prefs=['audio/webm;codecs=opus','audio/webm','audio/mp4;codecs=mp4a.40.2','audio/mp4','audio/ogg;codecs=opus','audio/ogg'];
-      for(const m of prefs) if (window.MediaRecorder && MediaRecorder.isTypeSupported(m)) return m;
-      return '';
-    };
-    async function ensureMic(){ if(!mediaStream) mediaStream = await navigator.mediaDevices.getUserMedia({audio:true}); }
-    function setRecUI(recording){
-      btnStart.disabled=recording; btnStop.disabled=!recording;
-      recTimer.classList.toggle('d-none',!recording);
-    }
-    const fmt = (t)=>{ const m=Math.floor(t/60), s=Math.floor(t%60); return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`; };
-    btnStart.onclick = async ()=>{
-      try{
-        await ensureMic(); chunks=[];
-        const mime = pickMime();
-        mediaRecorder = new MediaRecorder(mediaStream, mime? {mimeType:mime}:{});
-        mediaRecorder.ondataavailable = e => { if(e.data && e.data.size) chunks.push(e.data); };
-        mediaRecorder.onstop = onRecordingStop;
-        mediaRecorder.start(250);
-        startTs = Date.now();
-        tick = setInterval(()=> recTimer.textContent = fmt((Date.now()-startTs)/1000), 300);
-        setRecUI(true);
-        setTimeout(()=>{ if(mediaRecorder && mediaRecorder.state==='recording') btnStop.click(); }, 60000);
-      }catch(e){ showToast('Mic error: '+e); }
-    };
-    btnStop.onclick = ()=>{
-      if(mediaRecorder && mediaRecorder.state==='recording'){ mediaRecorder.stop(); }
-      if(tick){ clearInterval(tick); tick=null; }
-      setRecUI(false);
-    };
-    async function onRecordingStop(){
-      try{
-        setTyping(true);
-        const type = mediaRecorder?.mimeType || 'audio/webm';
-        const blob = new Blob(chunks, { type });
-        const fd = new FormData(); fd.append('file', blob, 'voice');
-        const r = await fetch(api('/check_audio'), { method:'POST', body: fd });
-        const j = await r.json();
-        if(j.safe){
-          const url = URL.createObjectURL(blob);
-          bubbleMe(`<audio controls src="${url}" class="audio-ios"></audio>`);
-        }else{
-          blastBubble({ html: 'Voice note blocked', side: 'you', preview: false, icon: '🔊' });
-          const reason = j.unsafe_prob!=null?` (p=${(+j.unsafe_prob).toFixed(2)})`:''; showToast('Voice note blocked as unsafe' + reason);
-        }
-      }catch(e){ showToast('Error: '+e); }
-      finally{ setTyping(false); }
-    }
-  </script>
-</body>
-</html>

+<!doctype html>
+<html lang="en" data-bs-theme="light">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
+  <title>BubbleGuard – Safe Chat</title>
+  <!-- Favicon & CSS: use RELATIVE paths (no leading /) -->
+  <link rel="icon" href="logo.png">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="styles.css" rel="stylesheet">
+</head>
+<body>
+  <div class="app">
+    <!-- Header -->
+    <header class="glass py-2 px-3">
+      <div class="container-fluid d-flex align-items-center gap-3">
+        <button class="btn btn-ico" type="button" aria-label="Back" title="Back">‹</button>
+        <div class="d-flex align-items-center gap-2">
+          <img src="logo.png" alt="" class="rounded-3 header-logo" onerror="this.style.display='none'">
+          <div class="d-flex flex-column lh-1">
+            <div class="app-title">BubbleGuard</div>
+            <div id="health" class="subtle" aria-live="polite">Checking…</div>
+          </div>
+        </div>
+        <div class="ms-auto d-flex align-items-center gap-1">
+          <button id="theme" class="btn btn-ico" type="button" aria-label="Toggle theme" title="Appearance">🌓</button>
+        </div>
+      </div>
+    </header>
+    <!-- Chat -->
+    <main id="chat" class="container chat-wrap" aria-live="polite" aria-label="Chat history">
+      <!-- Greeting -->
+      <div class="row-start">
+        <img src="avatar_female.png" alt="" class="avatar" onerror="this.style.display='none'">
+        <div class="bubble-them bubble shadow-bubble">
+          <div class="copy">Hey there 💖 Welcome to BubbleGuard’s safe chat! Share pics, voice notes, or messages — we’ll keep it kind.</div>
+          <div class="meta">now</div>
+        </div>
+      </div>
+    </main>
+    <!-- Composer -->
+    <footer class="composer-wrap">
+      <!-- Reply banner -->
+      <div id="replyBanner" class="reply-banner d-none" role="status" aria-live="polite">
+        <div class="rb-body">
+          <div class="rb-line">
+            <span class="rb-label">Replying to</span>
+            <span id="replySnippet" class="rb-snippet"></span>
+          </div>
+          <button id="replyCancel" class="btn-ico rb-close" aria-label="Cancel reply">✕</button>
+        </div>
+      </div>
+      <div class="container composer">
+        <input id="fileImg" type="file" accept="image/*" class="d-none" aria-hidden="true">
+        <button id="btnImg" class="btn btn-ico" title="Attach image" aria-label="Attach image">＋</button>
+        <div class="input-shell">
+          <textarea id="input" rows="1" placeholder="Write a message here…" class="form-control input-ios" aria-label="Message input"></textarea>
+          <div id="typing" class="typing d-none" aria-hidden="true">
+            <span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span>
+          </div>
+        </div>
+        <div class="audio-controls d-flex align-items-center gap-1">
+          <button id="btnStart" class="btn btn-ico" title="Record" aria-label="Start recording">🎤</button>
+          <button id="btnStop"  class="btn btn-ico" title="Stop"   aria-label="Stop recording" disabled>⏹</button>
+          <span id="recTimer" class="pill subtle d-none" aria-live="polite">00:00</span>
+        </div>
+        <button id="btnSend" class="btn send-ios" aria-label="Send">↑</button>
+      </div>
+      <!-- Toast -->
+      <div class="toast-zone">
+        <div id="toast" class="toast ios-toast" role="alert" aria-live="assertive" aria-atomic="true">
+          <div class="toast-body" id="toastBody">Hello</div>
+        </div>
+      </div>
+    </footer>
+  </div>
+  <!-- Bootstrap JS -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- App Script -->
+  <script>
+    // ---------- Config (RELATIVE API helper) ----------
+    const api = (p) => new URL(p, window.location.href).toString(); // use: api('check_text')
+    // ---------- JSON guard ----------
+    async function fetchJSON(url, opts) {
+      const res = await fetch(url, Object.assign({ headers: { 'Accept': 'application/json' } }, opts || {}));
+      const ct = (res.headers.get('content-type') || '').toLowerCase();
+      const text = await res.text();
+      if (!ct.includes('application/json')) {
+        throw new Error('Non-JSON from API: ' + text.slice(0, 160));
+      }
+      let body;
+      try { body = JSON.parse(text); } catch (e) {
+        throw new Error('Invalid JSON: ' + text.slice(0, 160));
+      }
+      if (!res.ok) {
+        const msg = (body && (body.detail || body.error)) || (res.status + ' ' + res.statusText);
+        throw new Error(msg);
+      }
+      return body;
+    }
+    // ---------- Theme ----------
+    const setTheme = (t)=> document.documentElement.setAttribute('data-bs-theme', t);
+    const saved = localStorage.getItem('bg-theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    setTheme(saved || (prefersDark ? 'dark' : 'light'));
+    document.getElementById('theme').onclick = () => {
+      const cur = document.documentElement.getAttribute('data-bs-theme');
+      const next = cur === 'dark' ? 'light' : 'dark';
+      setTheme(next); localStorage.setItem('bg-theme', next);
+    };
+    // ---------- Health ----------
+    (async () => {
+      try {
+        const j = await fetchJSON(api('health'));
+        const t = j.text_thresholds || {};
+        document.getElementById('health').textContent =
+          `Online · ${j.device} · T=${t.TEXT_UNSAFE_THR ?? '-'} · S=${t.SHORT_MSG_UNSAFE_THR ?? '-'}`;
+      } catch (e) {
+        document.getElementById('health').textContent = 'Offline';
+        console.warn('health error:', e);
+      }
+    })();
+    // ---------- DOM helpers ----------
+    const $ = (id)=>document.getElementById(id);
+    const chat = $('chat'), input=$('input'), typing=$('typing');
+    const btnSend=$('btnSend'), btnImg=$('btnImg'), fileImg=$('fileImg');
+    const btnStart=$('btnStart'), btnStop=$('btnStop'), recTimer=$('recTimer');
+    const toastEl = $('toast'), toastBody = $('toastBody');
+    const toast = new bootstrap.Toast(toastEl, { delay: 4200 });
+    const timeNow = () => new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
+    const scrollBottom = () => { chat.scrollTop = chat.scrollHeight; };
+    const showToast = (msg) => { toastBody.textContent = msg; toast.show(); };
+    const esc = (s)=>s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    // ---------- Reactions & Reply state ----------
+    const REACTIONS = ["👍","❤️","😂","😮","😢"];
+    let replyTarget = null;
+    function markDelivered(bubble, double=false){
+      const meta = bubble.querySelector('.meta');
+      if(!meta) return;
+      let ticks = meta.querySelector('.ticks');
+      if(!ticks){
+        ticks = document.createElement('span');
+        ticks.className = 'ticks';
+        meta.appendChild(ticks);
+      }
+      ticks.innerHTML = double ? '<span class="tick-double"></span>' : '<span class="tick-solo"></span>';
+    }
+    function showReactionsPop(bubble){
+      hideReactionsPop();
+      const pop = document.createElement('div');
+      pop.className = 'react-pop';
+      pop.setAttribute('role','menu');
+      REACTIONS.forEach(e=>{
+        const b=document.createElement('button');
+        b.type='button'; b.textContent=e; b.setAttribute('aria-label',`React ${e}`);
+        b.onclick = (ev)=>{ ev.stopPropagation(); toggleReaction(bubble, e); hideReactionsPop(); };
+        pop.appendChild(b);
+      });
+      bubble.appendChild(pop);
+      setTimeout(()=>document.addEventListener('click', hideReactionsPop, { once:true }), 0);
+    }
+    function hideReactionsPop(){ document.querySelectorAll('.react-pop').forEach(p=>p.remove()); }
+    function toggleReaction(bubble, emoji){
+      bubble._reactions = bubble._reactions || new Map();
+      const meKey = `me:${emoji}`;
+      if(bubble._reactions.has(meKey)) bubble._reactions.delete(meKey);
+      else bubble._reactions.set(meKey, 1);
+      renderReactions(bubble);
+    }
+    function renderReactions(bubble){
+      const counts = {};
+      (bubble._reactions||new Map()).forEach((v,k)=>{
+        const em = k.split(':')[1];
+        counts[em] = (counts[em]||0) + 1;
+      });
+      let row = bubble.querySelector('.react-row');
+      if(!row){
+        row = document.createElement('div'); row.className='react-row';
+        bubble.appendChild(row);
+      }
+      row.innerHTML = '';
+      Object.entries(counts).sort((a,b)=>b[1]-a[1]).forEach(([em,c])=>{
+        const chip = document.createElement('span');
+        chip.className='react-chip';
+        chip.innerHTML = `${em} <span class="count">${c}</span>`;
+        row.appendChild(chip);
+      });
+      if(Object.keys(counts).length===0) row.remove();
+    }
+    function startReply(bubble){
+      const textNode = bubble.querySelector('.copy')?.textContent ?? '';
+      replyTarget = { el: bubble, text: textNode.trim().slice(0, 60) };
+      $('replySnippet').textContent = replyTarget.text || '(media)';
+      $('replyBanner').classList.remove('d-none');
+      bubble.classList.add('swipe-hint');
+      setTimeout(()=>bubble.classList.remove('swipe-hint'), 900);
+    }
+    function cancelReply(){ replyTarget = null; $('replyBanner').classList.add('d-none'); }
+    $('replyCancel').onclick = cancelReply;
+    // ---------- Bubble creators ----------
+    function armBubbleInteractions(bubble, isThem=false){
+      let pressTimer = null;
+      const startPress = ()=>{ pressTimer=setTimeout(()=>showReactionsPop(bubble), 380); };
+      const endPress   = ()=>{ clearTimeout(pressTimer); };
+      bubble.addEventListener('contextmenu', (e)=>{ e.preventDefault(); showReactionsPop(bubble); });
+      bubble.addEventListener('pointerdown', startPress);
+      bubble.addEventListener('pointerup', endPress);
+      bubble.addEventListener('pointerleave', endPress);
+      if(isThem){
+        let sx=0, dx=0;
+        bubble.addEventListener('touchstart', (e)=>{ sx = e.touches[0].clientX; dx=0; }, {passive:true});
+        bubble.addEventListener('touchmove', (e)=>{
+          dx = e.touches[0].clientX - sx;
+          if(dx>12) bubble.style.transform = `translateX(${Math.min(dx, 72)}px)`;
+        }, {passive:true});
+        bubble.addEventListener('touchend', ()=>{
+          if(dx>56) startReply(bubble);
+          bubble.style.transform = '';
+        });
+      }
+    }
+    function bubbleMe(html) {
+      const row = document.createElement('div'); row.className='row-end';
+      row.innerHTML = `
+        <div class="bubble-you bubble shadow-bubble">
+          <div class="copy">${html}</div>
+          <div class="meta">${timeNow()}</div>
+        </div>
+        <img src="avatar_male.png" alt="" class="avatar" onerror="this.style.display='none'">
+      `;
+      chat.appendChild(row); scrollBottom();
+      const b = row.querySelector('.bubble-you');
+      armBubbleInteractions(b, false);
+      setTimeout(()=>markDelivered(b, true), 450);
+      return b;
+    }
+    function bubbleThem(html) {
+      const row = document.createElement('div'); row.className='row-start';
+      row.innerHTML = `
+        <img src="avatar_female.png" alt="" class="avatar" onerror="this.style.display='none'">
+        <div class="bubble-them bubble shadow-bubble">
+          <div class="copy">${html}</div>
+          <div class="meta">${timeNow()}</div>
+        </div>
+      `;
+      chat.appendChild(row); scrollBottom();
+      const b = row.querySelector('.bubble-them');
+      armBubbleInteractions(b, true);
+      return b;
+    }
+    // ---------- Blast helper ----------
+    function blastBubble({ html, side='you', preview=true, icon='🚫', removeDelay=900 }){
+      const content = preview
+        ? `<span class="unsafe-icon" aria-hidden="true">${icon}</span><span class="unsafe-preview">${html}</span>`
+        : `<span class="unsafe-icon" aria-hidden="true">${icon}</span>`;
+      const bubble = side === 'you' ? bubbleMe(content) : bubbleThem(content);
+      bubble.classList.add('bubble-blast');
+      setTimeout(()=> bubble.closest('.row-start, .row-end')?.remove(), removeDelay);
+    }
+    // ---------- Input behavior ----------
+    const typing = $('typing');
+    function setTyping(on){ typing.classList.toggle('d-none', !on); }
+    const input = $('input');
+    input.addEventListener('input', ()=>{
+      input.style.height='auto';
+      input.style.height=Math.min(input.scrollHeight, 140)+'px';
+    });
+    input.addEventListener('keydown',(e)=>{
+      if(e.key==='Escape'){ input.value=''; input.style.height='auto'; }
+      if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); sendText(); }
+    });
+    const normalizeInputText = (t)=> t.replace(/[’‘]/g,"'").replace(/[“”]/g,'"').replace(/\s+/g,' ').trim();
+    // ---------- Send text ----------
+    async function sendText(){
+      let t = normalizeInputText(input.value);
+      if(!t) return;
+      if(replyTarget){
+        const quoted = replyTarget.text ? `> ${replyTarget.text}\n` : '';
+        t = `${quoted}${t}`;
+      }
+      setTyping(true); $('btnSend').disabled=true;
+      try{
+        const fd = new FormData(); fd.append('text', t);
+        const j = await fetchJSON(api('check_text'), { method: 'POST', body: fd });
+        if (j.safe) { bubbleMe(esc(t)); cancelReply(); }
+        else {
+          blastBubble({ html: esc(t), side: 'you', preview: true, icon: '🚫' });
+          const reason = j.reason ? ` (${j.reason}${j.unsafe_prob!=null?` · p=${(+j.unsafe_prob).toFixed(2)}`:''})` : '';
+          showToast('Message blocked as unsafe' + reason);
+        }
+      }catch(e){ showToast('Error: '+e.message); }
+      finally{
+        input.value=''; input.style.height='auto';
+        setTyping(false); $('btnSend').disabled=false;
+      }
+    }
+    $('btnSend').onclick = sendText;
+    // ---------- Image ----------
+    $('btnImg').onclick = ()=> $('fileImg').click();
+    $('fileImg').onchange = async ()=>{ const f=$('fileImg').files[0]; if(f) await handleImage(f); $('fileImg').value=''; };
+    async function handleImage(file){
+      setTyping(true);
+      try{
+        const fd = new FormData(); fd.append('file', file);
+        const j = await fetchJSON(api('check_image'), { method: 'POST', body: fd });
+        if(j.safe){
+          const url = URL.createObjectURL(file);
+          bubbleMe(`<img src="${url}" class="chat-image" alt="Sent image">`);
+        } else {
+          blastBubble({ html: 'Image blocked', side: 'you', preview: false, icon: '🖼️' });
+          const reason = j.unsafe_prob!=null?` (p=${(+j.unsafe_prob).toFixed(2)})`:''; showToast('Image blocked as unsafe' + reason);
+        }
+      }catch(e){ showToast('Error: '+e.message); }
+      finally{ setTyping(false); }
+    }
+    // Drag & Drop (image only)
+    ['dragenter','dragover'].forEach(ev=>document.addEventListener(ev, e=>{ e.preventDefault(); chat.classList.add('drop'); }, false));
+    ;['dragleave','drop'].forEach(ev=>document.addEventListener(ev, e=>{ e.preventDefault(); chat.classList.remove('drop'); }, false));
+    document.addEventListener('drop', async (e)=>{
+      const f = e.dataTransfer?.files?.[0];
+      if(!f) return;
+      if (f.type.startsWith('image/')) await handleImage(f);
+      else showToast('Only images supported via drop.');
+    }, false);
+    // ---------- Voice ----------
+    let mediaStream=null, mediaRecorder=null, chunks=[], tick=null, startTs=0;
+    const btnStart=$('btnStart'), btnStop=$('btnStop'), recTimer=$('recTimer');
+    const pickMime = () => {
+      const prefs=['audio/webm;codecs=opus','audio/webm','audio/mp4;codecs=mp4a.40.2','audio/mp4','audio/ogg;codecs=opus','audio/ogg'];
+      for(const m of prefs) if (window.MediaRecorder && MediaRecorder.isTypeSupported(m)) return m;
+      return '';
+    };
+    async function ensureMic(){ if(!mediaStream) mediaStream = await navigator.mediaDevices.getUserMedia({audio:true}); }
+    function setRecUI(recording){
+      btnStart.disabled=recording; btnStop.disabled=!recording;
+      recTimer.classList.toggle('d-none',!recording);
+    }
+    const fmt = (t)=>{ const m=Math.floor(t/60), s=Math.floor(t%60); return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`; };
+    btnStart.onclick = async ()=>{
+      try{
+        await ensureMic(); chunks=[];
+        const mime = pickMime();
+        mediaRecorder = new MediaRecorder(mediaStream, mime? {mimeType:mime}:{});
+        mediaRecorder.ondataavailable = e => { if(e.data && e.data.size) chunks.push(e.data); };
+        mediaRecorder.onstop = onRecordingStop;
+        mediaRecorder.start(250);
+        startTs = Date.now();
+        tick = setInterval(()=> recTimer.textContent = fmt((Date.now()-startTs)/1000), 300);
+        setRecUI(true);
+        setTimeout(()=>{ if(mediaRecorder && mediaRecorder.state==='recording') btnStop.click(); }, 60000);
+      }catch(e){ showToast('Mic error: '+e.message); }
+    };
+    btnStop.onclick = ()=>{
+      if(mediaRecorder && mediaRecorder.state==='recording'){ mediaRecorder.stop(); }
+      if(tick){ clearInterval(tick); tick=null; }
+      setRecUI(false);
+    };
+    async function onRecordingStop(){
+      try{
+        setTyping(true);
+        const type = mediaRecorder?.mimeType || 'audio/webm';
+        const blob = new Blob(chunks, { type });
+        const fd = new FormData(); fd.append('file', blob, 'voice');
+        const j = await fetchJSON(api('check_audio'), { method:'POST', body: fd });
+        if(j.safe){
+          const url = URL.createObjectURL(blob);
+          bubbleMe(`<audio controls src="${url}" class="audio-ios"></audio>`);
+        }else{
+          blastBubble({ html: 'Voice note blocked', side: 'you', preview: false, icon: '🔊' });
+          const reason = j.unsafe_prob!=null?` (p=${(+j.unsafe_prob).toFixed(2)})`:''; showToast('Voice note blocked as unsafe' + reason);
+        }
+      }catch(e){ showToast('Error: '+e.message); }
+      finally{ setTyping(false); }
+    }
+  </script>
+</body>
+</html>