/* TextCRM — AI Assistant (floating chat) widget * * Matches the TextCRM design system: Inter, deep navy (#0b1326), header * surface (#131b2e), teal accent (#00f5a0), glass surfaces, and the same * cubic-bezier(.22,1,.36,1) motion used across the other widgets. Sits above * the WhatsApp button (z-index 9998) and can auto-stack above it. * * State is driven by [data-open="true"] on the root, set by the JS. */ .textcrm-ai-chat { --tcrm-ai-accent: #00f5a0; --tcrm-ai-offset-bottom: 28px; --tcrm-ai-offset-side: 28px; --tcrm-ai-stack: 0px; --tcrm-ai-panel-gap: 18px; position: fixed; bottom: calc(var(--tcrm-ai-offset-bottom) + var(--tcrm-ai-stack)); z-index: 9999; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .textcrm-ai-chat--bottom-right { right: var(--tcrm-ai-offset-side); } .textcrm-ai-chat--bottom-left { left: var(--tcrm-ai-offset-side); } /* Lift above the WhatsApp button when both are on the page. */ .textcrm-ai-chat.is-above-whatsapp { --tcrm-ai-stack: 86px; } /* Slide up smoothly to clear the Scroll-to-Top button — exactly like the WhatsApp button. The Scroll-to-Top widget sets --tcrm-wa-shift on (its rendered height + gap) and toggles .tcrm-scrolltop-active; we reuse the very same signal so all the floating buttons stay perfectly in sync. The matching transform transition is already on .textcrm-ai-chat above. */ body.tcrm-scrolltop-active .textcrm-ai-chat { transform: translateY( calc( -1 * var( --tcrm-wa-shift, 68px ) ) ); } /* ========================================================================= * Launcher * ====================================================================== */ .textcrm-ai-chat__launcher { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0; padding: 0; border: 0; border-radius: 50%; color: #06231a; background-color: var(--tcrm-ai-accent, #00f5a0); background-image: linear-gradient(160deg, #00f5a0 0%, var(--tcrm-ai-accent, #00f5a0) 100%); box-shadow: 0 16px 36px rgba(0, 245, 160, 0.35); cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform 0.25s ease, box-shadow 0.25s ease; } .textcrm-ai-chat__launcher:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 24px 48px rgba(0, 245, 160, 0.5); } .textcrm-ai-chat__launcher:active { transform: translateY(0) scale(0.98); } .textcrm-ai-chat__launcher:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } .textcrm-ai-chat__launcher-icon { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 26px; /* sizes Font Awesome () icons */ line-height: 1; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .textcrm-ai-chat__launcher-icon svg { width: 100%; height: 100%; } .textcrm-ai-chat__launcher-icon i { font-size: inherit; line-height: 1; color: inherit; } .textcrm-ai-chat__launcher-icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); } .textcrm-ai-chat[data-open="true"] .textcrm-ai-chat__launcher-icon--chat { opacity: 0; transform: rotate(90deg) scale(0.6); } .textcrm-ai-chat[data-open="true"] .textcrm-ai-chat__launcher-icon--close { opacity: 1; transform: rotate(0) scale(1); } /* Attention pulse — disabled once opened. */ .textcrm-ai-chat__launcher::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background-color: rgba(0, 245, 160, 0.4); z-index: -1; animation: textcrm-ai-pulse 2.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; } .textcrm-ai-chat[data-open="true"] .textcrm-ai-chat__launcher::after { animation: none; } @keyframes textcrm-ai-pulse { 0% { transform: scale(1); opacity: 0.6; } 75%, 100% { transform: scale(1.8); opacity: 0; } } /* ========================================================================= * Tooltip * ====================================================================== */ .textcrm-ai-chat__tooltip { position: absolute; bottom: 50%; transform: translateY(50%) translateX(8px); padding: 9px 13px; border-radius: 12px; border: 1px solid rgba(0, 245, 160, 0.25); background-color: #131b2e; color: #ffffff; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 12px 30px rgba(6, 14, 32, 0.35); transition: opacity 0.25s ease, transform 0.25s ease; } .textcrm-ai-chat--bottom-right .textcrm-ai-chat__tooltip { right: calc(100% + 14px); } .textcrm-ai-chat--bottom-left .textcrm-ai-chat__tooltip { left: calc(100% + 14px); transform: translateY(50%) translateX(-8px); } .textcrm-ai-chat:hover .textcrm-ai-chat__tooltip, .textcrm-ai-chat.is-tip-visible .textcrm-ai-chat__tooltip { opacity: 1; transform: translateY(50%) translateX(0); } .textcrm-ai-chat[data-open="true"] .textcrm-ai-chat__tooltip { opacity: 0 !important; } /* ========================================================================= * Panel * ====================================================================== */ .textcrm-ai-chat__panel { position: absolute; bottom: calc(100% + var(--tcrm-ai-panel-gap)); width: 384px; max-width: calc(100vw - 32px); max-height: min(620px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); background-color: #0b1326; box-shadow: 0 28px 70px rgba(6, 14, 32, 0.5); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px) scale(0.97); transform-origin: bottom right; transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s; } .textcrm-ai-chat--bottom-right .textcrm-ai-chat__panel { right: 0; transform-origin: bottom right; } .textcrm-ai-chat--bottom-left .textcrm-ai-chat__panel { left: 0; transform-origin: bottom left; } .textcrm-ai-chat[data-open="true"] .textcrm-ai-chat__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } /* ----- Header ----- */ .textcrm-ai-chat__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 18px; background-color: #131b2e; background-image: radial-gradient(80% 120% at 0% 0%, rgba(0, 245, 160, 0.15) 0%, transparent 60%), radial-gradient(60% 90% at 100% 100%, rgba(0, 168, 132, 0.12) 0%, transparent 60%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex: 0 0 auto; } .textcrm-ai-chat__identity { display: flex; align-items: center; gap: 12px; min-width: 0; } .textcrm-ai-chat__avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; color: #06231a; background: linear-gradient(135deg, #00f5a0 0%, #00a884 100%); box-shadow: 0 0 0 2px var(--tcrm-ai-accent, #00f5a0); overflow: visible; } .textcrm-ai-chat__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .textcrm-ai-chat__avatar svg { width: 30px; height: 30px; } .textcrm-ai-chat__online-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--tcrm-ai-accent, #00f5a0); box-shadow: 0 0 0 2px #131b2e; } .textcrm-ai-chat__meta { min-width: 0; } .textcrm-ai-chat__name { color: #ffffff; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .textcrm-ai-chat__subtitle { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: #9ca3af; font-size: 12px; font-weight: 500; line-height: 1.3; } .textcrm-ai-chat__subtitle::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: var(--tcrm-ai-accent, #00f5a0); box-shadow: 0 0 8px var(--tcrm-ai-accent, #00f5a0); } .textcrm-ai-chat__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 10px; color: #9ca3af; background-color: rgba(255, 255, 255, 0.05); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .textcrm-ai-chat__close svg { width: 18px; height: 18px; } .textcrm-ai-chat__close:hover { background-color: rgba(255, 255, 255, 0.1); color: #ffffff; } /* ----- Messages ----- */ .textcrm-ai-chat__body { flex: 1 1 auto; min-height: 220px; overflow-y: auto; overflow-x: hidden; padding: 18px 16px 6px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; } .textcrm-ai-chat__body::-webkit-scrollbar { width: 8px; } .textcrm-ai-chat__body::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.16); border-radius: 8px; } .textcrm-ai-chat__msg { display: flex; max-width: 86%; animation: textcrm-ai-msg-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; } .textcrm-ai-chat__msg--bot { align-self: flex-start; } .textcrm-ai-chat__msg--user { align-self: flex-end; } @keyframes textcrm-ai-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .textcrm-ai-chat__bubble { padding: 11px 14px; font-size: 14px; font-weight: 500; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; } .textcrm-ai-chat__msg--bot .textcrm-ai-chat__bubble { color: #e6eaf2; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 4px 16px 16px 16px; } .textcrm-ai-chat__msg--user .textcrm-ai-chat__bubble { color: #06231a; background-color: var(--tcrm-ai-accent, #00f5a0); border-radius: 16px 16px 4px 16px; font-weight: 600; } .textcrm-ai-chat__bubble a { color: inherit; text-decoration: underline; font-weight: 700; } .textcrm-ai-chat__bubble p { margin: 0 0 8px; } .textcrm-ai-chat__bubble p:last-child { margin-bottom: 0; } .textcrm-ai-chat__bubble ul { margin: 6px 0; padding-left: 18px; } .textcrm-ai-chat__bubble li { margin: 2px 0; } .textcrm-ai-chat__bubble code { padding: 1px 5px; border-radius: 6px; background-color: rgba(0, 0, 0, 0.25); font-size: 0.9em; } /* Typing indicator */ .textcrm-ai-chat__typing .textcrm-ai-chat__bubble { display: inline-flex; gap: 5px; padding: 14px 16px; } .textcrm-ai-chat__typing-dot { width: 7px; height: 7px; border-radius: 50%; background-color: #9ca3af; animation: textcrm-ai-typing 1.2s infinite ease-in-out; } .textcrm-ai-chat__typing-dot:nth-child(2) { animation-delay: 0.18s; } .textcrm-ai-chat__typing-dot:nth-child(3) { animation-delay: 0.36s; } @keyframes textcrm-ai-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } } /* Escalation block (WhatsApp hand-off inside a bot message) */ .textcrm-ai-chat__escalate { margin-top: 8px; align-self: flex-start; max-width: 86%; display: flex; flex-direction: column; gap: 8px; animation: textcrm-ai-msg-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; } .textcrm-ai-chat__escalate-note { color: #9ca3af; font-size: 12.5px; font-weight: 500; line-height: 1.45; } .textcrm-ai-chat__wa-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 12px; background-color: #25D366; color: #ffffff; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35); transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease; } .textcrm-ai-chat__wa-cta:hover { background-color: #1ebe5d; transform: translateY(-1px); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45); color: #ffffff; } .textcrm-ai-chat__wa-cta svg { width: 18px; height: 18px; fill: currentColor; } /* ----- Suggested questions ----- */ .textcrm-ai-chat__suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 12px; flex: 0 0 auto; } .textcrm-ai-chat__suggestions[hidden] { display: none; } .textcrm-ai-chat__chip { padding: 8px 13px; border-radius: 9999px; border: 1px solid rgba(0, 245, 160, 0.3); background-color: rgba(0, 245, 160, 0.08); color: #cdeee2; font-size: 12.5px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .textcrm-ai-chat__chip:hover { background-color: rgba(0, 245, 160, 0.16); border-color: rgba(0, 245, 160, 0.55); transform: translateY(-1px); } /* ----- Input ----- */ .textcrm-ai-chat__inputbar { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); background-color: rgba(255, 255, 255, 0.02); flex: 0 0 auto; } .textcrm-ai-chat__input { flex: 1 1 auto; min-height: 44px; max-height: 120px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.04); color: #e6eaf2; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.45; resize: none; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .textcrm-ai-chat__input::placeholder { color: #6b7689; } .textcrm-ai-chat__input:focus { border-color: rgba(0, 245, 160, 0.5); box-shadow: 0 0 0 3px rgba(0, 245, 160, 0.12); } .textcrm-ai-chat__send { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 12px; color: #06231a; background-color: var(--tcrm-ai-accent, #00f5a0); box-shadow: 0 6px 18px rgba(0, 245, 160, 0.35); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.2s ease, opacity 0.2s ease; } .textcrm-ai-chat__send svg { width: 20px; height: 20px; } .textcrm-ai-chat__send:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 245, 160, 0.45); } .textcrm-ai-chat__send:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } .textcrm-ai-chat__disclaimer { padding: 0 16px 12px; color: #5d6678; font-size: 11px; font-weight: 500; text-align: center; flex: 0 0 auto; } /* ========================================================================= * Visibility helpers * ====================================================================== */ @media (min-width: 1025px) { .textcrm-ai-chat--hide-desktop { display: none !important; } } @media (max-width: 1024px) { .textcrm-ai-chat--hide-tablet { display: none !important; } } @media (max-width: 767px) { .textcrm-ai-chat--hide-mobile { display: none !important; } } /* ========================================================================= * Mobile * ====================================================================== */ @media (max-width: 480px) { .textcrm-ai-chat__panel { position: fixed; right: 0 !important; left: 0 !important; bottom: 0; width: 100vw; max-width: 100vw; max-height: 86vh; border-radius: 18px 18px 0 0; } .textcrm-ai-chat__tooltip { display: none; } /* When the panel is open it is fixed to the viewport bottom; don't let the scroll-top shift turn the root into a containing block (which would leave a gap under the full-screen panel). The launcher is hidden behind the panel anyway, so dropping the shift here is invisible. */ body.tcrm-scrolltop-active .textcrm-ai-chat[data-open="true"] { transform: none; } } /* ========================================================================= * Reduced motion * ====================================================================== */ @media (prefers-reduced-motion: reduce) { .textcrm-ai-chat, .textcrm-ai-chat *, .textcrm-ai-chat *::after, .textcrm-ai-chat *::before { animation: none !important; transition: none !important; } }