Restyle audio room speaker cards like Spaces and add room chat to the toolbar.

Use a three-column avatar grid with role labels and speaking/muted indicators, enable chat in audio rooms, and swap the mobile People nav button for Chat since People stays in the header.

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

resources/css/app.css

@@ -370,6 +370,70 @@ html.meet-room-page {
     isolation: isolate;
 }
 
+.meet-room-page .meet-audio-grid.meet-space-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1.25rem 0.75rem;
+    padding: 1rem 0.75rem 1.5rem;
+    max-width: 24rem;
+    margin-inline: auto;
+    align-content: start;
+}
+
+@media (min-width: 640px) {
+    .meet-room-page .meet-audio-grid.meet-space-grid {
+        max-width: 28rem;
+        gap: 1.5rem 1rem;
+    }
+}
+
+.meet-room-page .meet-audio-grid.meet-space-grid [data-participant-tile] {
+    max-width: none;
+}
+
+.meet-room-page .meet-space-tile {
+    background: transparent;
+    box-shadow: none;
+}
+
+.meet-room-page .meet-space-tile.meet-tile-speaking {
+    box-shadow: none;
+}
+
+.meet-room-page .meet-space-tile.meet-tile-speaking [data-tile-avatar-circle] {
+    box-shadow: 0 0 0 2px rgb(56 189 248 / 0.85);
+}
+
+.meet-room-page .meet-space-tile [data-tile-name] {
+    width: 100%;
+    padding-inline: 0.125rem;
+}
+
+.meet-room-page .meet-space-tile [data-tile-role-row] {
+    min-height: 1rem;
+    max-width: 100%;
+}
+
+.meet-room-page .meet-space-tile [data-tile-role] {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.meet-room-page .meet-space-tile [data-tile-avatar-circle] {
+    height: 4.75rem;
+    width: 4.75rem;
+    font-size: 1.125rem;
+}
+
+@media (min-width: 640px) {
+    .meet-room-page .meet-space-tile [data-tile-avatar-circle] {
+        height: 5.25rem;
+        width: 5.25rem;
+        font-size: 1.25rem;
+    }
+}
+
 .meet-room-page .meet-audio-tile {
     width: 100%;
     min-width: 0;