Fix: Change message length counter from characters to UTF-8 bytes

Updated the message length validation to count actual UTF-8 bytes instead of Unicode characters. This ensures accurate enforcement of the 200-byte LoRa limit, preventing message truncation.

Changes:
- Frontend: Use TextEncoder to count UTF-8 bytes in real-time
- Backend: Validate byte length using text.encode('utf-8')
- HTML: Increased maxlength to 500 to allow more ASCII while JS enforces 200 bytes

Example: "zażółć gęślą jaźń 😀😁"
- Before: ~22 chars ❌
- After: ~35 bytes ✅ (Polish chars = 2 bytes, emoji = 4 bytes each)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/static/js/app.js

@@ -398,21 +398,24 @@ function formatTime(timestamp) {
 }
 
 /**
- * Update character counter
+ * Update character counter (counts UTF-8 bytes, not characters)
  */
 function updateCharCounter() {
     const input = document.getElementById('messageInput');
     const counter = document.getElementById('charCounter');
-    const length = input.value.length;
-    const maxLength = 200;
 
-    counter.textContent = `${length} / ${maxLength}`;
+    // Count UTF-8 bytes, not Unicode characters
+    const encoder = new TextEncoder();
+    const byteLength = encoder.encode(input.value).length;
+    const maxBytes = 200;
+
+    counter.textContent = `${byteLength} / ${maxBytes}`;
 
     // Visual warning when approaching limit
-    if (length >= maxLength * 0.9) {
+    if (byteLength >= maxBytes * 0.9) {
         counter.classList.remove('text-muted', 'text-warning');
         counter.classList.add('text-danger', 'fw-bold');
-    } else if (length >= maxLength * 0.75) {
+    } else if (byteLength >= maxBytes * 0.75) {
         counter.classList.remove('text-muted', 'text-danger');
         counter.classList.add('text-warning', 'fw-bold');
     } else {