beeta/frontend/src/lib/components/chat/ChatPanel.svelte

<script>
	import { onMount, onDestroy } from 'svelte';
	import { get } from 'svelte/store';
	import {
		filteredMessages,
		connectionStatus,
		chatUserInfo,
		participants,
		messageVisibilityFilter,
		hiddenUsers,
		loadVisibilitySettings,
		selectedRealms,
		availableRealms,
		toggleRealmFilter,
		resetToGlobal,
		fetchRealmStats
	} from '$lib/chat/chatStore';
	import { chatWebSocket } from '$lib/chat/chatWebSocket';
	import { chatLayout } from '$lib/stores/chatLayout';
	import { auth, isAuthenticated } from '$lib/stores/auth';
	import {
		ttsEnabled,
		ttsSettings,
		ttsUserFilter,
		availableVoices,
		initVoices,
		loadSettings as loadTtsSettings,
		setVoice
	} from '$lib/chat/ttsStore';

	import ChatMessage from './ChatMessage.svelte';
	import ChatInput from './ChatInput.svelte';
	import ProfilePreview from './ProfilePreview.svelte';

	export let realmId;
	export let userColor = '#FFFFFF';
	export let chatEnabled = true;
	export let chatGuestsAllowed = true;
	export let hideHeader = false;
	export let hideTheaterMode = false;

	let messagesContainer;
	let autoScroll = true;
	let initialScrollDone = false; // Prevent handleScroll from disabling autoScroll before initial scroll
	let showMenu = false;  // Combined settings + participants menu
	let configCollapsed = false;  // Track if config section is collapsed
	let usersCollapsed = false;   // Track if users section is collapsed
	let realmsCollapsed = false;  // Track if realms section is collapsed
	let participantModMenuId = null;  // Track which participant's mod menu is open
	let modMenuPosition = { x: 0, y: 0 };  // Position for fixed mod menu
	let showRenameModal = false;
	let newGuestName = '';
	let hasNewMessage = false;
	let fadeTimeout;
	let activeProfilePreview = null;
	let chatInputRef;
	let honkAudio = null;
	let honkSoundUrl = null;
	let mentionedMessageIds = new Set(); // Track which messages have already played honk
	let wasAuthenticated = false; // Track previous auth state for reconnect detection

	$: isConnected = $connectionStatus === 'connected';

	// Auto-load participants when connected
	$: if (isConnected) {
		chatWebSocket.getParticipants();
	}

	// Reconnect WebSocket when user logs in or registers while already connected as guest
	$: {
		const nowAuthenticated = $isAuthenticated;
		if (nowAuthenticated && !wasAuthenticated && isConnected) {
			console.log('[ChatPanel] Auth state changed to authenticated, reconnecting...');
			chatWebSocket.manualReconnect();
		}
		wasAuthenticated = nowAuthenticated;
	}

	function toggleMenu() {
		showMenu = !showMenu;
		if (showMenu) {
			chatWebSocket.getParticipants();
			fetchRealmStats(); // Fetch realm stats for the REALMS section
		}
	}

	function toggleParticipantModMenu(participantId, event) {
		event.stopPropagation();
		if (participantModMenuId === participantId) {
			participantModMenuId = null;
		} else {
			const rect = event.target.getBoundingClientRect();
			modMenuPosition = { x: rect.right, y: rect.bottom + 2 };
			participantModMenuId = participantId;
		}
	}

	async function handleParticipantModAction(participant, action) {
		switch (action) {
			case 'kick':
				chatWebSocket.kickUser(participant.userId, 60, 'Kicked by moderator');
				break;
			case 'mute':
				chatWebSocket.muteUser(participant.userId, 0, 'Muted by moderator'); // 0 = permanent
				break;
			case 'ban':
				chatWebSocket.banUser(participant.userId, 'Banned by moderator');
				break;
			case 'promote':
				await promoteToModerator(participant.userId);
				break;
			case 'demote':
				await demoteFromModerator(participant.userId);
				break;
		}
		participantModMenuId = null;
	}

	async function promoteToModerator(userId) {
		if (!userId) return;
		try {
			const response = await fetch(`/api/admin/users/${userId}/promote-moderator`, {
				method: 'POST',
				credentials: 'include'
			});
			if (response.ok) {
				chatWebSocket.getParticipants(); // Refresh participants list
			}
		} catch (e) {
			console.error('Failed to promote user:', e);
		}
	}

	async function demoteFromModerator(userId) {
		if (!userId) return;
		try {
			const response = await fetch(`/api/admin/users/${userId}/demote-moderator`, {
				method: 'POST',
				credentials: 'include'
			});
			if (response.ok) {
				chatWebSocket.getParticipants(); // Refresh participants list
			}
		} catch (e) {
			console.error('Failed to demote user:', e);
		}
	}

	// Check if current user has mod powers
	$: hasModPowers = $chatUserInfo.isModerator || $chatUserInfo.isAdmin || $chatUserInfo.isStreamer;

	let chatLoadedAt = Date.now();

	async function loadActiveHonkSound() {
		try {
			const response = await fetch('/api/honk/active');
			if (response.ok) {
				const data = await response.json();
				if (data.honk && data.honk.filePath) {
					honkSoundUrl = data.honk.filePath;
					honkAudio = new Audio(honkSoundUrl);
					honkAudio.volume = 0.5;
					honkAudio.load();
				}
			}
		} catch (e) {
			// Silently fail - honk is non-essential
		}
	}

	function handleMentioned(event) {
		const { messageId, timestamp } = event.detail;

		// Only play honk once per message
		if (mentionedMessageIds.has(messageId)) return;
		mentionedMessageIds.add(messageId);

		// Only play honk for messages that arrived after chat loaded (not historical messages)
		const messageTime = timestamp ? new Date(timestamp).getTime() : Date.now();
		if (messageTime < chatLoadedAt - 5000) return;

		if (honkSoundUrl) {
			const audio = new Audio(honkSoundUrl);
			audio.volume = 0.5;
			audio.play().catch(() => {});
		}
	}

	onMount(() => {
		// Initialize TTS voices and load realm settings
		initVoices();
		loadTtsSettings(realmId);
		loadVisibilitySettings(realmId);

		// Load active honk sound for mentions
		loadActiveHonkSound();

		// Only connect if chat is enabled
		if (!chatEnabled) {
			return;
		}

		// Get token from localStorage if available (for authenticated users)
		const token = typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null;
		console.log('Chat connecting with realmId:', realmId, token ? '(authenticated)' : '(guest)');
		chatWebSocket.connect(realmId, token);

		// Function to scroll to newest messages (bottom for UP flow, top for DOWN flow)
		const scrollToBottom = () => {
			if (autoScroll && messagesContainer) {
				requestAnimationFrame(() => {
					const messagesFromTop = get(chatLayout).messagesFromTop;
					if (messagesFromTop) {
						// column-reverse: newest at top, scroll to top
						messagesContainer.scrollTop = 0;
					} else {
						// normal: newest at bottom, scroll to bottom
						messagesContainer.scrollTop = messagesContainer.scrollHeight;
					}
					initialScrollDone = true;
				});
			}
		};

		// Scroll to bottom when new messages arrive
		const unsubscribe = filteredMessages.subscribe((msgs) => {
			scrollToBottom();
			// Trigger new message indicator for theater mode
			if ($chatLayout.theaterMode && msgs.length > 0) {
				hasNewMessage = true;
				clearTimeout(fadeTimeout);
				fadeTimeout = setTimeout(() => {
					hasNewMessage = false;
				}, 5000);
			}
		});

		// Watch for content size changes (e.g., when images load)
		// This ensures autoscroll works even when images finish loading after message is added
		let resizeObserver;
		if (messagesContainer) {
			resizeObserver = new ResizeObserver(() => {
				scrollToBottom();
			});
			resizeObserver.observe(messagesContainer);
		}

		return () => {
			unsubscribe();
			if (resizeObserver) {
				resizeObserver.disconnect();
			}
		};
	});

	onDestroy(() => {
		// Keep connection alive for terminal usage
		// chatWebSocket.disconnect();
		if (fadeTimeout) clearTimeout(fadeTimeout);
	});

	function handleSendMessage(event) {
		let { message, selfDestructSeconds } = event.detail;

		// Handle /graffiti command
		if (message.trim().toLowerCase() === '/graffiti') {
			const graffitiUrl = $auth.user?.graffitiUrl;
			if (graffitiUrl) {
				message = `[graffiti]${graffitiUrl}[/graffiti]`;
			} else {
				alert('You don\'t have a graffiti yet. Create one in Settings > Appearance.');
				return;
			}
		}

		chatWebSocket.sendMessage(message, userColor, selfDestructSeconds || 0);
	}

	function handleScroll() {
		// Ignore scroll events before initial scroll is done (prevents browser's initial position from disabling autoScroll)
		if (!initialScrollDone) return;

		const { scrollTop, scrollHeight, clientHeight } = messagesContainer;
		if ($chatLayout.messagesFromTop) {
			// column-reverse: user at "newest" means scrollTop near 0
			autoScroll = scrollTop <= 50;
		} else {
			// normal: user at bottom means scrollTop + clientHeight near scrollHeight
			autoScroll = scrollTop + clientHeight >= scrollHeight - 50;
		}
	}

	function handleDeleteMessage(messageId) {
		chatWebSocket.deleteMessage(messageId);
	}

	function handleModAction(event) {
		const { action, userId, duration, reason } = event.detail;

		switch (action) {
			case 'ban':
				chatWebSocket.banUser(userId, reason);
				break;
			case 'mute':
				chatWebSocket.muteUser(userId, duration || 0, reason); // 0 = permanent by default
				break;
		}
	}

	function handleRename() {
		if (!newGuestName || newGuestName.trim().length === 0) {
			alert('Please enter a name');
			return;
		}

		// Send rename message to server
		// Note: State updates (localStorage + store) happen in rename_success handler
		// to avoid updating UI before server confirms the rename
		if (chatWebSocket.sendRename(newGuestName.trim())) {
			showRenameModal = false;
			newGuestName = '';
		} else {
			alert('Failed to send rename request');
		}
	}

	function handleClickOutside(event) {
		// Close combined menu when clicking outside
		if (showMenu) {
			const menuContainer = event.target.closest('.menu-container');
			const combinedMenu = event.target.closest('.combined-menu');
			if (!menuContainer && !combinedMenu) {
				showMenu = false;
				participantModMenuId = null;
			}
		}
		// Close participant mod menu when clicking outside
		if (participantModMenuId !== null) {
			const modContainer = event.target.closest('.participant-mod-container');
			if (!modContainer) {
				participantModMenuId = null;
			}
		}
	}

	function handleCopySticker(event) {
		const { stickerName } = event.detail;
		if (chatInputRef) {
			chatInputRef.insertText(stickerName);
		}
	}

	function handleMention(event) {
		const { username } = event.detail;
		if (chatInputRef) {
			chatInputRef.insertText(`@${username} `);
		}
	}

	function handleShowProfile(event) {
		const { username, userId, isGuest, messageId, position } = event.detail;
		activeProfilePreview = {
			username,
			userId,
			isGuest,
			messageId,
			position
		};
	}

	function handleProfileClose() {
		activeProfilePreview = null;
	}

	function popoutChat() {
		const realmParam = realmId ? `?realm=${realmId}` : '';
		const popoutUrl = `/chat/popout${realmParam}`;
		window.open(
			popoutUrl,
			'ChatPopout',
			'width=400,height=700,menubar=no,toolbar=no,location=no,status=no'
		);
	}

	// Check if currently showing global (all realms)
	$: isGlobalMode = $selectedRealms.size === 0;
</script>

<svelte:window on:click={handleClickOutside} />

<div
	class="chat-panel"
	class:inverted={$chatLayout.inverted}
	class:messages-from-top={$chatLayout.messagesFromTop}
	class:theater-mode={$chatLayout.theaterMode && !hideTheaterMode}
	class:has-new-message={hasNewMessage}
	on:mouseenter={() => { if ($chatLayout.theaterMode && !hideTheaterMode) hasNewMessage = true; }}
	on:mouseleave={() => { if ($chatLayout.theaterMode && !hideTheaterMode) { clearTimeout(fadeTimeout); fadeTimeout = setTimeout(() => hasNewMessage = false, 3000); } }}
>


	{#if showRenameModal}
		<div class="modal-overlay" on:click={() => showRenameModal = false}>
			<div class="modal-content small" on:click|stopPropagation>
				<div class="modal-header">
					<h3>Change Display Name</h3>
					<button class="close-btn" on:click={() => showRenameModal = false}>×</button>
				</div>
				<div class="rename-form">
					<p style="color: #999; font-size: 0.9rem; margin-bottom: 1rem;">
						Current name: <span style="color: {userColor}; font-weight: 600;">{$chatUserInfo.username}</span>
					</p>
					<form on:submit|preventDefault={handleRename}>
						<input
							type="text"
							bind:value={newGuestName}
							placeholder="Enter new name..."
							maxlength="30"
							pattern="[a-zA-Z0-9_-]+"
							title="Letters, numbers, underscores, and hyphens only"
							style="width: 100%; padding: 0.75rem; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; color: #fff; font-size: 1rem; margin-bottom: 1rem;"
							required
						/>
						<div style="display: flex; gap: 0.5rem;">
							<button type="submit" class="btn-primary" style="flex: 1; padding: 0.75rem; background: #4a9eff; border: none; border-radius: 4px; color: #fff; font-weight: 600; cursor: pointer;">
								Change Name
							</button>
							<button type="button" class="btn-secondary" on:click={() => showRenameModal = false} style="flex: 1; padding: 0.75rem; background: #444; border: none; border-radius: 4px; color: #fff; font-weight: 600; cursor: pointer;">
								Cancel
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	{/if}

	{#if !hideHeader}
	<div class="chat-header" class:menu-open={showMenu}>
		<h3 class="realm-title">{realmId || 'Global'}</h3>
		<div class="header-actions">
			{#if chatEnabled && isConnected && $chatUserInfo.isGuest}
				<button class="header-btn" on:click={() => showRenameModal = true} title="Change Display Name">
					<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
						<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
					</svg>
				</button>
			{/if}

			<!-- Popout button -->
			<button class="header-btn" on:click={popoutChat} title="Pop out chat">
				<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
					<path d="M6.5 1A.5.5 0 0 1 7 .5h7a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0V1.5H7a.5.5 0 0 1-.5-.5z"/>
					<path d="M13.5 1l-6 6H4a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V9.5l6-6z"/>
				</svg>
			</button>

			<!-- Combined Menu button (settings + participants) -->
			{#if chatEnabled}
				<div class="menu-container">
					<button class="header-btn menu-btn" on:click={toggleMenu} title="Menu">
						<span class="status-dot" class:connected={isConnected} class:disconnected={!isConnected}></span>
						<span class="btn-count">{$participants.length}</span>
					</button>
				</div>
			{/if}

		</div>
	</div>

	<!-- Combined menu - positioned relative to chat-panel, outside chat-header -->
	{#if showMenu}
		<div class="combined-menu" on:click|stopPropagation>
			<!-- Settings Section (Collapsible) -->
			<div class="menu-section">
				<button class="menu-section-header collapsible" on:click={() => configCollapsed = !configCollapsed}>
					<span class="collapse-arrow" class:collapsed={configCollapsed}>▼</span>
					-- CONFIG --
				</button>
				{#if !configCollapsed}
				<div class="config-columns">
					<!-- Left column: Layout options -->
					<div class="config-column">
						<button class="menu-option" on:click={() => chatLayout.togglePosition()}>
							<span class="option-marker">></span>
							<span class="option-label">position:</span>
							<span class="option-value">{$chatLayout.position.toUpperCase()}</span>
						</button>
						<button class="menu-option" on:click={() => chatLayout.toggleInverted()}>
							<span class="option-marker">></span>
							<span class="option-label">input:</span>
							<span class="option-value">{$chatLayout.inverted ? 'TOP' : 'BOTTOM'}</span>
						</button>
						<button class="menu-option" on:click={() => chatLayout.toggleMessagesFromTop()}>
							<span class="option-marker">></span>
							<span class="option-label">flow:</span>
							<span class="option-value">{$chatLayout.messagesFromTop ? 'DOWN' : 'UP'}</span>
						</button>
						{#if !hideTheaterMode}
							<button class="menu-option" on:click={() => chatLayout.toggleTheaterMode()}>
								<span class="option-marker">></span>
								<span class="option-label">theater:</span>
								<span class="option-value" class:active-on={$chatLayout.theaterMode}>{$chatLayout.theaterMode ? 'ON' : 'OFF'}</span>
							</button>
						{/if}
						<div class="menu-option-row">
							<span class="option-marker">></span>
							<span class="option-label">show:</span>
							<select class="inline-select" value={$messageVisibilityFilter} on:change={(e) => messageVisibilityFilter.set(e.target.value)}>
								<option value="all">ALL</option>
								<option value="registered">REG</option>
								<option value="guests">GUEST</option>
							</select>
						</div>
					</div>
					<!-- Right column: TTS options -->
					<div class="config-column tts-column">
						<button class="menu-option" on:click={() => ttsEnabled.update(v => !v)}>
							<span class="option-marker">></span>
							<span class="option-label">tts:</span>
							<span class="option-value" class:active-on={$ttsEnabled}>{$ttsEnabled ? 'ON' : 'OFF'}</span>
						</button>
						<div class="menu-option-row">
							<span class="option-marker"> </span>
							<span class="option-label">voice:</span>
							<select class="inline-select" value={$ttsSettings.voiceName} on:change={(e) => setVoice(e.target.value)}>
								<option value="">default</option>
								{#each $availableVoices as voice}
									<option value={voice.name}>{voice.name}</option>
								{/each}
							</select>
						</div>
						<div class="menu-option-row">
							<span class="option-marker"> </span>
							<span class="option-label">speed:</span>
							<input type="range" class="inline-range" min="0.1" max="4" step="0.1" value={$ttsSettings.rate} on:input={(e) => ttsSettings.update(s => ({ ...s, rate: parseFloat(e.target.value) }))} />
							<span class="range-value">{$ttsSettings.rate.toFixed(1)}</span>
						</div>
						<div class="menu-option-row">
							<span class="option-marker"> </span>
							<span class="option-label">pitch:</span>
							<input type="range" class="inline-range" min="0" max="2" step="0.1" value={$ttsSettings.pitch} on:input={(e) => ttsSettings.update(s => ({ ...s, pitch: parseFloat(e.target.value) }))} />
							<span class="range-value">{$ttsSettings.pitch.toFixed(1)}</span>
						</div>
						<div class="menu-option-row">
							<span class="option-marker"> </span>
							<span class="option-label">volume:</span>
							<input type="range" class="inline-range" min="0" max="1" step="0.1" value={$ttsSettings.volume} on:input={(e) => ttsSettings.update(s => ({ ...s, volume: parseFloat(e.target.value) }))} />
							<span class="range-value">{$ttsSettings.volume.toFixed(1)}</span>
						</div>
					</div>
				</div>
				{/if}
			</div>
			<!-- Users Section (Collapsible) -->
			<div class="menu-section">
				<button class="menu-section-header collapsible" on:click={() => usersCollapsed = !usersCollapsed}>
					<span class="collapse-arrow" class:collapsed={usersCollapsed}>▼</span>
					-- USERS ({$participants.length}) --
				</button>
				{#if !usersCollapsed}
				<div class="users-list">
					{#each $participants as participant (participant.userId)}
						<div class="user-row">
							<span class="user-prefix">{participant.isStreamer ? '*' : participant.isModerator ? '+' : ' '}</span>
							<button
								class="user-name-btn"
								class:guest={participant.isGuest}
								style={participant.userColor && !participant.isGuest ? `color: ${participant.userColor}` : ''}
								on:click={(e) => {
									// Toggle: close if same user, open if different
									if (activeProfilePreview && activeProfilePreview.userId === participant.userId) {
										activeProfilePreview = null;
									} else {
										const rect = e.target.getBoundingClientRect();
										activeProfilePreview = {
											username: participant.username,
											userId: participant.userId,
											isGuest: participant.isGuest,
											position: { x: rect.left, y: rect.bottom + 4 }
										};
									}
								}}
								on:auxclick={(e) => {
									// Middle-click opens profile in new tab
									if (e.button === 1 && !participant.isGuest) {
										e.preventDefault();
										window.open(`/profile/${participant.username}`, '_blank');
									}
								}}
							>{participant.username}</button>
							{#if hasModPowers && participant.userId !== $chatUserInfo.userId && !participant.isStreamer && ($chatUserInfo.isAdmin || !participant.isModerator)}
								<div class="participant-mod-container">
									<button class="user-mod-btn" on:click={(e) => toggleParticipantModMenu(participant.userId, e)}>...</button>
									{#if participantModMenuId === participant.userId}
										<div class="user-mod-menu" style="left: {modMenuPosition.x}px; top: {modMenuPosition.y}px; transform: translateX(-100%);" on:click|stopPropagation>
											<button on:click={() => handleParticipantModAction(participant, 'kick')}>kick</button>
											<button on:click={() => handleParticipantModAction(participant, 'mute')}>mute</button>
											<button class="danger" on:click={() => handleParticipantModAction(participant, 'ban')}>ban</button>
											{#if $chatUserInfo.isAdmin && !participant.isGuest}
												{#if participant.isModerator}
													<button class="warn" on:click={() => handleParticipantModAction(participant, 'demote')}>demote</button>
												{:else}
													<button class="success" on:click={() => handleParticipantModAction(participant, 'promote')}>promote</button>
												{/if}
											{/if}
										</div>
									{/if}
								</div>
							{/if}
						</div>
					{/each}
					{#if $participants.length === 0}
						<div class="empty-users">no users online</div>
					{/if}
				</div>
				{/if}
			</div>
			<!-- Realms Section (Collapsible) -->
			<div class="menu-section">
				<button class="menu-section-header collapsible" on:click={() => realmsCollapsed = !realmsCollapsed}>
					<span class="collapse-arrow" class:collapsed={realmsCollapsed}>▼</span>
					-- REALMS --
				</button>
				{#if !realmsCollapsed}
				<div class="realms-list">
					<div class="realm-row" class:active={isGlobalMode}>
						<button class="realm-name-btn" on:click={() => resetToGlobal()}>
							<span class="realm-marker">{isGlobalMode ? '>' : ' '}</span>
							GLOBAL
						</button>
					</div>
					{#each $availableRealms as realm (realm.realmId)}
						<div class="realm-row" class:active={$selectedRealms.has(realm.realmId)}>
							<button class="realm-name-btn" on:click={() => toggleRealmFilter(realm.realmId)}>
								<span class="realm-marker">{$selectedRealms.has(realm.realmId) ? '>' : ' '}</span>
								{realm.realmId}
							</button>
							<span class="realm-count">{realm.participantCount}</span>
						</div>
					{/each}
					{#if $availableRealms.length === 0}
						<div class="empty-realms">no realms</div>
					{/if}
				</div>
				{/if}
			</div>
		</div>
	{/if}
	{/if}

	{#if !chatEnabled}
		<div class="chat-disabled-message">
			<div class="disabled-icon">💬</div>
			<p><strong>Chat Disabled</strong></p>
			<p class="disabled-text">The streamer has disabled chat for this realm.</p>
		</div>
	{:else if !chatGuestsAllowed && $chatUserInfo.isGuest}
		<div class="chat-disabled-message">
			<div class="disabled-icon">🔒</div>
			<p><strong>Guests Not Allowed</strong></p>
			<p class="disabled-text">This chat requires authentication. Please log in to participate.</p>
			<a href="/login" class="btn" style="margin-top: 1rem; padding: 0.75rem 1.5rem; background: var(--primary); color: white; text-decoration: none; border-radius: 4px; display: inline-block;">
				Login
			</a>
		</div>
	{:else}
		<div class="messages-container" bind:this={messagesContainer} on:scroll={handleScroll}>
			{#each $filteredMessages as message (message.messageId)}
				<ChatMessage
					{message}
					showHeader={message.showHeader ?? false}
					currentUserId={$chatUserInfo.userId}
					currentUsername={$chatUserInfo.username}
					currentRealmId={realmId}
					isModerator={$chatUserInfo.isModerator}
					isAdmin={$chatUserInfo.isAdmin}
					on:delete={() => handleDeleteMessage(message.messageId)}
					on:modAction={handleModAction}
					on:showProfile={handleShowProfile}
					on:copySticker={handleCopySticker}
					on:mentioned={handleMentioned}
					on:mention={handleMention}
				/>
			{/each}

			{#if $filteredMessages.length === 0}
				<div class="empty-state">
					<p>No messages yet. Be the first to chat!</p>
				</div>
			{/if}
		</div>

		<ChatInput
			bind:this={chatInputRef}
			disabled={!isConnected}
			username={$chatUserInfo.username}
			isGuest={$chatUserInfo.isGuest}
			on:send={handleSendMessage}
		/>
	{/if}

	{#if activeProfilePreview}
		<ProfilePreview
			username={activeProfilePreview.username}
			userId={activeProfilePreview.userId}
			isGuest={activeProfilePreview.isGuest}
			position={activeProfilePreview.position}
			on:close={handleProfileClose}
		/>
	{/if}
</div>

<style>
	.chat-panel {
		display: flex;
		flex-direction: column;
		height: 100%;
		max-height: 100%;
		min-height: 0;
		background: #1a1a1a;
		position: relative;
		overflow: hidden; /* Prevent panel itself from scrolling */
	}

	.chat-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem;
		border-bottom: 1px solid #333;
		background: #0d0d0d;
		flex-shrink: 0;
		position: relative;
	}

	.chat-header h3 {
		margin: 0;
		font-size: 1rem;
		color: #fff;
	}

	.realm-title {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.header-actions {
		display: flex;
		align-items: center;
		gap: 0.375rem;
	}

	/* Unified slim header button style */
	.header-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		height: 26px;
		min-width: 26px;
		padding: 0 0.375rem;
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: 4px;
		color: #aaa;
		cursor: pointer;
		font-size: 0.75rem;
		transition: all 0.15s;
	}

	.header-btn:hover {
		background: rgba(255, 255, 255, 0.12);
		border-color: rgba(255, 255, 255, 0.25);
		color: #fff;
	}

	.header-btn .status-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #666;
		flex-shrink: 0;
	}

	.header-btn .status-dot.connected {
		background: #0f0;
	}

	.header-btn .status-dot.disconnected {
		background: #f44336;
	}

	.btn-count {
		font-weight: 500;
	}

	.messages-container {
		flex: 1 1 0; /* Grow, shrink, base 0 */
		background: #000;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 0.25rem;
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		min-height: 0; /* Allow flex shrinking */
		max-height: 100%; /* Don't exceed container */
		width: 100%; /* Ensure full width */
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE/Edge */
	}

	.messages-container::-webkit-scrollbar {
		display: none; /* Chrome/Safari/Opera */
	}

	.empty-state {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666;
		font-style: italic;
	}

	.chat-disabled-message {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 2rem;
		text-align: center;
		color: #999;
	}

	.disabled-icon {
		font-size: 3rem;
		margin-bottom: 1rem;
		opacity: 0.5;
	}

	.chat-disabled-message p {
		margin: 0.5rem 0;
	}

	.chat-disabled-message strong {
		color: #fff;
		font-size: 1.1rem;
	}

	.disabled-text {
		font-size: 0.9rem;
		color: #666;
	}

	/* Combined Menu (Terminal Style) */
	.menu-container {
		position: static;
	}

	.combined-menu {
		position: absolute;
		left: 0;
		right: 0;
		top: 38px; /* Height of header */
		background: #0a0a0a;
		border-bottom: 1px solid #333;
		max-height: 50%;
		overflow-y: auto;
		overflow-x: hidden;
		z-index: 200;
		font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
		font-size: 0.75rem;
	}

	.menu-section {
		border-bottom: 1px solid #222;
	}

	.menu-section:last-child {
		border-bottom: none;
	}

	.menu-section-header {
		display: block;
		width: 100%;
		padding: 0.5rem 0.75rem;
		color: #888;
		font-size: 0.7rem;
		letter-spacing: 1px;
		background: #0d0d0d;
		text-align: center;
		border: none;
		font-family: inherit;
	}

	.menu-section-header.collapsible {
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.menu-section-header.collapsible:hover {
		color: #aaa;
	}

	.collapse-arrow {
		position: absolute;
		left: 0.75rem;
		font-size: 0.55rem;
		transition: transform 0.15s ease;
		opacity: 0.6;
	}

	.collapse-arrow.collapsed {
		transform: rotate(-90deg);
	}

	.config-columns {
		display: flex;
		gap: 1px;
		background: #222;
		min-width: 0;
	}

	.config-column {
		flex: 1;
		min-width: 0;
		background: #0a0a0a;
		display: flex;
		flex-direction: column;
	}

	.config-column.tts-column {
		border-left: 1px solid #222;
	}

	.menu-option {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 0.5rem 0.75rem;
		background: none;
		border: none;
		color: #aaa;
		font-family: inherit;
		font-size: inherit;
		cursor: pointer;
		text-align: left;
		transition: background 0.1s;
		min-width: 0;
		overflow: hidden;
	}

	.menu-option:hover {
		background: #1a1a1a;
		color: #fff;
	}

	.menu-option.active {
		color: #a855f7;
	}

	.menu-option-row {
		display: flex;
		align-items: center;
		padding: 0.5rem 0.75rem;
		color: #aaa;
		min-width: 0;
		overflow: hidden;
	}

	.option-marker {
		display: none;
	}

	.option-label {
		color: #888;
		margin-right: 0.5rem;
	}

	.option-value {
		color: #a855f7;
		margin-left: auto;
	}

	.option-value.active-on {
		color: #f00;
	}

	.option-count {
		color: #666;
		margin-left: auto;
		font-size: 0.65rem;
	}

	.inline-select {
		background: #111;
		border: 1px solid #333;
		color: #a855f7;
		font-family: inherit;
		font-size: inherit;
		padding: 0.125rem 0.25rem;
		cursor: pointer;
		margin-left: auto;
		max-width: 164px;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.inline-select:hover {
		border-color: #555;
	}

	.inline-range {
		width: 60px;
		height: 4px;
		background: #333;
		border: none;
		margin-left: auto;
		cursor: pointer;
		-webkit-appearance: none;
	}

	.inline-range::-webkit-slider-thumb {
		-webkit-appearance: none;
		width: 8px;
		height: 8px;
		background: #0f0;
		cursor: pointer;
	}

	.range-value {
		width: 24px;
		text-align: right;
		color: #0f0;
		margin-left: 0.5rem;
	}

	/* Users Grid (3 columns) */
	.users-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1px;
		background: #222;
		max-height: none;
		overflow-y: auto;
	}

	.user-row {
		display: flex;
		align-items: center;
		padding: 0.35rem 0.5rem;
		gap: 0.25rem;
		background: #0a0a0a;
		min-width: 0; /* Allow text truncation */
	}

	.user-row:hover {
		background: #1a1a1a;
	}

	.user-prefix {
		width: 0.75rem;
		color: #ff0;
		flex-shrink: 0;
		text-align: center;
		font-size: 0.7rem;
	}

	.user-name-btn {
		background: none;
		border: none;
		color: #ccc;
		font-family: inherit;
		font-size: inherit;
		padding: 0;
		cursor: pointer;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		text-align: left;
		min-width: 0;
	}

	.user-name-btn:hover {
		color: #fff;
		text-decoration: underline;
	}

	.user-name-btn.guest {
		color: #666;
		font-style: italic;
	}

	.user-name-btn.guest:hover {
		color: #888;
	}

	.user-mod-btn {
		background: #222;
		border: 1px solid #333;
		color: #888;
		font-family: inherit;
		font-size: 0.6rem;
		cursor: pointer;
		padding: 0.1rem 0.25rem;
		flex-shrink: 0;
		line-height: 1;
	}

	.user-mod-btn:hover {
		background: #333;
		color: #fff;
		border-color: #444;
	}

	.user-mod-menu {
		position: fixed;
		background: #111;
		border: 1px solid #444;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		min-width: 80px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
	}

	.user-mod-menu button {
		background: none;
		border: none;
		color: #aaa;
		font-family: inherit;
		font-size: 0.7rem;
		padding: 0.5rem 0.75rem;
		cursor: pointer;
		text-align: left;
	}

	.user-mod-menu button:hover {
		background: #1a1a1a;
		color: #fff;
	}

	.user-mod-menu button.danger {
		color: #f44;
	}

	.user-mod-menu button.danger:hover {
		background: #311;
	}

	.user-mod-menu button.warn {
		color: #fa0;
	}

	.user-mod-menu button.success {
		color: #0f0;
	}

	.empty-users {
		grid-column: 1 / -1; /* Span all columns */
		padding: 0.75rem;
		color: #555;
		text-align: center;
		font-style: italic;
		background: #0a0a0a;
	}

	/* Realms Grid (3 columns like users) */
	.realms-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1px;
		background: #222;
	}

	.realm-row {
		display: flex;
		align-items: center;
		padding: 0.35rem 0.5rem;
		gap: 0.25rem;
		background: #0a0a0a;
		min-width: 0;
	}

	.realm-row:hover {
		background: #1a1a1a;
	}

	.realm-row.active {
		background: #1a1a1a;
	}

	.realm-name-btn {
		background: none;
		border: none;
		color: #888;
		font-family: inherit;
		font-size: inherit;
		padding: 0;
		cursor: pointer;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		text-align: left;
		min-width: 0;
	}

	.realm-name-btn:hover {
		color: #ccc;
	}

	.realm-row.active .realm-name-btn {
		color: #0f0;
	}

	.realm-marker {
		color: #0f0;
		margin-right: 0.25rem;
	}

	.realm-count {
		color: #555;
		font-size: 0.65rem;
		flex-shrink: 0;
	}

	.empty-realms {
		grid-column: 1 / -1;
		padding: 0.75rem;
		color: #555;
		text-align: center;
		font-style: italic;
		background: #0a0a0a;
	}

	.participant-mod-container {
		position: relative;
	}

	.modal-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
	}

	.modal-content {
		background: #1a1a1a;
		border: 1px solid #333;
		border-radius: 8px;
		width: 90%;
		max-width: 500px;
		max-height: 70vh;
		display: flex;
		flex-direction: column;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem;
		border-bottom: 1px solid #333;
	}

	.modal-header h3 {
		margin: 0;
		color: #fff;
		font-size: 1.1rem;
	}

	.close-btn {
		background: none;
		border: none;
		color: #999;
		font-size: 1.5rem;
		cursor: pointer;
		padding: 0;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: color 0.2s;
	}

	.close-btn:hover {
		color: #fff;
	}


	.modal-content.small {
		max-width: 300px;
	}

	/* Inverted layout - input on top, header on bottom */
	.chat-panel.inverted .chat-header {
		order: 3;
		border-bottom: none;
		border-top: 1px solid #333;
	}

	.chat-panel.inverted .messages-container {
		order: 2;
	}

	.chat-panel.inverted :global(.chat-input) {
		order: 1;
	}

	/* Messages from top - newest messages at top */
	.chat-panel.messages-from-top .messages-container {
		flex-direction: column-reverse;
	}

	/* Theater mode styles */
	.chat-panel.theater-mode {
		background: rgba(0, 0, 0, 0.001); /* Nearly invisible but captures hover events */
		border: none;
		pointer-events: auto; /* Ensure panel receives pointer events */
	}

	.chat-panel.theater-mode .chat-header {
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(8px);
		border-color: rgba(255, 255, 255, 0.1);
		opacity: 0;
		transition: opacity 0.3s;
		pointer-events: auto;
		position: relative;
		z-index: 100;
		overflow: visible;
	}

	.chat-panel.theater-mode:hover .chat-header,
	.chat-panel.theater-mode.has-new-message .chat-header,
	.chat-panel.theater-mode .chat-header.menu-open {
		opacity: 1;
	}

	.chat-panel.theater-mode .chat-header .header-btn {
		pointer-events: auto;
	}

	.chat-panel.theater-mode .menu-container {
		pointer-events: auto !important;
		position: relative;
		z-index: 300;
	}

	.chat-panel.theater-mode .combined-menu {
		pointer-events: auto !important;
		z-index: 400;
	}

	.chat-panel.theater-mode .combined-menu * {
		pointer-events: auto !important;
	}

	.chat-panel.theater-mode .messages-container {
		background: transparent;
		mask-image: linear-gradient(to top, black 60%, transparent 100%);
		-webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
	}

	.chat-panel.theater-mode .messages-container :global(.chat-message) {
		background: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(4px);
		border-radius: 4px;
		padding: 0.5rem;
		opacity: 0;
		transition: opacity 0.5s;
	}

	.chat-panel.theater-mode:hover .messages-container :global(.chat-message),
	.chat-panel.theater-mode.has-new-message .messages-container :global(.chat-message) {
		opacity: 1;
	}

	.chat-panel.theater-mode :global(.chat-input) {
		background: rgba(0, 0, 0, 0.7);
		backdrop-filter: blur(8px);
		border-color: rgba(255, 255, 255, 0.1);
		opacity: 0;
		transition: opacity 0.3s;
	}

	.chat-panel.theater-mode:hover :global(.chat-input),
	.chat-panel.theater-mode.has-new-message :global(.chat-input) {
		opacity: 1;
	}

	/* Disabled/empty states in theater mode */
	.chat-panel.theater-mode .chat-disabled-message,
	.chat-panel.theater-mode .empty-state {
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(4px);
		border-radius: 8px;
		padding: 1rem;
		opacity: 0.7;
	}

	/* Combined menu opens upward when chat is inverted (header at bottom) */
	.chat-panel.inverted .combined-menu {
		top: auto;
		bottom: 38px; /* Height of header */
		border-bottom: none;
		border-top: 1px solid #333;
	}
</style>