.chat-button {position: fixed;bottom: 20px;right: 20px;width: 60px;height: 60px;background: linear-gradient(135deg,#25D366,#128C7E);border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;box-shadow: 0 4px 20px rgba(37,211,102,0.4);z-index: 1000;transition: all 0.3s ease;animation: pulse 2s infinite;} .chat-button:hover {transform: scale(1.1);box-shadow: 0 6px 25px rgba(37,211,102,0.6);} .chat-button.active {background: linear-gradient(135deg,#0066CC,#2C5530);animation: none;} .chat-button i {font-size: 28px;color: white;} .chat-badge {position: absolute;top: -5px;right: -5px;background: #ff4444;color: white;border-radius: 50%;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: bold;animation: bounce 1s infinite;} @keyframes pulse {0% {box-shadow: 0 4px 20px rgba(37,211,102,0.4);} 50% {box-shadow: 0 4px 30px rgba(37,211,102,0.7);} 100% {box-shadow: 0 4px 20px rgba(37,211,102,0.4);}} @keyframes bounce {0%,20%,50%,80%,100% {transform: translateY(0);} 40% {transform: translateY(-5px);} 60% {transform: translateY(-3px);}} .chat-window {position: fixed;bottom: 20px;right: 20px;width: 380px;height: 600px;background: white;border-radius: 16px;box-shadow: 0 10px 40px rgba(0,0,0,0.2);z-index: 1001;display: flex;flex-direction: column;overflow: hidden;transform: scale(0) translateY(20px);opacity: 0;transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);transform-origin: bottom right;} .chat-window.active {transform: scale(1) translateY(0);opacity: 1;} .chat-header {background: linear-gradient(135deg,#0066CC,#2C5530);color: white;padding: 16px;display: flex;align-items: center;gap: 12px;position: relative;} .chat-avatar {width: 40px;height: 40px;background: rgba(255,255,255,0.2);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 18px;} .chat-info {flex: 1;} .chat-info h4 {font-size: 16px;font-weight: 600;margin: 0;} .chat-status {font-size: 12px;opacity: 0.8;display: flex;align-items: center;gap: 4px;} .chat-status::before {content: '';width: 8px;height: 8px;background: #4CAF50;border-radius: 50%;animation: online-pulse 2s infinite;} @keyframes online-pulse {0%,100% {opacity: 1;} 50% {opacity: 0.5;}} .chat-controls {display: flex;gap: 8px;} .chat-control {width: 32px;height: 32px;border: none;background: rgba(255,255,255,0.1);color: white;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: background 0.2s ease;} .chat-control:hover {background: rgba(255,255,255,0.2);} .chat-messages {flex: 1;padding: 16px;overflow-y: auto;background: #f0f0f0;background-image: radial-gradient(circle at 20% 20%,rgba(0,102,204,0.05) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(44,85,48,0.05) 0%,transparent 50%);} .chat-date {text-align: center;margin: 16px 0;} .chat-date span {background: rgba(255,255,255,0.9);padding: 4px 12px;border-radius: 12px;font-size: 12px;color: #666;} .chat-message {display: flex;margin-bottom: 16px;animation: fadeInUp 0.3s ease;} .chat-message.ai {flex-direction: row;} .chat-message.user {flex-direction: row-reverse;} @keyframes fadeInUp {from {opacity: 0;transform: translateY(10px);} to {opacity: 1;transform: translateY(0);}} .message-avatar {width: 32px;height: 32px;background: linear-gradient(135deg,#0066CC,#2C5530);color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 14px;margin: 0 8px;flex-shrink: 0;} .message-content {max-width: 70%;position: relative;} .message-text {background: white;padding: 12px 16px;border-radius: 18px;font-size: 14px;line-height: 1.4;word-wrap: break-word;white-space: pre-line;box-shadow: 0 2px 8px rgba(0,0,0,0.1);} .chat-message.user .message-text {background: linear-gradient(135deg,#0066CC,#2C5530);color: white;border-bottom-right-radius: 6px;} .chat-message.ai .message-text {border-bottom-left-radius: 6px;} .message-time {font-size: 11px;color: #999;margin-top: 4px;text-align: right;} .chat-message.ai .message-time {text-align: left;} .message-status {display: flex;align-items: flex-end;margin: 0 4px;color: #4CAF50;font-size: 12px;} .chat-typing {padding: 16px;background: #f0f0f0;} .typing-indicator {display: flex;align-items: center;gap: 8px;} .typing-avatar {width: 32px;height: 32px;background: linear-gradient(135deg,#0066CC,#2C5530);color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 14px;} .typing-dots {background: white;padding: 12px 16px;border-radius: 18px;display: flex;gap: 4px;align-items: center;box-shadow: 0 2px 8px rgba(0,0,0,0.1);} .typing-dots span {width: 8px;height: 8px;background: #999;border-radius: 50%;animation: typing 1.4s infinite;} .typing-dots span:nth-child(2) {animation-delay: 0.2s;} .typing-dots span:nth-child(3) {animation-delay: 0.4s;} @keyframes typing {0%,60%,100% {transform: translateY(0);opacity: 0.5;} 30% {transform: translateY(-10px);opacity: 1;}} .chat-input-container {background: white;padding: 16px;border-top: 1px solid #eee;} .chat-input-wrapper {display: flex;align-items: center;gap: 8px;background: #f8f9fa;border-radius: 24px;padding: 8px 12px;border: 2px solid transparent;transition: border-color 0.2s ease;} .chat-input-wrapper:focus-within {border-color: var(--primary-blue);} .chat-attach,.chat-emoji {width: 36px;height: 36px;border: none;background: none;color: #666;cursor: pointer;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: background 0.2s ease;} .chat-attach:hover,.chat-emoji:hover {background: rgba(0,102,204,0.1);color: var(--primary-blue);} #chat-input {flex: 1;border: none;background: none;font-size: 14px;padding: 8px;outline: none;resize: none;} #chat-input::placeholder {color: #999;} .chat-send {width: 36px;height: 36px;border: none;background: linear-gradient(135deg,#0066CC,#2C5530);color: white;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: transform 0.2s ease;} .chat-send:hover {transform: scale(1.1);} .chat-send:active {transform: scale(0.95);} @media (max-width: 768px) {.chat-window {width: calc(100vw - 20px);height: calc(100vh - 40px);bottom: 10px;right: 10px;left: 10px;border-radius: 12px;} .chat-button {bottom: 15px;right: 15px;} .message-content {max-width: 85%;}} .chat-messages::-webkit-scrollbar {width: 6px;} .chat-messages::-webkit-scrollbar-track {background: transparent;} .chat-messages::-webkit-scrollbar-thumb {background: rgba(0,102,204,0.3);border-radius: 3px;} .chat-messages::-webkit-scrollbar-thumb:hover {background: rgba(0,102,204,0.5);} .ai-chat-cta {margin: 2rem 0;} .btn-chat-ai {width: 100%;background: linear-gradient(135deg,#25D366,#128C7E);border: none;border-radius: 16px;padding: 20px 24px;color: white;cursor: pointer;display: flex;align-items: center;gap: 16px;transition: all 0.3s ease;box-shadow: 0 4px 20px rgba(37,211,102,0.3);position: relative;overflow: hidden;} .btn-chat-ai::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition: left 0.6s ease;} .btn-chat-ai:hover::before {left: 100%;} .btn-chat-ai:hover {transform: translateY(-4px);box-shadow: 0 8px 30px rgba(37,211,102,0.4);} .chat-icon-wrapper {position: relative;width: 48px;height: 48px;background: rgba(255,255,255,0.2);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 24px;} .chat-pulse {position: absolute;inset: -4px;border: 2px solid rgba(255,255,255,0.6);border-radius: 50%;animation: chat-pulse 2s infinite;} @keyframes chat-pulse {0% {transform: scale(1);opacity: 1;} 100% {transform: scale(1.4);opacity: 0;}} .chat-text {flex: 1;text-align: left;} .chat-title {display: block;font-size: 18px;font-weight: 700;margin-bottom: 4px;} .chat-subtitle {display: block;font-size: 14px;opacity: 0.9;font-weight: 500;} .chat-arrow {font-size: 20px;transition: transform 0.3s ease;} .btn-chat-ai:hover .chat-arrow {transform: translateX(4px);} .btn-chat-ai.primary {background: linear-gradient(135deg,#0066CC,#2C5530);} .btn-chat-ai.agriculture {background: linear-gradient(135deg,#4CAF50,#2E7D32);} .btn-chat-ai.health {background: linear-gradient(135deg,#f44336,#c62828);}