:root { 
    --bg: #ffffff; 
    --text: #111111; 
    --border: #dddddd; 
    --accent: #000000; 
}

* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; }
.hidden { display: none !important; }

/* Auth Screen */
#auth-view { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 100; }
.auth-container { display: flex; flex-direction: column; gap: 12px; width: 240px; }
.system-label { font-size: 12px; letter-spacing: 1px; color: #666; margin-bottom: -5px; }
.title { margin: 0 0 10px 0; font-weight: 600; }
input, button { padding: 14px; border: 1px solid var(--border); font-size: 14px; outline: none; border-radius: 0; }
input:focus { border-color: var(--accent); }
button { background: var(--accent); color: white; cursor: pointer; border: none; font-weight: 500; letter-spacing: 0.5px; }
button:active { opacity: 0.8; }

/* Main Layout */
#app-view { display: flex; height: 100vh; }

/* Sidebar */
aside { width: 260px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: #fcfcfc; }
.sidebar-header { padding: 20px; border-bottom: 1px solid var(--border); }
.user-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #666; }
.user-name { font-size: 18px; font-weight: 600; margin-top: 4px; }

.thread-list { flex: 1; overflow-y: auto; padding: 10px 0; }
.thread-item { padding: 12px 20px; cursor: pointer; border-left: 3px solid transparent; font-size: 14px; }
.thread-item:hover { background: #f0f0f0; }
.thread-item.active { border-left-color: var(--accent); background: #f5f5f5; font-weight: 500; }

.sidebar-footer { padding: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }

/* Chat Area */
main { flex: 1; display: flex; flex-direction: column; background: var(--bg); }
.chat-header { padding: 20px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 16px; }

#messages-container { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }

.msg-wrapper { display: flex; flex-direction: column; max-width: 70%; }
.msg-wrapper.me { align-self: flex-end; align-items: flex-end; }
.msg-wrapper.them { align-self: flex-start; align-items: flex-start; }

.msg-sender { font-size: 11px; color: #888; margin-bottom: 4px; font-weight: 500; }
.msg-bubble { padding: 12px 16px; font-size: 15px; line-height: 1.5; word-wrap: break-word; }
.me .msg-bubble { background: var(--accent); color: white; border-radius: 8px 8px 0 8px; }
.them .msg-bubble { background: #f4f4f4; border: 1px solid var(--border); border-radius: 8px 8px 8px 0; }

/* Input Area */
.input-area { padding: 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; background: var(--bg); }
.input-area input { flex: 1; border-radius: 4px; }
.input-area button { border-radius: 4px; padding: 0 24px; }