*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#f4f5f7;color:#222}
nav{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#1f2937;color:#fff}
nav a{color:#93c5fd;text-decoration:none}.brand{font-weight:700;color:#fff}
main{max-width:800px;margin:20px auto;padding:0 16px}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.room{background:#fff;padding:14px;border-radius:10px;text-decoration:none;color:inherit;box-shadow:0 1px 3px #0002}
.room:hover{box-shadow:0 2px 8px #0003}.room h3{margin:0 0 4px}.room p{margin:0 0 8px;color:#555}
.card,.send{display:flex;gap:8px;flex-wrap:wrap;background:#fff;padding:14px;border-radius:10px}
.card{flex-direction:column;max-width:360px}
input{flex:1;padding:10px;border:1px solid #ccc;border-radius:6px;font-size:1rem}
button,.btn{padding:10px 16px;background:#2563eb;color:#fff;border:0;border-radius:6px;cursor:pointer;text-decoration:none;font-size:1rem}
.msgs{height:55vh;overflow-y:auto;background:#fff;border-radius:10px;padding:12px;margin:10px 0}
.msg{margin-bottom:10px}.msg p{margin:2px 0;word-break:break-word}.msg small{color:#888}
.err{color:#b91c1c}.note{color:#666}