#whatsagent-container{position: fixed;z-index: 999999;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;font-size: 14px;line-height: 1.4;color: #333;box-sizing: border-box;} #whatsagent-container.whatsagent-bottom_right{bottom: 20px;right: 20px;} #whatsagent-container.whatsagent-bottom_left{bottom: 20px;left: 20px;} #whatsagent-container.whatsagent-top_right{top: 20px;right: 20px;} #whatsagent-container.whatsagent-top_left{top: 20px;left: 20px;} #whatsagent-container.whatsagent-rtl{direction: rtl;} #whatsagent-container.whatsagent-rtl .whatsagent-agent-picker{right: auto;left: 0;} #whatsagent-container.whatsagent-rtl .whatsagent-agent-item{text-align: right;} #whatsagent-container.whatsagent-rtl .whatsagent-agent-avatar{margin-left: 12px;margin-right: 0;} #whatsagent-button{position: relative;cursor: pointer;border: none;border-radius: 50px;background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15);transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);display: flex;align-items: center;justify-content: center;min-width: 60px;min-height: 60px;font-weight: 600;text-decoration: none;user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;overflow: hidden;} #whatsagent-button::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);border-radius: inherit;z-index: 1;opacity: 0.8;} #whatsagent-button:hover::before{opacity: 1;} #whatsagent-button:hover{transform: translateY(-4px) scale(1.05);box-shadow: 0 12px 35px rgba(37, 211, 102, 0.6), 0 8px 20px rgba(0, 0, 0, 0.2);background: linear-gradient(135deg, #25D366 0%, #1DA851 50%, #128C7E 100%);} #whatsagent-button:active{transform: translateY(-2px) scale(1.02);box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5), 0 4px 12px rgba(0, 0, 0, 0.15);} @keyframes ripple{0%{transform: scale(0);opacity: 1;} 100%{transform: scale(4);opacity: 0;}} #whatsagent-button::after{content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;border-radius: 50%;background: rgba(255, 255, 255, 0.5);transform: translate(-50%, -50%);z-index: 0;pointer-events: none;} #whatsagent-button:active::after{animation: ripple 0.6s ease-out;} #whatsagent-button:hover{transform: translateY(-2px) scale(1.05);} #whatsagent-button{filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.3));} #whatsagent-button:hover{filter: brightness(1.05) drop-shadow(0 0 15px rgba(37, 211, 102, 0.6));} #whatsagent-button.whatsagent-flat_round{width: 64px;height: 64px;border-radius: 50%;box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);} #whatsagent-button.whatsagent-button_text{padding: 14px 24px;border-radius: 50px;min-width: auto;min-height: auto;box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);} .whatsagent-button-text{margin-right: 10px;font-size: 15px;font-weight: 600;color: white;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);position: relative;z-index: 1;} #whatsagent-container.whatsagent-rtl .whatsagent-button-text{margin-right: 0;margin-left: 10px;} .whatsagent-whatsapp-icon{display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;position: relative;z-index: 1;} .whatsagent-whatsapp-icon svg{width: 28px;height: 28px;fill: white;filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));transition: transform 0.3s ease;} #whatsagent-button.whatsagent-flat_round .whatsagent-whatsapp-icon{width: 40px;height: 40px;} #whatsagent-button.whatsagent-flat_round .whatsagent-whatsapp-icon svg{width: 40px;height: 40px;} #whatsagent-button:hover .whatsagent-whatsapp-icon svg{transform: scale(1.1) rotate(5deg);} .whatsagent-agent-picker{position: absolute;bottom: 80px;right: 0;width: 320px;background: #fff;border-radius: 12px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);border: 1px solid #e1e5e9;overflow: hidden;opacity: 0;visibility: hidden;transform: translateY(10px);transition: all 0.3s ease;z-index: 1000000;--whatsagent-button-color: #25D366;--whatsagent-button-color-hover: #1DA851;} .whatsagent-agent-picker.show{opacity: 1;visibility: visible;transform: translateY(0);} .whatsagent-agent-picker.whatsagent-modal.show{transform: translate(-50%, -50%) translateY(0);} .whatsagent-picker-header{display: flex;align-items: center;justify-content: space-between;padding: 16px 20px;background: var(--whatsagent-button-color, #25D366);border-bottom: 1px solid rgba(0, 0, 0, 0.1);color: var(--whatsagent-button-text-color, #ffffff);} .whatsagent-picker-header h3{margin: 0;font-size: 16px;font-weight: 600;color: var(--whatsagent-button-text-color, #ffffff);} .whatsagent-close-picker{background: rgba(255, 255, 255, 0.15);border: none;font-size: 20px;color: var(--whatsagent-button-text-color, #ffffff);cursor: pointer;padding: 0;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: all 0.3s ease;} .whatsagent-close-picker:hover{background: rgba(255, 255, 255, 0.25);transform: rotate(90deg);color: var(--whatsagent-button-text-color, #ffffff);} .whatsagent-agents-list{max-height: 300px;overflow-y: auto;} .whatsagent-agent-item{display: flex;align-items: center;padding: 16px 20px;cursor: pointer;transition: background-color 0.2s ease;border-bottom: 1px solid #f1f3f4;} .whatsagent-agent-item:last-child{border-bottom: none;} .whatsagent-agent-item:hover{background-color: #f8f9fa;} .whatsagent-agent-avatar{width: 48px;height: 48px;border-radius: 50%;margin-right: 12px;flex-shrink: 0;overflow: hidden;background: transparent;display: flex;align-items: center;justify-content: center;} .whatsagent-agent-avatar img{width: 100%;height: 100%;object-fit: cover;} .whatsagent-default-avatar{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 20px;font-weight: 700;color: var(--whatsagent-button-text-color, #ffffff);background: var(--whatsagent-button-color, #25D366);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);} .whatsagent-agent-info{flex: 1;min-width: 0;} .whatsagent-agent-info h4{margin: 0 0 4px 0;font-size: 14px;font-weight: 600;color: #333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .whatsagent-agent-status{font-size: 12px;font-weight: 500;margin: 0 0 4px 0;text-transform: uppercase;letter-spacing: 0.5px;} .whatsagent-agent-status.status-online{color: #28a745;} .whatsagent-agent-status.status-offline{color: #6c757d;} .whatsagent-agent-status.status-away{color: #ffc107;} .whatsagent-working-hours{font-size: 11px;color: #666;margin: 0;line-height: 1.3;} .whatsagent-modal-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);z-index: 999999;opacity: 0;visibility: hidden;transition: all 0.3s ease;} .whatsagent-modal-overlay.show{opacity: 1;visibility: visible;} @media (max-width: 768px){#whatsagent-container.whatsagent-bottom_right, #whatsagent-container.whatsagent-bottom_left{bottom: 15px;} #whatsagent-container.whatsagent-top_right, #whatsagent-container.whatsagent-top_left{top: 15px;} #whatsagent-container.whatsagent-bottom_right{right: 15px;} #whatsagent-container.whatsagent-bottom_left{left: 15px;} #whatsagent-container.whatsagent-top_right{right: 15px;} #whatsagent-container.whatsagent-top_left{left: 15px;} .whatsagent-agent-picker{width: 280px;right: -10px;} .whatsagent-agent-picker.whatsagent-modal{width: 320px;margin: 0 20px;} #whatsagent-button.whatsagent-button_text{padding: 10px 16px;font-size: 13px;} .whatsagent-button-text{margin-right: 6px;} #whatsagent-container.whatsagent-rtl .whatsagent-button-text{margin-right: 0;margin-left: 6px;}} @media (max-width: 480px){#whatsagent-button{min-width: 50px;min-height: 50px;} #whatsagent-button.whatsagent-flat_round{width: 50px;height: 50px;} .whatsagent-whatsapp-icon{width: 20px;height: 20px;} .whatsagent-whatsapp-icon svg{width: 20px;height: 20px;} .whatsagent-agent-picker{width: 260px;right: -20px;} .whatsagent-agent-picker.whatsagent-modal{width: 300px;margin: 0 15px;} .whatsagent-agent-item{padding: 12px 16px;} .whatsagent-agent-avatar{width: 40px;height: 40px;margin-right: 10px;} .whatsagent-agent-info h4{font-size: 13px;} .whatsagent-agent-status{font-size: 11px;} .whatsagent-working-hours{font-size: 10px;}} @keyframes whatsagent-bounce{0%, 20%, 50%, 80%, 100%{transform: translateY(0);} 40%{transform: translateY(-10px);} 60%{transform: translateY(-5px);}} @keyframes whatsagent-pulse{0%{box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);} 70%{box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);} 100%{box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);}} @keyframes whatsagent-fadeIn{from{opacity: 0;transform: translateY(10px);} to{opacity: 1;transform: translateY(0);}} @keyframes whatsagent-fadeOut{from{opacity: 1;transform: translateY(0);} to{opacity: 0;transform: translateY(10px);}} .whatsagent-bounce{animation: whatsagent-bounce 2s infinite;} .whatsagent-pulse{animation: whatsagent-pulse 2s infinite;} .whatsagent-fade-in{animation: whatsagent-fadeIn 0.3s ease;} .whatsagent-fade-out{animation: whatsagent-fadeOut 0.3s ease;} #whatsagent-button:focus{outline: 2px solid #007cba;outline-offset: 2px;} .whatsagent-agent-item:focus{outline: 2px solid #007cba;outline-offset: -2px;} .whatsagent-picker{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999999;display: flex;align-items: center;justify-content: center;animation: whatsagent-fadeIn 0.3s ease-out;} .whatsagent-picker-overlay{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(4px);} .whatsagent-picker-content{position: absolute;bottom: 80px;right: 20px;background: #f8f9fa;border-radius: 16px;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);width: 380px;max-height: 70vh;overflow: hidden;animation: whatsagent-slideUp 0.3s ease-out;} .whatsagent-picker-header{background: var(--whatsagent-button-color, #25D366);padding: 24px;color: white;text-align: left;border-radius: 16px 16px 0 0;display: flex;align-items: flex-start;gap: 16px;} .whatsagent-picker-icon svg{fill: white;transition: fill 0.2s ease;} .whatsagent-picker-header:hover .whatsagent-picker-icon svg{fill: white;} .whatsagent-picker-icon{display: flex;align-items: center;justify-content: center;width: 64px;height: 64px;flex-shrink: 0;} .whatsagent-picker-icon svg{width: 40px;height: 40px;} .whatsagent-picker-header-content{flex: 1;display: flex;flex-direction: column;gap: 4px;} .whatsagent-picker-title{font-size: 20px;font-weight: 700;margin: 0;line-height: 1.2;} .whatsagent-picker-subtitle{font-size: 14px;opacity: 0.9;line-height: 1.3;margin: 0;} .whatsagent-picker-body{padding: 20px 24px;} .whatsagent-picker-description{font-size: 13px;color: #6c757d;text-align: center;margin-bottom: 20px;} .whatsagent-picker-agents{display: flex;flex-direction: column;gap: 12px;} .whatsagent-picker-agent{display: flex;align-items: center;padding: 16px;background: white;border-radius: 12px;border: 1px solid #e9ecef;cursor: pointer;transition: all 0.2s ease;position: relative;} .whatsagent-picker-agent:hover{transform: translateY(-2px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);border-color: var(--whatsagent-button-color, #25D366);} .whatsagent-picker-agent.online{border-left: 4px solid var(--whatsagent-button-color, #25D366);} .whatsagent-picker-agent.offline{opacity: 0.7;} .whatsagent-picker-agent.disabled{opacity: 0.5;cursor: not-allowed !important;background: #f8f9fa;border-color: #dee2e6;} .whatsagent-picker-agent.disabled:hover{transform: none;box-shadow: none;border-color: #dee2e6;} .whatsagent-picker-agent.disabled .whatsagent-picker-agent-action svg{opacity: 0.3;} .whatsagent-picker-agent-avatar{width: 50px;height: 50px;border-radius: 50%;overflow: hidden;margin-right: 16px;flex-shrink: 0;border: 2px solid #e9ecef;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);} .whatsagent-picker-agent-avatar img{width: 100%;height: 100%;object-fit: cover;border-radius: 50%;} .whatsagent-picker-agent-avatar-placeholder{width: 100%;height: 100%;background: linear-gradient(135deg, var(--whatsagent-button-color, #25D366), var(--whatsagent-button-color-hover, #1ea952));color: white;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 20px;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);} .whatsagent-picker-agent-info{flex: 1;} .whatsagent-picker-agent-name{font-size: 16px;font-weight: 600;color: #212529;margin-bottom: 2px;} .whatsagent-picker-agent-role{font-size: 14px;color: #6c757d;margin-bottom: 2px;} .whatsagent-picker-agent-status{font-size: 12px;color: #fd7e14;font-style: italic;} .whatsagent-picker-agent-action{display: flex;align-items: center;justify-content: center;width: 47px;height: 47px;border-radius: 50%;background: #f8f9fa;transition: all 0.2s ease;border: 2px solid #e9ecef;} .whatsagent-picker-agent-action svg{width: 28px;height: 28px;fill: var(--whatsagent-button-color, #25D366);transition: fill 0.2s ease;} .whatsagent-picker-agent:hover .whatsagent-picker-agent-action{transform: scale(1.1);} .whatsagent-picker-agent:hover .whatsagent-picker-agent-action svg{fill: var(--whatsagent-button-color, #25D366) !important;} .whatsagent-picker-footer{display: flex;align-items: center;justify-content: flex-end;padding: 16px 24px 20px;background: white;border-top: 1px solid #e9ecef;} .whatsagent-picker-refresh{display: none;} .whatsagent-picker-close{display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;background: var(--whatsagent-button-color, #25D366);color: white;border: none;cursor: pointer;transition: all 0.2s ease;font-size: 32px;line-height: 1;font-weight: 300;font-family: Arial, sans-serif;padding: 0;margin: 0;} .whatsagent-picker-close:hover{background: var(--whatsagent-button-color-hover, #1ea952);transform: scale(1.05);} .whatsagent-picker-close:focus{outline: 2px solid rgba(255, 255, 255, 0.5);outline-offset: 2px;} @keyframes whatsagent-fadeIn{from{opacity: 0;} to{opacity: 1;}} @keyframes whatsagent-slideUp{from{opacity: 0;transform: translateY(30px) scale(0.95);} to{opacity: 1;transform: translateY(0) scale(1);}} @media (prefers-contrast: high){#whatsagent-button{border: 2px solid currentColor;} .whatsagent-agent-picker{border: 2px solid #000;} .single-product .whatsagent-product-support .whatsagent-support-agent-avatar, .woocommerce .whatsagent-product-support .whatsagent-support-agent-avatar{width: 40px !important;height: 40px !important;min-width: 40px !important;min-height: 40px !important;max-width: 40px !important;max-height: 40px !important;border-radius: 50% !important;overflow: hidden !important;display: inline-block !important;vertical-align: middle !important;} .single-product .whatsagent-product-support .whatsagent-support-agent-avatar img, .woocommerce .whatsagent-product-support .whatsagent-support-agent-avatar img{width: 40px !important;height: 40px !important;min-width: 40px !important;min-height: 40px !important;max-width: 40px !important;max-height: 40px !important;object-fit: cover !important;border-radius: 50% !important;display: block !important;margin: 0 !important;padding: 0 !important;} .whatsagent-product-support .whatsagent-support-agent-avatar{width: 40px !important;height: 40px !important;min-width: 40px !important;min-height: 40px !important;max-width: 40px !important;max-height: 40px !important;} .whatsagent-product-support .whatsagent-support-agent-avatar img{width: 40px !important;height: 40px !important;min-width: 40px !important;min-height: 40px !important;max-width: 40px !important;max-height: 40px !important;object-fit: cover !important;border-radius: 50% !important;} .single-product .whatsagent-product-support, .woocommerce .whatsagent-product-support, body .whatsagent-product-support{margin: 15px 0 !important;padding: 0 !important;background: transparent !important;border: none !important;box-shadow: none !important;} .single-product .whatsagent-support-title, .woocommerce .whatsagent-support-title, body .whatsagent-support-title{display: none !important;} .single-product .whatsagent-support-agent, .woocommerce .whatsagent-support-agent, body .whatsagent-support-agent{display: flex !important;align-items: center !important;position: relative !important;margin-bottom: 12px !important;cursor: pointer !important;transition: all 0.3s ease !important;text-decoration: none !important;width: 100% !important;} .single-product .whatsagent-support-agent:hover, .woocommerce .whatsagent-support-agent:hover, body .whatsagent-support-agent:hover{transform: translateY(-2px) !important;text-decoration: none !important;} .single-product .whatsagent-support-agent-avatar, .woocommerce .whatsagent-support-agent-avatar, body .whatsagent-support-agent-avatar{width: 70px !important;height: 70px !important;border-radius: 50% !important;overflow: hidden !important;position: relative !important;z-index: 2 !important;border: 4px solid white !important;box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;flex-shrink: 0 !important;margin-right: -10px !important;} .single-product .whatsagent-support-agent-avatar img, .woocommerce .whatsagent-support-agent-avatar img, body .whatsagent-support-agent-avatar img{width: 70px !important;height: 70px !important;object-fit: cover !important;border-radius: 50% !important;display: block !important;} .single-product .whatsagent-support-agent-avatar-placeholder, .woocommerce .whatsagent-support-agent-avatar-placeholder, body .whatsagent-support-agent-avatar-placeholder{width: 100% !important;height: 100% !important;background: linear-gradient(135deg, #25D366, #1ea952) !important;color: white !important;display: flex !important;align-items: center !important;justify-content: center !important;font-weight: 700 !important;font-size: 28px !important;} .single-product .whatsagent-whatsapp-overlay, .woocommerce .whatsagent-whatsapp-overlay, body .whatsagent-whatsapp-overlay{position: absolute !important;top: -5px !important;right: -5px !important;width: 20px !important;height: 20px !important;background: #f8f9fa !important;border: 2px solid #25D366 !important;border-radius: 50% !important;display: flex !important;align-items: center !important;justify-content: center !important;z-index: 3 !important;} .single-product .whatsagent-whatsapp-overlay svg, .woocommerce .whatsagent-whatsapp-overlay svg, body .whatsagent-whatsapp-overlay svg{width: 12px !important;height: 12px !important;fill: #25D366 !important;} .single-product .whatsagent-support-agent-banner, .woocommerce .whatsagent-support-agent-banner, body .whatsagent-support-agent-banner{background: #25D366 !important;border-radius: 35px !important;padding: 18px 24px 18px 25px !important;margin-left: -15px !important;flex: 1 !important;position: relative !important;z-index: 1 !important;box-shadow: 0 3px 12px rgba(37, 211, 102, 0.35) !important;min-width: 0 !important;min-height: 70px !important;display: flex !important;flex-direction: column !important;justify-content: center !important;} .single-product .whatsagent-support-agent-info, .woocommerce .whatsagent-support-agent-info, body .whatsagent-support-agent-info{display: flex !important;align-items: center !important;justify-content: space-between !important;margin-bottom: 4px !important;width: 100% !important;} .single-product .whatsagent-support-agent-name, .woocommerce .whatsagent-support-agent-name, body .whatsagent-support-agent-name{font-size: 14px !important;font-weight: 700 !important;color: white !important;margin: 0 !important;flex-shrink: 0 !important;} .single-product .whatsagent-support-agent-status, .woocommerce .whatsagent-support-agent-status, body .whatsagent-support-agent-status{background: rgba(255, 255, 255, 0.2) !important;color: white !important;padding: 2px 8px !important;border-radius: 12px !important;font-size: 10px !important;font-weight: 600 !important;text-transform: uppercase !important;flex-shrink: 0 !important;} .single-product .whatsagent-support-agent-text, .woocommerce .whatsagent-support-agent-text, body .whatsagent-support-agent-text{font-size: 12px !important;color: white !important;font-weight: 500 !important;margin: 0 !important;width: 100% !important;} .whatsagent-product-support{margin: 15px 0 !important;padding: 0 !important;background: transparent !important;border: none !important;box-shadow: none !important;} .whatsagent-support-title{display: none !important;} .whatsagent-support-agent{display: flex !important;align-items: center !important;position: relative !important;margin-bottom: 12px !important;cursor: pointer !important;transition: all 0.3s ease !important;text-decoration: none !important;} .whatsagent-support-agent:hover{transform: translateY(-2px) !important;text-decoration: none !important;} .whatsagent-support-agent-avatar{width: 50px !important;height: 50px !important;border-radius: 50% !important;overflow: hidden !important;position: relative !important;z-index: 2 !important;border: 3px solid white !important;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;} .whatsagent-support-agent-avatar img{width: 50px !important;height: 50px !important;object-fit: cover !important;border-radius: 50% !important;} .whatsagent-support-agent-avatar-placeholder{width: 100% !important;height: 100% !important;background: linear-gradient(135deg, #25D366, #1ea952) !important;color: white !important;display: flex !important;align-items: center !important;justify-content: center !important;font-weight: 700 !important;font-size: 20px !important;} .whatsagent-whatsapp-overlay{position: absolute !important;top: -5px !important;right: -5px !important;width: 20px !important;height: 20px !important;background: #f8f9fa !important;border: 2px solid #25D366 !important;border-radius: 50% !important;display: flex !important;align-items: center !important;justify-content: center !important;z-index: 3 !important;} .whatsagent-whatsapp-overlay svg{width: 12px !important;height: 12px !important;fill: #25D366 !important;} .whatsagent-support-agent-banner{background: #25D366 !important;border-radius: 25px !important;padding: 12px 20px 12px 15px !important;margin-left: -10px !important;flex: 1 !important;position: relative !important;z-index: 1 !important;box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3) !important;} .whatsagent-support-agent-info{display: flex !important;align-items: center !important;justify-content: space-between !important;margin-bottom: 4px !important;} .whatsagent-support-agent-name{font-size: 14px !important;font-weight: 700 !important;color: white !important;margin: 0 !important;} .whatsagent-support-agent-status{background: rgba(255, 255, 255, 0.2) !important;color: white !important;padding: 2px 8px !important;border-radius: 12px !important;font-size: 10px !important;font-weight: 600 !important;text-transform: uppercase !important;} .whatsagent-support-agent-text{font-size: 12px !important;color: white !important;font-weight: 500 !important;margin: 0 !important;} .whatsagent-product-support{margin: 20px 0;padding: 20px;background: #f8f9fa;border-radius: 12px;border: 1px solid #e9ecef;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);} .whatsagent-support-title{font-size: 18px;font-weight: 700;color: #2c3e50;margin: 0 0 16px 0;padding-bottom: 8px;border-bottom: 3px solid #25D366;letter-spacing: -0.5px;} .whatsagent-support-agents{display: flex;flex-direction: column;gap: 14px;} .whatsagent-support-agent{display: flex;align-items: center;padding: 16px;background: white;border-radius: 10px;border: 1px solid #e9ecef;transition: all 0.3s ease;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);} .whatsagent-support-agent:hover{box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);border-color: #25D366;transform: translateY(-2px);} .whatsagent-support-agent-avatar{width: 40px !important;height: 40px !important;border-radius: 50%;overflow: hidden;margin-right: 16px;flex-shrink: 0;border: 3px solid #f8f9fa;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);position: relative;} .whatsagent-support-agent-avatar img{width: 40px !important;height: 40px !important;object-fit: cover !important;border-radius: 50% !important;position: absolute;top: 0;left: 0;} .whatsagent-support-agent-avatar-placeholder{width: 100%;height: 100%;background: linear-gradient(135deg, #25D366, #1ea952);color: white;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 16px;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);} .whatsagent-support-agent-info{flex: 1;min-width: 0;} .whatsagent-support-agent-name{font-size: 16px;font-weight: 600;color: #2c3e50;margin-bottom: 4px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;letter-spacing: -0.3px;} .whatsagent-support-agent-status{display: flex;align-items: center;font-size: 13px;color: #6c757d;font-weight: 500;} .whatsagent-status-indicator{width: 8px;height: 8px;border-radius: 50%;margin-right: 6px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);} .whatsagent-status-indicator.whatsagent-status-online{background: #25D366;box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.2);} .whatsagent-status-indicator.whatsagent-status-away{background: #fd7e14;box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.2);} .whatsagent-status-indicator.whatsagent-status-offline{background: #6c757d;box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.2);} .whatsagent-support-agent-action{flex-shrink: 0;} .whatsagent-whatsapp-button{display: inline-flex;align-items: center;gap: 8px;padding: 10px 16px;background: #25D366;color: white;text-decoration: none;border-radius: 8px;font-size: 13px;font-weight: 600;transition: all 0.3s ease;border: none;cursor: pointer;white-space: nowrap;box-shadow: 0 2px 4px rgba(37, 211, 102, 0.2);letter-spacing: -0.2px;} .whatsagent-whatsapp-button:hover{background: #1ea952;color: white;text-decoration: none;transform: translateY(-1px);box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);} .whatsagent-whatsapp-button svg{fill: currentColor;width: 18px;height: 18px;filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));} .whatsagent-product-support{animation: whatsagent-fadeInUp 0.6s ease-out;} @keyframes whatsagent-fadeInUp{from{opacity: 0;transform: translateY(20px);} to{opacity: 1;transform: translateY(0);}} .whatsagent-support-agent{animation: whatsagent-slideInLeft 0.4s ease-out;animation-fill-mode: both;} .whatsagent-support-agent:nth-child(1){animation-delay: 0.1s;} .whatsagent-support-agent:nth-child(2){animation-delay: 0.2s;} .whatsagent-support-agent:nth-child(3){animation-delay: 0.3s;} @keyframes whatsagent-slideInLeft{from{opacity: 0;transform: translateX(-20px);} to{opacity: 1;transform: translateX(0);}} @media (max-width: 768px){.whatsagent-product-support{margin: 15px 0;padding: 16px;} .whatsagent-support-title{font-size: 16px;margin-bottom: 12px;} .whatsagent-support-agent{flex-direction: column;text-align: center;gap: 12px;padding: 14px;} .whatsagent-support-agent-avatar{margin-right: 0;margin-bottom: 8px;} .whatsagent-support-agent-info{margin-bottom: 8px;} .whatsagent-whatsapp-button{width: 100%;justify-content: center;font-size: 12px;padding: 8px 12px;}}