/* ============================================================ LAKSHYA CHATBOT — chatbot.css (Premium Redesign) Place this file at: assets/css/chatbot.css Link in : ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap'); /* ── Variables ── The core palette is derived from the site-wide THEME SYSTEM in style.css (:root / [data-theme=…]). The chat bubble and window therefore follow the active colour theme automatically. */ :root { /* Core palette — mapped to the active theme's greens */ --lk-forest: var(--green); --lk-forest-mid: var(--green-dark); --lk-forest-light: var(--green-light); --lk-sage: var(--green-pale); --lk-mint: var(--green-tint); --lk-mint-deep: rgba(var(--green-rgb), 0.18); --lk-gold: var(--green-light); --lk-gold-light: var(--green-pale); /* Surface */ --lk-bg: #FAFBFA; --lk-surface: #F3F6F4; --lk-surface-2: #FFFFFF; --lk-border: rgba(var(--green-rgb), 0.12); --lk-border-strong: rgba(var(--green-rgb), 0.22); /* Text */ --lk-text: #1A2E25; --lk-text-mid: #3D5248; --lk-muted: #7A9487; --lk-muted-light: #A8BEB5; /* Geometry */ --lk-radius: 20px; --lk-radius-sm: 12px; --lk-radius-xs: 8px; /* Shadow system — tinted with the theme colour */ --lk-shadow-sm: 0 2px 8px rgba(var(--green-rgb), 0.10); --lk-shadow: 0 8px 32px rgba(var(--green-rgb), 0.16), 0 2px 8px rgba(var(--green-rgb), 0.08); --lk-shadow-lg: 0 24px 64px rgba(var(--green-rgb), 0.22), 0 4px 16px rgba(var(--green-rgb), 0.10); --lk-shadow-bubble: 0 8px 32px rgba(var(--green-rgb), 0.40), 0 2px 8px rgba(var(--green-rgb), 0.20); /* Type */ --lk-font: 'Inter', system-ui, sans-serif; --lk-font-display: 'DM Serif Display', Georgia, serif; /* Layout */ --lk-z: 9999; --lk-w: 400px; --lk-h: 600px; } /* ══════════════════════════════════════ BUBBLE TRIGGER ══════════════════════════════════════ */ .lk-chat-bubble { position: fixed; bottom: 28px; right: 28px; z-index: var(--lk-z); display: flex; align-items: center; gap: 9px; background: linear-gradient(135deg, var(--lk-forest-mid) 0%, var(--lk-forest) 100%); color: #fff; border: none; border-radius: 50px; padding: 14px 22px 14px 18px; cursor: pointer; box-shadow: var(--lk-shadow-bubble); font-family: var(--lk-font); font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; transition: transform 0.26s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease, background 0.2s ease; outline: none; /* subtle top border for glass look */ border-top: 1px solid rgba(255,255,255,0.18); } .lk-chat-bubble:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 16px 48px rgba(var(--green-rgb),0.50), 0 4px 12px rgba(var(--green-rgb),0.24); } .lk-chat-bubble:active { transform: translateY(-1px) scale(1.01); } .lk-chat-bubble:focus-visible { outline: 3px solid var(--lk-gold); outline-offset: 3px; } .lk-bubble-icon { width: 24px; height: 24px; flex-shrink: 0; } .lk-bubble-icon svg { width: 100%; height: 100%; } .lk-bubble-label { white-space: nowrap; } /* Ping dot */ .lk-bubble-ping { position: absolute; top: 8px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--lk-gold); box-shadow: 0 0 0 2px rgba(var(--green-rgb),0.25); animation: lkPing 2.4s ease-in-out infinite; } @keyframes lkPing { 0%,100% { transform: scale(1); opacity: 1; } 60% { transform: scale(2.2); opacity: 0; } } .lk-chat-bubble.lk-open .lk-bubble-ping { display: none; } /* ══════════════════════════════════════ CHAT WINDOW ══════════════════════════════════════ */ .lk-chat-window { position: fixed; bottom: 28px; right: 28px; z-index: var(--lk-z); width: var(--lk-w); height: var(--lk-h); background: var(--lk-bg); border-radius: var(--lk-radius); box-shadow: var(--lk-shadow-lg); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--lk-border-strong); transform: scale(0.9) translateY(28px); opacity: 0; pointer-events: none; transform-origin: bottom right; transition: transform 0.32s cubic-bezier(.34,1.4,.64,1), opacity 0.24s ease; } .lk-chat-window.lk-visible { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; } /* ══════════════════════════════════════ HEADER ══════════════════════════════════════ */ .lk-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: linear-gradient(135deg, var(--lk-forest) 0%, var(--lk-forest-mid) 100%); color: #fff; flex-shrink: 0; position: relative; /* subtle noise texture via pseudo */ } .lk-chat-header::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; border-radius: inherit; } .lk-chat-header-info { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; } .lk-chat-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.15); flex-shrink: 0; border: 2px solid rgba(255,255,255,0.25); box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .lk-chat-avatar svg { width: 100%; height: 100%; } .lk-chat-header-name { font-family: var(--lk-font); font-size: 14.5px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; } .lk-chat-header-status { font-family: var(--lk-font); font-size: 11px; opacity: 0.80; display: flex; align-items: center; gap: 5px; margin-top: 2px; font-weight: 500; letter-spacing: 0.02em; } .lk-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #6EE7A0; box-shadow: 0 0 0 2px rgba(110,231,160,0.3); display: inline-block; animation: lkPulse 2.8s ease-in-out infinite; } @keyframes lkPulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 2px rgba(110,231,160,0.3); } 50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(110,231,160,0.15); } } /* Header actions */ .lk-chat-header-actions { display: flex; align-items: center; gap: 2px; position: relative; z-index: 1; } .lk-chat-new, .lk-chat-close { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); cursor: pointer; padding: 7px; border-radius: 10px; transition: background 0.18s, color 0.18s, transform 0.18s; display: flex; align-items: center; justify-content: center; } .lk-chat-new svg, .lk-chat-close svg { width: 16px; height: 16px; } .lk-chat-new { margin-right: 4px; } .lk-chat-new:hover, .lk-chat-close:hover { background: rgba(255,255,255,0.22); color: #fff; transform: scale(1.08); } /* ══════════════════════════════════════ MESSAGES AREA ══════════════════════════════════════ */ .lk-chat-messages { flex: 1; overflow-y: auto; padding: 20px 16px 12px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; background: /* top fade */ linear-gradient(180deg, var(--lk-bg) 0%, transparent 60px) top / 100% 60px no-repeat, var(--lk-bg); } .lk-chat-messages::-webkit-scrollbar { width: 3px; } .lk-chat-messages::-webkit-scrollbar-track { background: transparent; } .lk-chat-messages::-webkit-scrollbar-thumb { background: var(--lk-mint-deep); border-radius: 3px; } /* ── Message bubbles ── */ .lk-msg { display: flex; flex-direction: column; max-width: 80%; animation: lkMsgIn 0.28s cubic-bezier(0.34, 1.2, 0.64, 1); } @keyframes lkMsgIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .lk-msg-bot { align-self: flex-start; } .lk-msg-user { align-self: flex-end; } .lk-msg-bubble { padding: 11px 15px; border-radius: 18px; font-family: var(--lk-font); font-size: 13.5px; line-height: 1.6; word-break: break-word; } .lk-msg-bot .lk-msg-bubble { background: var(--lk-surface-2); color: var(--lk-text); border-bottom-left-radius: 5px; border: 1px solid var(--lk-border); box-shadow: var(--lk-shadow-sm); } .lk-msg-user .lk-msg-bubble { background: linear-gradient(135deg, var(--lk-forest-mid) 0%, var(--lk-forest) 100%); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 4px 16px rgba(var(--green-rgb),0.30); border: 1px solid rgba(255,255,255,0.08); } .lk-msg-time { font-size: 10px; color: var(--lk-muted-light); margin-top: 4px; font-family: var(--lk-font); font-weight: 500; letter-spacing: 0.03em; } .lk-msg-bot .lk-msg-time { margin-left: 6px; } .lk-msg-user .lk-msg-time { align-self: flex-end; margin-right: 6px; } /* ── Typing indicator ── */ .lk-typing { display: flex; align-items: center; gap: 5px; padding: 13px 16px; background: var(--lk-surface-2); border: 1px solid var(--lk-border); border-radius: 18px; border-bottom-left-radius: 5px; width: fit-content; align-self: flex-start; animation: lkMsgIn 0.28s cubic-bezier(0.34, 1.2, 0.64, 1); box-shadow: var(--lk-shadow-sm); } .lk-typing span { width: 6px; height: 6px; background: var(--lk-sage); border-radius: 50%; animation: lkDot 1.3s ease-in-out infinite; } .lk-typing span:nth-child(2) { animation-delay: 0.18s; } .lk-typing span:nth-child(3) { animation-delay: 0.36s; } @keyframes lkDot { 0%,80%,100% { transform: scale(0.65) translateY(0); opacity: 0.45; } 40% { transform: scale(1) translateY(-3px); opacity: 1; } } /* ══════════════════════════════════════ QUICK CHIPS ══════════════════════════════════════ */ .lk-chip-group { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; align-self: flex-start; max-width: 100%; animation: lkMsgIn 0.32s cubic-bezier(0.34, 1.2, 0.64, 1); } .lk-chip { background: var(--lk-surface-2); border: 1.5px solid var(--lk-border-strong); color: var(--lk-forest); border-radius: 30px; padding: 7px 15px; font-size: 12.5px; font-family: var(--lk-font); font-weight: 600; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s; white-space: nowrap; box-shadow: var(--lk-shadow-sm); } .lk-chip:hover { background: linear-gradient(135deg, var(--lk-forest-mid), var(--lk-forest)); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--green-rgb),0.28); } .lk-chip:active { transform: translateY(0); } /* ══════════════════════════════════════ INFO CARDS ══════════════════════════════════════ */ .lk-info-card { background: var(--lk-surface-2); border: 1px solid var(--lk-border); border-left: 3px solid var(--lk-forest-light); border-radius: var(--lk-radius-sm); padding: 13px 15px; font-family: var(--lk-font); font-size: 13px; line-height: 1.65; color: var(--lk-text-mid); align-self: flex-start; max-width: 90%; animation: lkMsgIn 0.28s cubic-bezier(0.34, 1.2, 0.64, 1); box-shadow: var(--lk-shadow-sm); } .lk-info-card-title { font-weight: 700; font-size: 13px; color: var(--lk-forest); margin-bottom: 6px; display: flex; align-items: center; gap: 7px; letter-spacing: -0.01em; } .lk-info-card-title .lk-icon { font-size: 14px; } /* ══════════════════════════════════════ CTA BUTTON ══════════════════════════════════════ */ .lk-cta-btn { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, var(--lk-forest-mid), var(--lk-forest)); color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-size: 13px; font-family: var(--lk-font); font-weight: 600; cursor: pointer; text-decoration: none; margin-top: 10px; transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s; align-self: flex-start; animation: lkMsgIn 0.32s cubic-bezier(0.34, 1.2, 0.64, 1); box-shadow: 0 4px 16px rgba(var(--green-rgb),0.28); letter-spacing: 0.01em; } .lk-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(var(--green-rgb),0.38); color: #fff; text-decoration: none; } .lk-cta-btn:active { transform: translateY(0); } /* ══════════════════════════════════════ BACK BUTTON ══════════════════════════════════════ */ .lk-back-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1.5px solid var(--lk-border-strong); color: var(--lk-muted); border-radius: 10px; padding: 7px 13px; font-size: 12px; font-family: var(--lk-font); font-weight: 600; cursor: pointer; margin-top: 8px; transition: border-color 0.18s, color 0.18s, background 0.18s; align-self: flex-start; animation: lkMsgIn 0.32s cubic-bezier(0.34, 1.2, 0.64, 1); } .lk-back-btn:hover { border-color: var(--lk-forest-light); color: var(--lk-forest); background: var(--lk-mint); } /* ══════════════════════════════════════ CONTACT ROW ══════════════════════════════════════ */ .lk-contact-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--lk-border); font-size: 13px; font-family: var(--lk-font); color: var(--lk-text-mid); } .lk-contact-row:last-child { border-bottom: none; } .lk-contact-row a { color: var(--lk-forest-mid); text-decoration: none; font-weight: 600; transition: color 0.15s; } .lk-contact-row a:hover { color: var(--lk-forest); text-decoration: underline; } .lk-contact-icon { font-size: 15px; flex-shrink: 0; width: 22px; text-align: center; } /* ══════════════════════════════════════ INPUT FOOTER ══════════════════════════════════════ */ .lk-chat-footer { border-top: 1px solid var(--lk-border); padding: 12px 14px 10px; background: var(--lk-surface-2); flex-shrink: 0; } .lk-chat-input-row { display: flex; align-items: flex-end; gap: 9px; } .lk-chat-input { flex: 1; border: 1.5px solid var(--lk-border-strong); border-radius: 14px; padding: 10px 15px; font-size: 13.5px; font-family: var(--lk-font); color: var(--lk-text); resize: none; max-height: 100px; line-height: 1.5; outline: none; background: var(--lk-surface); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; overflow-y: auto; } .lk-chat-input:focus { border-color: var(--lk-forest-light); background: var(--lk-surface-2); box-shadow: 0 0 0 4px rgba(var(--green-rgb),0.12); } .lk-chat-input::placeholder { color: var(--lk-muted-light); } .lk-chat-send { width: 40px; height: 40px; flex-shrink: 0; background: linear-gradient(135deg, var(--lk-forest-mid), var(--lk-forest)); border: none; border-radius: 12px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s; box-shadow: 0 3px 12px rgba(var(--green-rgb),0.32); } .lk-chat-send svg { width: 16px; height: 16px; } .lk-chat-send:hover { transform: scale(1.1) rotate(-3deg); box-shadow: 0 6px 20px rgba(var(--green-rgb),0.40); } .lk-chat-send:active { transform: scale(0.96); } .lk-chat-send:disabled { background: var(--lk-mint-deep); box-shadow: none; cursor: not-allowed; transform: none; } .lk-chat-powered { font-size: 10px; color: var(--lk-muted-light); text-align: center; margin-top: 7px; font-family: var(--lk-font); font-weight: 500; letter-spacing: 0.02em; } .lk-chat-powered a { color: var(--lk-sage); text-decoration: none; transition: color 0.15s; } .lk-chat-powered a:hover { color: var(--lk-forest-mid); } /* ══════════════════════════════════════ DIVIDER LABEL ══════════════════════════════════════ */ .lk-divider { text-align: center; font-size: 10.5px; color: var(--lk-muted-light); font-family: var(--lk-font); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; position: relative; margin: 4px 0; flex-shrink: 0; align-self: stretch; } .lk-divider::before, .lk-divider::after { content: ''; position: absolute; top: 50%; width: 28%; height: 1px; background: var(--lk-border); } .lk-divider::before { left: 0; } .lk-divider::after { right: 0; } /* ══════════════════════════════════════ STREAMING CURSOR ══════════════════════════════════════ */ .lk-stream-cursor::after { content: '▌'; display: inline; animation: lkBlink 0.9s step-end infinite; color: var(--lk-sage); font-size: 0.85em; } @keyframes lkBlink { 0%,100%{opacity:1} 50%{opacity:0} } /* ══════════════════════════════════════ MOBILE ══════════════════════════════════════ */ @media (max-width: 500px) { :root { --lk-w: calc(100vw - 16px); --lk-h: calc(100dvh - 110px); --lk-radius: 16px; } .lk-chat-window { right: 8px; bottom: 76px; } .lk-chat-bubble { right: 16px; bottom: 18px; padding: 15px; border-radius: 50%; } .lk-bubble-label { display: none; } } /* ══════════════════════════════════════ REDUCED MOTION ══════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .lk-chat-bubble, .lk-chat-window, .lk-msg, .lk-chip, .lk-cta-btn { transition: none !important; animation: none !important; } }