:root { --rmc-terracotta: #c1682f; --rmc-terracotta-dark: #a3541f; --rmc-sage: #7c8b5f; --rmc-cream: #faf5ee; --rmc-text: #33291f; --rmc-border: #e6dccb; } /* rmc-root hangt buiten , direct onder , om te ontsnappen aan een eventuele CSS-transform op body of een thema-wrapper. Deze reset voorkomt dat thema-CSS (resets, box-sizing, line-height) daar toch nog doorheen lekt. */ #rmc-root, #rmc-root *, #rmc-root *::before, #rmc-root *::after { box-sizing: border-box; line-height: normal; } #rmc-root { position: static; } #rmc-launcher { position: fixed; right: 20px; bottom: 20px; width: 64px; height: 64px; border-radius: 50%; background: var(--rmc-terracotta); color: #fff; border: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); cursor: pointer; z-index: 999999; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease; font-family: "Karla", -apple-system, BlinkMacSystemFont, sans-serif; } #rmc-launcher:hover { transform: scale(1.06); background: var(--rmc-terracotta-dark); } #rmc-launcher svg { width: 27px; height: 27px; } /* Zachte pulserende ring, trekt de blik zonder druk te maken. Stopt zodra de bezoeker de chat een keer opent. */ #rmc-launcher::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rmc-terracotta); opacity: 0.55; animation: rmc-pulse 2.6s ease-out infinite; z-index: -1; } #rmc-launcher.rmc-quiet::before { animation: none; display: none; } @keyframes rmc-pulse { 0% { transform: scale(1); opacity: 0.45; } 100% { transform: scale(1.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { #rmc-launcher::before { animation: none; display: none; } } /* Proactieve uitnodigingsbubbel naast de knop */ #rmc-bubble { position: fixed; right: 92px; bottom: 28px; max-width: 220px; background: #fff; border: 1px solid var(--rmc-border); border-radius: 14px; padding: 10px 14px; font-family: "Karla", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; color: var(--rmc-text); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); z-index: 999998; cursor: pointer; display: none; animation: rmc-bubble-in 0.25s ease-out; } #rmc-bubble.rmc-visible { display: block; } #rmc-bubble button { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--rmc-sage); color: #fff; border: 2px solid #fff; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } @keyframes rmc-bubble-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 480px) { #rmc-bubble { right: 16px; bottom: 92px; max-width: calc(100vw - 100px); } } #rmc-panel { position: fixed; right: 20px; bottom: 92px; width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 140px); background: var(--rmc-cream); border: 1px solid var(--rmc-border); border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); display: none; flex-direction: column; overflow: hidden; z-index: 999999; font-family: "Karla", -apple-system, BlinkMacSystemFont, sans-serif; color: var(--rmc-text); } #rmc-panel.rmc-open { display: flex; } #rmc-header { background: var(--rmc-terracotta); color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; font-family: "Fraunces", Georgia, serif; } #rmc-header h3 { margin: 0; font-size: 16px; font-weight: 600; } #rmc-header p { margin: 2px 0 0; font-size: 12px; opacity: 0.9; font-family: "Karla", sans-serif; } #rmc-close { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; padding: 4px; } #rmc-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .rmc-msg { max-width: 85%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; } .rmc-msg.rmc-bot { align-self: flex-start; background: #fff; border: 1px solid var(--rmc-border); border-bottom-left-radius: 4px; } .rmc-msg.rmc-user { align-self: flex-end; background: var(--rmc-sage); color: #fff; border-bottom-right-radius: 4px; } .rmc-msg.rmc-typing { align-self: flex-start; background: #fff; border: 1px solid var(--rmc-border); color: #8a7f6f; font-style: italic; } .rmc-cta { align-self: flex-start; margin-top: 2px; } .rmc-cta a { display: inline-block; background: var(--rmc-sage); color: #fff; text-decoration: none; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; } .rmc-cta a:hover { opacity: 0.9; } /* De TidyCal-kalender komt inline in de gespreksstroom, breder dan een gewone chatbubbel omdat de kalender anders te krap oogt. #rmc-messages scrollt al, dus de extra hoogte van de kalender past vanzelf in het bestaande venster. */ .rmc-booking { align-self: stretch; width: 100%; margin-top: 2px; } /* Geen max-height/overflow hier: de kalender laadt als iframe, en een iframe met een eigen scrollgebied bubbelt swipe-gebaren op mobiel meestal niet door naar de pagina eromheen. Dat gaf een "dubbele scroll" waarbij bezoekers vast kwamen te zitten in de kalender en niet verder konden. Door de kalender zijn volledige, natuurlijke hoogte te geven, blijft #rmc-messages de enige scrollcontainer en werkt scrollen weer normaal. */ .tidycal-embed { width: 100%; min-height: 500px; background: #fff; border: 1px solid var(--rmc-border); border-radius: 14px; overflow: hidden; } .rmc-cta-fallback { margin-top: 8px; } .rmc-cta-fallback a { display: inline-block; background: none; color: var(--rmc-terracotta-dark); text-decoration: underline; padding: 0; font-weight: 400; font-size: 12px; border-radius: 0; } #rmc-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--rmc-border); background: #fff; } #rmc-input { flex: 1; border: 1px solid var(--rmc-border); border-radius: 999px; padding: 10px 14px; font-size: 14px; font-family: inherit; resize: none; max-height: 80px; } #rmc-input:focus { outline: 2px solid var(--rmc-sage); } #rmc-send { background: var(--rmc-terracotta); color: #fff; border: none; border-radius: 999px; width: 40px; height: 40px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } #rmc-send:disabled { opacity: 0.5; cursor: default; } #rmc-version { text-align: center; font-size: 10px; color: #b9ab97; padding: 3px 0 6px; background: #fff; font-family: "Karla", -apple-system, BlinkMacSystemFont, sans-serif; } @media (max-width: 480px) { #rmc-panel { right: 16px; bottom: 88px; width: calc(100vw - 32px); } }