* { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, sans-serif; }
body { display: flex; height: 100vh; background: #f1f1f1; }
.hidden { display: none !important; }
.error { color: #d33; font-size: .9em; }

/* LOGIN */
#loginBox { width: 320px; margin: auto; background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
#loginBox input { width: 100%; margin: .5rem 0; padding: .5rem; }
#loginBox button { width: 48%; margin-top: 1rem; }

/* CHAT LAYOUT */
#chatApp { display: flex; width: 100%; height: 100%; }
#sidebar { width: 280px; background: #2c3e50; color: #fff; display: flex; flex-direction: column; }
#userBar { padding: .7rem; background: #34495e; display: flex; justify-content: space-between; }
#sidebar input, #sidebar button { margin: .5rem; padding: .4rem; }
#rooms { flex: 1; overflow-y: auto; }
#rooms li { padding: .7rem; cursor: pointer; border-bottom: 1px solid #34495e; }
#rooms li.active { background: #1abc9c; }

#main { flex: 1; display: flex; flex-direction: column; }
#header { padding: .7rem; background: #3498db; color: #fff; font-weight: bold; }
#messages { flex: 1; overflow-y: auto; padding: 1rem; background: #ecf0f1; }
#messages .msg { margin: .3rem 0; display: flex; flex-direction: column; max-width: 65%; }
#messages .mine { align-self: flex-end; background: #3498db; color: #fff; }
#messages .their { align-self: flex-start; background: #fff; }
#messages .img { max-width: 200px; border-radius: 8px; }

#inputBar { display: flex; padding: .5rem; background: #bdc3c7; }
#msgInput { flex: 1; padding: .5rem; border: none; border-radius: 4px; }
#sendBtn { margin-left: .5rem; padding: .5rem 1rem; }
#fileInput { margin-left: .5rem; }