/* ================================================================= Regroup Domestique — chat widget styles --------------------------------------------------------------- Design direction: "The Domestique's Notebook" — a pro-cycling support rider's small notebook. Editorial / refined-warm. Brand palette + Matter typography. No bordered boxes — definition comes from color blocks, hairlines, and shadow. ================================================================= */ #regroup-chat-root { --rg-ink: #111; --rg-cream: #F8F5F0; --rg-card: #FFFCF7; /* warmer-than-white for bot messages */ --rg-mustard: #AA8765; --rg-mustard-deep: #95745A; --rg-cactus: #7f8236; --rg-muted: #6e6a64; /* mono labels, sub-copy */ --rg-hairline: rgba(17, 17, 17, 0.10); position: fixed; inset: auto 24px 24px auto; /* Z-INDEX POLICY 2147483000 (close to int32 ceiling, leaves headroom for any genuine must-be-on-top overlay like a tour callout). Chosen because some third-party widgets and theme plugins use values like 9999 or 99999 and we want to sit reliably above them — but below browser-native modals / extensions / dev tools, which live above the int32 ceiling in their own layer. This is the ONLY z-index in the whole widget — everything inside the root shares root's stacking context, so we never have to wrangle internal layering. */ z-index: 2147483000; color: var(--rg-ink); font-family: 'MatterRegular', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Don't let parent stacking contexts confine us (some themes set overflow on or ). isolation:isolate keeps us as our own root context regardless. */ isolation: isolate; } /* --------------------------------------------------------------- Floating bubble (closed state) --------------------------------------------------------------- */ .rg-chat-bubble { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--rg-mustard); color: var(--rg-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; /* Single soft shadow for elevation only — no inset highlight. */ box-shadow: 0 10px 24px rgba(17, 17, 17, 0.20); transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), background 200ms ease, color 200ms ease, opacity 220ms ease; } .rg-chat-bubble svg { width: 22px; height: 22px; } .rg-chat-bubble:hover { background: var(--rg-ink); color: var(--rg-cream); transform: translateY(-2px) rotate(-3deg); } .rg-chat-bubble:active { transform: translateY(0) rotate(0); } .rg-chat-bubble:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 3px; } .rg-chat-bubble.is-hidden { opacity: 0; pointer-events: none; transform: scale(0.85) rotate(8deg); } /* --------------------------------------------------------------- Panel (open state) --------------------------------------------------------------- */ .rg-chat-panel { position: absolute; bottom: 0; right: 0; width: 384px; max-width: calc(100vw - 32px); height: 600px; max-height: calc(100vh - 48px); background: var(--rg-cream); border-radius: 18px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 32px 80px rgba(17, 17, 17, 0.28), 0 12px 24px rgba(17, 17, 17, 0.12), 0 0 0 1px rgba(17, 17, 17, 0.04); display: none; flex-direction: column; overflow: hidden; transform: translateY(16px) scale(0.98); transform-origin: bottom right; opacity: 0; transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease; } .rg-chat-panel.is-open { display: flex; transform: translateY(0) scale(1); opacity: 1; } /* --------------------------------------------------------------- Header — mustard slab with slashed eyebrow title --------------------------------------------------------------- */ .rg-chat-head { background: var(--rg-mustard); padding: 20px 22px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; position: relative; } /* Decorative hairline that reads like a magazine rule */ .rg-chat-head::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: 0; height: 1px; background: rgba(17, 17, 17, 0.18); } .rg-chat-title { display: flex; align-items: baseline; gap: 0; font-family: 'MatterMonoMedium', 'MatterMonoRegular', monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rg-ink); line-height: 1; } .rg-chat-title strong { font-weight: normal; } /* Slash divider injected via JS — keeps the title semantically simple */ .rg-chat-title .rg-chat-slash { margin: 0 0.6em; opacity: 0.5; } .rg-chat-close { background: transparent; border: 0; color: var(--rg-ink); cursor: pointer; padding: 4px 6px; margin: -4px -6px; font-family: 'MatterMonoMedium', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; transition: opacity 160ms ease; line-height: 1; } .rg-chat-close:hover { opacity: 1; } /* --------------------------------------------------------------- Log — message transcript --------------------------------------------------------------- */ .rg-chat-log { flex: 1; overflow-y: auto; padding: 22px; background: var(--rg-cream); display: flex; flex-direction: column; gap: 22px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(17, 17, 17, 0.18) transparent; } .rg-chat-log::-webkit-scrollbar { width: 6px; } .rg-chat-log::-webkit-scrollbar-track { background: transparent; } .rg-chat-log::-webkit-scrollbar-thumb { background: rgba(17, 17, 17, 0.18); border-radius: 999px; } /* --------------------------------------------------------------- Messages — eyebrow attribution + body --------------------------------------------------------------- */ .rg-msg { display: flex; flex-direction: column; gap: 6px; max-width: 88%; animation: rg-msg-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes rg-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .rg-msg-eyebrow { font-family: 'MatterMonoMedium', monospace; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rg-muted); line-height: 1; padding: 0 2px; } .rg-msg-body { font-family: 'MatterRegular', sans-serif; font-size: 15px; line-height: 1.55; word-wrap: break-word; white-space: pre-wrap; padding: 14px 17px; border-radius: 14px; } /* Bot: warm off-white card, subtle lift */ .rg-msg-bot { align-self: flex-start; } .rg-msg-bot .rg-msg-body { background: var(--rg-card); color: var(--rg-ink); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06), 0 6px 14px rgba(17, 17, 17, 0.04); } /* User: black ink card, cream text */ .rg-msg-user { align-self: flex-end; } .rg-msg-user .rg-msg-eyebrow { text-align: right; color: var(--rg-muted); } .rg-msg-user .rg-msg-body { background: var(--rg-ink); color: var(--rg-cream); } /* Inline formatting */ .rg-msg-body strong { font-family: 'MatterSemiBold', sans-serif; font-weight: 600; } .rg-msg-body a { color: inherit; font-family: 'MatterSemiBold', sans-serif; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(170, 135, 101, 0.6); transition: text-decoration-color 160ms ease; } .rg-msg-bot .rg-msg-body a:hover { text-decoration-color: var(--rg-mustard); } .rg-msg-user .rg-msg-body a { text-decoration-color: var(--rg-mustard); } .rg-msg-user .rg-msg-body a:hover { text-decoration-color: var(--rg-cream); } /* --------------------------------------------------------------- Typing indicator — three small mustard dots in a bot bubble --------------------------------------------------------------- */ .rg-typing .rg-msg-body { display: inline-flex; gap: 6px; padding: 16px 17px; } .rg-typing .rg-msg-body span { width: 6px; height: 6px; border-radius: 50%; background: var(--rg-mustard); animation: rg-bounce 1.3s infinite ease-in-out; } .rg-typing .rg-msg-body span:nth-child(2) { animation-delay: 0.15s; } .rg-typing .rg-msg-body span:nth-child(3) { animation-delay: 0.3s; } @keyframes rg-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* --------------------------------------------------------------- Inline escalation CTA — magazine-sidebar text link, not a button --------------------------------------------------------------- */ .rg-chat-cta { align-self: flex-start; background: transparent; border: 0; padding: 4px 6px 4px 0; color: var(--rg-ink); font-family: 'MatterMonoMedium', monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: var(--rg-mustard); transition: color 160ms ease, text-decoration-color 160ms ease, gap 160ms ease; display: inline-flex; align-items: center; gap: 8px; } .rg-chat-cta:hover { color: var(--rg-mustard); gap: 12px; } /* --------------------------------------------------------------- Input row — no bordered input. Hairline divider above. --------------------------------------------------------------- */ .rg-chat-form { display: flex; align-items: flex-end; gap: 10px; padding: 14px 16px 16px; background: var(--rg-cream); flex-shrink: 0; position: relative; } .rg-chat-form::before { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 1px; background: var(--rg-hairline); } .rg-chat-input { flex: 1; resize: none; border: 0; outline: 0; background: var(--rg-card); color: var(--rg-ink); padding: 13px 16px; border-radius: 14px; font-family: 'MatterRegular', inherit; font-size: 15px; line-height: 1.4; max-height: 140px; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 0 0 1px rgba(17, 17, 17, 0.04); transition: box-shadow 180ms ease, background 180ms ease; } .rg-chat-input::placeholder { color: var(--rg-muted); opacity: 0.85; font-family: 'MatterMonoRegular', monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .rg-chat-input:focus { background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06), 0 0 0 1px rgba(170, 135, 101, 0.5), 0 0 0 4px rgba(170, 135, 101, 0.12); } /* Send button — round mustard, sibling to the floating bubble. Flat, no shadows — matches Regroup's button vocabulary (see style.css .elementor-button: solid bg, solid hover, no elevation). */ .rg-chat-send { flex-shrink: 0; background: var(--rg-mustard); border: 0; color: var(--rg-ink); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: none; transition: background 160ms ease; } .rg-chat-send svg { width: 18px; height: 18px; } .rg-chat-send:hover { background: var(--rg-ink); color: var(--rg-cream); } .rg-chat-send:disabled { background: var(--rg-mustard); opacity: 0.4; cursor: default; } /* Honeypot — off-screen */ .rg-hp { position: absolute !important; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; } /* --------------------------------------------------------------- Support mode — form takes over the input area --------------------------------------------------------------- */ .rg-chat-form.is-support { flex-direction: column; align-items: stretch; gap: 0; padding: 22px 22px 22px; background: var(--rg-cream); } .rg-chat-form.is-support::before { display: none; } .rg-support { display: flex; flex-direction: column; gap: 12px; width: 100%; } .rg-support-header { margin: 0 0 6px; padding: 0 0 14px; position: relative; } .rg-support-header::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--rg-mustard); } .rg-support-title { font-family: 'MatterSemiBold', sans-serif; font-size: 20px; letter-spacing: -0.005em; color: var(--rg-ink); margin: 0 0 4px; line-height: 1.1; } .rg-support-title::before { content: 'SUPPORT'; display: block; font-family: 'MatterMonoMedium', monospace; font-size: 9.5px; letter-spacing: 0.22em; color: var(--rg-muted); margin-bottom: 8px; font-weight: normal; } .rg-support-sub { margin: 0; font-family: 'MatterRegular', sans-serif; font-size: 13.5px; line-height: 1.5; color: var(--rg-muted); } .rg-support input, .rg-support textarea { width: 100%; box-sizing: border-box; border: 0; outline: 0; background: var(--rg-card); color: var(--rg-ink); border-radius: 12px; padding: 13px 15px; font-size: 14.5px; font-family: 'MatterRegular', inherit; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 0 0 1px rgba(17, 17, 17, 0.05); transition: box-shadow 160ms ease, background 160ms ease; } .rg-support input::placeholder, .rg-support textarea::placeholder { color: var(--rg-muted); opacity: 0.85; font-family: 'MatterMonoRegular', monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .rg-support input:focus, .rg-support textarea:focus { background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06), 0 0 0 1px rgba(170, 135, 101, 0.5), 0 0 0 4px rgba(170, 135, 101, 0.12); } .rg-support textarea { resize: vertical; min-height: 88px; font-family: 'MatterRegular', inherit; font-size: 14.5px; text-transform: none; letter-spacing: 0; line-height: 1.5; } .rg-support textarea::placeholder { /* override the mono caps for textarea so user's typed text looks normal */ font-family: 'MatterMonoRegular', monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .rg-support-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; } /* "← Back to chat" — quiet underlined text link. !important wins against the theme's global button styles which would otherwise repaint it. */ .rg-chat-panel .rg-support-back { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--rg-muted) !important; font-family: 'MatterMonoMedium', monospace !important; font-size: 10.5px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; cursor: pointer !important; text-decoration: underline !important; text-underline-offset: 4px !important; text-decoration-thickness: 1.5px !important; text-decoration-color: rgba(17, 17, 17, 0.2) !important; padding: 8px 2px !important; margin: 0 !important; border-radius: 0 !important; line-height: 1 !important; transition: color 160ms ease, text-decoration-color 160ms ease !important; } .rg-chat-panel .rg-support-back:hover { color: var(--rg-ink) !important; background: transparent !important; text-decoration-color: var(--rg-mustard) !important; } /* Big send button on the support form — pill, mustard, mono caps. Flat, matches the Regroup .elementor-button shape (pill + uppercase). */ .rg-support-send { flex-shrink: 0; background: var(--rg-mustard); color: var(--rg-ink); border: 0; border-radius: 999px; padding: 13px 24px; font-family: 'MatterMonoMedium', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; box-shadow: none; transition: background 160ms ease, color 160ms ease; } .rg-support-send:hover:not(:disabled) { background: var(--rg-ink); color: var(--rg-cream); } .rg-support-send:disabled { background: var(--rg-mustard); opacity: 0.4; cursor: default; } /* "Ask another question" CTA shown after a support email is sent. Mirrors the elementor-button vocabulary: cream pill, dark text, mustard hover. Sits below the RECEIVED thanks card. */ .rg-support-restart { align-self: stretch; background: var(--rg-ink); color: var(--rg-cream); border: 0; border-radius: 999px; padding: 13px 22px; margin-top: 6px; font-family: 'MatterMonoMedium', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; box-shadow: none; transition: background 160ms ease, color 160ms ease; } .rg-support-restart:hover { /* Restart starts black, so its hover inverts to mustard — keeps the same rule as the other buttons (default → contrasting brand color). */ background: var(--rg-mustard); color: var(--rg-ink); } .rg-support-thanks { margin: 6px 0; padding: 18px 16px; background: var(--rg-card); border-radius: 12px; font-family: 'MatterRegular', sans-serif; font-size: 14.5px; color: var(--rg-ink); text-align: left; line-height: 1.5; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 0 0 1px rgba(127, 130, 54, 0.4); position: relative; } .rg-support-thanks::before { content: 'RECEIVED'; display: block; font-family: 'MatterMonoMedium', monospace; font-size: 9.5px; letter-spacing: 0.22em; color: var(--rg-cactus); margin-bottom: 6px; } /* --------------------------------------------------------------- Footer — quiet mono escalate link --------------------------------------------------------------- */ .rg-chat-foot { padding: 0 22px 14px; flex-shrink: 0; background: var(--rg-cream); display: flex; flex-direction: column; align-items: center; gap: 4px; } .rg-chat-escalate { background: transparent; border: 0; color: var(--rg-muted); font-family: 'MatterMonoRegular', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(17, 17, 17, 0.25); padding: 6px 4px; transition: color 160ms ease, text-decoration-color 160ms ease; } .rg-chat-escalate:hover { color: var(--rg-ink); text-decoration-color: var(--rg-mustard); } /* Small "Fueled by WBD" credit — quietly tucked under the footer */ .rg-chat-credit { display: inline-flex; align-items: baseline; gap: 4px; color: rgba(17, 17, 17, 0.42); font-family: 'MatterMonoRegular', monospace; font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; padding: 2px 4px 4px; transition: color 160ms ease; } .rg-chat-credit strong { font-family: 'MatterMonoMedium', monospace; font-weight: normal; color: rgba(17, 17, 17, 0.6); transition: color 160ms ease; } .rg-chat-credit:hover { color: var(--rg-ink); } .rg-chat-credit:hover strong { color: var(--rg-mustard); } /* --------------------------------------------------------------- Mobile --------------------------------------------------------------- */ @media (max-width: 540px) { #regroup-chat-root { /* Respect iPhone home-bar / notch safe areas. max() picks the larger of the static gap and the OS-reported inset, so we never end up closer to the edge than 16px on devices with no notch. */ inset: auto max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) auto; } .rg-chat-panel { width: calc(100vw - 32px); /* dvh = dynamic viewport height, accounts for the iOS URL bar expanding/collapsing. Old browsers fall through to vh. */ height: calc(100vh - 96px); height: calc(100dvh - 96px); border-radius: 16px; } /* iOS zooms any input under 16px on focus. Bump to 16px on mobile so the page doesn't jump when the keyboard opens. */ .rg-chat-input, .rg-support input, .rg-support textarea { font-size: 16px; } /* Bigger tap targets — Apple's 44x44 guideline. */ .rg-chat-close { padding: 12px 14px; margin: -12px -14px; } .rg-chat-escalate { padding: 10px 8px; } .rg-chat-credit { padding: 8px 4px 6px; } } /* Don't collide with the Google Merchant widget on the cart page — but on mobile, where horizontal room is scarce, give the chat bubble its normal spot and let the Merchant widget find its own. */ @media (min-width: 541px) { body.woocommerce-cart #regroup-chat-root { inset: auto 96px 24px auto; } }