#room-join-form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
#room-qq { width: 139px; min-width: 0; border: 2px inset #eee; background: white; padding: 2px 4px; }
#room-join-form .retro-button { margin: 0; padding-inline: 5px; }
.hero-copy .room-identity-note { font-size: 10px; color: #555; margin-top: 4px; }
#room-join-status { color: #800000; font-size: 11px; }
.room-dialog { width: 620px; max-height: 92vh; }
.room-dialog [hidden] { display: none; }
.room-toolbar { display: flex; gap: 10px; padding: 5px; align-items: center; }
.room-toolbar b { color: #000080; font-family: "Courier New", monospace; }
#room-connection { flex: 1; color: #006000; font-size: 11px; }
.room-notice { margin: 0 4px 5px; padding: 3px; background: #ffffcc; border: 1px solid #808000; font-size: 11px; }
.room-columns { display: grid; grid-template-columns: minmax(0, 1fr) 125px; gap: 5px; margin: 0 4px; }
.room-log-wrap { position: relative; min-width: 0; }
#room-log { height: min(260px, 40vh); overflow: auto; background: white; border: 2px inset #eee; padding: 5px; }
.room-message { margin-bottom: 9px; white-space: pre-wrap; overflow-wrap: anywhere; }
.room-message b { display: block; color: #008000; font-weight: normal; font-size: 11px; }
.room-message.mine b { color: #0000ee; }
.room-message time { margin-left: 8px; color: #777; font: 10px "Courier New", monospace; }
.room-empty { color: #777; text-align: center; margin-top: 18px; }
#room-new { position: absolute; bottom: 3px; right: 5px; background: #ffffcc; border: 1px solid #888; padding: 1px 5px; }
.room-roster { background: white; border: 2px inset #eee; min-width: 0; }
.room-roster h2 { background: #eee; color: #000080; font-size: 11px; padding: 3px; border-bottom: 1px solid #aaa; }
#room-online { list-style: none; margin: 0; padding: 4px; max-height: min(230px, 35vh); overflow: auto; }
#room-online li { overflow-wrap: anywhere; padding: 2px 0; font: 11px/1.5 "Courier New", monospace; }
#room-online li::before { content: "▪ "; color: #008000; }
#room-send-form { padding: 5px; }
#room-send-form label { display: block; }
#room-input { width: 100%; border: 2px inset #eee; border-radius: 0; padding: 4px; resize: vertical; min-height: 46px; max-height: 110px; }
.room-send-bottom { display: flex; justify-content: space-between; align-items: center; }
.room-send-bottom small { font-size: 10px; }
#room-send-status { font-size: 11px; color: #800000; min-height: 16px; }
.room-bottom { display: flex; justify-content: space-between; border: 1px inset #eee; padding: 0 4px; font-size: 10px; }
.room-dialog button:disabled, #room-join:disabled { cursor: wait; color: #666; }