/* ============================================================ FISAC AI Chatbot – Styles ============================================================ */ /* ------------------------------------------------------------------ CSS custom properties (set inline per-instance via shortcode) ------------------------------------------------------------------ */ .pncb-launcher { --pncb-primary: #2271b1; --pncb-primary-hover: #1a5c91; --pncb-bg: #ffffff; --pncb-border: #dde1e7; --pncb-user-bg: #2271b1; --pncb-user-color: #ffffff; --pncb-bot-bg: #f0f4f8; --pncb-bot-color: #1e2832; --pncb-radius: 14px; --pncb-height: 420px; /* Fixed position – bottom-right corner. The element is moved to by JS to avoid stacking-context issues caused by parent transforms / filters (e.g. theme sidebars). */ position: fixed; bottom: 24px; right: 24px; z-index: 2147483647; /* max possible z-index, above any theme arrow */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; } /* ------------------------------------------------------------------ Floating trigger button ------------------------------------------------------------------ */ .pncb-trigger { width: 58px; height: 58px; border-radius: 50%; background: var(--pncb-primary); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: background .15s, transform .15s, box-shadow .15s; font-size: 26px; line-height: 1; position: relative; margin-left: auto; /* aligns button to right within launcher */ } .pncb-trigger:hover { background: var(--pncb-primary-hover); transform: scale(1.07); box-shadow: 0 6px 22px rgba(0,0,0,.3); } .pncb-trigger:active { transform: scale(.95); } /* Unread badge */ .pncb-badge { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; background: #ef4444; border-radius: 50%; border: 2px solid #fff; display: none; } .pncb-launcher.pncb-has-unread .pncb-badge { display: block; } /* ------------------------------------------------------------------ Chat panel ------------------------------------------------------------------ */ .pncb-panel { position: absolute; bottom: 70px; /* above the trigger button */ right: 0; width: 360px; max-width: calc(100vw - 32px); background: var(--pncb-bg); border: 1px solid var(--pncb-border); border-radius: var(--pncb-radius); overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.18); /* Hidden by default */ opacity: 0; transform: translateY(12px) scale(.97); pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .pncb-launcher.pncb-open .pncb-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* ------------------------------------------------------------------ Header ------------------------------------------------------------------ */ .pncb-header { display: flex; align-items: center; gap: 8px; padding: 13px 16px; background: var(--pncb-primary); color: #fff; font-weight: 600; font-size: 15px; } .pncb-icon { font-size: 18px; flex-shrink: 0; } .pncb-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Close button inside header */ .pncb-close { background: none; border: none; color: rgba(255,255,255,.8); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; transition: color .15s; } .pncb-close:hover { color: #fff; } /* ------------------------------------------------------------------ Messages area ------------------------------------------------------------------ */ .pncb-messages { height: var(--pncb-height); overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; background: var(--pncb-bg); } .pncb-messages::-webkit-scrollbar { width: 5px; } .pncb-messages::-webkit-scrollbar-thumb { background: var(--pncb-border); border-radius: 3px; } /* ------------------------------------------------------------------ Messages ------------------------------------------------------------------ */ .pncb-message { display: flex; flex-direction: column; max-width: 85%; animation: pncb-in .18s ease; } @keyframes pncb-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .pncb-message.pncb-user { align-self: flex-end; align-items: flex-end; } .pncb-message.pncb-bot { align-self: flex-start; align-items: flex-start; } .pncb-bubble { padding: 9px 13px; border-radius: 16px; word-break: break-word; white-space: pre-wrap; } .pncb-user .pncb-bubble { background: var(--pncb-user-bg); color: var(--pncb-user-color); border-bottom-right-radius: 4px; } .pncb-bot .pncb-bubble { background: var(--pncb-bot-bg); color: var(--pncb-bot-color); border-bottom-left-radius: 4px; } /* Typing indicator */ .pncb-typing .pncb-bubble { display: flex; gap: 4px; align-items: center; padding: 12px 16px; } .pncb-dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa5b4; animation: pncb-bounce .9s infinite ease; } .pncb-dot:nth-child(2) { animation-delay: .15s; } .pncb-dot:nth-child(3) { animation-delay: .30s; } @keyframes pncb-bounce { 0%, 80%, 100% { transform: scale(1); opacity: .6; } 40% { transform: scale(1.35); opacity: 1; } } /* Error */ .pncb-error .pncb-bubble { background: #fef3f2; color: #b91c1c; border: 1px solid #fecaca; } /* ------------------------------------------------------------------ Input form ------------------------------------------------------------------ */ .pncb-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--pncb-border); background: #fafbfc; } .pncb-input { flex: 1; padding: 8px 12px; border: 1px solid var(--pncb-border); border-radius: 22px; outline: none; font-size: 13px; background: #fff; transition: border-color .15s; } .pncb-input:focus { border-color: var(--pncb-primary); } .pncb-btn { flex-shrink: 0; width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--pncb-primary); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .pncb-btn:hover { background: var(--pncb-primary-hover); } .pncb-btn:active { transform: scale(.95); } .pncb-btn:disabled { background: #9aa5b4; cursor: not-allowed; } /* ------------------------------------------------------------------ Admin preview (non floating) ------------------------------------------------------------------ */ .pncb-widget { --pncb-primary: #2271b1; --pncb-primary-hover: #1a5c91; --pncb-bg: #ffffff; --pncb-border: #dde1e7; --pncb-user-bg: #2271b1; --pncb-user-color: #ffffff; --pncb-bot-bg: #f0f4f8; --pncb-bot-color: #1e2832; --pncb-radius: 14px; --pncb-height: 260px; display: flex; flex-direction: column; border: 1px solid var(--pncb-border); border-radius: var(--pncb-radius); overflow: hidden; background: var(--pncb-bg); box-shadow: 0 4px 20px rgba(0,0,0,.08); } /* ------------------------------------------------------------------ Responsive ------------------------------------------------------------------ */ @media (max-width: 420px) { .pncb-launcher { bottom: 12px; right: 12px; } .pncb-panel { width: calc(100vw - 24px); right: -12px; } }