Polish in-meeting UI with custom icons and dismissible chat.

Use meet-icons assets for raise hand, applause, upload, and screen share; move More after lock, redesign the more menu and chat panel with bubbles and close controls.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/js/meet-room.js

@@ -550,6 +550,22 @@ function meetRoom() {
             });
         },
 
+        toggleChat() {
+            this.chatOpen = !this.chatOpen;
+            if (this.chatOpen) {
+                this.featuresOpen = false;
+                this.shareOpen = false;
+            }
+        },
+
+        toggleFeatures() {
+            this.featuresOpen = !this.featuresOpen;
+            if (this.featuresOpen) {
+                this.chatOpen = false;
+                this.shareOpen = false;
+            }
+        },
+
         async openShare() {
             if (navigator.share && this.joinUrl) {
                 try {
@@ -632,11 +648,23 @@ function meetRoom() {
         appendChatMessage(message) {
             const container = document.getElementById('chat-messages');
             if (!container) return;
+
+            const isOwn = message.sender_name === this.displayName;
             const div = document.createElement('div');
-            div.className = 'text-sm';
+            div.className = `meet-chat-bubble${isOwn ? ' meet-chat-bubble--own' : ''}`;
             div.dataset.uuid = message.uuid;
-            div.innerHTML = `<span class="font-medium text-sky-400">${this.escape(message.sender_name)}</span>
-                <p class="mt-0.5 text-slate-200">${this.escape(message.body)}</p>`;
+
+            const time = message.created_at
+                ? new Date(message.created_at).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
+                : '';
+
+            div.innerHTML = `
+                <div class="rounded-2xl px-3 py-2 ${isOwn ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-100'}">
+                    ${isOwn ? '' : `<p class="mb-0.5 text-xs font-medium text-sky-300">${this.escape(message.sender_name)}</p>`}
+                    <p class="text-sm leading-relaxed">${this.escape(message.body)}</p>
+                </div>
+                <p class="mt-1 text-[10px] text-slate-500 ${isOwn ? 'text-right' : ''}">${this.escape(time)}</p>`;
+
             container.appendChild(div);
             container.scrollTop = container.scrollHeight;
         },