From 44fcd3e5acc19c88504d773851107d709fb26afe Mon Sep 17 00:00:00 2001
From: Radon <joshuacasady@gmail.com>
Date: Tue, 19 Aug 2025 17:43:12 -0500
Subject: [PATCH] initial commit

---
 .gitignore          |    2 +
 config.example.json |    6 +
 go.mod              |    5 +
 go.sum              |    2 +
 main.go             |  466 ++++++++++++
 static/app.js       | 1746 +++++++++++++++++++++++++++++++++++++++++++
 static/index.html   |  173 +++++
 static/styles.css   | 1386 ++++++++++++++++++++++++++++++++++
 8 files changed, 3786 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 config.example.json
 create mode 100644 go.mod
 create mode 100644 go.sum
 create mode 100644 main.go
 create mode 100644 static/app.js
 create mode 100644 static/index.html
 create mode 100644 static/styles.css

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..8131b6d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+config.json
+todo.md
diff --git a/config.example.json b/config.example.json
new file mode 100644
index 0000000..7509780
--- /dev/null
+++ b/config.example.json
@@ -0,0 +1,6 @@
+{
+	"server": {
+		"ipAddress": "192.168.1.1",
+		"port": 8080
+	}
+}
diff --git a/go.mod b/go.mod
new file mode 100644
index 0000000..fc35709
--- /dev/null
+++ b/go.mod
@@ -0,0 +1,5 @@
+module radvoice
+
+go 1.24.6
+
+require github.com/gorilla/websocket v1.5.3
diff --git a/go.sum b/go.sum
new file mode 100644
index 0000000..25a9fc4
--- /dev/null
+++ b/go.sum
@@ -0,0 +1,2 @@
+github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
+github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
diff --git a/main.go b/main.go
new file mode 100644
index 0000000..3166c1f
--- /dev/null
+++ b/main.go
@@ -0,0 +1,466 @@
+package main
+
+import (
+	"compress/gzip"
+	"encoding/json"
+	"flag"
+	"fmt"
+	"io"
+	"log"
+	"net/http"
+	"os"
+	"path/filepath"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/gorilla/websocket"
+)
+
+type Config struct {
+	Server struct {
+		IpAddress string `json:"ipAddress"`
+		Port      int    `json:"port"`
+	} `json:"server"`
+}
+
+func LoadConfig(filepath string) Config {
+	contents, err := os.ReadFile(filepath)
+	if err != nil {
+		fmt.Println("Error reading config file: ", err)
+		os.Exit(1)
+	}
+	var config Config
+	err = json.Unmarshal(contents, &config)
+	if err != nil {
+		fmt.Println("Error parsing config file: ", err)
+		os.Exit(1)
+	}
+	return config
+}
+
+type Client struct {
+	conn     *websocket.Conn
+	username string
+	id       string
+	hub      *Hub
+	send     chan []byte
+}
+
+type Hub struct {
+	clients    map[*Client]bool
+	broadcast  chan []byte
+	register   chan *Client
+	unregister chan *Client
+	mutex      sync.RWMutex
+}
+
+type Message struct {
+	Type      string `json:"type"`
+	Username  string `json:"username,omitempty"`
+	UserID    string `json:"userId,omitempty"`
+	Data      any    `json:"data,omitempty"`
+	Offer     any    `json:"offer,omitempty"`
+	Answer    any    `json:"answer,omitempty"`
+	ICE       any    `json:"ice,omitempty"`
+	Target    string `json:"target,omitempty"`
+	Error     string `json:"error,omitempty"`
+	Timestamp int64  `json:"timestamp,omitempty"`
+}
+
+var upgrader = websocket.Upgrader{
+	CheckOrigin: func(r *http.Request) bool {
+		return true
+	},
+}
+
+func newHub() *Hub {
+	return &Hub{
+		clients:    make(map[*Client]bool),
+		broadcast:  make(chan []byte, 256), // Add buffer to prevent blocking
+		register:   make(chan *Client, 256),
+		unregister: make(chan *Client, 256),
+	}
+}
+
+func (h *Hub) run() {
+	log.Println("Hub started and running...")
+	for {
+		select {
+		case client := <-h.register:
+			h.mutex.Lock()
+			h.clients[client] = true
+			h.mutex.Unlock()
+
+			//log.Printf("Client registered: %s (total clients: %d)", client.id, len(h.clients))
+
+			// Send current users list to new client
+			h.sendUsersList()
+
+		case client := <-h.unregister:
+			h.mutex.Lock()
+			if _, ok := h.clients[client]; ok {
+				delete(h.clients, client)
+				close(client.send)
+				//log.Printf("Client unregistered: %s (total clients: %d)", client.id, len(h.clients))
+			}
+			h.mutex.Unlock()
+
+			// Send updated users list
+			h.sendUsersList()
+
+		case message := <-h.broadcast:
+			//log.Printf("Broadcasting message to %d clients: %s", len(h.clients), string(message))
+			h.mutex.RLock()
+			successCount := 0
+			for client := range h.clients {
+				select {
+				case client.send <- message:
+					successCount++
+					//log.Printf("Message queued for client %s", client.id)
+				default:
+					//log.Printf("Failed to queue message for client %s, closing connection", client.id)
+					close(client.send)
+					delete(h.clients, client)
+				}
+			}
+			h.mutex.RUnlock()
+			//log.Printf("Message broadcast completed. Successful sends: %d", successCount)
+		}
+	}
+}
+
+func (h *Hub) isUsernameTaken(username string) bool {
+	h.mutex.RLock()
+	defer h.mutex.RUnlock()
+
+	for client := range h.clients {
+		if client.username == username {
+			return true
+		}
+	}
+	return false
+}
+
+func (h *Hub) sendUsersList() {
+	h.mutex.RLock()
+	users := make([]map[string]string, 0)
+	for client := range h.clients {
+		if client.username != "" {
+			users = append(users, map[string]string{
+				"id":       client.id,
+				"username": client.username,
+			})
+		}
+	}
+	h.mutex.RUnlock()
+
+	//log.Printf("sendUsersList: Found %d users with usernames", len(users))
+	//log.Printf("sendUsersList: Users data: %+v", users)
+
+	msg := Message{
+		Type: "users_list",
+		Data: users,
+	}
+
+	data, err := json.Marshal(msg)
+	if err != nil {
+		//log.Printf("sendUsersList: Error marshaling message: %v", err)
+		return
+	}
+
+	//log.Printf("sendUsersList: About to send to broadcast channel: %s", string(data))
+
+	select {
+	case h.broadcast <- data:
+		//log.Printf("sendUsersList: Message sent to broadcast channel successfully")
+	default:
+		//log.Printf("sendUsersList: WARNING - broadcast channel is full or blocked!")
+	}
+}
+
+func (h *Hub) sendToClient(targetID string, message []byte) {
+	h.mutex.RLock()
+	defer h.mutex.RUnlock()
+
+	for client := range h.clients {
+		if client.id == targetID {
+			select {
+			case client.send <- message:
+			default:
+				close(client.send)
+				delete(h.clients, client)
+			}
+			return
+		}
+	}
+}
+
+func (c *Client) readPump() {
+	defer func() {
+		c.hub.unregister <- c
+		c.conn.Close()
+	}()
+
+	for {
+		var msg Message
+		err := c.conn.ReadJSON(&msg)
+		if err != nil {
+			//log.Printf("Error reading message: %v", err)
+			break
+		}
+
+		switch msg.Type {
+		case "set_username":
+			if username, ok := msg.Data.(string); ok {
+				//log.Printf("Username request for client %s: %s", c.id, username)
+
+				// Check if username is already taken
+				if c.hub.isUsernameTaken(username) {
+					//log.Printf("Username '%s' is already taken", username)
+
+					// Send error message back to client
+					errorMsg := Message{
+						Type:  "username_error",
+						Error: "Username is already taken. Please choose a different username.",
+					}
+					data, _ := json.Marshal(errorMsg)
+
+					select {
+					case c.send <- data:
+						//log.Printf("Sent username error to client %s", c.id)
+					default:
+						//log.Printf("Failed to send username error to client %s", c.id)
+					}
+				} else {
+					//log.Printf("Setting username for client %s: %s", c.id, username)
+					c.username = username
+					c.hub.sendUsersList()
+				}
+			} else {
+				//log.Printf("Invalid username data type: %T", msg.Data)
+			}
+
+		case "webrtc_offer":
+			// Forward WebRTC offer to target client
+			data, _ := json.Marshal(Message{
+				Type:     "webrtc_offer",
+				UserID:   c.id,
+				Username: c.username,
+				Offer:    msg.Offer,
+			})
+			c.hub.sendToClient(msg.Target, data)
+
+		case "webrtc_answer":
+			// Forward WebRTC answer to target client
+			data, _ := json.Marshal(Message{
+				Type:   "webrtc_answer",
+				UserID: c.id,
+				Answer: msg.Answer,
+			})
+			c.hub.sendToClient(msg.Target, data)
+
+		case "webrtc_ice":
+			// Forward ICE candidate to target client
+			data, _ := json.Marshal(Message{
+				Type:   "webrtc_ice",
+				UserID: c.id,
+				ICE:    msg.ICE,
+			})
+			c.hub.sendToClient(msg.Target, data)
+
+		case "speaking":
+			// Broadcast speaking status
+			broadcastMsg := Message{
+				Type:     "user_speaking",
+				UserID:   c.id,
+				Username: c.username,
+				Data:     msg.Data,
+			}
+			data, _ := json.Marshal(broadcastMsg)
+			c.hub.broadcast <- data
+
+		case "chat_message":
+			// Broadcast chat message to all users
+			if msg.Username != "" {
+				// Extract message content from Data field
+				var chatMsg string
+				if msgData, ok := msg.Data.(map[string]any); ok {
+					if message, exists := msgData["message"]; exists {
+						chatMsg, _ = message.(string)
+					}
+				}
+
+				// Use timestamp from message or current time
+				timestamp := msg.Timestamp
+				if timestamp == 0 {
+					timestamp = time.Now().UnixMilli()
+				}
+
+				if chatMsg != "" {
+					//log.Printf("Chat message from %s (%s): %s", msg.Username, c.id, chatMsg)
+
+					broadcastMsg := Message{
+						Type:     "chat_message",
+						Username: msg.Username,
+						Data: map[string]any{
+							"message":   chatMsg,
+							"timestamp": timestamp,
+						},
+					}
+					data, _ := json.Marshal(broadcastMsg)
+					c.hub.broadcast <- data
+				} else {
+					//log.Printf("Empty chat message from client %s", c.id)
+				}
+			} else {
+				//log.Printf("Invalid chat message format from client %s", c.id)
+			}
+		}
+	}
+}
+
+func (c *Client) writePump() {
+	defer c.conn.Close()
+
+	for message := range c.send {
+		//log.Printf("Sending message to client %s: %s", c.id, string(message))
+		err := c.conn.WriteMessage(websocket.TextMessage, message)
+		if err != nil {
+			//log.Printf("Error sending message to client %s: %v", c.id, err)
+			return
+		}
+		//log.Printf("Message sent successfully to client %s", c.id)
+	}
+
+}
+
+func handleWebSocket(hub *Hub, w http.ResponseWriter, r *http.Request) {
+	conn, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		//log.Printf("WebSocket upgrade error: %v", err)
+		return
+	}
+
+	// Generate a simple ID (in production, use a proper UUID library)
+	clientID := generateID()
+
+	client := &Client{
+		conn: conn,
+		id:   clientID,
+		hub:  hub,
+		send: make(chan []byte, 256),
+	}
+
+	log.Println("New client connected")
+	client.hub.register <- client
+
+	// Important: Start both pumps as goroutines
+	go client.writePump()
+	go client.readPump()
+
+	//log.Printf("Started read and write pumps for client: %s", clientID)
+}
+
+func generateID() string {
+	// Simple ID generation using current time
+	return fmt.Sprintf("user_%d", time.Now().UnixNano())
+}
+
+type gzipResponseWriter struct {
+	http.ResponseWriter
+	io.Writer
+}
+
+func (g *gzipResponseWriter) Write(data []byte) (int, error) {
+	return g.Writer.Write(data)
+}
+
+func GzipMiddleware(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if !strings.Contains(r.Header.Get("Accept-Encoding"), "gzip") {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		gz := gzip.NewWriter(w)
+		defer gz.Close()
+
+		w.Header().Set("Content-Encoding", "gzip")
+		next.ServeHTTP(&gzipResponseWriter{ResponseWriter: w, Writer: gz}, r)
+	})
+}
+
+func handleUsernameCheck(hub *Hub, w http.ResponseWriter, r *http.Request) {
+	if r.Method != "POST" {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	var request struct {
+		Username string `json:"username"`
+	}
+
+	if err := json.NewDecoder(r.Body).Decode(&request); err != nil {
+		http.Error(w, "Invalid JSON", http.StatusBadRequest)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+
+	// Check if username is taken
+	isTaken := hub.isUsernameTaken(request.Username)
+
+	response := map[string]interface{}{
+		"available": !isTaken,
+		"username":  request.Username,
+	}
+
+	json.NewEncoder(w).Encode(response)
+}
+
+func main() {
+
+	var configPath = flag.String("config", "config.json", "Path to the configuration file")
+	flag.Parse()
+
+	absPath, err := filepath.Abs(*configPath)
+	if err != nil {
+		fmt.Println("Error getting absolute path:", err)
+		os.Exit(1)
+	}
+
+	fmt.Println(absPath)
+
+	*configPath = absPath
+
+	if _, err := os.Stat(*configPath); os.IsNotExist(err) {
+		fmt.Printf("Configuration file not found: %s\n", *configPath)
+		os.Exit(1)
+	}
+
+	config := LoadConfig(*configPath)
+	address := fmt.Sprintf("%s:%d", config.Server.IpAddress, config.Server.Port)
+
+	hub := newHub()
+	go hub.run()
+
+	mux := http.NewServeMux()
+
+	mux.HandleFunc("/ws", func(w http.ResponseWriter, r *http.Request) {
+		handleWebSocket(hub, w, r)
+	})
+
+	mux.HandleFunc("/check-username", func(w http.ResponseWriter, r *http.Request) {
+		handleUsernameCheck(hub, w, r)
+	})
+
+	mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		// Serve the index.html file
+		fileServer := http.FileServer(http.Dir("./static/"))
+		GzipMiddleware(fileServer).ServeHTTP(w, r)
+	})
+
+	log.Printf("Voice chat server starting on %s...\n", address)
+	log.Fatal(http.ListenAndServe(address, mux))
+}
diff --git a/static/app.js b/static/app.js
new file mode 100644
index 0000000..a929da5
--- /dev/null
+++ b/static/app.js
@@ -0,0 +1,1746 @@
+// Global state
+let ws = null;
+let localStream = null;
+let peerConnections = {};
+let currentUsername = null;
+let isMuted = false;
+let isDeafened = false;
+let isInVoiceChat = false;
+let micPermissionGranted = false;
+let mutedUsers = new Set();
+let userVolumes = new Map();
+let currentModalUserId = null;
+let isChatVisible = false;
+let messageTimeouts = new Map();
+let speakingThreshold = 10;
+let intentionalDisconnect = false;
+let gSampleRate = 96000;
+
+// WebRTC configuration
+const rtcConfiguration = {
+	iceServers: [
+		{ urls: 'stun:stun.l.google.com:19302' },
+		{ urls: 'stun:stun1.l.google.com:19302' }
+	]
+};
+
+// Initialize the application
+document.addEventListener('DOMContentLoaded', function() {
+	// Don't initialize WebSocket immediately - only when joining voice chat
+	setupEventListeners();
+	requestMicrophonePermission();
+});
+
+function setupEventListeners() {
+	const usernameInput = document.getElementById('username-input');
+	const joinChatBtn = document.getElementById('join-chat-btn');
+	const chatInput = document.getElementById('chat-input');
+	const sendBtn = document.getElementById('send-btn');
+
+	joinChatBtn.disabled = usernameInput.value.trim().length === 0;
+
+	// Enable/disable join button based on input
+	usernameInput.addEventListener('input', function() {
+		joinChatBtn.disabled = this.value.trim().length === 0;
+	});
+
+	// Allow Enter key to join voice chat
+	usernameInput.addEventListener('keypress', function(e) {
+		if (e.key === 'Enter' && this.value.trim().length > 0) {
+			joinVoiceChat();
+		}
+	});
+
+	// Enable/disable send button based on chat input
+	chatInput.addEventListener('input', function() {
+		sendBtn.disabled = this.value.trim().length === 0;
+	});
+}
+
+function initializeWebSocket() {
+	const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+	const wsUrl = `${protocol}//${window.location.host}/ws`;
+
+	console.log('🔥 Attempting to connect to WebSocket:', wsUrl);
+
+	ws = new WebSocket(wsUrl);
+
+	ws.onopen = function() {
+		updateConnectionStatus(true);
+		console.log('🔥 WebSocket connected successfully');
+	};
+
+	ws.onmessage = function(event) {
+		console.log('🔴 RAW WebSocket message received:', event.data);
+		try {
+			const message = JSON.parse(event.data);
+			console.log('🟢 PARSED WebSocket message:', message);
+
+			// Force call the handler and log every step
+			if (message.type === 'users_list') {
+				console.log('🔵 This is a users_list message with data:', message.data);
+				console.log('🔵 About to call updateUsersList...');
+				updateUsersList(message.data);
+				console.log('🔵 updateUsersList call completed');
+			} else {
+				console.log('🟠 Non-users_list message, calling handleWebSocketMessage');
+				handleWebSocketMessage(message);
+			}
+		} catch (error) {
+			console.error('❌ Error parsing WebSocket message:', error, event.data);
+		}
+	};
+
+	ws.onclose = function(event) {
+		updateConnectionStatus(false);
+		console.log('🔥 WebSocket disconnected. Code:', event.code, 'Reason:', event.reason);
+
+		// Reset client state since server has lost us
+		if (isInVoiceChat) {
+			console.log('🔄 Server connection lost, resetting client state...');
+
+			// Clean up peer connections
+			Object.values(peerConnections).forEach(pc => pc.close());
+			peerConnections = {};
+
+			// Remove all remote audio elements
+			document.getElementById('audio-container').innerHTML = '';
+
+			// Clear user list
+			document.getElementById('users-list').innerHTML = '<div class="no-users"></div>';
+
+			// Reset voice chat state but keep username for reconnection
+			const savedUsername = currentUsername;
+			isInVoiceChat = false;
+
+			// Attempt to reconnect and rejoin automatically
+			if (!intentionalDisconnect) {
+				console.log('🔄 Attempting to reconnect and rejoin voice chat...');
+				setTimeout(() => {
+					if (savedUsername && !intentionalDisconnect) {
+						// Reset currentUsername for rejoin process
+						currentUsername = savedUsername;
+						initializeWebSocket();
+
+						// Wait for connection then rejoin
+						const rejoinInterval = setInterval(() => {
+							if (ws && ws.readyState === WebSocket.OPEN) {
+								clearInterval(rejoinInterval);
+								console.log('🔄 Reconnected, rejoining voice chat...');
+
+								// Verify we still have microphone access
+								if (!localStream || localStream.getTracks().length === 0 || localStream.getAudioTracks().every(track => track.readyState !== 'live')) {
+									console.log('🔄 Local stream lost or inactive, requesting microphone again...');
+
+									// Add timeout to microphone request
+									const micPromise = requestMicrophonePermission();
+									const micTimeoutPromise = new Promise((resolve, reject) => {
+										setTimeout(() => {
+											console.log('🔄 Microphone request timed out after 8 seconds');
+											reject(new Error('Microphone request timeout'));
+										}, 8000);
+									});
+
+									Promise.race([micPromise, micTimeoutPromise]).then(() => {
+										console.log('🔄 Microphone re-acquired, sending username to rejoin...');
+										// Send username to rejoin after mic is ready
+										ws.send(JSON.stringify({
+											type: 'set_username',
+											data: savedUsername
+										}));
+									}).catch(error => {
+										console.error('🔄 Failed to re-acquire microphone or timed out:', error);
+										// Still try to rejoin without mic
+										console.log('🔄 Proceeding with rejoin without microphone...');
+										ws.send(JSON.stringify({
+											type: 'set_username',
+											data: savedUsername
+										}));
+									});
+								} else {
+									console.log('🔄 Local stream is still active, checking for browser-muted tracks...');
+
+									// Check for and fix browser-muted tracks with timeout
+									const fixTracksPromise = fixBrowserMutedTracks();
+									const timeoutPromise = new Promise((resolve) => {
+										setTimeout(() => {
+											console.log('🔄 fixBrowserMutedTracks timed out after 5 seconds, proceeding anyway...');
+											resolve(false);
+										}, 5000);
+									});
+
+									Promise.race([fixTracksPromise, timeoutPromise]).then(fixedMutedTracks => {
+										console.log('🔄 Fix tracks completed or timed out, result:', fixedMutedTracks);
+
+										if (!fixedMutedTracks) {
+											// Ensure tracks are enabled according to mute state
+											if (localStream) {
+												localStream.getAudioTracks().forEach(track => {
+													track.enabled = !isMuted;
+													console.log('🔄 Track enabled state:', track.enabled, 'muted:', isMuted, 'browser-muted:', track.muted);
+												});
+											}
+										}
+
+										// Send username to rejoin
+										console.log('🔄 Sending rejoin request...');
+										ws.send(JSON.stringify({
+											type: 'set_username',
+											data: savedUsername
+										}));
+									}).catch(error => {
+										console.error('🔄 Error in fix tracks process:', error);
+										// Still try to rejoin even if fixing failed
+										console.log('🔄 Proceeding with rejoin despite error...');
+										ws.send(JSON.stringify({
+											type: 'set_username',
+											data: savedUsername
+										}));
+									});
+								}
+							}
+						}, 100);
+					}
+				}, 2000); // Wait 2 seconds before attempting reconnect
+			}
+		} else {
+			// Normal reconnection for non-voice users
+			if (!intentionalDisconnect) {
+				console.log('🔄 Attempting to reconnect WebSocket...');
+				setTimeout(initializeWebSocket, 3000);
+			}
+		}
+
+		if (intentionalDisconnect) {
+			console.log('🔴 Intentional disconnect, not reconnecting');
+		}
+	};
+
+	ws.onerror = function(error) {
+		console.error('🔥 WebSocket error:', error);
+		updateConnectionStatus(false);
+	};
+}
+
+function handleWebSocketMessage(message) {
+	console.log('Received WebSocket message:', message);
+
+	switch (message.type) {
+		case 'users_list':
+			console.log('Updating users list with:', message.data);
+			updateUsersList(message.data);
+			break;
+		case 'user_speaking':
+			console.log('User speaking update:', message.userId, message.data);
+			updateSpeakingStatus(message.userId, message.data);
+			break;
+		case 'username_error':
+			console.log('Username error:', message.error);
+			handleUsernameError(message.error);
+			break;
+		case 'chat_message':
+			console.log('Chat message received:', message);
+			handleChatMessage(message);
+			break;
+		case 'webrtc_offer':
+			handleWebRTCOffer(message);
+			break;
+		case 'webrtc_answer':
+			handleWebRTCAnswer(message);
+			break;
+		case 'webrtc_ice':
+			handleWebRTCIce(message);
+			break;
+		default:
+			console.log('Unknown message type:', message.type);
+	}
+}
+
+function updateConnectionStatus(connected) {
+	const sidebar = document.querySelector('.sidebar');
+
+	if (connected) {
+		sidebar.classList.add('visible');
+		// Remove any reconnection notices
+		removeReconnectionNotice();
+	} else {
+		sidebar.classList.remove('visible');
+		// Show reconnection notice if we were in voice chat
+		if (isInVoiceChat && !intentionalDisconnect) {
+			showReconnectionNotice();
+		}
+	}
+}
+
+function showReconnectionNotice() {
+	// Remove existing notice if any
+	removeReconnectionNotice();
+
+	const notice = document.createElement('div');
+	notice.id = 'reconnection-notice';
+	notice.className = 'reconnection-notice';
+	notice.innerHTML = `
+		<div class="notice-content">
+			<div class="spinner"></div>
+			<div class="notice-text">
+				<h3>Connection Lost</h3>
+				<p>Reconnecting to voice chat...</p>
+			</div>
+		</div>
+	`;
+
+	document.body.appendChild(notice);
+}
+
+function removeReconnectionNotice() {
+	const notice = document.getElementById('reconnection-notice');
+	if (notice) {
+		notice.remove();
+	}
+}
+
+async function requestMicrophonePermission() {
+	const micStatus = document.getElementById('mic-status');
+
+	try {
+		// If we already have a stream but it's inactive, stop it first
+		if (localStream) {
+			localStream.getTracks().forEach(track => track.stop());
+		}
+
+		const stream = await navigator.mediaDevices.getUserMedia({
+			audio: {
+				echoCancellation: true,
+				noiseSuppression: true,
+				sampleRate: gSampleRate || 44100, // Use global sample rate if set, otherwise default to 44100
+			}
+		});
+
+		localStream = stream;
+		micPermissionGranted = true;
+
+		localStream.getAudioTracks().forEach(track => {
+			track.enabled = !isMuted; // Respect current mute state
+			// IMPORTANT: Also unmute at browser level
+			if (track.muted) {
+				console.log('🎤 Track was browser-muted, attempting to unmute...');
+				// The track.muted property is read-only, but we can try to work around it
+			}
+			console.log('🎤 Audio track setup - enabled:', track.enabled, 'browser-muted:', track.muted, 'app-muted:', isMuted);
+		});
+
+		if (micStatus) {
+			micStatus.textContent = '✅ Microphone access granted';
+			micStatus.className = 'mic-status granted';
+
+			// Hide the entire microphone section
+			document.getElementById('mic-section').style.display = 'none';
+		}
+
+		setupAudioAnalysis();
+
+		console.log('🎤 Microphone permission granted and stream ready');
+		return Promise.resolve();
+
+	} catch (error) {
+		console.error('Microphone permission denied:', error);
+		if (micStatus) {
+			micStatus.textContent = '❌ Microphone access denied. Please refresh and allow microphone access.';
+			micStatus.className = 'mic-status denied';
+		}
+		return Promise.reject(error);
+	}
+}
+
+function setupAudioAnalysis() {
+	if (!localStream) {
+		console.error('🎤 Cannot setup audio analysis - no local stream');
+		return;
+	}
+
+	console.log('🎤 Setting up audio analysis...');
+
+	// Check if tracks are active
+	const audioTracks = localStream.getAudioTracks();
+	console.log('🎤 Audio tracks:', audioTracks.length, 'active tracks:', audioTracks.filter(t => t.readyState === 'live').length);
+
+	if (audioTracks.length === 0) {
+		console.error('🎤 No audio tracks in local stream!');
+		return;
+	}
+
+	try {
+		const audioContext = new window.AudioContext();
+		console.log('🎤 AudioContext created, state:', audioContext.state);
+
+		const analyser = audioContext.createAnalyser();
+		const microphone = audioContext.createMediaStreamSource(localStream);
+
+		analyser.fftSize = 512;
+		analyser.smoothingTimeConstant = 0.3;
+		const bufferLength = analyser.frequencyBinCount;
+		const dataArray = new Uint8Array(bufferLength);
+
+		microphone.connect(analyser);
+		console.log('🎤 Audio analysis connected successfully');
+
+		let speakingTimeout;
+		let isSpeaking = false;
+
+		function checkAudioLevel() {
+			analyser.getByteFrequencyData(dataArray);
+
+			// Calculate average volume
+			let sum = 0;
+			for (let i = 0; i < bufferLength; i++) {
+				sum += dataArray[i];
+			}
+			const average = sum / bufferLength;
+
+			// Debug audio levels occasionally
+			if (Math.random() < 0.01) { // 1% of the time
+				console.log('🎤 Audio level:', average, 'threshold:', speakingThreshold, 'muted:', isMuted, 'in voice:', isInVoiceChat);
+			}
+
+			if (average > speakingThreshold && !isMuted && isInVoiceChat) {
+				if (!isSpeaking) {
+					isSpeaking = true;
+					console.log('🎤 Started speaking - audio level:', average);
+					sendSpeakingStatus(true);
+				}
+				clearTimeout(speakingTimeout);
+				speakingTimeout = setTimeout(() => {
+					if (isSpeaking) {
+						isSpeaking = false;
+						console.log('🎤 Stopped speaking');
+						sendSpeakingStatus(false);
+					}
+				}, 1000);
+			}
+
+			requestAnimationFrame(checkAudioLevel);
+		}
+
+		checkAudioLevel();
+	} catch (error) {
+		console.error('🎤 Error setting up audio analysis:', error);
+	}
+}
+
+function sendSpeakingStatus(speaking) {
+	console.log('Sending speaking status:', speaking);
+	if (ws && ws.readyState === WebSocket.OPEN) {
+		ws.send(JSON.stringify({
+			type: 'speaking',
+			data: speaking
+		}));
+		console.log('Speaking status sent successfully');
+	} else {
+		console.error('Cannot send speaking status - WebSocket not connected');
+	}
+}
+
+async function checkUsernameAvailability(username) {
+	try {
+		const response = await fetch('/check-username', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({ username: username })
+		});
+
+		if (!response.ok) {
+			throw new Error('Network response was not ok');
+		}
+
+		const data = await response.json();
+		return data.available;
+	} catch (error) {
+		console.error('Error checking username:', error);
+		// If check fails, allow attempt (fallback to old behavior)
+		return true;
+	}
+}
+
+async function joinVoiceChat() {
+	// Get username from input
+	const usernameInput = document.getElementById('username-input');
+	const joinBtn = document.getElementById('join-chat-btn');
+	const username = usernameInput.value.trim();
+	intentionalDisconnect = false; // Reset disconnect flag
+
+	if (!username) {
+		alert('Please enter a username.');
+		return;
+	}
+
+	if (!micPermissionGranted) {
+		alert('Please grant microphone permission first.');
+		return;
+	}
+
+	// Show connecting state
+	joinBtn.disabled = true;
+	joinBtn.textContent = '🔄 Validating...';
+
+	// Check username availability FIRST
+	const isAvailable = await checkUsernameAvailability(username);
+
+	// print debug info for this varialbe
+	console.log(isAvailable)
+
+	if (!isAvailable) {
+		alert(`Username "${username}" is already taken. Please choose a different username.`);
+		joinBtn.disabled = false;
+		joinBtn.textContent = '📞 Join Voice Chat';
+		usernameInput.focus();
+		usernameInput.select();
+		return;
+	}
+
+	// Username is available, proceed with connection
+	joinBtn.textContent = '🔄 Connecting...';
+
+	// Set the username
+	currentUsername = username;
+	console.log('Joining voice chat with username:', currentUsername);
+
+	// Connect to WebSocket
+	if (!ws || ws.readyState !== WebSocket.OPEN) {
+		console.log('Connecting to WebSocket for voice chat...');
+		initializeWebSocket();
+
+		// Wait for connection before proceeding
+		const maxWait = 5000; // 5 seconds
+		const startTime = Date.now();
+
+		while ((!ws || ws.readyState !== WebSocket.OPEN) && (Date.now() - startTime) < maxWait) {
+			await new Promise(resolve => setTimeout(resolve, 100));
+		}
+
+		if (!ws || ws.readyState !== WebSocket.OPEN) {
+			alert('Failed to connect to server. Please try again.');
+			// Reset button state
+			joinBtn.disabled = false;
+			joinBtn.textContent = '📞 Join Voice Chat';
+			return;
+		}
+	}
+
+	// Send username to server
+	console.log('Sending username to server:', currentUsername);
+	ws.send(JSON.stringify({
+		type: 'set_username',
+		data: currentUsername
+	}));
+
+	// Note: UI updates will happen when server responds with success or error
+}
+
+function updateUsersList(users) {
+	console.log('🟡 updateUsersList called with:', users);
+
+	const usersList = document.getElementById('users-list');
+	// const userCount = document.getElementById('user-count'); // Commented out since header is commented
+
+	// Track previous users to detect joins/leaves
+	const currentUserIds = users ? users.map(u => u.id) : [];
+	const previousUserIds = Object.keys(window.previousUsers || {});
+
+	// Detect new users (joins)
+	if (window.previousUsers && isInVoiceChat) {
+		const newUsers = users ? users.filter(u => !previousUserIds.includes(u.id) && u.username !== currentUsername) : [];
+		newUsers.forEach(user => {
+			showJoinAlert(user.username);
+		});
+
+		// Detect users who left
+		const leftUserIds = previousUserIds.filter(id => !currentUserIds.includes(id));
+		leftUserIds.forEach(userId => {
+			const leftUser = window.previousUsers[userId];
+			if (leftUser && leftUser.username !== currentUsername) {
+				showLeaveAlert(leftUser.username);
+			}
+		});
+	}
+
+	// Store current users for next comparison
+	window.previousUsers = {};
+	if (users) {
+		users.forEach(user => {
+			window.previousUsers[user.id] = user;
+		});
+	}
+
+	// If this is the first time we're getting a users list after joining,
+	// it means our username was accepted
+	if (currentUsername && !isInVoiceChat) {
+		console.log('Username accepted, completing join process');
+
+		// Hide username section and show voice controls in sidebar
+		document.getElementById('username-section').style.display = 'none';
+		document.getElementById('voice-controls-sidebar').style.display = 'block';
+		document.getElementById('chat-section').style.display = 'flex';
+		isInVoiceChat = true;
+
+		// Start peer connection health monitoring
+		startPeerHealthCheck();
+
+		console.log('Successfully joined voice chat with username:', currentUsername);
+	}
+
+	// Update user count if element exists (commented out in HTML)
+	// if (userCount) {
+	//     userCount.textContent = users ? users.length : 0;
+	// }
+
+	if (!users || users.length === 0) {
+		if (usersList) {
+			usersList.innerHTML = '<div class="no-users"></div>';
+		}
+		return;
+	}
+
+	const userCardsHtml = users.map((user) => {
+		const initial = user.username ? user.username.charAt(0).toUpperCase() : '?';
+		const isCurrentUser = user.username === currentUsername;
+		const userClass = isCurrentUser ? 'user-card current-user-card' : 'user-card';
+		const isMuted = mutedUsers.has(user.id);
+		const clickHandler = isCurrentUser ? `onclick="openSelfModal()"` : `onclick="openUserModal('${user.id}', '${user.username}')"`;
+		const muteButtonHtml = !isCurrentUser ? `
+            <button class="mute-user-btn" onclick="event.stopPropagation(); muteUser('${user.id}')" title="${isMuted ? 'Unmute user' : 'Mute user'}">
+                ${isMuted ? '🔇' : '🔊'}
+            </button>
+        ` : '';
+
+		return `
+            <div class="${userClass}" data-user-id="${user.id}" ${clickHandler}>
+                <div class="user-avatar">${initial}</div>
+                <div class="user-info">
+                    <div class="user-name">${user.username || 'Unknown'}</div>
+                </div>
+                ${muteButtonHtml}
+            </div>
+        `;
+	}).join('');
+
+	if (usersList) {
+		usersList.innerHTML = userCardsHtml;
+
+		// Create peer connections for users if we're in voice chat
+		if (isInVoiceChat) {
+			console.log('🔗 Setting up peer connections for voice chat...');
+
+			// First, check which users we should have connections to but don't
+			const expectedPeers = users.filter(user => user.username !== currentUsername).map(user => user.id);
+			const existingPeers = Object.keys(peerConnections);
+			const missingPeers = expectedPeers.filter(id => !existingPeers.includes(id));
+			const extraPeers = existingPeers.filter(id => !expectedPeers.includes(id));
+
+			console.log('🔗 Expected peers:', expectedPeers);
+			console.log('🔗 Existing peers:', existingPeers);
+			console.log('🔗 Missing peers:', missingPeers);
+			console.log('🔗 Extra peers:', extraPeers);
+
+			// Clean up connections to users who are no longer in the list
+			extraPeers.forEach(userId => {
+				console.log('🔗 Cleaning up connection to user who left:', userId);
+				cleanupPeerConnection(userId);
+			});
+
+			// Create connections to missing users
+			if (missingPeers.length > 0) {
+				console.log('🔗 Creating connections to missing peers:', missingPeers);
+				setTimeout(() => {
+					missingPeers.forEach(userId => {
+						console.log('🔗 Creating peer connection for missing user:', userId);
+						createPeerConnection(userId, true);
+					});
+				}, 500);
+
+				// Also set up a retry mechanism in case some connections fail
+				setTimeout(() => {
+					retryMissingPeerConnections(expectedPeers);
+				}, 3000);
+			}
+		}
+	}
+}
+
+function showJoinAlert(username) {
+	if (!isInVoiceChat) return;
+
+	console.log('👋 User joined:', username);
+	addChatAlert(`${username} joined the chat`, 'join');
+}
+
+function showLeaveAlert(username) {
+	if (!isInVoiceChat) return;
+
+	console.log('👋 User left:', username);
+	addChatAlert(`${username} left the chat`, 'leave');
+}
+
+function addChatAlert(message, type) {
+	const chatMessages = document.getElementById('chat-messages');
+	if (!chatMessages) return;
+
+	// Create alert element
+	const alertEl = document.createElement('div');
+	alertEl.className = `chat-alert chat-alert-${type}`;
+
+	const alertId = `alert_${Date.now()}_${Math.random()}`;
+	alertEl.id = alertId;
+
+	alertEl.innerHTML = `
+		<div class="alert-content">
+			<span class="alert-text">${escapeHtml(message)}</span>
+			<span class="alert-time">${formatTime(Date.now())}</span>
+		</div>
+	`;
+
+	// Add to chat
+	chatMessages.appendChild(alertEl);
+
+	// Scroll to bottom
+	chatMessages.scrollTop = chatMessages.scrollHeight;
+
+	// No auto-removal - alerts persist
+
+	console.log('📢 Added chat alert:', message);
+}
+
+// Function to retry peer connections that might have failed or never started
+function retryMissingPeerConnections(expectedPeerIds) {
+	if (!isInVoiceChat) return;
+
+	const existingPeers = Object.keys(peerConnections);
+	const stillMissingPeers = expectedPeerIds.filter(id => !existingPeers.includes(id));
+	const failedPeers = expectedPeerIds.filter(id => {
+		const pc = peerConnections[id];
+		return pc && (pc.connectionState === 'failed' || pc.connectionState === 'disconnected');
+	});
+
+	const peersToFix = [...new Set([...stillMissingPeers, ...failedPeers])];
+
+	if (peersToFix.length > 0) {
+		console.log('🔗 Retrying peer connections for:', peersToFix);
+
+		peersToFix.forEach(userId => {
+			// Clean up any existing failed connection
+			if (peerConnections[userId]) {
+				console.log('🔗 Cleaning up failed connection before retry:', userId);
+				cleanupPeerConnection(userId);
+			}
+
+			// Wait a bit then retry
+			setTimeout(() => {
+				console.log('🔗 Retrying peer connection for:', userId);
+				createPeerConnection(userId, true);
+			}, Math.random() * 1000); // Random delay to avoid simultaneous attempts
+		});
+	} else {
+		console.log('🔗 All expected peer connections are healthy');
+	}
+}
+
+// Periodic health check for peer connections
+let peerHealthCheckInterval = null;
+
+function startPeerHealthCheck() {
+	if (peerHealthCheckInterval) {
+		clearInterval(peerHealthCheckInterval);
+	}
+
+	peerHealthCheckInterval = setInterval(() => {
+		if (!isInVoiceChat) {
+			stopPeerHealthCheck();
+			return;
+		}
+
+		console.log('🔗 Running peer connection health check...');
+
+		// Get current user list from DOM
+		const userCards = document.querySelectorAll('.user-card:not(.current-user-card)');
+		const expectedPeerIds = Array.from(userCards).map(card => card.dataset.userId);
+
+		if (expectedPeerIds.length > 0) {
+			retryMissingPeerConnections(expectedPeerIds);
+		}
+	}, 10000); // Check every 10 seconds
+}
+
+function stopPeerHealthCheck() {
+	if (peerHealthCheckInterval) {
+		clearInterval(peerHealthCheckInterval);
+		peerHealthCheckInterval = null;
+	}
+}
+
+// Function to fix browser-muted tracks
+async function fixBrowserMutedTracks() {
+	if (!localStream) return false;
+
+	const audioTracks = localStream.getAudioTracks();
+	const hasMutedTracks = audioTracks.some(track => track.muted);
+
+	console.log('🎤 Checking tracks - total:', audioTracks.length, 'muted:', audioTracks.filter(t => t.muted).length);
+
+	if (hasMutedTracks) {
+		console.log('🎤 Detected browser-muted tracks, creating fresh stream...');
+
+		try {
+			// Stop current tracks completely
+			audioTracks.forEach(track => {
+				console.log('🎤 Stopping track:', track.id, 'state:', track.readyState);
+				track.stop();
+			});
+
+			// Clear the old stream reference
+			localStream = null;
+
+			// Wait a moment for cleanup
+			await new Promise(resolve => setTimeout(resolve, 100));
+
+			// Get completely fresh stream with new constraints
+			const newStream = await navigator.mediaDevices.getUserMedia({
+				audio: {
+					echoCancellation: true,
+					noiseSuppression: true,
+					sampleRate: gSampleRate || 44100, // Use global sample rate if set, otherwise default to 44100
+					// Add timestamp to force new stream
+					deviceId: 'default'
+				}
+			});
+
+			localStream = newStream;
+
+			// Set up the new tracks
+			localStream.getAudioTracks().forEach(track => {
+				track.enabled = !isMuted;
+				console.log('🎤 Fresh track setup - id:', track.id, 'enabled:', track.enabled, 'browser-muted:', track.muted);
+			});
+
+			// Restart audio analysis with new stream
+			setupAudioAnalysis();
+
+			// Update existing peer connections with new stream
+			if (isInVoiceChat && Object.keys(peerConnections).length > 0) {
+				console.log('🎤 Updating', Object.keys(peerConnections).length, 'peer connections with fresh stream...');
+
+				for (const [userId, peerConnection] of Object.entries(peerConnections)) {
+					try {
+						const senders = peerConnection.getSenders();
+						console.log('🎤 Peer', userId, 'has', senders.length, 'senders');
+
+						for (const sender of senders) {
+							if (sender.track && sender.track.kind === 'audio') {
+								const newTrack = localStream.getAudioTracks()[0];
+								if (newTrack) {
+									await sender.replaceTrack(newTrack);
+									console.log('🎤 Replaced track for peer:', userId);
+								}
+							}
+						}
+					} catch (error) {
+						console.error('🎤 Error updating peer connection for', userId, ':', error);
+						// If replacing track fails, recreate the peer connection
+						console.log('🎤 Recreating peer connection for', userId);
+						cleanupPeerConnection(userId);
+						setTimeout(() => {
+							createPeerConnection(userId, true);
+						}, 500);
+					}
+				}
+			}
+
+			console.log('🎤 Successfully fixed browser-muted tracks');
+			return true;
+		} catch (error) {
+			console.error('🎤 Failed to fix browser-muted tracks:', error);
+			return false;
+		}
+	}
+
+	console.log('🎤 No browser-muted tracks found');
+	return false;
+}
+
+function updateSpeakingStatus(userId, isSpeaking) {
+	console.log('Updating speaking status for user:', userId, 'speaking:', isSpeaking);
+	const userCard = document.querySelector(`[data-user-id="${userId}"]`);
+	console.log('Found user card:', userCard);
+
+	if (userCard) {
+		if (isSpeaking) {
+			console.log('Adding speaking class to user card');
+			userCard.classList.add('speaking');
+		} else {
+			console.log('Removing speaking class from user card');
+			userCard.classList.remove('speaking');
+		}
+	} else {
+		console.error('User card not found for userId:', userId);
+		const allCards = document.querySelectorAll('.user-card');
+		console.log('All user cards:', Array.from(allCards).map(card => ({
+			id: card.dataset.userId,
+			element: card
+		})));
+	}
+}
+
+function toggleMute() {
+	if (!localStream) return;
+
+	const audioTracks = localStream.getAudioTracks();
+	const muteBtn = document.getElementById('toggle-mute-btn');
+
+	isMuted = !isMuted;
+
+	audioTracks.forEach(track => {
+		track.enabled = !isMuted;
+	});
+
+	if (isMuted) {
+		muteBtn.innerHTML = '🎤';
+		muteBtn.style.textDecoration = 'line-through';
+		muteBtn.title = 'Unmute microphone';
+		muteBtn.classList.remove('unmuted');
+		muteBtn.classList.add('muted');
+	} else {
+		muteBtn.innerHTML = '🎤';
+		muteBtn.style.textDecoration = 'none';
+		muteBtn.title = 'Mute microphone';
+		muteBtn.classList.remove('muted');
+		muteBtn.classList.add('unmuted');
+	}
+
+	console.log('Mute toggled:', isMuted);
+}
+
+function toggleDeafen() {
+	isDeafened = !isDeafened;
+	const deafenBtn = document.getElementById('toggle-deafen-btn');
+
+	// Mute/unmute all remote audio elements
+	const audioElements = document.querySelectorAll('#audio-container audio');
+	audioElements.forEach(audio => {
+		audio.muted = isDeafened;
+	});
+
+	if (isDeafened) {
+		deafenBtn.innerHTML = '🔊';
+		deafenBtn.style.textDecoration = 'line-through';
+		deafenBtn.title = 'Undeafen (enable incoming audio)';
+		deafenBtn.classList.add('muted');
+	} else {
+		deafenBtn.innerHTML = '🔊';
+		deafenBtn.style.textDecoration = 'none';
+		deafenBtn.title = 'Deafen (mute all incoming audio)';
+		deafenBtn.classList.remove('muted');
+	}
+
+	console.log('Deafen toggled:', isDeafened);
+}
+
+function leaveVoiceChat() {
+	isInVoiceChat = false;
+
+	// Stop peer health monitoring
+	stopPeerHealthCheck();
+
+	// Close all peer connections
+	Object.values(peerConnections).forEach(pc => pc.close());
+	peerConnections = {};
+
+	// Remove all remote audio elements
+	document.getElementById('audio-container').innerHTML = '';
+
+	// Clear muted users list and volumes
+	mutedUsers.clear();
+	userVolumes.clear();
+
+	// Close any open user modal
+	closeUserModal();
+
+	intentionalDisconnect = true; // Set flag to prevent reconnection
+
+	// Clear chat messages and timeouts
+	clearAllChatMessages();
+
+	// Disconnect from WebSocket to remove from user list
+	if (ws && ws.readyState === WebSocket.OPEN) {
+		console.log('Closing WebSocket connection to leave voice chat');
+		ws.close();
+	}
+
+	// Update connection status
+	updateConnectionStatus(false);
+
+	// Show username section and hide voice controls
+	document.getElementById('username-section').style.display = 'block';
+	document.getElementById('voice-controls-sidebar').style.display = 'none';
+	document.getElementById('chat-section').style.display = 'none';
+
+	// Reset the join button properly
+	const joinBtn = document.getElementById('join-chat-btn');
+	joinBtn.disabled = false;
+	joinBtn.textContent = 'Join Voice Chat'; // Fix: Reset button text
+
+	// Clear the user list since we're disconnected
+	document.getElementById('users-list').innerHTML = '<div class="no-users"></div>';
+
+	console.log('Left voice chat and disconnected from server');
+}
+
+function handleChatInput(event) {
+	const textarea = event.target;
+
+	// Auto-resize textarea
+	textarea.style.height = 'auto';
+	textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'; // Max 120px height
+
+	// Enable/disable send button
+	document.getElementById('send-btn').disabled = textarea.value.trim().length === 0;
+}
+
+function handleChatKeyPress(event) {
+	if (event.key === 'Enter' && !event.shiftKey) {
+		event.preventDefault();
+		sendChatMessage();
+	}
+	// Shift+Enter allows multiline - do nothing, let default behavior happen
+}
+
+function sendChatMessage() {
+	const chatInput = document.getElementById('chat-input');
+	const message = chatInput.value.trim();
+
+	if (!message || !ws || ws.readyState !== WebSocket.OPEN) {
+		return;
+	}
+
+	// Send message to server (newlines are preserved in the string)
+	ws.send(JSON.stringify({
+		type: 'chat_message',
+		username: currentUsername,
+		data: {
+			message: message // This preserves \n characters
+		},
+		timestamp: Date.now()
+	}));
+
+	// Clear input and reset height
+	chatInput.value = '';
+	chatInput.style.height = 'auto';
+	document.getElementById('send-btn').disabled = true;
+
+	console.log('Sent chat message:', message);
+}
+
+function handleChatMessage(data) {
+	const chatMessages = document.getElementById('chat-messages');
+	const isOwnMessage = data.username === currentUsername;
+
+	// Extract message and timestamp from data
+	let message = '';
+	let timestamp = Date.now();
+
+	if (data.data && typeof data.data === 'object') {
+		message = data.data.message || '';
+		timestamp = data.data.timestamp || Date.now();
+	}
+
+	if (!message) {
+		console.log('Received empty chat message');
+		return;
+	}
+
+	// Remove welcome message if it exists
+	const welcomeMsg = chatMessages.querySelector('.chat-welcome');
+	if (welcomeMsg) {
+		welcomeMsg.remove();
+	}
+
+	// Create message element
+	const messageEl = document.createElement('div');
+	messageEl.className = `chat-message ${isOwnMessage ? 'own' : 'other'}`;
+
+	const messageId = `msg_${Date.now()}_${Math.random()}`;
+	messageEl.id = messageId;
+
+	messageEl.innerHTML = `
+<div class="chat-message-header">
+	<div class="username">${isOwnMessage ? 'You' : data.username}</div>
+	<div class="timestamp">${formatTime(timestamp)}</div>
+</div>
+<div class="content">${escapeHtml(message)}</div>
+`;
+
+	// Add to chat
+	chatMessages.appendChild(messageEl);
+
+	// Scroll to bottom
+	chatMessages.scrollTop = chatMessages.scrollHeight;
+
+	console.log('Added chat message from:', data.username, 'message:', message);
+}
+
+function deleteMessage(messageId) {
+	const messageEl = document.getElementById(messageId);
+	if (messageEl) {
+		// Add fading animation
+		messageEl.classList.add('fading');
+
+		// Remove after animation
+		setTimeout(() => {
+			if (messageEl.parentNode) {
+				messageEl.remove();
+			}
+			messageTimeouts.delete(messageId);
+		}, 2000);
+	}
+}
+
+function clearAllChatMessages() {
+	// Clear all timeouts
+	messageTimeouts.forEach(timeoutId => clearTimeout(timeoutId));
+	messageTimeouts.clear();
+}
+
+function escapeHtml(text) {
+	const div = document.createElement('div');
+	div.textContent = text;
+	let html = div.innerHTML.replace(/\n/g, '<br>');
+
+	// Process URLs for embedding
+	html = processMediaEmbeds(html);
+
+	return html;
+}
+
+function processMediaEmbeds(text) {
+	// GIF embedding - detects .gif URLs
+	text = text.replace(/(https?:\/\/[^\s]+\.gif(?:\?[^\s]*)?)/gi,
+		'<img src="$1" alt="GIF" class="embedded-gif" loading="lazy">');
+
+	// Image embedding - detects common image formats
+	text = text.replace(/(https?:\/\/[^\s]+\.(?:jpg|jpeg|png|webp)(?:\?[^\s]*)?)/gi,
+		'<img src="$1" alt="Image" class="embedded-image" loading="lazy">');
+
+	// YouTube embedding
+	text = text.replace(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/gi,
+		'<iframe class="embedded-video" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');
+
+	// Video file embedding
+	text = text.replace(/(https?:\/\/[^\s]+\.(?:mp4|webm|ogg)(?:\?[^\s]*)?)/gi,
+		'<video class="embedded-video" controls preload="metadata"><source src="$1" type="video/mp4">Your browser does not support the video tag.</video>');
+
+	return text;
+}
+
+function formatTime(timestamp) {
+	const date = new Date(timestamp);
+	return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+function muteUser(userId) {
+	if (mutedUsers.has(userId)) {
+		mutedUsers.delete(userId);
+	} else {
+		mutedUsers.add(userId);
+	}
+
+	// Update the audio element
+	const audioElement = document.getElementById(`audio-${userId}`);
+	if (audioElement) {
+		audioElement.muted = mutedUsers.has(userId);
+	}
+
+	// Update the button text
+	updateUserMuteButton(userId);
+
+	console.log('User', userId, mutedUsers.has(userId) ? 'muted' : 'unmuted');
+}
+
+function updateUserMuteButton(userId) {
+	const muteBtn = document.querySelector(`[data-user-id="${userId}"] .mute-user-btn`);
+	if (muteBtn) {
+		const isMuted = mutedUsers.has(userId);
+		muteBtn.textContent = isMuted ? '🔇' : '🔊';
+		muteBtn.title = isMuted ? 'Unmute user' : 'Mute user';
+	}
+}
+
+async function createPeerConnection(remoteUserId, isInitiator = false) {
+	if (peerConnections[remoteUserId]) {
+		console.log('🔗 Peer connection already exists for:', remoteUserId);
+		return peerConnections[remoteUserId];
+	}
+
+	console.log('🔗 Creating new peer connection for:', remoteUserId, 'as initiator:', isInitiator);
+
+	const peerConnection = new RTCPeerConnection(rtcConfiguration);
+	peerConnections[remoteUserId] = peerConnection;
+
+	// Add local stream to peer connection
+	if (localStream) {
+		console.log('🔗 Adding local stream tracks to peer connection');
+		localStream.getTracks().forEach(track => {
+			console.log('🔗 Adding track:', track.kind, 'enabled:', track.enabled);
+			peerConnection.addTrack(track, localStream);
+		});
+	} else {
+		console.error('🔗 No local stream available for peer connection!');
+	}
+
+	// Handle incoming remote stream
+	peerConnection.ontrack = (event) => {
+		console.log('🔗 Received remote stream from', remoteUserId);
+		const remoteStream = event.streams[0];
+		addRemoteAudio(remoteUserId, remoteStream);
+	};
+
+	// Handle ICE candidates
+	peerConnection.onicecandidate = (event) => {
+		if (event.candidate && ws && ws.readyState === WebSocket.OPEN) {
+			console.log('🔗 Sending ICE candidate to:', remoteUserId);
+			ws.send(JSON.stringify({
+				type: 'webrtc_ice',
+				target: remoteUserId,
+				ice: event.candidate
+			}));
+		}
+	};
+
+	// Handle connection state changes
+	peerConnection.onconnectionstatechange = () => {
+		console.log(`🔗 Connection state with ${remoteUserId}:`, peerConnection.connectionState);
+		if (peerConnection.connectionState === 'failed' ||
+			peerConnection.connectionState === 'disconnected') {
+			console.log('🔗 Cleaning up failed connection for:', remoteUserId);
+			cleanupPeerConnection(remoteUserId);
+		}
+	};
+
+	// If we're the initiator, create an offer
+	if (isInitiator) {
+		try {
+			console.log('🔗 Creating offer for:', remoteUserId);
+			const offer = await peerConnection.createOffer({
+				offerToReceiveAudio: true,
+				offerToReceiveVideo: false
+			});
+			await peerConnection.setLocalDescription(offer);
+
+			if (ws && ws.readyState === WebSocket.OPEN) {
+				console.log('🔗 Sending offer to:', remoteUserId);
+				ws.send(JSON.stringify({
+					type: 'webrtc_offer',
+					target: remoteUserId,
+					offer: offer
+				}));
+			} else {
+				console.error('🔗 Cannot send offer - WebSocket not open');
+			}
+		} catch (error) {
+			console.error('🔗 Error creating offer:', error);
+		}
+	}
+
+	return peerConnection;
+}
+
+async function handleWebRTCOffer(message) {
+	const remoteUserId = message.userId;
+	const offer = message.offer;
+
+	try {
+		const peerConnection = await createPeerConnection(remoteUserId, false);
+		await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
+
+		const answer = await peerConnection.createAnswer();
+		await peerConnection.setLocalDescription(answer);
+
+		if (ws && ws.readyState === WebSocket.OPEN) {
+			ws.send(JSON.stringify({
+				type: 'webrtc_answer',
+				target: remoteUserId,
+				answer: answer
+			}));
+		}
+	} catch (error) {
+		console.error('Error handling WebRTC offer:', error);
+	}
+}
+
+async function handleWebRTCAnswer(message) {
+	const remoteUserId = message.userId;
+	const answer = message.answer;
+
+	try {
+		const peerConnection = peerConnections[remoteUserId];
+		if (peerConnection) {
+			await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
+		}
+	} catch (error) {
+		console.error('Error handling WebRTC answer:', error);
+	}
+}
+
+async function handleWebRTCIce(message) {
+	const remoteUserId = message.userId;
+	const iceCandidate = message.ice;
+
+	try {
+		const peerConnection = peerConnections[remoteUserId];
+		if (peerConnection) {
+			await peerConnection.addIceCandidate(new RTCIceCandidate(iceCandidate));
+		}
+	} catch (error) {
+		console.error('Error handling ICE candidate:', error);
+	}
+}
+
+function addRemoteAudio(userId, stream) {
+	console.log('🔊 Adding remote audio for user:', userId);
+
+	// Remove existing audio element if it exists
+	const existingAudio = document.getElementById(`audio-${userId}`);
+	if (existingAudio) {
+		console.log('🔊 Removing existing audio element for:', userId);
+		existingAudio.remove();
+	}
+
+	// Check if stream has audio tracks
+	const audioTracks = stream.getAudioTracks();
+	console.log('🔊 Remote stream audio tracks:', audioTracks.length);
+
+	if (audioTracks.length === 0) {
+		console.error('🔊 No audio tracks in remote stream for user:', userId);
+		return;
+	}
+
+	// Create new audio element
+	const audioElement = document.createElement('audio');
+	audioElement.id = `audio-${userId}`;
+	audioElement.srcObject = stream;
+	audioElement.autoplay = true;
+	audioElement.playsInline = true; // Important for mobile
+
+	// Set initial volume (default 100% unless user has custom setting)
+	const userVolume = userVolumes.get(userId) || 100;
+	audioElement.volume = userVolume / 100;
+
+	// Apply current mute/deafen settings
+	audioElement.muted = isDeafened || mutedUsers.has(userId);
+
+	// Add event listeners for debugging
+	audioElement.addEventListener('loadstart', () => console.log('🔊 Audio loadstart for:', userId));
+	audioElement.addEventListener('canplay', () => console.log('🔊 Audio canplay for:', userId));
+	audioElement.addEventListener('playing', () => console.log('🔊 Audio playing for:', userId));
+	audioElement.addEventListener('error', (e) => console.error('🔊 Audio error for:', userId, e));
+
+	// Add to audio container
+	document.getElementById('audio-container').appendChild(audioElement);
+
+	// Force play (browsers may require user interaction)
+	audioElement.play().then(() => {
+		console.log('🔊 Successfully started playing audio for user:', userId);
+	}).catch(error => {
+		console.error('🔊 Failed to play audio for user:', userId, error);
+	});
+
+	console.log(`🔊 Added remote audio for user ${userId} with volume ${userVolume}%`);
+}
+
+function cleanupPeerConnection(userId) {
+	if (peerConnections[userId]) {
+		peerConnections[userId].close();
+		delete peerConnections[userId];
+	}
+
+	// Remove audio element
+	const audioElement = document.getElementById(`audio-${userId}`);
+	if (audioElement) {
+		audioElement.remove();
+	}
+
+	console.log(`Cleaned up peer connection for user ${userId}`);
+}
+
+// Self modal for mic and headphone volume
+function openSelfModal() {
+	const modal = document.getElementById('user-control-modal');
+	const modalUsername = document.getElementById('modal-username');
+
+	// Set modal title
+	modalUsername.textContent = 'Audio Settings';
+
+	// Update modal content for self controls
+	const modalBody = modal.querySelector('.modal-body');
+	modalBody.innerHTML = `
+		<div class="control-section">
+			<label>Microphone Volume</label>
+			<div class="volume-control">
+				<span>🎤</span>
+				<input type="range" id="mic-volume-slider" min="0" max="100" value="100" oninput="updateMicVolume()">
+				<span>🎤</span>
+				<span id="mic-volume-percentage">100%</span>
+			</div>
+		</div>
+		<div class="control-section">
+			<label>Headphone Volume (All Incoming)</label>
+			<div class="volume-control">
+				<span>🔇</span>
+				<input type="range" id="headphone-volume-slider" min="0" max="100" value="100" oninput="updateHeadphoneVolume()">
+				<span>🔊</span>
+				<span id="headphone-volume-percentage">100%</span>
+			</div>
+		</div>
+		<div class="control-section">
+			<label>Audio Controls</label>
+			<div class="audio-controls">
+				<button onclick="resetAllVolumes()" class="control-btn secondary">
+					🔄 Reset All Volumes
+				</button>
+			</div>
+		</div>
+	`;
+
+	// Show modal
+	modal.style.display = 'flex';
+
+	console.log('Opened self audio settings modal');
+}
+
+// Global volume controls
+let micVolume = 100;
+let headphoneVolume = 100;
+
+function updateMicVolume() {
+	const slider = document.getElementById('mic-volume-slider');
+	const percentage = document.getElementById('mic-volume-percentage');
+	micVolume = parseInt(slider.value);
+
+	percentage.textContent = `${micVolume}%`;
+
+	// Apply to local stream
+	if (localStream) {
+		localStream.getAudioTracks().forEach(track => {
+			// Note: We can't directly control mic input volume via WebAPI
+			// This is more for UI feedback. Actual mic volume control requires OS-level access
+			console.log('Mic volume set to:', micVolume + '%');
+		});
+	}
+}
+
+function updateHeadphoneVolume() {
+	const slider = document.getElementById('headphone-volume-slider');
+	const percentage = document.getElementById('headphone-volume-percentage');
+	headphoneVolume = parseInt(slider.value);
+
+	percentage.textContent = `${headphoneVolume}%`;
+
+	// Apply to all remote audio elements
+	const audioElements = document.querySelectorAll('#audio-container audio');
+	audioElements.forEach(audio => {
+		const userId = audio.id.replace('audio-', '');
+		const userVolume = userVolumes.get(userId) || 100;
+		// Combine headphone volume with individual user volume
+		audio.volume = (headphoneVolume / 100) * (userVolume / 100);
+	});
+
+	console.log('Headphone volume set to:', headphoneVolume + '%');
+}
+
+function resetAllVolumes() {
+	micVolume = 100;
+	headphoneVolume = 100;
+
+	const micSlider = document.getElementById('mic-volume-slider');
+	const headphoneSlider = document.getElementById('headphone-volume-slider');
+	const micPercentage = document.getElementById('mic-volume-percentage');
+	const headphonePercentage = document.getElementById('headphone-volume-percentage');
+
+	if (micSlider) {
+		micSlider.value = 100;
+		micPercentage.textContent = '100%';
+	}
+
+	if (headphoneSlider) {
+		headphoneSlider.value = 100;
+		headphonePercentage.textContent = '100%';
+		updateHeadphoneVolume();
+	}
+
+	console.log('Reset all volumes to 100%');
+}
+// Modal functions
+function openUserModal(userId, username) {
+	currentModalUserId = userId;
+	const modal = document.getElementById('user-control-modal');
+	const modalUsername = document.getElementById('modal-username');
+
+	// Set modal title
+	modalUsername.textContent = `${username}`;
+
+	// Restore original modal content for other users
+	const modalBody = modal.querySelector('.modal-body');
+	modalBody.innerHTML = `
+		<div class="control-section">
+			<label>Volume Control</label>
+			<div class="volume-control">
+				<span>🔇</span>
+				<input type="range" id="user-volume-slider" min="0" max="100" value="100" oninput="updateUserVolume()">
+				<span>🔊</span>
+				<span id="volume-percentage">100%</span>
+			</div>
+		</div>
+		<div class="control-section">
+			<label>Audio Controls</label>
+			<div class="audio-controls">
+				<button id="modal-mute-btn" onclick="toggleUserMuteFromModal()" class="control-btn">
+					🔇 Mute User
+				</button>
+				<button onclick="resetUserVolume()" class="control-btn secondary">
+					🔄 Reset Volume
+				</button>
+			</div>
+		</div>
+	`;
+
+	// Set current volume
+	const currentVolume = userVolumes.get(userId) || 100;
+	const volumeSlider = document.getElementById('user-volume-slider');
+	const volumePercentage = document.getElementById('volume-percentage');
+	volumeSlider.value = currentVolume;
+	volumePercentage.textContent = `${currentVolume}%`;
+
+	// Set mute button state
+	const muteBtn = document.getElementById('modal-mute-btn');
+	const isMuted = mutedUsers.has(userId);
+	muteBtn.textContent = isMuted ? '🔇 User Muted' : '🔊 Mute User';
+	muteBtn.className = isMuted ? 'control-btn muted' : 'control-btn';
+
+	// Show modal
+	modal.style.display = 'flex';
+
+	console.log(`Opened modal for user ${username} (${userId})`);
+}
+
+function closeUserModal() {
+	const modal = document.getElementById('user-control-modal');
+	modal.style.display = 'none';
+	currentModalUserId = null;
+
+	console.log('Closed user modal');
+}
+
+function updateUserVolume() {
+	if (!currentModalUserId) return;
+
+	const volumeSlider = document.getElementById('user-volume-slider');
+	const volumePercentage = document.getElementById('volume-percentage');
+	const volume = parseInt(volumeSlider.value);
+
+	// Update volume display
+	volumePercentage.textContent = `${volume}%`;
+
+	// Store user volume preference
+	userVolumes.set(currentModalUserId, volume);
+
+	// Update audio element volume
+	const audioElement = document.getElementById(`audio-${currentModalUserId}`);
+	if (audioElement) {
+		audioElement.volume = volume / 100;
+	}
+
+	console.log(`Updated volume for user ${currentModalUserId} to ${volume}%`);
+}
+
+function toggleUserMuteFromModal() {
+	if (!currentModalUserId) return;
+
+	muteUser(currentModalUserId);
+
+	// Update modal button state
+	const muteBtn = document.getElementById('modal-mute-btn');
+	const isMuted = mutedUsers.has(currentModalUserId);
+	muteBtn.textContent = isMuted ? '🔇 User Muted' : '🔊 Mute User';
+	muteBtn.className = isMuted ? 'control-btn muted' : 'control-btn';
+}
+
+function resetUserVolume() {
+	if (!currentModalUserId) return;
+
+	const volumeSlider = document.getElementById('user-volume-slider');
+	const volumePercentage = document.getElementById('volume-percentage');
+
+	// Reset to 100%
+	volumeSlider.value = 100;
+	volumePercentage.textContent = '100%';
+
+	// Update volume
+	updateUserVolume();
+
+	console.log(`Reset volume for user ${currentModalUserId} to 100%`);
+}
+
+function handleUsernameError(errorMessage) {
+	// Show error to user
+	alert(errorMessage);
+
+	// Reset the connection since username was rejected
+	if (ws && ws.readyState === WebSocket.OPEN) {
+		ws.close();
+	}
+
+	// Reset UI state
+	updateConnectionStatus(false);
+	currentUsername = null;
+	isInVoiceChat = false;
+
+	// Reset join button
+	const joinBtn = document.getElementById('join-chat-btn');
+	joinBtn.disabled = false;
+	joinBtn.textContent = 'Join Voice Chat'; // Fix: Reset button text
+
+	// Show username section again and enable input
+	document.getElementById('username-section').style.display = 'block';
+	document.getElementById('voice-controls-sidebar').style.display = 'none';
+
+	// Focus on username input and clear it or suggest modification
+	const usernameInput = document.getElementById('username-input');
+	usernameInput.focus();
+	usernameInput.select(); // Select current text so user can easily modify it
+
+	console.log('Username rejected, reset to initial state');
+}
+
+// Debug function to check voice setup
+function debugVoiceSetup() {
+	console.log('🔍 === VOICE DEBUG INFO ===');
+	console.log('🔍 isInVoiceChat:', isInVoiceChat);
+	console.log('🔍 micPermissionGranted:', micPermissionGranted);
+	console.log('🔍 isMuted:', isMuted);
+	console.log('🔍 isDeafened:', isDeafened);
+	console.log('🔍 currentUsername:', currentUsername);
+
+	if (localStream) {
+		const audioTracks = localStream.getAudioTracks();
+		console.log('🔍 Local stream tracks:', audioTracks.length);
+		audioTracks.forEach((track, i) => {
+			console.log(`🔍 Track ${i}:`, {
+				kind: track.kind,
+				enabled: track.enabled,
+				readyState: track.readyState,
+				muted: track.muted
+			});
+		});
+
+		// Check if we need to fix browser-muted tracks
+		const hasMutedTracks = audioTracks.some(track => track.muted);
+		if (hasMutedTracks) {
+			console.log('🔍 ⚠️  BROWSER-MUTED TRACKS DETECTED! Run fixVoice() to fix this.');
+		}
+	} else {
+		console.log('🔍 No local stream!');
+	}
+
+	console.log('🔍 Peer connections:', Object.keys(peerConnections).length);
+	Object.entries(peerConnections).forEach(([userId, pc]) => {
+		console.log(`🔍 Peer ${userId}:`, pc.connectionState);
+	});
+
+	const audioElements = document.querySelectorAll('#audio-container audio');
+	console.log('🔍 Remote audio elements:', audioElements.length);
+	audioElements.forEach((audio, i) => {
+		console.log(`🔍 Audio ${i}:`, {
+			id: audio.id,
+			muted: audio.muted,
+			volume: audio.volume,
+			paused: audio.paused
+		});
+	});
+
+	console.log('🔍 WebSocket state:', ws ? ws.readyState : 'null');
+	console.log('🔍 === END DEBUG INFO ===');
+}
+
+// Manual fix function for console use
+async function fixVoice() {
+	console.log('🔧 Manually fixing voice...');
+	const fixed = await fixBrowserMutedTracks();
+	if (fixed) {
+		console.log('🔧 Voice fixed! Try speaking now.');
+	} else {
+		console.log('🔧 No browser-muted tracks found, or fix failed.');
+	}
+	debugVoiceSetup();
+}
+
+// Test WebSocket connection
+function testWebSocket() {
+	console.log('🔌 Testing WebSocket connection...');
+	console.log('🔌 WebSocket state:', ws ? ws.readyState : 'null');
+	console.log('🔌 WebSocket URL:', ws ? ws.url : 'null');
+	console.log('🔌 Current username:', currentUsername);
+
+	if (ws && ws.readyState === WebSocket.OPEN) {
+		console.log('🔌 WebSocket is open, sending test message...');
+		ws.send(JSON.stringify({
+			type: 'set_username',
+			data: currentUsername || 'TestUser' + Date.now()
+		}));
+		console.log('🔌 Test message sent');
+	} else {
+		console.error('🔌 WebSocket is not open!');
+		console.log('🔌 Ready states: 0=CONNECTING, 1=OPEN, 2=CLOSING, 3=CLOSED');
+	}
+
+	// Also run voice debug
+	debugVoiceSetup();
+}
+
+// Close modal when clicking outside
+document.addEventListener('click', function(event) {
+	const modal = document.getElementById('user-control-modal');
+	if (event.target === modal) {
+		closeUserModal();
+	}
+});
+
+// Close modal with Escape key
+document.addEventListener('keydown', function(event) {
+	if (event.key === 'Escape') {
+		closeUserModal();
+	}
+});
+
+// Handle page visibility changes to manage audio context
+document.addEventListener('visibilitychange', function() {
+	if (document.visibilityState === 'visible') {
+		// Resume audio context if needed
+		const audioElements = document.querySelectorAll('#audio-container audio');
+		audioElements.forEach(audio => {
+			if (audio.paused) {
+				audio.play().catch(console.error);
+			}
+		});
+	}
+});
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', function() {
+	if (localStream) {
+		localStream.getTracks().forEach(track => track.stop());
+	}
+
+	Object.values(peerConnections).forEach(pc => pc.close());
+
+	if (ws) {
+		ws.close();
+	}
+});
diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..2517bc6
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RadChat</title>
+    <link rel="stylesheet" href="/styles.css">
+    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+</head>
+<body>
+    <div class="app-container">
+        <!-- Left Sidebar for Users and Voice Controls -->
+        <div class="sidebar" id="sidebar">
+            <!-- Users List -->
+            <div class="sidebar-section users-section">
+                <!-- <div class="sidebar-header"> -->
+                <!--     <h3>👥 Users (<span id="user-count">0</span>)</h3> -->
+                <!-- </div> -->
+                <div id="users-list" class="users-list">
+                    <div class="no-users"></div>
+                </div>
+            </div>
+
+            <!-- Voice Controls in Sidebar -->
+            <div class="sidebar-section voice-controls-sidebar" id="voice-controls-sidebar" style="display: none;">
+                <!-- <div class="sidebar-header"> -->
+                <!--     <h3>🎙️ Voice Controls</h3> -->
+                <!-- </div> -->
+                <div class="voice-controls-content">
+                    <div class="control-buttons">
+                        <button 
+                            id="toggle-mute-btn" 
+                            onclick="toggleMute()"
+                            class="voice-btn unmuted"
+                        >
+                           🎤 
+                        </button>
+                        <button 
+                            id="toggle-deafen-btn" 
+                            onclick="toggleDeafen()"
+                            class="voice-btn"
+                        >
+                           🔊
+                        </button>
+                        <button 
+                            id="voice-settings-btn" 
+                            onclick="openSelfModal()"
+                            class="voice-btn"
+                        >
+                           ⚙️
+                        </button>
+                        <button 
+                            id="leave-voice-btn" 
+                            onclick="leaveVoiceChat()"
+                            class="voice-btn danger"
+                        >
+                           📞
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Content Area -->
+        <div class="main-content">
+            <!-- <header> -->
+            <!--     <h1>RadChat</h1> -->
+                <!-- <div class="connection-status" id="status" display="none"> -->
+                <!--     <span class="status-indicator disconnected"></span> -->
+                <!--     <span id="status-text">Disconnected</span> -->
+                <!-- </div> -->
+            <!-- </header> -->
+
+            <main>
+                <!-- Username Section - Always visible when not in voice chat -->
+                <div class="username-section" id="username-section">
+                    <div class="section-header">
+                        <h2>RadChat</h2>
+                    </div>
+                    <div class="input-group">
+                        <input 
+                            type="text" 
+                            id="username-input" 
+                            placeholder="Enter your username"
+                            maxlength="20"
+                        >
+                        <button 
+                            id="join-chat-btn"
+                            onclick="joinVoiceChat()"
+                            disabled
+                        >
+                            📞 Join Voice Chat
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Microphone Permission -->
+                <div class="mic-section" id="mic-section">
+                    <div class="section-header">
+                        <h2>🎤 Microphone Access</h2>
+                        <p>Grant microphone access to participate in voice chat</p>
+                    </div>
+                    <button 
+                        id="request-mic-btn" 
+                        onclick="requestMicrophonePermission()"
+                        class="mic-button"
+                    >
+                        🎤 Request Microphone Access
+                    </button>
+                    <div id="mic-status" class="mic-status"></div>
+                </div>
+
+                <!-- Chat Section -->
+                <div class="chat-section" id="chat-section" style="display: none;">
+                    <!-- <div class="section-header"> -->
+                    <!--     <h2>💬 Chat</h2> -->
+                    <!-- </div> -->
+                    <div class="chat-messages" id="chat-messages">
+                    </div>
+                    <div class="chat-input-container">
+                        <textarea 
+                            id="chat-input" 
+                            placeholder="Type a message... (Shift+Enter for new line)"
+                            maxlength="500"
+                            rows="1"
+                            onkeypress="handleChatKeyPress(event)"
+                            oninput="handleChatInput(event)"
+                        ></textarea>
+                        <button id="send-btn" onclick="sendChatMessage()" disabled>Send</button>
+                    </div>
+                </div>
+
+                <!-- Audio Elements Container -->
+                <div id="audio-container" style="display: none;"></div>
+
+                <!-- User Control Modal -->
+                <div id="user-control-modal" class="modal" style="display: none;">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h3 id="modal-username">User Controls</h3>
+                            <button class="modal-close" onclick="closeUserModal()">&times;</button>
+                        </div>
+                        <div class="modal-body">
+                            <div class="control-section">
+                                <label>Volume Control</label>
+                                <div class="volume-control">
+                                    <span>🔇</span>
+                                    <input type="range" id="user-volume-slider" min="0" max="100" value="100" oninput="updateUserVolume()">
+                                    <span>🔊</span>
+                                    <span id="volume-percentage">100%</span>
+                                </div>
+                            </div>
+                            <div class="control-section">
+                                <label>Audio Controls</label>
+                                <div class="audio-controls">
+                                    <button id="modal-mute-btn" onclick="toggleUserMuteFromModal()" class="control-btn">
+                                        🔇 Mute User
+                                    </button>
+                                    <button onclick="resetUserVolume()" class="control-btn secondary">
+                                        🔄 Reset Volume
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+
+    <script src="/app.js"></script>
+</body>
+</html>
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..d5b6e7c
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,1386 @@
+/* Dark Mode Theme */
+:root {
+	--bg-primary: #1a1a1a;
+	--bg-secondary: #2d2d2d;
+	--bg-tertiary: #3a3a3a;
+	--text-primary: #ffffff;
+	--text-secondary: #b3b3b3;
+	--accent: #4a9eff;
+	--accent-hover: #3a8eef;
+	--success: #4caf50;
+	--warning: #ff9800;
+	--error: #f34c36;
+	--border: #444;
+	--shadow: rgba(0, 0, 0, 0.3);
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 25%, #0d1117 75%, #161b22 100%);
+	color: var(--text-primary);
+	line-height: 1.6;
+	min-height: 100vh;
+}
+
+/* App Layout with floating sidebar */
+.app-container {
+	display: flex;
+	height: 100vh;
+	overflow: hidden;
+	background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0d1117 100%);
+	padding: 1rem;
+	gap: 1rem;
+}
+
+/* Floating Rounded Sidebar */
+.sidebar {
+	width: 280px;
+	background: rgba(45, 45, 45, 0.85);
+	backdrop-filter: blur(10px);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	border-radius: 16px;
+	display: none;
+	/* Hidden by default */
+	flex-direction: column;
+	overflow: hidden;
+	flex-shrink: 0;
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+	gap: 1rem;
+	padding: 1rem;
+}
+
+/* Show sidebar when connected */
+.sidebar.visible {
+	display: flex;
+}
+
+/* Sidebar Sections */
+.sidebar-section {
+	background: rgba(58, 58, 58, 0.3);
+	border-radius: 12px;
+	border: 1px solid rgba(255, 255, 255, 0.05);
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.users-section {
+	flex: 1;
+	/* Takes up most of the sidebar space */
+	min-height: 0;
+}
+
+.voice-controls-sidebar {
+	flex-shrink: 0;
+	/* Fixed size */
+	background: rgba(26, 26, 26, 0.9) !important;
+	/* Darker background for voice controls */
+}
+
+.sidebar-header {
+	padding: 1rem;
+	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+	background: rgba(74, 158, 255, 0.1);
+}
+
+.sidebar-header h3 {
+	margin: 0;
+	font-size: 0.9rem;
+	color: var(--text-primary);
+	font-weight: 600;
+}
+
+/* Voice Controls in Sidebar */
+.voice-controls-content {
+	padding: 1rem;
+}
+
+.voice-controls-content .control-buttons {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: 0.75rem;
+}
+
+.voice-controls-content .voice-btn {
+	width: 50%;
+	padding: 0.5rem;
+	font-size: 0.5rem;
+	border-radius: 8px;
+	transition: all 0.3s ease;
+}
+
+/* Main Content with rounded corners */
+.main-content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	background: rgba(26, 26, 26, 0.7);
+	backdrop-filter: blur(10px);
+	border-radius: 16px;
+	border: 1px solid rgba(255, 255, 255, 0.05);
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+main {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	padding: 2rem;
+	gap: 1.5rem;
+	min-height: 0;
+	overflow-y: auto;
+}
+
+/* Section Headers */
+.section-header {
+	margin-bottom: 1.5rem;
+	text-align: center;
+}
+
+.section-header h2 {
+	font-size: 1.5rem;
+	margin-bottom: 0.5rem;
+	color: var(--text-primary);
+	font-weight: 600;
+}
+
+.section-header p {
+	color: var(--text-secondary);
+	font-size: 0.95rem;
+}
+
+/* Enhanced sections to match floating theme */
+.username-section,
+.mic-section {
+	background: rgba(45, 45, 45, 0.8);
+	backdrop-filter: blur(10px);
+	border-radius: 16px;
+	padding: 2rem;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+	text-align: center;
+}
+
+.chat-section {
+	background: rgba(45, 45, 45, 0.8);
+	backdrop-filter: blur(10px);
+	border-radius: 16px;
+	padding: 1.5rem;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+
+/* Messages area fills remaining chat space */
+.chat-messages {
+	flex: 1;
+	padding: 1.5rem;
+	overflow-y: auto;
+	background: rgba(16, 16, 16, 0.8);
+	backdrop-filter: blur(5px);
+	border-radius: 12px;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	margin-bottom: 1.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	min-height: 0;
+}
+
+.username-section .input-group {
+	display: flex;
+	gap: 1rem;
+	justify-content: center;
+	align-items: center;
+	max-width: 500px;
+	margin: 0 auto;
+}
+
+/* Chat Alerts for Join/Leave - Toned down */
+.chat-alert {
+	margin: 0.5rem auto;
+	padding: 0.5rem 1rem;
+	border-radius: 12px;
+	max-width: 250px;
+	text-align: center;
+	font-size: 0.85rem;
+	animation: alertAppear 0.3s ease;
+	background: rgba(74, 158, 255, 0.08);
+	border: 1px solid rgba(74, 158, 255, 0.15);
+	color: var(--text-secondary);
+	backdrop-filter: blur(5px);
+	align-self: center;
+	flex-shrink: 0;
+}
+
+.chat-alert-join {
+	background: rgba(76, 175, 80, 0.08);
+	border-color: rgba(76, 175, 80, 0.2);
+	color: rgba(76, 175, 80, 0.9);
+}
+
+.chat-alert-leave {
+	background: rgba(255, 152, 0, 0.08);
+	border-color: rgba(255, 152, 0, 0.2);
+	color: rgba(255, 152, 0, 0.9);
+}
+
+@keyframes alertAppear {
+	from {
+		opacity: 0;
+		transform: translateY(10px) scale(0.95);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+.alert-content {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+}
+
+.alert-text {
+	font-weight: 500;
+}
+
+.alert-time {
+	font-size: 0.75rem;
+	opacity: 0.7;
+	font-weight: 400;
+	white-space: nowrap;
+}
+
+/* Media Embeds */
+.embedded-gif,
+.embedded-image {
+	max-width: 100%;
+	max-height: 300px;
+	border-radius: 8px;
+	margin: 0.5rem 0;
+	display: block;
+}
+
+.embedded-video {
+	max-width: 100%;
+	max-height: 300px;
+	border-radius: 8px;
+	margin: 0.5rem 0;
+	display: block;
+}
+
+.embedded-video iframe {
+	width: 100%;
+	height: 200px;
+}
+
+/* Modal Close Button Fix */
+.modal-close {
+	background: none;
+	border: none;
+	font-size: 1.5rem;
+	color: var(--text-secondary);
+	cursor: pointer;
+	width: 32px;
+	height: 32px;
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.2s ease;
+}
+
+/* Voice Controls - Icon Only */
+.voice-controls-content .voice-btn {
+	width: 50px;
+	height: 50px;
+	font-size: 1.4rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 12px;
+	position: relative;
+}
+
+/* Remove section headers and improve spacing */
+.username-section,
+.mic-section {
+	background: rgba(45, 45, 45, 0.8);
+	backdrop-filter: blur(10px);
+	border-radius: 16px;
+	padding: 2rem;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+	text-align: center;
+}
+
+.username-section .input-group {
+	display: flex;
+	gap: 1rem;
+	justify-content: center;
+	align-items: center;
+	max-width: 400px;
+	margin: 0 auto;
+}
+
+/* Beautiful Message Styling */
+.chat-message {
+	padding: 0.75rem 1rem;
+	border-radius: 12px;
+	max-width: 85%;
+	word-wrap: break-word;
+	position: relative;
+	animation: messageAppear 0.3s ease;
+	margin-bottom: 0.75rem;
+}
+
+@keyframes messageAppear {
+	from {
+		opacity: 0;
+		transform: translateY(10px);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+/* Enhance chat messages */
+.chat-message.own {
+	background: linear-gradient(135deg, rgba(74, 158, 255, 0.9), rgba(58, 142, 239, 0.9));
+	backdrop-filter: blur(5px);
+	color: white;
+	align-self: flex-end;
+	margin-left: auto;
+	box-shadow: 0 2px 12px rgba(74, 158, 255, 0.3);
+}
+
+.chat-message.other {
+	background: rgba(58, 58, 58, 0.8);
+	backdrop-filter: blur(5px);
+	color: var(--text-primary);
+	align-self: flex-start;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Message Header - Username and Timestamp Side by Side */
+.chat-message-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+	margin-bottom: 0.5rem;
+	gap: 1rem;
+}
+
+.chat-message .username {
+	font-weight: 600;
+	font-size: 0.85rem;
+	color: var(--accent);
+	flex-shrink: 0;
+}
+
+.chat-message.own .username {
+	color: rgba(255, 255, 255, 0.9);
+}
+
+.chat-message .timestamp {
+	font-size: 0.75rem;
+	opacity: 0.7;
+	font-weight: 400;
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+
+.chat-message.own .timestamp {
+	color: rgba(255, 255, 255, 0.8);
+}
+
+.chat-message .content {
+	font-size: 0.95rem;
+	line-height: 1.4;
+	word-break: break-word;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
+/* Chat Input */
+.chat-input-container {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+#chat-input {
+	flex: 1;
+	padding: 1rem;
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	background: var(--bg-tertiary);
+	color: var(--text-primary);
+	font-size: 1rem;
+	font-family: inherit;
+	transition: border-color 0.3s ease;
+	resize: none;
+	min-height: 50px;
+	max-height: 120px;
+	overflow-y: auto;
+	line-height: 1.4;
+}
+
+#chat-input:focus {
+	outline: none;
+	border-color: var(--accent);
+}
+
+#chat-input::placeholder {
+	color: var(--text-secondary);
+}
+
+#send-btn {
+	padding: 1rem 1.75rem;
+	border: none;
+	border-radius: 8px;
+	background-color: var(--bg-tertiary);
+	color: var(--text-primary);
+	font-size: 1rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	border: 1px solid var(--border);
+}
+
+#send-btn:hover:not(:disabled) {
+	background-color: var(--accent);
+	border-color: var(--accent);
+	transform: translateY(-2px);
+}
+
+#send-btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+	transform: none;
+}
+
+/* Custom scrollbar for chat */
+.chat-messages::-webkit-scrollbar {
+	width: 6px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+	background: var(--bg-tertiary);
+	border-radius: 3px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+	background: var(--border);
+	border-radius: 3px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover {
+	background: var(--text-secondary);
+}
+
+/* Compact Users List */
+.users-list {
+	flex: 1;
+	padding: 1rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	overflow-y: auto;
+	min-height: 0;
+}
+
+/* Enhance user cards for floating theme */
+.user-card {
+	background: rgba(58, 58, 58, 0.6);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	border-radius: 12px;
+	padding: 0.75rem;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	transition: all 0.3s ease;
+	cursor: pointer;
+	position: relative;
+	backdrop-filter: blur(5px);
+}
+
+.user-card:hover {
+	background: rgba(74, 158, 255, 0.1);
+	border-color: rgba(74, 158, 255, 0.3);
+	transform: translateY(-2px);
+	box-shadow: 0 4px 16px rgba(74, 158, 255, 0.2);
+}
+
+.user-card.current-user-card {
+	border-color: rgba(74, 158, 255, 0.5);
+	background: rgba(74, 158, 255, 0.15);
+	box-shadow: 0 0 16px rgba(74, 158, 255, 0.3);
+}
+
+.user-card.speaking {
+	border-color: rgba(76, 175, 80, 0.6) !important;
+	background: rgba(76, 175, 80, 0.2) !important;
+	box-shadow: 0 0 20px rgba(76, 175, 80, 0.4) !important;
+	animation: pulse 1.5s infinite;
+	transform: scale(1.02);
+}
+
+@keyframes pulse {
+	0% {
+		box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
+		background-color: rgba(76, 175, 80, 0.2);
+	}
+
+	50% {
+		box-shadow: 0 0 30px rgba(76, 175, 80, 0.6);
+		background-color: rgba(76, 175, 80, 0.3);
+	}
+
+	100% {
+		box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
+		background-color: rgba(76, 175, 80, 0.2);
+	}
+}
+
+/* Compact Avatar */
+.user-avatar {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 600;
+	color: white;
+	font-size: 0.9rem;
+	flex-shrink: 0;
+}
+
+/* Compact User Info */
+.user-info {
+	flex: 1;
+	min-width: 0;
+}
+
+.user-name {
+	font-weight: 500;
+	font-size: 0.9rem;
+	margin-bottom: 0.25rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.user-status {
+	font-size: 0.75rem;
+	color: var(--text-secondary);
+}
+
+.user-status.speaking {
+	color: var(--success);
+	font-weight: 500;
+}
+
+/* Compact Mute Button */
+.mute-user-btn {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	width: 28px;
+	height: 28px;
+	border-radius: 4px;
+	background: var(--bg-secondary);
+	border: 1px solid var(--border);
+	color: var(--text-primary);
+	font-size: 14px;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.2s ease;
+	opacity: 0.7;
+	padding: 0;
+}
+
+.mute-user-btn:hover {
+	opacity: 1;
+	background: var(--accent);
+	border-color: var(--accent);
+	color: white;
+}
+
+/* No Users State */
+.no-users {
+	text-align: center;
+	color: var(--text-secondary);
+	font-style: italic;
+	font-size: 0.85rem;
+	padding: 2rem 1rem;
+}
+
+input[type="text"] {
+	flex: 1;
+	padding: 0.75rem;
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	background-color: var(--bg-tertiary);
+	color: var(--text-primary);
+	font-size: 1rem;
+	transition: border-color 0.3s ease;
+}
+
+input[type="text"]:focus {
+	outline: none;
+	border-color: var(--accent);
+}
+
+input[type="text"]::placeholder {
+	color: var(--text-secondary);
+}
+
+button {
+	padding: 0.75rem 1.5rem;
+	border: none;
+	border-radius: 8px;
+	font-size: 1rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	background-color: var(--bg-tertiary);
+	color: var(--text-primary);
+	border: 1px solid var(--border);
+}
+
+button:hover:not(:disabled) {
+	background-color: var(--accent);
+	border-color: var(--accent);
+	transform: translateY(-2px);
+}
+
+button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+	transform: none;
+}
+
+.mic-button {
+	width: 100%;
+	max-width: 300px;
+	padding: 1rem;
+	font-size: 1.1rem;
+	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+	border: none;
+	color: white;
+	margin: 0 auto;
+	display: block;
+}
+
+.mic-status {
+	margin-top: 1rem;
+	padding: 0.5rem;
+	border-radius: 6px;
+	text-align: center;
+	font-size: 0.9rem;
+}
+
+.mic-status.granted {
+	background-color: rgba(76, 175, 80, 0.2);
+	color: var(--success);
+}
+
+.mic-status.denied {
+	background-color: rgba(244, 67, 54, 0.2);
+	color: var(--error);
+}
+
+#join-chat-btn {
+	background: linear-gradient(135deg, var(--success), #45a049);
+	color: white;
+	border: none;
+	min-width: 180px;
+	white-space: nowrap;
+}
+
+.voice-btn {
+	padding: 0.75rem;
+	font-size: 0.9rem;
+	transition: all 0.3s ease;
+}
+
+.voice-btn.primary {
+	background: var(--bg-secondary);
+	color: white;
+	border: none;
+}
+
+.voice-btn.muted {
+	background: linear-gradient(135deg, var(--error), #d32f2f);
+	color: white;
+	border: none;
+}
+
+.voice-btn.unmuted {
+	background: var(--bg-secondary);
+	color: white;
+	border: none;
+}
+
+.voice-btn.danger {
+	background: linear-gradient(135deg, var(--error), #d32f2f);
+	color: white;
+	border: none;
+}
+
+/* Modal Styles */
+.modal {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.7);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1000;
+	animation: fadeIn 0.2s ease;
+	padding: 1rem;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+.modal-content {
+	background: var(--bg-secondary);
+	border-radius: 12px;
+	border: 1px solid var(--border);
+	width: 100%;
+	max-width: 400px;
+	box-shadow: 0 10px 30px var(--shadow);
+	animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+	from {
+		transform: translateY(50px);
+		opacity: 0;
+	}
+
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+.modal-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1.5rem;
+	border-bottom: 1px solid var(--border);
+}
+
+.modal-header h3 {
+	margin: 0;
+	color: var(--text-primary);
+	font-size: 1.2rem;
+}
+
+
+.modal-close:hover {
+	background: var(--bg-tertiary);
+	color: var(--text-primary);
+}
+
+.modal-body {
+	padding: 1.5rem;
+}
+
+.control-section {
+	margin-bottom: 1.5rem;
+}
+
+.control-section:last-child {
+	margin-bottom: 0;
+}
+
+.control-section label {
+	display: block;
+	margin-bottom: 0.75rem;
+	font-weight: 500;
+	color: var(--text-secondary);
+	font-size: 0.9rem;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.volume-control {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	background: var(--bg-tertiary);
+	padding: 1rem;
+	border-radius: 8px;
+	border: 1px solid var(--border);
+}
+
+.volume-control span {
+	font-size: 1.1rem;
+}
+
+#user-volume-slider {
+	flex: 1;
+	height: 6px;
+	background: var(--bg-primary);
+	border-radius: 3px;
+	outline: none;
+	cursor: pointer;
+}
+
+#user-volume-slider::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	width: 18px;
+	height: 18px;
+	background: var(--accent);
+	border-radius: 50%;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+#user-volume-slider::-webkit-slider-thumb:hover {
+	background: var(--accent-hover);
+	transform: scale(1.1);
+}
+
+#user-volume-slider::-moz-range-thumb {
+	width: 18px;
+	height: 18px;
+	background: var(--accent);
+	border-radius: 50%;
+	cursor: pointer;
+	border: none;
+}
+
+#volume-percentage {
+	min-width: 40px;
+	text-align: center;
+	font-weight: 500;
+	color: var(--accent);
+}
+
+.audio-controls {
+	display: flex;
+	gap: 0.75rem;
+}
+
+.control-btn {
+	flex: 1;
+	padding: 0.75rem 1rem;
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	background: var(--bg-tertiary);
+	color: var(--text-primary);
+	font-size: 0.9rem;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+}
+
+.control-btn:hover {
+	background: var(--accent);
+	border-color: var(--accent);
+	transform: translateY(-1px);
+}
+
+.control-btn.secondary {
+	background: var(--bg-primary);
+}
+
+.control-btn.secondary:hover {
+	background: var(--bg-tertiary);
+	border-color: var(--text-secondary);
+}
+
+.control-btn.muted {
+	background: var(--error);
+	border-color: var(--error);
+	color: white;
+}
+
+.control-btn.muted:hover {
+	background: #d32f2f;
+	border-color: #d32f2f;
+}
+
+/* User card click cursor */
+.user-card:not(.current-user-card) {
+	cursor: pointer;
+}
+
+.user-card:not(.current-user-card):hover {
+	transform: translateY(-2px);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* MOBILE RESPONSIVE DESIGN */
+@media (max-width: 768px) {
+
+	/* Stack layout vertically on mobile */
+	.app-container {
+		flex-direction: column;
+		padding: 0.5rem;
+		gap: 0.5rem;
+		height: 100vh;
+	}
+
+	.sidebar.visible {
+		width: 100%;
+		height: auto;
+		max-height: 200px;
+		order: -1;
+		flex-shrink: 0;
+		display: flex;
+		padding: 0.5rem;
+		gap: 0.5rem;
+	}
+
+	/* Mobile sidebar - horizontal sections */
+	.sidebar {
+		width: 100%;
+		height: auto;
+		max-height: 200px;
+		order: -1;
+		flex-shrink: 0;
+		flex-direction: row;
+	}
+
+	.sidebar-section {
+		flex: 1;
+	}
+
+	.users-section {
+		flex: 2;
+	}
+
+	.voice-controls-sidebar {
+		flex: 1;
+		min-width: 150px;
+	}
+
+	.sidebar-header {
+		padding: 0.75rem;
+		text-align: center;
+	}
+
+	.sidebar-header h3 {
+		font-size: 0.8rem;
+	}
+
+	/* Horizontal scrolling users list */
+	.users-list {
+		flex-direction: row;
+		overflow-x: auto;
+		overflow-y: hidden;
+		padding: 0.5rem;
+		gap: 0.5rem;
+	}
+
+	/* Compact mobile user cards */
+	.user-card {
+		flex-direction: column;
+		min-width: 60px;
+		width: 60px;
+		padding: 0.5rem;
+		text-align: center;
+		flex-shrink: 0;
+	}
+
+	.user-avatar {
+		width: 36px;
+		height: 36px;
+		font-size: 0.8rem;
+		margin-bottom: 0.25rem;
+	}
+
+	.user-info {
+		display: none;
+	}
+
+	.mute-user-btn {
+		position: static;
+		width: 16px;
+		height: 16px;
+		font-size: 8px;
+		margin-top: 0.25rem;
+	}
+
+	/* Mobile voice controls */
+	.voice-controls-content {
+		padding: 0.5rem;
+	}
+
+	.voice-controls-content .control-buttons {
+		gap: 0.5rem;
+	}
+
+	.voice-controls-content .voice-btn {
+		padding: 0.5rem;
+		font-size: 0.8rem;
+	}
+
+	/* Mobile main content */
+	.main-content {
+		flex: 1;
+		min-height: 0;
+	}
+
+	main {
+		padding: 1rem;
+		gap: 1rem;
+	}
+
+	/* Mobile sections */
+	.username-section,
+	.mic-section,
+	.chat-section {
+		padding: 1rem;
+		border-radius: 12px;
+	}
+
+	.section-header h2 {
+		font-size: 1.3rem;
+	}
+
+	.section-header p {
+		font-size: 0.9rem;
+	}
+
+	/* Mobile input groups */
+	.username-section .input-group {
+		flex-direction: column;
+		gap: 0.75rem;
+		max-width: none;
+	}
+
+	#join-chat-btn {
+		min-width: auto;
+		width: 100%;
+	}
+
+	/* Mobile chat */
+	.chat-section {
+		flex: 1;
+		min-height: 250px;
+		padding: 1rem;
+	}
+
+	.chat-messages {
+		padding: 1rem;
+		margin-bottom: 1rem;
+	}
+
+	.chat-message {
+		max-width: 90%;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.9rem;
+	}
+
+	.chat-message .username {
+		font-size: 0.8rem;
+	}
+
+	.chat-message .timestamp {
+		font-size: 0.7rem;
+	}
+
+	/* Mobile chat input */
+	.chat-input-container {
+		gap: 0.75rem;
+	}
+
+	#chat-input {
+		padding: 0.75rem;
+		font-size: 16px;
+		/* Prevent zoom on iOS */
+	}
+
+	#send-btn {
+		padding: 0.75rem 1rem;
+		font-size: 0.9rem;
+	}
+
+	/* Mobile modal */
+	.modal {
+		padding: 0.5rem;
+	}
+
+	.modal-content {
+		width: 100%;
+		max-width: 350px;
+	}
+
+	.modal-header,
+	.modal-body {
+		padding: 1rem;
+	}
+
+	/* Mobile volume control */
+	.volume-control {
+		padding: 0.75rem;
+		gap: 0.75rem;
+	}
+
+	.audio-controls {
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	/* Hide hover effects on mobile */
+	.user-card:hover,
+	.control-btn:hover,
+	button:hover {
+		transform: none;
+	}
+
+	/* Mobile scrollbars */
+	.users-list::-webkit-scrollbar,
+	.chat-messages::-webkit-scrollbar {
+		height: 4px;
+		width: 4px;
+	}
+}
+
+/* Extra small mobile devices */
+@media (max-width: 480px) {
+	.app-container {
+		padding: 0.25rem;
+		gap: 0.25rem;
+	}
+
+	.sidebar {
+		max-height: 180px;
+		padding: 0.25rem;
+		gap: 0.25rem;
+	}
+
+	.sidebar-header {
+		padding: 0.5rem;
+	}
+
+	.sidebar-header h3 {
+		font-size: 0.7rem;
+	}
+
+	.users-list {
+		padding: 0.25rem;
+	}
+
+	.user-card {
+		min-width: 50px;
+		width: 50px;
+		padding: 0.25rem;
+	}
+
+	.user-avatar {
+		width: 32px;
+		height: 32px;
+		font-size: 0.7rem;
+	}
+
+	main {
+		padding: 0.75rem;
+		gap: 0.75rem;
+	}
+
+	.section-header h2 {
+		font-size: 1.2rem;
+	}
+
+	.username-section,
+	.mic-section,
+	.chat-section {
+		padding: 0.75rem;
+	}
+
+	.chat-messages {
+		padding: 0.75rem;
+	}
+
+	.chat-message {
+		padding: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
+
+	#chat-input {
+		padding: 0.5rem;
+	}
+
+	#send-btn {
+		padding: 0.5rem 0.75rem;
+	}
+}
+
+/* Landscape mobile orientation */
+@media (max-width: 768px) and (orientation: landscape) {
+	.app-container {
+		flex-direction: row;
+	}
+
+	.sidebar {
+		width: 200px;
+		height: 100vh;
+		max-height: none;
+		order: 0;
+		flex-direction: column;
+	}
+
+	.sidebar-section {
+		flex: auto;
+	}
+
+	.users-section {
+		flex: 1;
+	}
+
+	.voice-controls-sidebar {
+		flex: 0 0 auto;
+	}
+
+	.users-list {
+		flex-direction: column;
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
+	.user-card {
+		width: auto;
+		min-width: auto;
+		flex-direction: row;
+	}
+
+	.user-info {
+		display: block;
+	}
+
+	.chat-section {
+		min-height: 200px;
+	}
+}
+
+/* Reconnection Notice */
+.reconnection-notice {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	background: rgba(244, 67, 54, 0.95);
+	backdrop-filter: blur(10px);
+	color: white;
+	z-index: 2000;
+	padding: 1rem;
+	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
+	animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+	from {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+.notice-content {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 1rem;
+	max-width: 600px;
+	margin: 0 auto;
+}
+
+.spinner {
+	width: 24px;
+	height: 24px;
+	border: 3px solid rgba(255, 255, 255, 0.3);
+	border-top: 3px solid white;
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.notice-text h3 {
+	margin: 0;
+	font-size: 1rem;
+	font-weight: 600;
+}
+
+.notice-text p {
+	margin: 0;
+	font-size: 0.9rem;
+	opacity: 0.9;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+	width: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+	background: var(--bg-tertiary);
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: var(--accent);
+}