* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; display: flex; min-height: 100vh; }
.view { width: 100%; }
#login-view { display: flex; align-items: center; justify-content: center; height: 100vh; }
#login-form { display: flex; flex-direction: column; gap: 8px; width: 280px; }
.error { color: #c0392b; min-height: 1.2em; }

#app-view { display: flex; width: 100%; }
#sidebar { width: 240px; background: #1e1e2e; color: #eee; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
#sidebar button { background: #33334d; color: #eee; border: none; padding: 8px; border-radius: 4px; cursor: pointer; }
#logout-btn { margin-top: auto; }
#content { flex: 1; padding: 16px; overflow-y: auto; }

.chats-sublist { display: flex; flex-direction: column; gap: 2px; margin-left: 8px; }
.chat-item { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 4px; }
.chat-item:hover { background: #2a2a40; }
.chat-title { cursor: pointer; font-size: 0.9em; line-height: 1.3; word-break: break-word; }
.chat-item-controls { display: flex; align-items: center; gap: 4px; }
.chat-item-controls button { padding: 2px 6px; }
.chat-item-controls select { flex: 1; min-width: 0; font-size: 0.85em; }

#messages { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.msg { padding: 8px 12px; border-radius: 8px; max-width: 70%; }
.msg.user { align-self: flex-end; background: #d0e6ff; }
.msg.assistant { align-self: flex-start; background: #eee; white-space: pre-wrap; }


#message-form, #upload-form, #new-user-form { display: flex; gap: 8px; margin-top: 12px; }
#message-form { align-items: flex-end; }
#message-input { flex: 1; padding: 8px; resize: none; min-height: 38px; max-height: 200px; overflow-y: auto; line-height: 1.4; font-family: inherit; font-size: inherit; }

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }