Add private chat to multiplayer rooms

app/multiplayer.css

@@ -215,3 +215,134 @@
   align-items: center;
   gap: 8px;
 }
+
+.room-chat {
+  position: fixed;
+  bottom: max(20px, env(safe-area-inset-bottom));
+  left: max(20px, env(safe-area-inset-left));
+  z-index: 70;
+  width: min(350px, calc(100vw - 40px));
+  color: var(--text);
+}
+.room-chat-toggle {
+  background: var(--panel, #1a222c);
+  box-shadow: 0 4px 18px #0005;
+  min-height: 44px;
+}
+.room-chat-unread {
+  border-radius: 50%;
+  min-width: 22px;
+  padding: 2px 5px;
+  background: var(--accent, #8dce66);
+  color: #172210;
+  font: 12px sans-serif;
+}
+.room-chat section {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  width: 100%;
+  border: 1px solid var(--line, #35404c);
+  border-radius: 12px;
+  background: var(--panel, #1a222c);
+  box-shadow: 0 8px 32px #0006;
+  overflow: hidden;
+}
+.room-chat:not(.room-chat-playing) {
+  position: static;
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto 40px;
+}
+.room-chat:not(.room-chat-playing) section {
+  position: static;
+  margin-top: 8px;
+}
+.room-chat-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--line);
+}
+.room-chat-heading button {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+}
+.room-chat-log {
+  height: min(260px, 30dvh);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 12px;
+}
+.room-chat-log p {
+  margin: 0 0 14px;
+  overflow-wrap: anywhere;
+  font-size: 14px;
+}
+.room-chat-log strong,
+.room-chat-log span {
+  display: block;
+}
+.room-chat-log strong {
+  font-size: 12px;
+  margin-bottom: 3px;
+}
+.room-chat-mine strong {
+  color: var(--accent, #8dce66);
+}
+.room-chat form {
+  display: flex;
+  gap: 8px;
+  padding: 10px;
+  border-top: 1px solid var(--line);
+}
+.room-chat input {
+  flex: 1;
+  min-width: 0;
+  min-height: 44px;
+  padding: 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg, #131b24);
+  color: inherit;
+  font: inherit;
+  font-size: 16px;
+}
+.room-chat form .button {
+  padding: 10px 12px;
+}
+.room-chat .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.room-chat .error-message {
+  margin: 0;
+  padding: 0 12px 10px;
+  font-size: 13px;
+}
+@media (max-width: 700px) {
+  .room-chat {
+    left: max(10px, env(safe-area-inset-left));
+    width: min(350px, calc(100vw - 20px));
+  }
+  .room-chat-playing {
+    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 68px);
+  }
+  .room-chat-playing section {
+    max-height: calc(100dvh - 220px);
+    overflow-y: auto;
+  }
+}