/* chat-widget.css — floating FAQ chat bubble (public-site/js/chat-widget.js). Only linked from index.html and about.html — see this project's CLAUDE notes on why it's not sitewide. Matches the main site's dark/lime theme (style.css) rather than duplicating it wholesale, so this stays a small, separate file instead of bloating the main stylesheet that every page (including terms/privacy/refund-policy, which don't use the widget) loads. */ .cw-bubble { position: fixed; right: 22px; bottom: 22px; z-index: 2000; width: 56px; height: 56px; border-radius: 50%; background: #c1ff15; color: black; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4); transition: transform 0.25s, box-shadow 0.25s; } .cw-bubble:hover { transform: translateY(-2px); box-shadow: 0 4px 24px rgba(193, 255, 21, 0.45); } /* The fixed bubble sits over the footer's bottom-right corner, right where style.css's .footer-links puts "Refund Policy" — widen the footer's right padding to clear it. Scoped to this file (loaded only on index.html/ about.html) rather than style.css itself, since the policy pages (privacy/terms/refund-policy) never load the bubble and would otherwise get pointless empty space on the right for no reason. Loaded after style.css (see those two files' ), so this wins the cascade at equal specificity without needing !important. */ .footer { padding-right: 100px; } @media (max-width: 480px) { /* style.css stacks the footer into a centered column at this width (flex-direction: column, text-align: center) — the bubble no longer sits under right-aligned text at that point, so drop back to its normal 20px padding instead of carrying the extra desktop clearance. */ .footer { padding-right: 20px; } } /* Attention-grabbing "jump" — toggled on/off by chat-widget.js at random intervals before the visitor has ever opened the panel (see that file's scheduleJump()). Kept as a short keyframe animation rather than an infinite one so it reads as a one-off nudge, not a distracting constant wiggle. */ @keyframes cw-jump { 0%, 100% { transform: translateY(0) scale(1); } 15% { transform: translateY(-14px) scale(1.05); } 30% { transform: translateY(0) scale(0.96); } 45% { transform: translateY(-7px) scale(1.02); } 60% { transform: translateY(0) scale(1); } } .cw-bubble.cw-jump { animation: cw-jump 0.7s ease-in-out; } @media (prefers-reduced-motion: reduce) { .cw-bubble.cw-jump { animation: none; } } .cw-bubble svg { width: 26px; height: 26px; } /* Small unread-style dot shown once, before the widget has ever been opened — cleared the first time it's opened, not reshown after. */ .cw-bubble-dot { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%; background: #ff6b6b; border: 2px solid #090909; } .cw-panel { position: fixed; right: 22px; bottom: 90px; z-index: 2000; width: 340px; max-width: calc(100vw - 32px); height: 480px; max-height: calc(100vh - 130px); background: #101010; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none; transition: opacity 0.2s, transform 0.2s; } .cw-panel.cw-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .cw-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .cw-panel-title { font-size: 14px; font-weight: 700; color: white; } .cw-panel-title span { color: #c1ff15; } .cw-panel-sub { font-size: 11px; color: rgba(255, 255, 255, 0.45); margin-top: 2px; } .cw-close { background: transparent; border: none; color: rgba(255, 255, 255, 0.6); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px; border-radius: 50%; } .cw-close:hover { color: white; transform: none; box-shadow: none; background: rgba(255, 255, 255, 0.08); } .cw-messages { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; } .cw-msg { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .cw-msg-assistant { align-self: flex-start; background: rgba(255, 255, 255, 0.07); color: #eaeaea; border-bottom-left-radius: 4px; } .cw-msg-user { align-self: flex-end; background: rgba(193, 255, 21, 0.15); color: white; border: 1px solid rgba(193, 255, 21, 0.3); border-bottom-right-radius: 4px; } .cw-msg-error { align-self: flex-start; background: rgba(255, 107, 107, 0.12); color: #ffb3b3; border-bottom-left-radius: 4px; } .cw-typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 12px; } .cw-typing span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); animation: cw-bounce 1.1s infinite ease-in-out; } .cw-typing span:nth-child(2) { animation-delay: 0.15s; } .cw-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes cw-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } .cw-quote-note { padding: 8px 14px; font-size: 11.5px; color: rgba(255, 255, 255, 0.5); border-top: 1px solid rgba(255, 255, 255, 0.08); } .cw-quote-note a { color: #c1ff15; text-decoration: underline; } .cw-input-row { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .cw-input { flex: 1; resize: none; max-height: 80px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 10px 12px; color: white; font-family: inherit; font-size: 13.5px; } .cw-input::placeholder { color: rgba(255, 255, 255, 0.4); } .cw-input:focus { outline: none; border-color: rgba(193, 255, 21, 0.5); box-shadow: 0 0 12px rgba(193, 255, 21, 0.15); } .cw-send { align-self: flex-end; padding: 10px 16px; font-size: 13px; white-space: nowrap; } .cw-send:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; } @media (max-width: 480px) { .cw-panel { right: 16px; left: 16px; width: auto; bottom: 84px; } .cw-bubble { right: 16px; bottom: 16px; } }