/* ======================================== Recipe Labs Chatbot Widget Drop-in styles — add to ======================================== */ .chatbot-trigger { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: white; border: 1.5px solid #E0E7EF; cursor: pointer; z-index: 9998; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); padding: 0; } .chatbot-trigger:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,0.2); } .chatbot-trigger img { width: 30px; height: 30px; border-radius: 6px; } .chatbot-trigger .chatbot-close-icon { display: none; width: 22px; height: 22px; stroke: #1A1F2E; fill: none; stroke-width: 2; stroke-linecap: round; } .chatbot-trigger.active img { display: none; } .chatbot-trigger.active .chatbot-close-icon { display: block; } .chatbot-badge { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; background: #007AFF; border-radius: 50%; border: 2px solid white; } .chatbot-trigger.active .chatbot-badge { display: none; } .chatbot-window { position: fixed; bottom: 96px; right: 24px; width: 380px; height: 520px; max-height: calc(100vh - 120px); background: white; border-radius: 20px; box-shadow: 0 12px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04); z-index: 9997; display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(16px) scale(0.96); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .chatbot-window.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .chatbot-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid #E0E7EF; background: white; } .chatbot-header img { width: 36px; height: 36px; border-radius: 50%; } .chatbot-header_name { font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-weight: 700; color: #1A1F2E; } .chatbot-header_status { font-size: 0.7rem; color: #3D7041; display: flex; align-items: center; gap: 4px; } .chatbot-header_status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #3D7041; animation: chatbot-pulse 2s ease-in-out infinite; } @keyframes chatbot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes chatbot-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .chatbot-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; scroll-behavior: smooth; } .chatbot-messages::-webkit-scrollbar { width: 4px; } .chatbot-messages::-webkit-scrollbar-thumb { background: #E0E7EF; border-radius: 4px; } .chatbot-msg { max-width: 82%; padding: 0.6rem 0.9rem; border-radius: 18px; font-size: 0.85rem; line-height: 1.45; font-family: 'Montserrat', sans-serif; animation: chatbot-fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .chatbot-msg--bot { background: #E9E9EB; color: #1A1F2E; align-self: flex-start; border-bottom-left-radius: 4px; } .chatbot-msg--user { background: #007AFF; color: white; align-self: flex-end; border-bottom-right-radius: 4px; } .chatbot-msg--typing { background: #E9E9EB; align-self: flex-start; border-bottom-left-radius: 4px; padding: 0.7rem 1.1rem; display: flex; gap: 4px; } .chatbot-msg--typing span { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.3); animation: chatbot-typing 1.4s infinite; } .chatbot-msg--typing span:nth-child(2) { animation-delay: 0.2s; } .chatbot-msg--typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes chatbot-typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } } .chatbot-quick-replies { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.5rem; } .chatbot-quick-reply { background: white; border: 1.5px solid #007AFF; color: #007AFF; border-radius: 50px; padding: 0.4rem 0.85rem; font-size: 0.78rem; font-weight: 600; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .chatbot-quick-reply:hover { background: #007AFF; color: white; } .chatbot-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid #E0E7EF; background: white; } .chatbot-input input { flex: 1; border: 1.5px solid #E0E7EF; border-radius: 50px; padding: 0.6rem 1rem; font-size: 0.85rem; font-family: 'Montserrat', sans-serif; outline: none; transition: border-color 0.2s; color: #1A1F2E; } .chatbot-input input::placeholder { color: #8896A6; } .chatbot-input input:focus { border-color: #007AFF; } .chatbot-input button { width: 36px; height: 36px; border-radius: 50%; background: #007AFF; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; } .chatbot-input button:hover { background: #0063D1; } .chatbot-input button svg { width: 16px; height: 16px; stroke: white; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Mobile — mini phone-style popup */ @media (max-width: 480px) { .chatbot-trigger { bottom: 16px; right: 16px; width: 50px; height: 50px; } .chatbot-trigger img { width: 26px; height: 26px; } .chatbot-window { width: calc(100vw - 32px); max-width: 360px; height: 60vh; max-height: 480px; min-height: 340px; bottom: 80px; right: 16px; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05); } .chatbot-header { padding: 0.75rem 1rem; gap: 0.6rem; } .chatbot-header img { width: 30px; height: 30px; } .chatbot-header_name { font-size: 0.85rem; } .chatbot-header_status { font-size: 0.65rem; } .chatbot-messages { padding: 0.75rem; gap: 0.5rem; } .chatbot-msg { font-size: 0.8rem; padding: 0.5rem 0.75rem; max-width: 85%; } .chatbot-quick-replies { padding: 0 0.75rem 0.4rem; gap: 0.35rem; } .chatbot-quick-reply { font-size: 0.72rem; padding: 0.35rem 0.7rem; } .chatbot-input { padding: 0.5rem 0.75rem; gap: 0.4rem; } .chatbot-input input { padding: 0.5rem 0.85rem; font-size: 0.8rem; } .chatbot-input button { width: 32px; height: 32px; } .chatbot-input button svg { width: 14px; height: 14px; } }