feat(chat): add 2000 character limit for messages

Added message length validation to prevent spam and improve UX with
character counter feedback.

Backend:
- Added MESSAGE_MAX_LENGTH constant (2000 characters)
- Validation in send_event_message handler:
  - Check if content is string
  - Check if not empty after trim
  - Check if not exceeding max length
- Validation in send_match_message handler (same checks)
- Returns error message if validation fails

Frontend:
- Added MESSAGE_MAX_LENGTH constant (2000 characters)
- ChatInput component enhancements:
  - maxLength attribute on input (hard limit)
  - Character counter shows when >80% of limit
  - Counter turns red when at limit
  - Submit button disabled when at limit
  - Counter format: "X/2000"

UX:
- User sees counter at 1600+ characters (80% of limit)
- Hard limit prevents typing beyond 2000 chars
- Clear visual feedback (red text) when at limit
- Consistent validation on both event and match chats

Security:
- Prevents spam with extremely long messages
- Protects against potential DoS via message size
- Database already uses TEXT type (supports limit)

frontend/src/components/chat/ChatInput.jsx

@@ -1,7 +1,8 @@
 import { Send } from 'lucide-react';
+import { MESSAGE_MAX_LENGTH } from '../../constants';
 
 /**
- * Chat Input component with send button
+ * Chat Input component with send button and character counter
  *
  * @param {string} value - Input value
  * @param {function} onChange - Change handler for input
@@ -26,26 +27,42 @@ const ChatInput = ({
     onSubmit(e);
   };
 
+  const charCount = value.length;
+  const isNearLimit = charCount > MESSAGE_MAX_LENGTH * 0.8; // 80% of limit
+  const isOverLimit = charCount > MESSAGE_MAX_LENGTH;
+
   return (
-    <form onSubmit={handleSubmit} className={`flex space-x-2 ${className}`}>
-      <input
-        type="text"
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        disabled={disabled}
-        autoFocus={autoFocus}
-        className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
-      />
-      <button
-        type="submit"
-        disabled={disabled || !value.trim()}
-        className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-        aria-label="Send message"
-      >
-        <Send className="w-5 h-5" />
-      </button>
-    </form>
+    <div className="space-y-1">
+      <form onSubmit={handleSubmit} className={`flex space-x-2 ${className}`}>
+        <input
+          type="text"
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          maxLength={MESSAGE_MAX_LENGTH}
+          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
+        />
+        <button
+          type="submit"
+          disabled={disabled || !value.trim() || isOverLimit}
+          className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          aria-label="Send message"
+        >
+          <Send className="w-5 h-5" />
+        </button>
+      </form>
+
+      {/* Character counter - show when approaching limit */}
+      {isNearLimit && (
+        <div className="text-right">
+          <span className={`text-xs ${isOverLimit ? 'text-red-600' : 'text-gray-500'}`}>
+            {charCount}/{MESSAGE_MAX_LENGTH}
+          </span>
+        </div>
+      )}
+    </div>
   );
 };