/** * Lead Connect — frontend widget styles. * Colour/shape tokens (--rtcit-*) are injected inline in by PHP. */ #rtcit-ai-root { --rtcit-primary: #1a4fa0; --rtcit-secondary: #0d2a57; --rtcit-radius: 18px; --rtcit-side: right; --rtcit-bg: #ffffff; --rtcit-surface: #f6f8fc; --rtcit-text: #14213d; --rtcit-muted: #667085; --rtcit-border: #e6eaf2; --rtcit-bot-bubble: #f1f4fa; --rtcit-bot-text: #1d2b45; --rtcit-shadow: 0 18px 48px rgba(15, 30, 70, 0.20); position: fixed; bottom: 24px; z-index: 2147483000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; color: var(--rtcit-text); } #rtcit-ai-root *, #rtcit-ai-root *::before, #rtcit-ai-root *::after { box-sizing: border-box; } /* -------------------------------------------------------------- Launcher */ #rtcit-ai-root .rtcit-launcher { position: fixed; bottom: 24px; width: 60px; height: 60px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--rtcit-primary), var(--rtcit-secondary)); box-shadow: var(--rtcit-shadow); display: flex; align-items: center; justify-content: center; transition: transform 0.18s ease, box-shadow 0.18s ease; } #rtcit-ai-root .rtcit-launcher:hover { transform: translateY(-2px) scale(1.04); } #rtcit-ai-root .rtcit-launcher:focus-visible { outline: 3px solid rgba(26, 79, 160, 0.45); outline-offset: 3px; } #rtcit-ai-root .rtcit-launcher svg { width: 28px; height: 28px; } #rtcit-ai-root .rtcit-launcher-icon { position: absolute; display: flex; transition: opacity 0.18s ease, transform 0.18s ease; } #rtcit-ai-root .rtcit-icon-close { opacity: 0; transform: rotate(-45deg) scale(0.6); } #rtcit-ai-root.rtcit-open .rtcit-icon-open { opacity: 0; transform: rotate(45deg) scale(0.6); } #rtcit-ai-root.rtcit-open .rtcit-icon-close { opacity: 1; transform: none; } /* -------------------------------------------------------------- Panel */ #rtcit-ai-root .rtcit-panel { position: fixed; bottom: 96px; width: 380px; max-width: calc(100vw - 32px); height: min(624px, calc(100vh - 132px)); background: var(--rtcit-bg); border: 1px solid var(--rtcit-border); border-radius: calc(var(--rtcit-radius) + 4px); box-shadow: var(--rtcit-shadow); display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom var(--rtcit-side); opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease; } #rtcit-ai-root.rtcit-open .rtcit-panel { opacity: 1; transform: none; } #rtcit-ai-root .rtcit-panel[hidden] { display: none; } /* -------------------------------------------------------------- Header */ #rtcit-ai-root .rtcit-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 16px; color: #fff; background: linear-gradient(135deg, var(--rtcit-primary), var(--rtcit-secondary)); } #rtcit-ai-root .rtcit-identity { display: flex; align-items: center; gap: 10px; min-width: 0; } #rtcit-ai-root .rtcit-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; } #rtcit-ai-root .rtcit-avatar img { width: 100%; height: 100%; object-fit: cover; } #rtcit-ai-root .rtcit-avatar-default svg { width: 22px; height: 22px; color: #fff; } #rtcit-ai-root .rtcit-title { display: flex; flex-direction: column; min-width: 0; } #rtcit-ai-root .rtcit-title-text { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #rtcit-ai-root .rtcit-status { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.85; } #rtcit-ai-root .rtcit-dot { width: 7px; height: 7px; border-radius: 50%; background: #41d18f; box-shadow: 0 0 0 rgba(65, 209, 143, 0.6); animation: rtcit-pulse 2s infinite; } #rtcit-ai-root .rtcit-header-actions { display: flex; align-items: center; gap: 2px; flex: none; } #rtcit-ai-root .rtcit-iconbtn { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.85; transition: background 0.15s ease, opacity 0.15s ease; } #rtcit-ai-root .rtcit-iconbtn svg { width: 18px; height: 18px; } #rtcit-ai-root .rtcit-iconbtn:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); } #rtcit-ai-root .rtcit-iconbtn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 1px; } /* -------------------------------------------------------------- Messages */ #rtcit-ai-root .rtcit-messages { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--rtcit-surface); scroll-behavior: smooth; overscroll-behavior: contain; } #rtcit-ai-root .rtcit-row { display: flex; width: 100%; } #rtcit-ai-root .rtcit-row-user { justify-content: flex-end; } #rtcit-ai-root .rtcit-bubble { max-width: 84%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; word-wrap: break-word; overflow-wrap: anywhere; animation: rtcit-rise 0.22s ease; } #rtcit-ai-root .rtcit-bubble-bot { background: var(--rtcit-bot-bubble); color: var(--rtcit-bot-text); border-bottom-left-radius: 5px; } #rtcit-ai-root .rtcit-bubble-user { background: linear-gradient(135deg, var(--rtcit-primary), var(--rtcit-secondary)); color: #fff; border-bottom-right-radius: 5px; } #rtcit-ai-root .rtcit-bubble p { margin: 0 0 8px; } #rtcit-ai-root .rtcit-bubble p:last-child { margin-bottom: 0; } #rtcit-ai-root .rtcit-bubble a { color: inherit; text-decoration: underline; font-weight: 600; } #rtcit-ai-root .rtcit-bubble-bot a { color: var(--rtcit-primary); } #rtcit-ai-root .rtcit-bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; padding: 1px 5px; border-radius: 5px; background: rgba(15, 30, 70, 0.08); } #rtcit-ai-root .rtcit-bubble-user code { background: rgba(255, 255, 255, 0.22); } #rtcit-ai-root .rtcit-bubble ul { margin: 4px 0; padding-left: 20px; } #rtcit-ai-root .rtcit-bubble li { margin: 2px 0; } #rtcit-ai-root .rtcit-time { display: block; margin-top: 5px; font-size: 11px; opacity: 0.6; } /* Typing indicator */ #rtcit-ai-root .rtcit-typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; } #rtcit-ai-root .rtcit-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--rtcit-muted); opacity: 0.5; animation: rtcit-blink 1.3s infinite both; } #rtcit-ai-root .rtcit-typing span:nth-child(2) { animation-delay: 0.2s; } #rtcit-ai-root .rtcit-typing span:nth-child(3) { animation-delay: 0.4s; } /* -------------------------------------------------------------- Lead form */ #rtcit-ai-root .rtcit-form-wrap { border-top: 1px solid var(--rtcit-border); background: var(--rtcit-bg); max-height: 58%; overflow-y: auto; padding: 14px 16px; } #rtcit-ai-root .rtcit-form-wrap[hidden] { display: none; } /* Pre-chat flow elements */ #rtcit-ai-root .rtcit-form-intro { margin: 2px 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--rtcit-text); font-weight: 500; } #rtcit-ai-root .rtcit-form-intro[hidden], #rtcit-ai-root .rtcit-builtin-wrap[hidden], #rtcit-ai-root .rtcit-widget-embed[hidden], #rtcit-ai-root .rtcit-lead-skip[hidden] { display: none; } #rtcit-ai-root .rtcit-widget-embed { min-height: 60px; } #rtcit-ai-root .rtcit-widget-embed iframe { max-width: 100%; border: 0; } /* Form mode fills the panel (no empty messages area above the form) */ #rtcit-ai-root.rtcit-mode-form .rtcit-messages { display: none; } #rtcit-ai-root.rtcit-mode-form .rtcit-form-wrap { max-height: none; flex: 1 1 auto; } #rtcit-ai-root .rtcit-form-body[hidden] { display: none; } /* Intro "start" screen — centered in the panel */ #rtcit-ai-root.rtcit-step-intro .rtcit-form-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; } #rtcit-ai-root.rtcit-step-intro .rtcit-form-intro { margin: 0; font-size: 16px; } #rtcit-ai-root .rtcit-form-start { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; background: var(--rtcit-primary); color: #fff; font-size: 15px; font-weight: 600; padding: 12px 26px; border-radius: 10px; transition: filter 0.15s ease; } #rtcit-ai-root .rtcit-form-start:hover { filter: brightness(1.06); } #rtcit-ai-root .rtcit-form-start[hidden] { display: none; } #rtcit-ai-root .rtcit-widget-continue { display: block; width: 100%; margin-top: 14px; -webkit-appearance: none; appearance: none; border: 1px solid var(--rtcit-primary); cursor: pointer; background: transparent; color: var(--rtcit-primary); font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 10px; } #rtcit-ai-root .rtcit-widget-continue:hover { background: rgba(26, 79, 160, 0.08); } #rtcit-ai-root .rtcit-widget-continue[hidden] { display: none; } /* Standalone [lead_connect_form] shortcode */ .rtcit-standalone { max-width: 520px; } .rtcit-standalone-done { padding: 14px 16px; border-radius: 10px; background: rgba(26, 79, 160, 0.08); color: var(--rtcit-primary, #1a4fa0); font-size: 15px; line-height: 1.5; } .rtcit-standalone-done[hidden] { display: none; } #rtcit-ai-root .rtcit-lead-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } #rtcit-ai-root .rtcit-lead-title { font-size: 14px; font-weight: 700; } #rtcit-ai-root .rtcit-lead-skip { border: 0; background: transparent; color: var(--rtcit-muted); font-size: 12.5px; cursor: pointer; text-decoration: underline; } #rtcit-ai-root .rtcit-field { margin-bottom: 10px; } #rtcit-ai-root .rtcit-field-row { display: flex; gap: 10px; } #rtcit-ai-root .rtcit-field-row .rtcit-field { flex: 1; min-width: 0; } #rtcit-ai-root .rtcit-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; color: var(--rtcit-text); } #rtcit-ai-root .rtcit-field input, #rtcit-ai-root .rtcit-field select { width: 100%; padding: 9px 10px; font-size: 14px; color: var(--rtcit-text); background: var(--rtcit-bg); border: 1px solid var(--rtcit-border); border-radius: 9px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #rtcit-ai-root .rtcit-field input:focus, #rtcit-ai-root .rtcit-field select:focus { outline: none; border-color: var(--rtcit-primary); box-shadow: 0 0 0 3px rgba(26, 79, 160, 0.15); } #rtcit-ai-root .rtcit-field.rtcit-invalid input, #rtcit-ai-root .rtcit-field.rtcit-invalid select { border-color: #e03b3b; box-shadow: 0 0 0 3px rgba(224, 59, 59, 0.12); } #rtcit-ai-root .rtcit-req { color: #e03b3b; } #rtcit-ai-root .rtcit-error { display: block; min-height: 0; color: #e03b3b; font-size: 11.5px; margin-top: 3px; } #rtcit-ai-root .rtcit-consent label { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; font-size: 12.5px; line-height: 1.45; cursor: pointer; } #rtcit-ai-root .rtcit-consent input { width: auto; margin-top: 2px; flex: none; } #rtcit-ai-root .rtcit-lead-submit { width: 100%; margin-top: 4px; padding: 11px 14px; border: 0; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--rtcit-primary), var(--rtcit-secondary)); display: flex; align-items: center; justify-content: center; gap: 8px; transition: filter 0.15s ease; } #rtcit-ai-root .rtcit-lead-submit:hover { filter: brightness(1.05); } #rtcit-ai-root .rtcit-lead-submit[disabled] { opacity: 0.7; cursor: progress; } #rtcit-ai-root .rtcit-lead-submit-spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; display: none; animation: rtcit-spin 0.7s linear infinite; } #rtcit-ai-root .rtcit-lead-form.is-loading .rtcit-lead-submit-spinner { display: inline-block; } /* -------------------------------------------------------------- Composer */ #rtcit-ai-root .rtcit-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--rtcit-border); background: var(--rtcit-bg); } #rtcit-ai-root .rtcit-composer[hidden] { display: none; } #rtcit-ai-root .rtcit-input { flex: 1; resize: none; min-height: 52px; max-height: 160px; padding: 14px 14px; line-height: 1.45; font-family: inherit; font-size: 15px; color: var(--rtcit-text); background: var(--rtcit-surface); border: 1px solid var(--rtcit-border); border-radius: 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #rtcit-ai-root .rtcit-input:focus { outline: none; border-color: var(--rtcit-primary); box-shadow: 0 0 0 3px rgba(26, 79, 160, 0.15); } #rtcit-ai-root .rtcit-send { width: 42px; height: 42px; flex: none; border: 0; border-radius: 12px; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--rtcit-primary), var(--rtcit-secondary)); display: flex; align-items: center; justify-content: center; transition: filter 0.15s ease, transform 0.1s ease; } #rtcit-ai-root .rtcit-send svg { width: 20px; height: 20px; } #rtcit-ai-root .rtcit-send:hover { filter: brightness(1.06); } #rtcit-ai-root .rtcit-send:active { transform: scale(0.94); } #rtcit-ai-root .rtcit-send[disabled] { opacity: 0.5; cursor: default; } /* -------------------------------------------------------------- Footer */ #rtcit-ai-root .rtcit-cookie, #rtcit-ai-root .rtcit-disclaimer { margin: 0; padding: 0 16px 8px; font-size: 10.5px; color: var(--rtcit-muted); background: var(--rtcit-bg); } #rtcit-ai-root .rtcit-disclaimer { padding-bottom: 12px; } #rtcit-ai-root .rtcit-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------- Inline CTA */ .rtcit-inline-cta { margin: 10px 0; } .rtcit-inline-open { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 999px; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; background: linear-gradient(135deg, #1a4fa0, #0d2a57); box-shadow: 0 8px 22px rgba(15, 30, 70, 0.18); transition: transform 0.15s ease, filter 0.15s ease; } .rtcit-inline-open:hover { transform: translateY(-1px); filter: brightness(1.05); } /* -------------------------------------------------------------- Dark mode */ #rtcit-ai-root.rtcit-dm-dark, #rtcit-ai-root.rtcit-dark { --rtcit-bg: #15181f; --rtcit-surface: #1b1f29; --rtcit-text: #e9edf5; --rtcit-muted: #9aa6bd; --rtcit-border: #2a303d; --rtcit-bot-bubble: #232936; --rtcit-bot-text: #e6ebf5; --rtcit-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { #rtcit-ai-root.rtcit-dm-auto { --rtcit-bg: #15181f; --rtcit-surface: #1b1f29; --rtcit-text: #e9edf5; --rtcit-muted: #9aa6bd; --rtcit-border: #2a303d; --rtcit-bot-bubble: #232936; --rtcit-bot-text: #e6ebf5; --rtcit-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); } } #rtcit-ai-root.rtcit-dm-dark .rtcit-bubble code, #rtcit-ai-root.rtcit-dark .rtcit-bubble-bot code { background: rgba(255, 255, 255, 0.12); } /* -------------------------------------------------------------- Responsive */ @media (max-width: 480px) { #rtcit-ai-root .rtcit-panel { width: calc(100vw - 20px); max-width: none; height: min(80vh, calc(100vh - 96px)); bottom: 88px; } #rtcit-ai-root .rtcit-launcher, #rtcit-ai-root .rtcit-panel { left: 10px !important; right: 10px !important; } #rtcit-ai-root .rtcit-launcher { left: auto !important; } #rtcit-ai-root.rtcit-pos-bottom-left .rtcit-launcher { right: auto !important; left: 10px !important; } } /* -------------------------------------------------------------- Keyframes */ @keyframes rtcit-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes rtcit-blink { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } } @keyframes rtcit-spin { to { transform: rotate(360deg); } } @keyframes rtcit-pulse { 0% { box-shadow: 0 0 0 0 rgba(65, 209, 143, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(65, 209, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(65, 209, 143, 0); } } @media (prefers-reduced-motion: reduce) { #rtcit-ai-root *, .rtcit-inline-open { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }