/* * CNC Lead Chat widget (CONTRACTS: the widget). * * Self-contained: scoped tokens on .cnclc-root, no dependence on theme CSS. * The accent arrives as --cnclc-accent (validated hex) from the settings. * High z-index but below common cookie banners; mobile = full-screen sheet. */ .cnclc-root { --cnclc-accent: #00A300; /* L'accent AVEC DU TEXTE BLANC DESSUS doit etre plus sombre que l'accent lui-meme : blanc sur #00A300 donne 3.4:1, sous le 4.5:1 qui rend un texte lisible. Assombrir est sans risque pour n'importe quel accent - un accent deja sombre ne fait que s'assombrir sous du blanc. Le repli simple est ecrit en premier pour les moteurs sans color-mix : ils ignorent la seconde declaration et gardent la premiere. */ --cnclc-accent-ink: var(--cnclc-accent); --cnclc-accent-ink: color-mix(in srgb, var(--cnclc-accent) 82%, #000); /* L'accent transparent, pour l'anneau d'attention. Meme repli en deux temps. */ --cnclc-ring: rgba(0, 163, 42, 0.55); --cnclc-ring: color-mix(in srgb, var(--cnclc-accent) 55%, transparent); --cnclc-ring-0: rgba(0, 163, 42, 0); --cnclc-ring-0: color-mix(in srgb, var(--cnclc-accent) 0%, transparent); /* Moins noir que #111827 : un gris-ardoise a 12.6:1 sur blanc, bien au-dela du seuil, mais qui ne cogne plus dans une bulle de conversation. */ --cnclc-text: #2b3440; --cnclc-muted: #5b6b80; --cnclc-bg: #ffffff; --cnclc-bot: #f3f4f6; position: fixed; bottom: 20px; /* CHANGING THIS MEANS CHANGING iti-fixes.css TOO. On mobile the country picker detaches itself onto and has to sit ABOVE this panel or it is painted underneath it and appears to do nothing at all — which is exactly what happened until it was pinned at 100000 over there. */ z-index: 99990; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; /* Une humaniste legerement arrondie plutot que la grotesque systeme : plus ouverte a petite taille, et son ton colle a celui de la conversation. Segoe UI Variable Text est la version Windows 11 dessinee POUR les tailles de texte - c'est le gain de lisibilite reel sur cette plateforme. Aucune police telechargee : zero octet, et aucune requete vers un tiers depuis la page d'une victime. */ font-family: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.55; } .cnclc-root--right { right: 20px; } .cnclc-root--left { left: 20px; align-items: flex-start; } /* -- launcher + teaser --------------------------------------------------- */ .cnclc-launcher { width: 60px; height: 60px; padding: 0; background: var(--cnclc-accent); border: 0; border-radius: 50%; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22); cursor: pointer; overflow: hidden; transition: transform 0.15s ease; } .cnclc-launcher:hover { transform: scale(1.06); } .cnclc-launcher:focus-visible { outline: 3px solid var(--cnclc-accent); outline-offset: 3px; } .cnclc-launcher__img { width: 100%; height: 100%; object-fit: cover; display: block; } .cnclc-teaser { max-width: 230px; padding: 12px 16px; background: var(--cnclc-bg); color: var(--cnclc-text); border: 0; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; } .cnclc-teaser:focus-visible { outline: 2px solid var(--cnclc-accent); outline-offset: 2px; } /* -- panel ---------------------------------------------------------------- */ .cnclc-panel[hidden] { /* The explicit display below would defeat the hidden attribute (UA rule loses to any authored display); restore it. */ display: none; } .cnclc-panel { display: flex; flex-direction: column; width: 370px; height: 560px; max-height: calc(100vh - 110px); background: var(--cnclc-bg); border-radius: 14px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25); overflow: hidden; } .cnclc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--cnclc-accent-ink); color: #fff; } .cnclc-head__img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #fff; } .cnclc-head__text { flex: 1 1 auto; min-width: 0; } .cnclc-head__name { font-weight: 700; font-size: 15px; } .cnclc-head__sub { font-size: 12px; opacity: 0.85; } .cnclc-head__progress { font-size: 11px; opacity: 0.9; white-space: nowrap; } .cnclc-close { width: 32px; height: 32px; padding: 0; background: transparent; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; border-radius: 6px; } .cnclc-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } /* -- log ------------------------------------------------------------------ */ .cnclc-log { flex: 1 1 auto; padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; } .cnclc-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; color: var(--cnclc-text); overflow-wrap: break-word; /* Owner copy may contain line breaks: a sentence and the question that follows it read better apart, and textContent would otherwise collapse them into one wall of text. pre-line keeps the breaks and still folds the indentation the editor may have left behind. */ white-space: pre-line; } .cnclc-msg--bot { align-self: flex-start; background: var(--cnclc-bot); border-bottom-left-radius: 4px; } /* The one bubble that closes the conversation. The tick is a drawn stroke rather than a checkmark character: that glyph renders as anything from a hairline to a coloured emoji depending on the visitor's fonts, and this is the message that has to look deliberate. */ .cnclc-msg--ok { display: flex; align-items: flex-start; gap: 9px; border: 1px solid color-mix(in srgb, var(--cnclc-accent) 35%, transparent); background: color-mix(in srgb, var(--cnclc-accent) 9%, var(--cnclc-bot)); } .cnclc-tick { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--cnclc-accent-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .cnclc-msg--user { align-self: flex-end; background: var(--cnclc-accent-ink); color: #fff; border-bottom-right-radius: 4px; } .cnclc-typing { display: inline-flex; gap: 4px; align-items: center; min-height: 20px; } .cnclc-typing__dot { width: 7px; height: 7px; background: var(--cnclc-muted); border-radius: 50%; animation: cnclc-bounce 1.2s infinite ease-in-out; } .cnclc-typing__dot:nth-child(2) { animation-delay: 0.15s; } .cnclc-typing__dot:nth-child(3) { animation-delay: 0.3s; } @keyframes cnclc-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } /* -- composer -------------------------------------------------------------- */ .cnclc-composer { padding: 10px 14px 14px; border-top: 1px solid #e5e7eb; } .cnclc-chips { display: flex; flex-wrap: wrap; gap: 8px; } .cnclc-chip { padding: 10px 16px; background: var(--cnclc-bg); color: var(--cnclc-accent-ink); border: 1px solid var(--cnclc-accent); border-radius: 999px; font-size: 16px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .cnclc-chip:hover, .cnclc-chip:focus-visible { background: var(--cnclc-accent-ink); color: #fff; outline: none; } /* SAYING NO LOOKS LIKE SAYING NO. Two identically green buttons make the visitor read both labels carefully to find the exit; one of them being red means the shape of the answer is legible before the words are. It is a quieter red than the danger colour on purpose - declining is a normal thing to do here, not a warning. */ .cnclc-chip--decline { color: #b3261e; border-color: #b3261e; } .cnclc-chip--decline:hover, .cnclc-chip--decline:focus-visible { background: #b3261e; color: #fff; } .cnclc-inputrow { display: flex; gap: 8px; align-items: stretch; } .cnclc-inputrow .iti { flex: 1 1 auto; } .cnclc-input { flex: 1 1 auto; min-height: 44px; padding: 10px 12px; font-size: 15px; color: var(--cnclc-text); background: #f9fafb; border: 1px solid #d1d5db; border-radius: 10px; width: 100%; box-sizing: border-box; } .cnclc-input:focus-visible { outline: 2px solid var(--cnclc-accent); outline-offset: 1px; border-color: var(--cnclc-accent); } .cnclc-send { flex: 0 0 auto; min-width: 64px; padding: 0 16px; background: var(--cnclc-accent-ink); color: #fff; border: 0; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; } .cnclc-send:focus-visible { outline: 2px solid var(--cnclc-accent); outline-offset: 2px; } /* -- mobile: full-screen sheet --------------------------------------------- */ @media (max-width: 480px) { .cnclc-root--open { bottom: 0; right: 0; left: 0; } .cnclc-root--open .cnclc-panel { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; } .cnclc-root--open .cnclc-launcher { display: none; } } @media (prefers-reduced-motion: reduce) { .cnclc-root * { animation: none !important; transition: none !important; } } /* One bubble, several inputs. Built to look like the rest of the conversation rather than an embedded form: labels above, one Send across the width. */ .cnclc-fieldset { display: flex; flex-direction: column; gap: 8px; width: 100%; } /* THE LABEL LIVES INSIDE THE FIELD. Four labelled rows stacked above their inputs cost about 70px of height in a panel that is already competing with the conversation above it for the same screen - on a phone that pushed the Send button under the fold. Floating the label reclaims all of it without taking the label away: it shrinks to the top of the box instead of disappearing, which is the difference between this and a placeholder. A placeholder is gone the moment somebody types, and then nothing on screen says which field they are in. */ .cnclc-fieldset__row { position: relative; display: block; } /* Room at the top for the floated label, taken out of the bottom so the box keeps the same height it had. */ .cnclc-fieldset__row .cnclc-input { padding-top: 19px; padding-bottom: 5px; } .cnclc-fieldset__label { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--cnclc-muted); /* The label must never eat a click meant for the field under it. */ pointer-events: none; transition: top 0.12s ease, font-size 0.12s ease, transform 0.12s ease, color 0.12s ease; } .cnclc-fieldset__row .cnclc-input:focus + .cnclc-fieldset__label, .cnclc-fieldset__row .cnclc-input:not(:placeholder-shown) + .cnclc-fieldset__label { top: 5px; transform: none; font-size: 11px; color: var(--cnclc-accent-ink); } /* The step's own placeholder is hidden until the field has focus: shown at rest it would sit in exactly the pixels the label occupies, and the visitor would read "Email address" and "name@domain.com" on top of each other. */ .cnclc-fieldset__row .cnclc-input::placeholder { color: transparent; } .cnclc-fieldset__row .cnclc-input:focus::placeholder { color: var(--cnclc-muted); } /* -- the phone row, which has a country picker in the way ------------------ */ /* NO FLOATING LABEL HERE. The row renders its label as the input's placeholder instead: the flag and the dial code already fill the left of the box and say what the field is, so a word hovering above an empty field read as a stray caption with a flag underneath it. Which means this row keeps the plain vertical centring the other rows give up. */ .cnclc-fieldset__row--tel .iti { display: block; width: 100%; } .cnclc-fieldset__row--tel .cnclc-input { padding-top: 10px; padding-bottom: 10px; } /* Its placeholder IS the label, so it must stay visible at rest - unlike the other rows, where the placeholder is a hint hidden behind the label. */ .cnclc-fieldset__row--tel .cnclc-input::placeholder { color: var(--cnclc-muted); } /* The composer becomes a column when something has to sit under the input row - today only the character counter. */ .cnclc-composer__stack { display: flex; flex-direction: column; gap: 4px; width: 100%; } /* Present from the first character rather than appearing near the limit: a counter that shows up late is a surprise at the worst moment. */ .cnclc-count { align-self: flex-end; font-size: 11px; color: var(--cnclc-muted); font-variant-numeric: tabular-nums; } .cnclc-count--full { color: #b3261e; font-weight: 600; } /* .cnclc-send carries no vertical padding: in the single-input row it is a flex child of an `align-items: stretch` container, so it inherits the input's height for free. Stack it in a column and that free height disappears - the button collapses to its line-height and becomes a thin blue strip. The 44px floor is the one the inputs already use, and the one a touch target needs to be reliably tappable. */ .cnclc-send--block { width: 100%; min-height: 44px; padding: 12px 16px; margin-top: 4px; } /* -- launcher: size, and the attention ring -------------------------------- */ /* Three sizes rather than a free number: the launcher sits over the page in a fixed corner, and an arbitrary value is how a widget ends up covering the thing somebody was reading on a small screen. */ .cnclc-root--medium .cnclc-launcher { width: 74px; height: 74px; } .cnclc-root--big .cnclc-launcher { width: 90px; height: 90px; } /* The ring is drawn OUTSIDE the button with box-shadow rather than by scaling it: scaling a 90px launcher makes it jump around the corner it is anchored to, and a shadow costs the compositor nothing. */ .cnclc-launcher--pulse { animation: cnclc-pulse 2.2s ease-out infinite; } @keyframes cnclc-pulse { 0% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 0 0 0 var(--cnclc-ring); } 70% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 0 0 16px var(--cnclc-ring-0); } 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(0, 163, 42, 0); } } /* Somebody who has asked their system for less motion has asked for it here too. A pulsing ring is exactly the kind of repeating movement that setting exists to stop, and honouring it is not optional. */ @media (prefers-reduced-motion: reduce) { .cnclc-launcher--pulse { animation: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 0 0 4px var(--cnclc-ring); } } /* Start again, beside the close button. Same size and weight as the close so the header keeps its balance, and a lighter opacity so the destructive-looking one is not the loudest thing in the bar. */ .cnclc-reset { width: 32px; height: 32px; padding: 0; background: transparent; border: 0; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; border-radius: 6px; opacity: 0.8; } .cnclc-reset:hover { opacity: 1; } .cnclc-reset:focus-visible { outline: 2px solid #fff; outline-offset: 1px; opacity: 1; }