/* * GMB Chatbot widget styles. * * Inherits from theme via CSS custom properties: we read --bricks-color-primary * (Bricks' default primary colour var), --wp--preset--color--primary (block themes), * and any theme-defined --gmbc-accent. Falls back to a sensible blue. * * Font and base colours inherit from so the widget always feels native. */ .gmb-chatbot-root { --gmbc-accent: var(--bricks-color-primary, var(--wp--preset--color--primary, #1d4ed8)); --gmbc-accent-contrast: #fff; --gmbc-bg: #ffffff; --gmbc-bg-soft: #f5f6f8; --gmbc-border: rgba(0, 0, 0, 0.08); --gmbc-text: #0f172a; --gmbc-text-muted: #64748b; /* Admin-overridable; fall through to sensible defaults. */ --gmbc-header-bg: var(--gmbc-accent); --gmbc-header-text: var(--gmbc-accent-contrast); --gmbc-bot-bg: var(--gmbc-bg); --gmbc-bot-text: var(--gmbc-text); --gmbc-user-bg: var(--gmbc-accent); --gmbc-user-text: var(--gmbc-accent-contrast); --gmbc-radius: 16px; --gmbc-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08); --gmbc-z: 999990; position: fixed; z-index: var(--gmbc-z); font-family: inherit; font-size: 14px; line-height: 1.45; color: var(--gmbc-text); box-sizing: border-box; } .gmb-chatbot-root *, .gmb-chatbot-root *::before, .gmb-chatbot-root *::after { box-sizing: border-box; } .gmb-chatbot-root.gmbc-pos-bottom-right { right: 20px; bottom: 20px; } .gmb-chatbot-root.gmbc-pos-bottom-left { left: 20px; bottom: 20px; } /* ---------- Launcher ---------- */ .gmbc-launcher { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--gmbc-accent); color: var(--gmbc-accent-contrast); border: 0; cursor: pointer; box-shadow: var(--gmbc-shadow); transition: transform 0.18s ease, box-shadow 0.18s ease; padding: 0; } .gmbc-launcher:hover { transform: translateY(-2px); } .gmbc-launcher:focus-visible { outline: 2px solid var(--gmbc-accent); outline-offset: 4px; } .gmbc-launcher svg, .gmbc-launcher img { width: 28px; height: 28px; display: block; } .gmbc-launcher img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } /* Greeting bubble — sits beside the launcher (not above) so longer text doesn't wrap. */ .gmbc-greeting { position: absolute; bottom: 8px; right: 76px; left: auto; max-width: 280px; white-space: normal; background: var(--gmbc-bg); border-radius: 14px; padding: 10px 32px 10px 14px; box-shadow: var(--gmbc-shadow); font-size: 13px; line-height: 1.35; color: var(--gmbc-text); transform-origin: bottom right; animation: gmbcGreetingIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); cursor: pointer; } .gmbc-pos-bottom-left .gmbc-greeting { left: 76px; right: auto; transform-origin: bottom left; padding: 10px 14px 10px 32px; } .gmbc-greeting-close { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.08); border: 0; cursor: pointer; color: var(--gmbc-text-muted); font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; } .gmbc-pos-bottom-left .gmbc-greeting-close { right: auto; left: 6px; } /* Narrow viewports: shrink the bubble's max-width so it doesn't push off-screen. */ @media (max-width: 480px) { .gmbc-greeting { max-width: calc(100vw - 110px); } } @keyframes gmbcGreetingIn { from { opacity: 0; transform: translateY(8px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- Panel ---------- */ .gmbc-panel { position: absolute; bottom: 76px; width: 360px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 110px); background: var(--gmbc-bg); border-radius: var(--gmbc-radius); box-shadow: var(--gmbc-shadow); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--gmbc-border); transform-origin: bottom right; animation: gmbcPanelIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } .gmbc-pos-bottom-right .gmbc-panel { right: 0; } .gmbc-pos-bottom-left .gmbc-panel { left: 0; transform-origin: bottom left; } @keyframes gmbcPanelIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .gmbc-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--gmbc-header-bg); color: var(--gmbc-header-text); } .gmbc-header-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.2); flex-shrink: 0; } .gmbc-header-avatar.gmbc-default { display: flex; align-items: center; justify-content: center; font-size: 18px; } .gmbc-header-text { flex: 1; min-width: 0; } .gmbc-header-title { font-weight: 600; font-size: 15px; } .gmbc-header-sub { font-size: 12px; opacity: 0.85; margin-top: 2px; } .gmbc-header-close, .gmbc-header-restart { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 4px; border-radius: 4px; opacity: 0.85; display: flex; align-items: center; justify-content: center; line-height: 1; } .gmbc-header-restart { font-size: 1.4em; font-weight: 400; } .gmbc-header-close { font-weight: 600; } .gmbc-header-close:hover, .gmbc-header-restart:hover { opacity: 1; background: rgba(0,0,0,0.08); } .gmbc-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--gmbc-bg-soft); display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; } .gmbc-msg { display: flex; flex-direction: column; max-width: 85%; animation: gmbcMsgIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes gmbcMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .gmbc-msg-bot { align-self: flex-start; } .gmbc-msg-user { align-self: flex-end; align-items: flex-end; } .gmbc-bubble { padding: 10px 14px; border-radius: 14px; background: var(--gmbc-bot-bg); color: var(--gmbc-bot-text); box-shadow: 0 1px 2px rgba(15,23,42,0.06); word-wrap: break-word; overflow-wrap: anywhere; } .gmbc-msg-bot .gmbc-bubble { border-bottom-left-radius: 4px; } .gmbc-msg-user .gmbc-bubble { background: var(--gmbc-user-bg); color: var(--gmbc-user-text); border-bottom-right-radius: 4px; } /* Typing indicator */ .gmbc-typing { display: inline-flex; gap: 3px; padding: 14px 16px; background: var(--gmbc-bot-bg); border-radius: 14px; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(15,23,42,0.06); } .gmbc-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--gmbc-text-muted); opacity: 0.4; animation: gmbcDot 1.2s infinite; } .gmbc-typing span:nth-child(2) { animation-delay: 0.15s; } .gmbc-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes gmbcDot { 0%, 60%, 100% { opacity: 0.4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } /* Choice buttons */ .gmbc-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; align-self: stretch; } .gmbc-choice { background: var(--gmbc-bg); border: 1px solid var(--gmbc-accent); color: var(--gmbc-accent); padding: 9px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 500; text-align: left; transition: background 0.15s, color 0.15s; font-family: inherit; } .gmbc-choice:hover { background: var(--gmbc-accent); color: var(--gmbc-accent-contrast); } .gmbc-choice:focus-visible { outline: 2px solid var(--gmbc-accent); outline-offset: 2px; } /* Form */ .gmbc-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; background: var(--gmbc-bg); padding: 14px; border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,0.06); } .gmbc-form input[type="text"], .gmbc-form input[type="email"], .gmbc-form input[type="tel"] { width: 100%; padding: 10px 12px; border: 1px solid var(--gmbc-border); border-radius: 8px; font: inherit; font-size: 14px; background: var(--gmbc-bg-soft); color: var(--gmbc-text); } .gmbc-form input:focus { outline: 2px solid var(--gmbc-accent); outline-offset: -1px; border-color: transparent; } .gmbc-form-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; } .gmbc-form-submit { background: var(--gmbc-accent); color: var(--gmbc-accent-contrast); border: 0; padding: 10px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; margin-top: 4px; } .gmbc-form-submit:disabled { opacity: 0.6; cursor: wait; } .gmbc-form-error { color: #b91c1c; font-size: 12px; margin-top: 2px; } /* CTA button (booking, page, download) */ .gmbc-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--gmbc-accent); color: var(--gmbc-accent-contrast); padding: 12px 20px; border-radius: 999px; text-decoration: none; font: inherit; font-weight: 600; font-size: 14px; margin-top: 8px; border: 0; cursor: pointer; } .gmbc-cta:hover { filter: brightness(1.05); color: var(--gmbc-accent-contrast); text-decoration: none; } /* Footer */ .gmbc-footer { font-size: 11px; text-align: center; color: var(--gmbc-text-muted); padding: 8px 12px; background: var(--gmbc-bg); border-top: 1px solid var(--gmbc-border); } .gmbc-footer a { color: inherit; text-decoration: none; opacity: 0.8; } /* Mobile fullscreen */ @media (max-width: 480px) { .gmb-chatbot-root.gmbc-pos-bottom-right, .gmb-chatbot-root.gmbc-pos-bottom-left { right: 14px; left: auto; bottom: 14px; } .gmbc-panel { width: calc(100vw - 28px); height: calc(100vh - 100px); max-height: calc(100vh - 100px); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .gmbc-panel, .gmbc-msg, .gmbc-greeting { animation: none; } }