*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI','Microsoft YaHei',sans-serif;}body{background:#f8fafc;color:#333;line-height:1.6;min-height:100vh;}.chat-widget{position:fixed;bottom:30px;right:30px;z-index:10000;}.chat-button{width:60px;height:60px;border-radius:50%;background:#4CAF50;color:white;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 20px #4CAF50;border:none;font-size:24px;transition:all 0.3s ease;position:relative;}.chat-button:hover{transform:scale(1.1);box-shadow:0 6px 25px #4CAF50;}.chat-button.active{background:#ef4444;transform:rotate(45deg);box-shadow:0 2px 20px #ef4444;}.notification-badge{position:absolute;top:-5px;right:-5px;background:#ef4444;color:white;border-radius:50%;width:24px;height:24px;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:bold;animation:pulse 2s infinite;}@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.1);}100%{transform:scale(1);}}.chat-container{position:fixed;bottom:100px;right:30px;width:380px;height:580px;background:white;border-radius:16px;display:none;flex-direction:column;overflow:hidden;z-index:9999;border:1px solid #4CAF50;transform:translateY(20px);opacity:0;transition:all 0.3s ease;}.chat-container.active{display:flex;transform:translateY(0);opacity:1;}@media (max-width:480px){.chat-container{width:calc(100vw - 60px);height:70vh;bottom:80px;right:15px;}.chat-widget{bottom:20px;right:20px;}}.chat-header{background:#4CAF50;color:white;padding:20px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}.chat-header h3{font-size:18px;font-weight:600;}.header-info{display:flex;flex-direction:column;gap:4px;}.admin-info{display:flex;align-items:center;gap:8px;font-size:14px;opacity:0.9;}.admin-avatar{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;}.connection-status{font-size:12px;opacity:0.8;display:flex;align-items:center;gap:6px;}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}.status-dot.online{background:#4CAF50;box-shadow:0 0 8px #4CAF50;}.status-dot.offline{background:#9ca3af;}.messages-container{flex:1;padding:20px;overflow-y:auto;background:#f9fafb;}.messages-container::-webkit-scrollbar{width:6px;}.messages-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px;}.messages-container::-webkit-scrollbar-thumb{background:#4CAF50;border-radius:3px;}.messages-container::-webkit-scrollbar-thumb:hover{background:#4CAF50;}.welcome-message{text-align:center;padding:30px 20px;color:#6b7280;}.welcome-message i{font-size:48px;color:#4CAF50;margin-bottom:16px;}.welcome-message h3{font-size:18px;margin-bottom:8px;color:#374151;}.welcome-message p{font-size:14px;margin-bottom:12px;}.connection-progress{font-size:12px;color:#4CAF50;background:rgba(72,187,120,0.3);padding:8px 12px;border-radius:8px;display:inline-block;}.message{max-width:80%;margin-bottom:16px;animation:messageAppear 0.3s ease;}@keyframes messageAppear{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}.message.sent{margin-left:auto;}.message.received{margin-right:auto;}.message-content{padding:12px 16px;border-radius:18px;position:relative;word-wrap:break-word;}.message.sent .message-content{background:#4CAF50;color:white;border-bottom-right-radius:4px;}.message.received .message-content{background:white;color:#374151;border:1px solid rgba(72,187,120,0.3);border-bottom-left-radius:4px;}.message-sender{font-size:12px;font-weight:600;margin-bottom:4px;opacity:0.8;}.message.sent .message-sender{color:rgba(255,255,255,0.9);}.message.received .message-sender{color:#4CAF50;}.message-time{font-size:10px;opacity:0.6;margin-top:4px;text-align:right;}.system-message{text-align:center;color:#6b7280;font-size:12px;padding:8px;margin:12px 0;}.system-message.error{color:#ef4444;background:#fef2f2;border-radius:8px;}.message-input-area{padding:20px;border-top:1px solid rgba(72,187,120,0.3);background:white;flex-shrink:0;}.input-wrapper{display:flex;gap:10px;}textarea{flex:1;border:1px solid rgba(72,187,120,0.3);border-radius:24px;padding:12px 16px;resize:none;font-size:14px;line-height:1.4;max-height:120px;outline:none;transition:border-color 0.2s;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none;}textarea::-webkit-scrollbar{display:none;width:0;height:0;}textarea:focus{border-color:#4CAF50;box-shadow:0 0 0 3px #4CAF50;}.send-btn{width:48px;height:48px;border-radius:50%;background:#4CAF50;color:white;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0;}.send-btn:hover:not(:disabled){background:#4CAF50;transform:scale(1.05);}.send-btn:disabled{background:#9ca3af;cursor:not-allowed;}.input-hint{font-size:12px;color:#6b7280;margin-top:8px;text-align:center;}.chat-container.minimized{height:60px;overflow:hidden;}.chat-container.minimized .messages-container,.chat-container.minimized .message-input-area{display:none;}.minimize-btn{background:none;border:none;color:white;cursor:pointer;font-size:18px;padding:4px;opacity:0.8;transition:opacity 0.2s;}.minimize-btn:hover{opacity:1;}.close-btn{background:none;border:none;color:white;cursor:pointer;font-size:18px;padding:4px;opacity:0.8;transition:opacity 0.2s;margin-left:12px;}.close-btn:hover{opacity:1;}.session-info{font-size:11px;color:rgba(255,255,255,0.7);margin-top:5px;padding:3px 6px;background:rgba(255,255,255,0.1);border-radius:3px;display:inline-block;}.message-status{font-size:10px;color:#999;margin-left:5px;font-style:italic;}.message.sent .message-status{color:rgba(255,255,255,0.7);}