@import"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap";.main-header{position:fixed;top:0;left:0;right:0;background:#fff;border-bottom:1px solid var(--border-color);z-index:1000;height:70px;display:flex;align-items:center}.main-header .container{width:100%;max-width:1400px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.logo{font-size:24px;font-weight:700;color:var(--accent-color);cursor:pointer}.user-profile{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;padding:8px 12px;border-radius:8px;transition:background-color .2s ease}.user-profile:hover{background-color:#f8f9fa}.user-profile .avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:2px solid #e0e0e0}.user-name{font-weight:500;color:var(--text-primary);font-size:16px}.dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:160px;z-index:1000;display:none;overflow:hidden;margin-top:8px}.dropdown-menu.show{display:block}.dropdown-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background-color .2s ease;color:#333;font-size:14px}.dropdown-item:hover{background-color:#f8f9fa}.dropdown-item i{width:16px;color:#666}.dropdown-item:last-child{border-top:1px solid #eee}.dropdown-item:last-child:hover{background-color:#fff5f5;color:#dc3545}.dropdown-item:last-child i{color:#dc3545}.sidebar-header{padding:20px;border-bottom:1px solid var(--border-color);display:flex;justify-content:center;align-items:center}.new-chat-btn{width:100%;padding:10px;background-color:var(--accent-color);color:#fff;border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:background-color .2s}.new-chat-btn:hover{background-color:var(--accent-color-dark)}.new-chat-btn i{margin-right:8px}.chat-list{flex-grow:1;overflow-y:auto}.chat-item{display:flex;align-items:center;padding:15px 20px;cursor:pointer;transition:background-color .2s}.chat-item:hover{background-color:var(--hover-bg)}.chat-item.active{background-color:var(--active-chat-bg)}.chat-avatar{width:48px;height:48px;border-radius:50%;background-color:#e0e0e0;display:flex;justify-content:center;align-items:center;font-size:24px;margin-right:15px}.chat-info{flex-grow:1;overflow:hidden}.chat-name{font-weight:500;font-size:16px}.chat-status{font-size:12px;color:var(--text-secondary);white-space:nowrap}.chat-status.unread{color:#007bff;font-weight:500}:root{--primary-bg: #f0f2f5;--sidebar-bg: #ffffff;--main-content-bg: #f0f2f5;--accent-color: #007bff;--accent-color-dark: #0056b3;--text-primary: #050505;--text-secondary: #65676b;--border-color: #d1d1d1;--hover-bg: #e4e6eb;--active-chat-bg: #e6f3ff;--system-message-bg: #e9ecef;--font-family: "Noto Sans SC", sans-serif}.chat-page{font-family:var(--font-family);background-color:var(--primary-bg);color:var(--text-primary);min-height:100vh}.app-container{display:flex;width:95vw;height:calc(100vh - 80px);margin:70px auto 0;max-width:1400px;background-color:var(--sidebar-bg);border-radius:10px;box-shadow:0 4px 12px #0000001a;overflow:hidden}.sidebar{width:300px;background-color:var(--sidebar-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column}.main-content{flex-grow:1;display:flex;flex-direction:column;background-color:var(--main-content-bg)}.chat-window{flex:1;padding:20px;overflow-y:auto;background-color:var(--main-content-bg)}.message{display:flex;margin-bottom:20px;align-items:flex-start}.message.user-message{flex-direction:row-reverse}.message .avatar{width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:20px;margin:0 10px;flex-shrink:0}.message-content{max-width:70%;display:flex;flex-direction:column}.message-sender{font-size:12px;color:var(--text-secondary);margin-bottom:5px;font-weight:500}.message-bubble{background:#fff;padding:12px 16px;border-radius:18px;box-shadow:0 1px 2px #0000001a;word-wrap:break-word;line-height:1.4}.message.user-message .message-bubble{background:var(--accent-color);color:#fff}.message.system-message{justify-content:center}.message.system-message .message-bubble{background:var(--system-message-bg);color:var(--text-secondary);font-size:14px;text-align:center;border-radius:12px;max-width:80%}.chat-input-area{padding:20px;background:#fff;border-top:1px solid var(--border-color)}.input-wrapper{display:flex;align-items:center;background:#f8f9fa;border-radius:25px;padding:8px 16px;border:1px solid var(--border-color)}.input-wrapper:focus-within{border-color:var(--accent-color);box-shadow:0 0 0 2px #007bff40}.attachment-btn,.send-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.attachment-btn:hover,.send-btn:hover{background:var(--hover-bg);color:var(--accent-color)}.input-wrapper input{flex:1;border:none;background:transparent;padding:8px 12px;font-size:14px;outline:none;font-family:var(--font-family)}.input-wrapper input::placeholder{color:var(--text-secondary)}.clickable-avatar{cursor:pointer;transition:transform .2s ease}.clickable-avatar:hover{transform:scale(1.1)}.message-bubble img{width:150px;height:100px;object-fit:cover;border-radius:8px;margin:5px;cursor:pointer}