.chat-wrapper{background:#f8f9fa;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.1);height:600px;border:1px solid #dee2e6}.chat-container{display:flex;height:100%;background:#fff}.sidebar{width:33%;background:#fff;border-right:2px solid #007bff;display:flex;flex-direction:column;transition:transform .3s ease}.sidebar.hidden{transform:translateX(-100%)}.sidebar-header,.chat-header{min-height:60px;padding:12px 15px;display:flex;align-items:center;box-sizing:border-box}.sidebar-header{background:#007bff;color:#fff;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.2)}.chat-header{background:#28a745;color:#fff;justify-content:flex-start;border-bottom:1px solid rgba(255,255,255,.2)}.sidebar-header h5,.chat-header h4{margin:0;font-weight:500;font-size:16px;line-height:1.2;display:flex;align-items:center;gap:8px}.user-count-badge{background:rgba(255,255,255,.2);padding:2px 8px;border-radius:12px;font-size:12px;font-weight:400;display:inline-flex;align-items:center;gap:4px;border:1px solid rgba(255,255,255,.3)}.user-count-badge.offline{background:rgba(255,255,255,.15);color:rgba(255,255,255,.8)}.sidebar-controls{display:flex;gap:5px}.refresh-btn,.toggle-btn{font-size:12px;padding:5px 8px;border-radius:50%;border:1px solid rgba(255,255,255,.3)}.refresh-btn:hover,.toggle-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}.toggle-btn{display:none}.online-users{flex:1;overflow-y:auto;padding:10px;background:#fff}.user-item{display:flex;align-items:center;padding:8px 10px;border-radius:6px;margin-bottom:5px;cursor:pointer;transition:background .2s ease}.user-item:hover{background:#f8f9fa}.user-item.current-user{background:#e8f5e8;border:1px solid #28a745}.user-avatar{width:36px;height:36px;border-radius:50%;margin-right:10px;overflow:hidden;border:2px solid #e0e0e0;position:relative;flex-shrink:0}.user-avatar img{width:100%;height:100%;object-fit:cover;object-position:center}.online-indicator{position:absolute;bottom:2px;right:2px;width:8px;height:8px;background:#28a745;border:2px solid #fff;border-radius:50%}.user-info{flex:1;display:flex;flex-direction:column;gap:2px}.user-name{font-size:14px;color:#333;cursor:pointer;font-weight:500}.user-name:hover{color:#007bff}.user-status{font-size:11px;color:#6c757d}.users-placeholder{opacity:.3}.placeholder-item{display:flex;align-items:center;padding:8px 10px;margin-bottom:5px}.placeholder-avatar{width:36px;height:36px;border-radius:50%;background:#e9ecef;margin-right:10px;animation:pulse 1.5s ease-in-out infinite}.placeholder-info{flex:1}.placeholder-name{height:14px;background:#e9ecef;border-radius:4px;margin-bottom:4px;width:80%;animation:pulse 1.5s ease-in-out infinite}.placeholder-status{height:10px;background:#e9ecef;border-radius:4px;width:60%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}.chat-area{flex:1;display:flex;flex-direction:column;background:#fff}.show-sidebar-btn{display:none;margin-right:15px;border:1px solid rgba(255,255,255,.3);padding:5px 10px}.show-sidebar-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}.chat-status{display:flex;align-items:center;gap:8px;padding:2px 5px;border-radius:12px;font-size:10px;font-weight:400;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3)}.messages{flex:1;padding:15px;overflow-y:auto;display:flex;flex-direction:column;gap:15px;background:#f8f9fa}.login-message{display:flex;align-items:center;justify-content:center;height:100%}.welcome-card{background:#fff;border-radius:12px;padding:30px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.1);border:1px solid #e9ecef;max-width:400px}.welcome-icon{width:60px;height:60px;background:linear-gradient(135deg,#007bff,#0056b3);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:#fff;font-size:24px}.welcome-card h5{color:#333;margin-bottom:10px;font-weight:600}.welcome-card p{margin-bottom:25px;line-height:1.5}.welcome-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.welcome-actions .btn{padding:8px 20px;border-radius:20px;font-weight:500}.message{display:flex;max-width:80%;animation:messageSlideIn .3s ease-out;margin-bottom:4px;align-items:flex-end}@keyframes messageSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.sent{align-self:flex-end;flex-direction:row-reverse}.message.received{align-self:flex-start}.message.system{align-self:center;max-width:100%;justify-content:center;align-items:center}.message-avatar{flex-shrink:0;display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.15);background:#f8f9fa}.message-avatar img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%}.message-content{display:flex;flex-direction:column;max-width:calc(100% - 50px);position:relative}.message.sent .message-content{align-items:flex-end;margin-right:10px}.message.received .message-content{align-items:flex-start;margin-left:10px}.bubble{position:relative;display:table;padding:8px 12px;line-height:1.4;border-radius:4px;overflow-wrap:anywhere;max-width:300px;word-wrap:break-word}.sent-bubble{background-color:#9cda62;color:#333;border:2px solid #6ca346}.sent-bubble::after{content:'';position:absolute;right:-8px;bottom:10px;width:0;height:0;border-left:8px solid #6ca346;border-top:8px solid transparent;border-bottom:8px solid transparent}.received-bubble{background-color:#eff8eb;color:#333;border:2px solid #c2d6a0}.received-bubble::after{content:'';position:absolute;left:-8px;bottom:10px;width:0;height:0;border-right:8px solid #c2d6a0;border-top:8px solid transparent;border-bottom:8px solid transparent}.message-meta{display:flex;align-items:center;gap:8px;font-size:11px;margin-top:2px}.message-sender{font-weight:600;color:#666;cursor:pointer;transition:color .2s ease}.message-sender:hover{color:#007bff}.message-time{color:#999;opacity:.8}.system-message{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(0,123,255,.1);padding:8px 16px;border-radius:16px;font-size:12px;color:#495057;border:1px solid rgba(0,123,255,.2)}.system-content{font-weight:500}.system-time{color:#6c757d;font-size:11px}.mention{color:#f39c12;font-weight:600;background:rgba(243,156,18,.15);padding:1px 4px;border-radius:4px}.message-input{padding:15px;background:#fff;border-top:1px solid #dee2e6}.seamless-input-group{height:40px;border-radius:20px;overflow:hidden;border:1px solid #ced4da;display:flex;transition:border-color .2s ease}.seamless-input-group:focus-within{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.message-input-field{flex:1;height:100%;border:none!important;padding:10px 15px;font-size:14px;background:transparent}.message-input-field:focus{outline:none;box-shadow:none!important}.input-group-append{display:flex}.message-send-btn{height:100%;border-radius:0!important;border:none!important;padding:0 10px;display:flex;align-items:center;justify-content:center;transition:all .2s}.message-send-btn.btn-primary{background:linear-gradient(135deg,#007bff,#0056b3)}.message-send-btn.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#0069d9,#004085)}.message-send-btn.btn-secondary{background:#6c757d;cursor:not-allowed}@media (max-width:768px){.message-input{padding:10px}.seamless-input-group{height:36px}.message-input-field{padding:8px 12px;font-size:13px}.message-send-btn{padding:0 5px}}.btn-primary{background:linear-gradient(135deg,#007bff,#0056b3);border-color:#007bff}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#0056b3,#004085);border-color:#0056b3;transform:translateY(-1px)}.btn-secondary{background:#6c757d;border-color:#6c757d;cursor:not-allowed}.notification{position:fixed;top:80px;right:20px;max-width:300px;padding:10px 15px;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.15);transform:translateX(100%);transition:transform .3s ease;z-index:1050;border:none}.notification.show{transform:translateX(0)}.notification i{margin-right:6px}.sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:999}.sidebar-overlay.show{display:block}@media (max-width:768px){.chat-wrapper{height:500px}.sidebar{position:fixed;top:0;left:0;height:100vh;z-index:1000;box-shadow:2px 0 10px rgba(0,0,0,.1);width:280px}.sidebar.hidden{transform:translateX(-100%)}.toggle-btn,.show-sidebar-btn{display:inline-block!important}.message{max-width:85%}.messages{padding:10px}.message-input{padding:10px}.bubble{max-width:250px}.sidebar-controls{gap:3px}.refresh-btn,.toggle-btn{font-size:11px;padding:4px 6px}.welcome-card{padding:20px;margin:10px}.welcome-actions{flex-direction:column}.sidebar-header h5{font-size:14px}.user-count-badge{font-size:11px;padding:1px 6px}.message-avatar{width:36px;height:36px}}@media (max-width:480px){.chat-wrapper{height:450px}.sidebar{width:260px}.message-avatar{width:32px;height:32px}.user-avatar{width:32px;height:32px}.bubble{padding:10px 12px;max-width:220px;font-size:13px}.messages{padding:8px;gap:10px}.message-input{padding:8px}#message{padding:8px 12px;font-size:13px;height:36px}#message-form button,.message-input button{padding:8px 16px;font-size:13px;height:36px}}.messages::-webkit-scrollbar{width:6px}.messages::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.messages::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.messages::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.online-users::-webkit-scrollbar{width:4px}.online-users::-webkit-scrollbar-track{background:#f1f1f1;border-radius:2px}.online-users::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:2px}.online-users::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.error-message{text-align:center;padding:20px;color:#dc3545;font-size:16px;background:rgba(220,53,69,.1);border:1px solid rgba(220,53,69,.3);border-radius:6px;margin:20px}.mention-notification{background-color:#e3f2fd!important;border:2px solid #2196f3!important;border-left:5px solid #2196f3!important;box-shadow:0 4px 20px rgba(33,150,243,.3)!important;animation:mentionNotificationSlide .5s ease-out}@keyframes mentionNotificationSlide{0%{transform:translateX(100%) scale(.8);opacity:0}100%{transform:translateX(0) scale(1);opacity:1}}.mention-notification-content{display:flex;align-items:center;justify-content:space-between;gap:10px}.mention-notification-content i.fa-at{color:#2196f3;font-size:18px;animation:atPulse 2s ease-in-out infinite}@keyframes atPulse{0%,100%{transform:scale(1);color:#2196f3}50%{transform:scale(1.1);color:#1976d2}}.btn-close-mention{background:none;border:none;color:#666;cursor:pointer;padding:2px 6px;border-radius:3px;transition:all .2s ease;font-size:12px;margin-left:auto;flex-shrink:0}.btn-close-mention:hover{background:rgba(0,0,0,.1);color:#333;transform:scale(1.1)}.btn-close-mention i{font-size:12px}.mention-me{color:#e74c3c!important;background:rgba(231,76,60,.15)!important;font-weight:700!important;border:1px solid rgba(231,76,60,.3);animation:mentionPulse 2s ease-in-out}@keyframes mentionPulse{0%,100%{background:rgba(231,76,60,.15)}50%{background:rgba(231,76,60,.25);transform:scale(1.05)}}.message-sender{position:relative}.message-sender:hover::after{content:"点击@用户";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;z-index:1000;pointer-events:none}.message-send-btn:disabled{opacity:.7;cursor:not-allowed}.fa-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.notification{min-width:250px;max-width:350px;font-size:14px;line-height:1.4}.notification i{font-size:16px;margin-right:8px}@media (max-width:768px){.mention-notification{right:10px;left:10px;max-width:none;width:auto}.mention-notification-content{font-size:13px}.btn-close-mention{padding:4px 8px}}.alert-success{background-color:#d4edda!important;border-color:#c3e6cb!important;color:#155724!important}.alert-danger{background-color:#f8d7da!important;border-color:#f5c6cb!important;color:#721c24!important}.alert-warning{background-color:#fff3cd!important;border-color:#ffeaa7!important;color:#856404!important}.alert-info{background-color:#d1ecf1!important;border-color:#bee5eb!important;color:#0c5460!important}