body { font-family: system-ui, sans-serif; margin: 0; padding: 0; background: #f5f5f5; }
main { max-width: 640px; margin: 0 auto; padding: 1rem; }
#heading { margin-bottom: 0.25rem; }
#description { color: #666; margin-top: 0; }
#join-section { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; }
#username-input { flex: 1; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; min-width: 120px; }
#avatar-input { max-width: 200px; font-size: 0.85rem; }
.avatar-preview { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #ddd; }
.error { color: #e74c3c; font-size: 0.85rem; min-height: 1.2em; margin: 0; }
#status { font-weight: bold; margin: 0.5rem 0; }
#messages { border: 1px solid #ddd; border-radius: 4px; padding: 0.5rem; min-height: 200px; max-height: 400px; overflow-y: auto; background: white; margin-bottom: 1rem; }
.message { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px solid #eee; }
.message:last-child { border-bottom: none; }
.message-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #ddd; }
.default-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: #ccc; }
.message-user { font-weight: bold; color: #333; }
.message-text { color: #555; }
#input-section { display: flex; gap: 0.5rem; }
#message-input { flex: 1; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
button { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; background: #4a9eff; color: white; }
#disconnect-btn { background: #e74c3c; }