*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f5f5f5;--card-bg:#fff;--user-bubble:#007aff;--user-text:#fff;--assistant-bubble:#e9e9eb;--assistant-text:#1c1c1e;--border:#e0e0e0;--muted:#8e8e93;--input-bg:#fff;--header-bg:#ffffffeb}body{background:var(--bg);color:#1c1c1e;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;overflow:hidden}#root{height:100vh}.loading{justify-content:center;align-items:center;height:100vh;display:flex}.spinner{border:3px solid var(--border);border-top-color:var(--user-bubble);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.login-container{justify-content:center;align-items:center;height:100vh;padding:20px;display:flex}.login-card{background:var(--card-bg);text-align:center;border-radius:16px;width:100%;max-width:360px;padding:40px;box-shadow:0 2px 20px #00000014}.login-card h1{margin-bottom:8px;font-size:24px;font-weight:700}.login-card p{color:var(--muted);margin-bottom:24px;font-size:14px}.login-card input{border:1px solid var(--border);border-radius:10px;outline:none;width:100%;margin-bottom:12px;padding:12px 16px;font-size:16px;transition:border-color .2s}.login-card input:focus{border-color:var(--user-bubble)}.login-card button{background:var(--user-bubble);color:#fff;cursor:pointer;border:none;border-radius:10px;width:100%;padding:12px;font-size:16px;font-weight:600;transition:opacity .2s}.login-card button:disabled{opacity:.5;cursor:not-allowed}.login-card button:hover:not(:disabled){opacity:.9}.error{color:#ff3b30;margin-top:12px;font-size:14px}.chat-container{flex-direction:column;max-width:800px;height:100vh;margin:0 auto;display:flex}.chat-header{background:var(--header-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:10;justify-content:space-between;align-items:center;padding:12px 20px;display:flex;position:sticky;top:0}.chat-header h1{font-size:18px;font-weight:700}.header-right{align-items:center;gap:10px;display:flex}.status-dot{border-radius:50%;width:8px;height:8px}.status-dot.connected{background:#34c759}.status-dot.disconnected{background:#ff3b30}.logout-btn{color:var(--user-bubble);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:14px}.logout-btn:hover{text-decoration:underline}.messages-area{flex-direction:column;flex:1;gap:4px;padding:16px 20px;display:flex;overflow-y:auto}.empty-state{height:100%;color:var(--muted);justify-content:center;align-items:center;font-size:15px;display:flex}.message-row{max-width:75%;display:flex}.message-row.user{align-self:flex-end}.message-row.assistant{align-self:flex-start}.message-bubble{word-wrap:break-word;white-space:pre-wrap;border-radius:18px;padding:10px 14px;font-size:15px;line-height:1.4}.message-bubble.user{background:var(--user-bubble);color:var(--user-text);border-bottom-right-radius:4px}.message-bubble.assistant{background:var(--assistant-bubble);color:var(--assistant-text);border-bottom-left-radius:4px}.typing-indicator{align-items:center;gap:4px;padding:12px 16px;display:flex}.dot{background:var(--muted);border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite bounce}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-6px)}}.input-area{border-top:1px solid var(--border);background:var(--card-bg);align-items:flex-end;gap:8px;padding:12px 20px;display:flex}.input-area textarea{border:1px solid var(--border);resize:none;border-radius:20px;outline:none;flex:1;max-height:120px;padding:10px 14px;font-family:inherit;font-size:15px;line-height:1.4;transition:border-color .2s}.input-area textarea:focus{border-color:var(--user-bubble)}.send-btn{background:var(--user-bubble);color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:opacity .2s;display:flex}.send-btn:disabled{opacity:.4;cursor:not-allowed}.send-btn:hover:not(:disabled){opacity:.9}@media (width<=600px){.chat-container{max-width:100%}.message-row{max-width:85%}.messages-area{padding:12px}.input-area{padding:10px 12px}}