*{margin:0;padding:0;box-sizing:border-box}:root{--bg-sidebar: #f7f7f7;--bg-chat: #f0f0f0;--bg-white: #ffffff;--border: #e5e5e5;--text-primary: #1a1a1a;--text-secondary: #999;--green: #07c160;--green-hover: #06ad56;--bubble-in: #ffffff;--bubble-out: #95ec69}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,PingFang SC,Microsoft YaHei,sans-serif;font-size:14px;color:var(--text-primary);background:var(--bg-white);height:100vh;overflow:hidden}#root{height:100vh}input,textarea,button{font-family:inherit;font-size:inherit}.loading{display:flex;align-items:center;justify-content:center;height:100vh;color:var(--text-secondary);font-size:16px}.login-page{display:flex;align-items:center;justify-content:center;height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.login-form{background:var(--bg-white);padding:48px 40px;border-radius:12px;box-shadow:0 20px 60px #00000026;width:360px;text-align:center}.login-form h1{font-size:24px;font-weight:600;margin-bottom:8px;color:var(--text-primary)}.login-subtitle{color:var(--text-secondary);margin-bottom:32px;font-size:13px}.login-form input{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:8px;outline:none;font-size:15px;transition:border-color .2s}.login-form input:focus{border-color:var(--green)}.login-error{color:#e74c3c;font-size:13px;margin-top:12px}.login-form button{width:100%;margin-top:20px;padding:12px;background:var(--green);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s}.login-form button:hover:not(:disabled){background:var(--green-hover)}.login-form button:disabled{opacity:.6;cursor:not-allowed}.chat-page{display:flex;height:100vh}.sidebar{width:300px;min-width:300px;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}.app-title{font-size:18px;font-weight:600}.btn-logout{background:none;border:1px solid var(--border);padding:4px 12px;border-radius:4px;color:var(--text-secondary);cursor:pointer;font-size:12px}.btn-logout:hover{color:#e74c3c;border-color:#e74c3c}.search-bar{padding:12px 16px}.search-bar input{width:100%;padding:8px 12px;border:none;border-radius:6px;background:#ededed;outline:none;font-size:13px}.search-bar input:focus{background:#e4e4e4}.contact-list{flex:1;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:12px 20px;cursor:pointer;position:relative;transition:background .15s}.contact-item:hover{background:#ebebeb}.contact-item.active{background:#d9d9d9}.contact-avatar{width:44px;height:44px;border-radius:6px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:500;flex-shrink:0}.contact-info{flex:1;margin-left:12px;min-width:0}.contact-name-row{display:flex;justify-content:space-between;align-items:baseline}.contact-name{font-size:14px;font-weight:500}.contact-time{font-size:11px;color:var(--text-secondary);flex-shrink:0;margin-left:8px}.contact-preview{font-size:12px;color:var(--text-secondary);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread-badge{position:absolute;top:10px;left:52px;background:#e74c3c;color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}.empty-hint{text-align:center;padding:40px 20px;color:var(--text-secondary);font-size:13px}.chat-area{flex:1;display:flex;flex-direction:column;background:var(--bg-chat)}.chat-header{padding:16px 24px;font-size:16px;font-weight:500;background:var(--bg-sidebar);border-bottom:1px solid var(--border)}.message-list{flex:1;overflow-y:auto;padding:16px 24px}.message{margin-bottom:16px;display:flex;flex-direction:column}.message.in{align-items:flex-start}.message.out{align-items:flex-end}.bubble{max-width:60%;padding:10px 14px;border-radius:8px;line-height:1.5;word-break:break-word;font-size:14px}.message.in .bubble{background:var(--bubble-in)}.message.out .bubble{background:var(--bubble-out)}.msg-time{font-size:11px;color:var(--text-secondary);margin-top:4px}.no-chat{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.input-bar{display:flex;align-items:flex-end;padding:12px 16px;background:var(--bg-white);border-top:1px solid var(--border);gap:10px}.input-bar textarea{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:6px;outline:none;resize:none;max-height:100px;font-size:14px;line-height:1.5}.input-bar textarea:focus{border-color:var(--green)}.input-bar button{padding:10px 20px;background:var(--green);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;white-space:nowrap}.input-bar button:hover:not(:disabled){background:var(--green-hover)}.input-bar button:disabled{opacity:.5;cursor:not-allowed}.kf-tag{display:inline-block;font-size:10px;background:#1890ff;color:#fff;padding:1px 5px;border-radius:3px;margin-left:6px;font-weight:400;vertical-align:middle}.chat-header .kf-tag{font-size:11px;padding:2px 6px}@media(max-width:640px){.sidebar{width:100%;min-width:100%}.chat-area,.chat-page.has-active .sidebar{display:none}.chat-page.has-active .chat-area{display:flex}}