/* ── WP AI Chatbot Pro — Eye-oo inspired minimal design ── Volledige styling van de front-end chat-widget (de zwevende knop rechtsonder en het chatvenster dat opengaat). Bevat o.a. de toggle-knop, header, berichten-bubbels, quick-actions, order-/OTP-formulieren en een uitgebreid "site-CSS shield" onderaan dat voorkomt dat agressieve theme-CSS van de webshop de widget kapot maakt. Alle waarden zijn instelbaar via de --cb-* CSS-variabelen hieronder, die de beheerder deels via JS kan zetten. */ /* ════════════════════════════════════════════════════════════════════════ LEESWIJZER VOOR BEGINNERS — hoe lees je deze stylesheet? ──────────────────────────────────────────────────────────────────────── Wat is dit bestand? De complete CSS (= opmaaktaal) voor de chat-widget. CSS koppelt "selectors" (welk element?) aan "properties" (welke stijl?). Voorbeeld: .knop { color: red; } ^selector ^property:waarde; Belangrijke begrippen die je vaak ziet: - #naam = selecteert het element met id="naam" (uniek op de pagina). - .naam = selecteert ALLE elementen met class="naam". - var(--cb-x) = leest de waarde van CSS-variabele --cb-x (zie :root). - !important = "deze regel wint", gebruikt om de site-CSS te overrulen. - flex / grid = manieren om dingen netjes naast/onder elkaar te zetten. - transition / @keyframes / animation = bewegende effecten. - :hover / :focus / :active = stijl bij muis-erover / actief / indrukken. - .open, .show, .user = "modifier"-klassen die JS aan-/uitzet om de widget van toestand te laten wisselen (bv. dicht -> open). GLOBALE OPBOUW (van boven naar beneden): 1. :root — design tokens (kleuren/maten/animaties als vars). 2. Widget Container — buitenste laag, vast in de schermhoek. 3. Toggle Button — de ronde open/sluit-knop + notificatie-badge. 4. Chat Window — het venster zelf (verschijnt met animatie). 5. Header — balk bovenin met avatar, titel, statusbolletje. 6. Messages Area — scrollbaar gebied met de berichten. 7. Message Bubbles — bot- vs gebruiker-bubbels + typing-indicator. 8. Quick Actions — snelkoppeling-knoppen en context-chips. 9. Action / Order Cards — kaartjes met formulieren en bestelgegevens. 10. Input Area — onderbalk: tekstveld, mic-knop, verzendknop. 11. Overlays / OTP / Alerts — stap-formulieren en meldingsbalkjes. 12. E-mailformulier — losse e-mailcollectie-stijlen. 13. Responsive (@media) — aanpassingen voor smalle telefoonschermen. 14. SITE-CSS SHIELD — bescherming tegen agressieve theme-CSS. ════════════════════════════════════════════════════════════════════════ */ /* :root — centrale "design tokens" (kleuren, maten, animaties). Door hier variabelen te definiëren kan de hele widget op één plek van thema wisselen en kan JS waarden zoals --cb-accent of de offset dynamisch overschrijven. */ /* :root is het hoogste element (het ). Variabelen die je hier zet, gelden voor de HELE widget; verderop lees je ze terug met var(--naam). */ :root { --cb-primary: #1a1a1a; /* hoofdkleur (bijna zwart) voor knoppen/bubbels */ --cb-primary-dk: #000000; /* donkerdere variant, o.a. voor hover-states */ --cb-accent: #2563eb; /* accentkleur (blauw): header + toggle-knop */ --cb-toggle-color: var(--cb-accent); /* kleur van de ronde knop; standaard = accent */ --cb-bg: #ffffff; /* achtergrond van de invoer-onderbalk (wit) */ --cb-chat-bg: #f5f5f5; /* achtergrond van het bericht-gebied (lichtgrijs) */ --cb-surface: #ffffff; /* "oppervlak"-kleur: bot-bubbels, kaartjes (wit) */ --cb-border: #e5e5e5; /* standaard randkleur (zacht grijs) */ --cb-text: #1a1a1a; /* normale tekstkleur (donker) */ --cb-muted: #737373; /* gedempte/secundaire tekst (grijs) */ --cb-radius: 20px; /* grote afronding (venster) */ --cb-radius-sm: 12px; /* kleinere afronding (kaartjes/overlays) */ --cb-shadow: 0 25px 50px -12px rgba(0,0,0,.25); /* zachte slagschaduw venster */ --cb-shadow-btn: 0 4px 14px rgba(0,0,0,.15); /* schaduw onder de toggle-knop */ --cb-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* lettertype-stapel */ --cb-w: 400px; /* breedte van het chatvenster (desktop) */ --cb-h: 620px; /* hoogte van het chatvenster (desktop) */ --cb-z: 999999; /* z-index: hoog zodat de widget bovenop alles ligt */ --cb-anim: .3s cubic-bezier(.4,0,.2,1); /* standaard animatieduur + curve */ --cb-offset-x: 24px; /* afstand tot de linker/rechter schermrand */ --cb-offset-y: 24px; /* afstand tot de onderrand van het scherm */ } /* ── Widget Container ── De buitenste laag: vast verankerd in de hoek van het scherm (position:fixed) met een zeer hoge z-index zodat de widget altijd boven de site-content blijft. De variant .position-bottom-left wisselt naar de linkerhoek. */ /* position:fixed = blijft op dezelfde plek staan, ook als de pagina scrollt. */ #wpaicb-widget { position: fixed; /* vast t.o.v. het scherm (scrollt niet mee) */ bottom: var(--cb-offset-y); /* afstand tot onderrand (uit de variabele) */ right: var(--cb-offset-x); /* afstand tot rechterrand (uit de variabele) */ z-index: var(--cb-z); /* stapelvolgorde: boven de site-content */ font-family: var(--cb-font); /* lettertype voor alles in de widget */ -webkit-font-smoothing: antialiased; /* iets gladdere tekst in WebKit-browsers */ } /* Variant: widget linksonder i.p.v. rechtsonder. right uitschakelen, left zetten. */ #wpaicb-widget.position-bottom-left { right: auto; /* rechts-uitlijning opheffen */ left: var(--cb-offset-x); /* nu links uitlijnen */ } /* ── Toggle Button ── De ronde knop die de chat opent/sluit. Bevat twee iconen (chat + sluiten) die over elkaar liggen; via de .open-klasse op de widget wordt met een draai-/fade-animatie tussen beide gewisseld. */ #wpaicb-toggle { width: 56px; /* vaste breedte van de cirkelknop */ height: 56px; /* gelijke hoogte -> perfecte cirkel */ border-radius: 50%; /* 50% maakt van een vierkant een cirkel */ background: var(--cb-toggle-color); /* vulkleur uit de variabele */ border: none; /* geen standaard knop-rand */ cursor: pointer; /* handje-cursor: "dit is klikbaar" */ display: flex; /* flexbox om het icoon te centreren */ align-items: center; /* icoon verticaal centreren */ justify-content: center; /* icoon horizontaal centreren */ box-shadow: var(--cb-shadow-btn); /* zwevende-knop-schaduw */ transition: transform .2s ease, box-shadow .2s ease; /* soepele hover-animatie */ position: relative; /* ankerpunt voor de absoluut-geplaatste iconen/badge */ margin-left: auto; /* duwt de knop naar rechts (rechtsonder-variant) */ } /* In de links-variant geen auto-marge, anders staat de knop verkeerd. */ #wpaicb-widget.position-bottom-left #wpaicb-toggle { margin-left: 0; } /* Hover: knop iets groter + diepere schaduw (subtiel "optillen"). */ #wpaicb-toggle:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(0,0,0,.2); } /* Active (ingedrukt): knop iets kleiner -> klik-feedback. */ #wpaicb-toggle:active { transform: scale(.95); } /* SVG-icoon in de knop: vaste maat, witte vulkleur, soepele fade/draai. */ #wpaicb-toggle svg { width: 24px; height: 24px; fill: white; transition: opacity .2s, transform .2s; } /* Eigen afbeelding als chat-icoon (i.p.v. SVG): schaalt mee binnen de knop. */ #wpaicb-toggle img.icon-chat { width: 55%; height: 55%; object-fit: contain; transition: opacity .2s, transform .2s; } /* Chat-icoon exact in het midden van de knop leggen (absoluut + verschuiven). */ #wpaicb-toggle .icon-chat { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } /* Sluit-icoon (kruisje): ligt over het chat-icoon, standaard onzichtbaar (opacity:0) en licht gedraaid; wordt zichtbaar zodra de widget .open is. */ #wpaicb-toggle .icon-close { position: absolute; top: 50%; left: 50%; /* in het midden ankeren */ opacity: 0; transform: translate(-50%,-50%) rotate(-90deg); /* verborgen + voorgedraaid */ z-index: 2; transition: opacity .2s, transform .2s; /* bovenop + soepele wissel */ color: #ffffff !important; font-size: 22px; font-weight: 300; /* wit kruisje, dun */ line-height: 1; font-family: Arial, Helvetica, sans-serif; /* strak uitgelijnd kruisje */ pointer-events: none; user-select: none; /* niet klikbaar/selecteerbaar zelf */ } /* Bij geopende widget: chat-icoon weg-fade'n en draaien... */ #wpaicb-widget.open #wpaicb-toggle .icon-chat { opacity: 0; transform: translate(-50%,-50%) rotate(90deg); } /* ...en het kruisje in-fade'n en rechtzetten (vloeiende kruising). */ #wpaicb-widget.open #wpaicb-toggle .icon-close { opacity: 1; transform: translate(-50%,-50%) rotate(0deg); } /* Notification badge — klein rood bolletje op de toggle-knop dat een ongelezen bericht aankondigt; krijgt via .show een scale-in animatie. */ #wpaicb-badge { position: absolute; top: -3px; right: -3px; /* net buiten de rechterbovenhoek van de knop */ width: 18px; height: 18px; /* klein rond bolletje */ background: #ef4444; border-radius: 50%; border: 2px solid white; /* rood, rond, witte rand */ font-size: 10px; font-weight: 700; color: white; /* klein, vet, wit cijfer */ display: flex; align-items: center; justify-content: center; /* cijfer centreren */ opacity: 0; transform: scale(0); transition: all .2s; /* standaard verborgen + ingekrompen */ } /* JS zet .show -> badge "popt" zichtbaar tevoorschijn. */ #wpaicb-badge.show { opacity: 1; transform: scale(1); } /* ── Chat Window ── Het eigenlijke chatvenster. Standaard verborgen (opacity:0 + pointer-events:none) en pas zichtbaar/klikbaar zodra de widget de klasse .open krijgt — dat geeft de vloeiende open-/sluit-animatie. */ #wpaicb-window { position: absolute; bottom: 70px; right: 0; /* boven de toggle-knop, rechts uitgelijnd */ width: var(--cb-w); height: var(--cb-h); /* afmetingen uit de variabelen */ background: var(--cb-chat-bg); /* lichte achtergrond */ border-radius: var(--cb-radius); /* afgeronde hoeken */ box-shadow: var(--cb-shadow); /* grote zachte schaduw -> "zweeft" */ display: flex; flex-direction: column; overflow: hidden; /* header/berichten/input onder elkaar */ opacity: 0; transform: translateY(16px) scale(.98); /* verborgen + iets omlaag/kleiner */ pointer-events: none; /* niet klikbaar zolang dicht */ transition: opacity var(--cb-anim), transform var(--cb-anim); /* soepele open-/sluit-animatie */ } /* Links-variant: venster links uitlijnen i.p.v. rechts. */ #wpaicb-widget.position-bottom-left #wpaicb-window { right: auto; left: 0; } /* Geopend: venster in beeld schuiven, op ware grootte en weer klikbaar maken. */ #wpaicb-widget.open #wpaicb-window { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } /* ── Header — accent colored style ── */ /* De gekleurde balk bovenin het venster (avatar + titel + actieknoppen). */ #wpaicb-header { background: var(--cb-accent); /* accentkleur als headerachtergrond */ padding: 14px 16px; /* binnenruimte (boven/onder 14, links/rechts 16) */ display: flex; align-items: center; gap: 12px; /* items op één rij, verticaal gecentreerd */ flex-shrink: 0; /* header mag niet krimpen als de inhoud groeit */ } /* Ronde avatar links in de header (icoon of foto van de assistent). */ #wpaicb-avatar { width: 36px; height: 36px; border-radius: 50%; /* cirkel */ background: rgba(255,255,255,.2); /* halftransparant wit vlak */ display: flex; align-items: center; justify-content: center; /* inhoud centreren */ font-size: 18px; flex-shrink: 0; overflow: hidden; /* emoji-grootte; niet krimpen; bijsnijden */ } /* Een echte afbeelding in de avatar vult het rondje helemaal (bijgesneden). */ #wpaicb-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Tekstblok in de header (titel + status) mag de resterende ruimte vullen. */ .wpaicb-header-info { flex: 1; } /* De assistent-naam/titel in de header (wit, halfvet). */ .wpaicb-header-info h3 { color: #ffffff; margin: 0; /* wit, geen standaard h3-marge */ font-size: 14px; font-weight: 600; letter-spacing: -.01em; /* compact en strak */ } /* Statusregel onder de titel ("Online", met groen bolletje). */ .wpaicb-status-indicator { display: flex; align-items: center; gap: 5px; /* bolletje + tekst naast elkaar */ font-size: 11px; color: rgba(255,255,255,.8); margin-top: 1px; /* klein, licht wit */ } /* Het kleine groene "online"-bolletje dat zacht knippert. */ .status-dot-sm { width: 6px; height: 6px; background: #4ade80; /* klein groen rondje */ border-radius: 50%; animation: pulse-dot 2s infinite; /* eindeloos pulserend */ } /* Animatie voor het statusbolletje: opacity zacht op-en-neer (pulse). */ @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .4; } } /* Container voor de header-actieknoppen (wissen / minimaliseren / sluiten). */ .wpaicb-header-actions { display: flex; gap: 2px; } /* Eén header-actieknop: transparant rondje dat oplicht bij hover. */ .wpaicb-header-btn { background: transparent; border: none; border-radius: 8px; /* onzichtbaar tot hover */ width: 32px; height: 32px; cursor: pointer; /* klikbaar vierkantje */ display: flex; align-items: center; justify-content: center; /* icoon centreren */ color: rgba(255,255,255,.8); transition: all .15s; /* licht wit, soepele hover */ font-size: 14px; padding: 0; } /* Hover: lichte witte achtergrond + volledig witte tekst (zichtbaarder). */ .wpaicb-header-btn:hover { background: rgba(255,255,255,.15); color: #ffffff; } /* Het SVG-icoontje in de knop erft de tekstkleur (currentColor). */ .wpaicb-header-btn svg { width: 16px; height: 16px; fill: currentColor; } /* ── Messages Area ── Bewust GEEN flex-container gebruiken: Opera GX (Chromium 145) heeft een bug waarbij dynamisch toegevoegde flex-items met rijke inhoud (zoals order-cards) niet correct worden berekend en afgesneden raken. Block layout + margin-top geeft dezelfde visuele output zonder dat risico. */ /* Het scrollbare gebied waarin alle chatberichten verschijnen. */ #wpaicb-messages { flex: 1 1 auto; min-height: 0; /* vult de resterende hoogte; min-height:0 maakt scrollen mogelijk */ overflow-y: auto; padding: 20px 16px; /* verticaal scrollen + binnenruimte */ display: block; /* bewust block i.p.v. flex (zie uitleg hierboven) */ scroll-behavior: smooth; /* soepel scrollen naar nieuwe berichten */ background: var(--cb-chat-bg); /* lichte achtergrond */ background-image: var(--cb-chat-bg-image, none); /* optionele achtergrond-afbeelding via var */ background-size: cover; /* afbeelding vult het hele gebied */ background-position: center; /* gecentreerd */ background-repeat: no-repeat; /* niet herhalen */ } /* Spacing tussen opeenvolgende children — vervangt `gap: 16px` */ /* "* + *" = elk kind behalve het eerste -> ruimte tussen berichten zonder flex-gap. */ #wpaicb-messages > * + * { margin-top: 16px; } /* Dunne, subtiele scrollbalk (alleen in WebKit/Chromium-browsers). */ #wpaicb-messages::-webkit-scrollbar { width: 3px; } /* heel smal */ #wpaicb-messages::-webkit-scrollbar-track { background: transparent; } /* onzichtbare baan */ #wpaicb-messages::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; } /* grijs duimpje */ /* ── Message Bubbles ── Eén bericht = avatar + tekstbubbel. De .user-variant draait de rij om (row-reverse) en kleurt de bubbel donker, zodat bezoeker- en bot-berichten visueel links/rechts uit elkaar staan. */ .wpaicb-msg { display: flex; align-items: flex-start; gap: 8px; /* avatar + bubbel naast elkaar, bovenaan uitgelijnd */ animation: msg-in .3s ease-out; /* nieuw bericht schuift zacht in beeld */ flex-shrink: 0 !important; /* bericht mag niet samengedrukt worden */ } /* Inkom-animatie: van licht naar volledig zichtbaar + omhoog schuiven. */ @keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Gebruikersbericht: rij omdraaien zodat avatar+bubbel rechts staan. */ .wpaicb-msg.user { flex-direction: row-reverse; } /* Klein rond avatar-vakje naast elk bericht. */ .wpaicb-msg-avatar { width: 28px; height: 28px; border-radius: 50%; /* kleine cirkel */ background: var(--cb-border); /* grijze vulling (bot) */ display: flex; align-items: center; justify-content: center; /* inhoud centreren */ font-size: 13px; flex-shrink: 0; overflow: hidden; /* emoji-maat; niet krimpen; bijsnijden */ margin-top: 2px; /* lijnt netjes met bovenkant bubbel */ } /* Eventuele avatar-afbeelding vult het rondje (bijgesneden). */ .wpaicb-msg-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Gebruiker-avatar krijgt accentkleur + witte letter ter onderscheid. */ .wpaicb-msg.user .wpaicb-msg-avatar { background: var(--cb-accent); color: white; font-size: 12px; } /* De tekstbubbel zelf (standaard = bot-bericht: licht met rand). */ .wpaicb-bubble { max-width: 80%; padding: 10px 14px; /* niet breder dan 80%; binnenruimte */ border-radius: 16px; font-size: 14px; line-height: 1.55; /* afgerond, leesbare regelhoogte */ color: var(--cb-text); background: var(--cb-surface); /* donkere tekst op witte bubbel */ border: 1px solid var(--cb-border); /* dunne grijze rand */ border-top-left-radius: 4px; /* "tuitje" linksboven (komt van de bot) */ word-wrap: break-word; /* lange woorden afbreken i.p.v. uitlopen */ } /* Gebruiker-bubbel: donker met witte tekst en het tuitje rechtsboven. */ .wpaicb-msg.user .wpaicb-bubble { background: var(--cb-primary); color: white; /* donker + wit */ border: none; border-top-right-radius: 4px; border-top-left-radius: 16px; /* tuitje wisselt naar rechts */ } /* Links in bot-bubbels in accentkleur en onderstreept. */ .wpaicb-bubble a { color: var(--cb-accent); text-decoration: underline; } /* Links in gebruiker-bubbels licht wit (leesbaar op donkere achtergrond). */ .wpaicb-msg.user .wpaicb-bubble a { color: rgba(255,255,255,.85); } /* Alinea's in een bubbel: ruimte eronder, behalve de laatste. */ .wpaicb-bubble p { margin: 0 0 6px; } .wpaicb-bubble p:last-child { margin: 0; } /* Vetgedrukte tekst iets minder zwaar dan default-bold. */ .wpaicb-bubble strong { font-weight: 600; } /* Inline code in een bubbel: lichtgrijs blokje met afronding. */ .wpaicb-bubble code { background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; font-size: 13px; } /* ── Typing Indicator ── De drie stuiterende puntjes die tonen dat de AI een antwoord aan het genereren is. Standaard verborgen; JS zet .show terwijl op het antwoord wordt gewacht. */ /* Standaard display:none (onzichtbaar); pas zichtbaar met .show. */ #wpaicb-typing { display: none; align-items: flex-start; gap: 8px; padding: 0; } #wpaicb-typing.show { display: flex; } /* Bubbel-vorm rond de drie puntjes (lijkt op een bot-bubbel). */ .typing-bubble { background: var(--cb-surface); border: 1px solid var(--cb-border); /* wit met rand */ border-radius: 16px; border-top-left-radius: 4px; /* zelfde tuitje als bot-bubbel */ padding: 12px 16px; display: flex; gap: 4px; align-items: center; /* puntjes op een rij */ } /* Eén puntje van de "aan-het-typen"-animatie. */ .typing-dot { width: 6px; height: 6px; background: var(--cb-muted); /* klein grijs bolletje */ border-radius: 50%; animation: typing-bounce .8s infinite; /* eindeloos stuiteren */ } /* Puntje 2 en 3 starten iets later -> golvend "loopje". */ .typing-dot:nth-child(2) { animation-delay: .15s; } .typing-dot:nth-child(3) { animation-delay: .3s; } /* De stuiter-animatie zelf: even omhoog en weer terug. */ @keyframes typing-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ── Quick Actions Wrapper ── Omhult de vooraf-gedefinieerde snelkoppeling-knoppen die bij het openen getoond worden (bv. "Bestelling volgen"), met een hint-tekst erboven en een "wis vorige berichten"-link eronder. */ /* De buitenste wrapper komt zacht in beeld (zelfde inkom-animatie als berichten). */ .wpaicb-quick-actions-wrap { animation: msg-in .3s ease-out; } /* Klein hint-zinnetje boven de snelkoppelingen ("Waarmee kan ik helpen?"). */ .wpaicb-qa-hint { font-size: 11px; color: var(--cb-muted); text-align: center; /* klein, grijs, gecentreerd */ margin-bottom: 10px; font-weight: 500; letter-spacing: .01em; } /* "Wis vorige berichten"-link onder de snelkoppelingen (lijkt op een tekstlink). */ .wpaicb-clear-hint { display: block; width: 100%; text-align: center; /* volle breedte, gecentreerd */ margin-top: 10px; padding: 6px 0; font-size: 11px; color: var(--cb-muted); /* klein en grijs */ background: transparent; border: none; cursor: pointer; /* ziet eruit als link, is een knop */ font-family: var(--cb-font); text-decoration: underline; /* onderstreept */ text-underline-offset: 2px; transition: color .15s; } /* Hover: tekst donkerder maken voor klik-feedback. */ .wpaicb-clear-hint:hover { color: var(--cb-text); } /* ── Quick Action Buttons (compact 2-col grid) ── De snelkoppeling-knoppen zelf, in een raster van 2 kolommen. Elke knop (.quick-chip) heeft een icoon-vakje + label en kleurt donker bij hover. */ /* grid met twee gelijke kolommen (1fr 1fr) en wat ruimte ertussen. */ .wpaicb-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } /* Eén snelkoppeling-knop: icoon-vakje + label naast elkaar. */ .quick-chip { display: flex; align-items: center; gap: 8px; /* icoon en tekst op een rij */ background: #ffffff !important; /* wit (!important wint van site-CSS) */ border: 1px solid var(--cb-border) !important; /* grijze rand */ color: #1a1a1a !important; /* donkere tekst */ border-radius: 10px; /* afgeronde hoeken */ padding: 8px 10px; /* binnenruimte */ font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s ease; /* klikbaar + soepele hover */ font-family: var(--cb-font); text-align: left; line-height: 1.3; opacity: 1 !important; visibility: visible !important; /* altijd zichtbaar forceren */ } /* Span-tekst in de chip erft de chip-kleur en blijft altijd zichtbaar. */ .quick-chip span { color: inherit !important; visibility: visible !important; } /* ── Bulletproof label-override tegen agressieve site-CSS (v1.2.10) ── Sommige themes (bv. dekbedovertrekkenkopen.nl) verbergen tekst in button-spans via display:none, font-size:0, text-indent:-9999px, width:0, overflow:hidden of clip. Dit forceert de label-tekst onder ALLE omstandigheden zichtbaar terug. */ /* Elke property hieronder "ontdoet" één truc waarmee een theme tekst verbergt; daarom staan ze allemaal op !important zodat ze de site-CSS overrulen. */ #wpaicb-widget .quick-chip .chip-label, #wpaicb-widget .quick-chip > span:not(.chip-icon) { display: inline-block !important; /* tegen display:none */ visibility: visible !important; /* tegen visibility:hidden */ opacity: 1 !important; /* tegen opacity:0 */ color: inherit !important; /* erf de chip-tekstkleur */ font-size: 12px !important; /* tegen font-size:0 */ line-height: 1.3 !important; font-family: var(--cb-font) !important; font-weight: 500 !important; text-indent: 0 !important; /* tegen text-indent:-9999px */ text-transform: none !important; letter-spacing: normal !important; width: auto !important; /* tegen width:0 */ height: auto !important; /* tegen height:0 */ max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; /* tegen overflow:hidden */ white-space: normal !important; word-break: normal !important; position: static !important; /* tegen offscreen positionering */ clip: auto !important; /* tegen clip:rect(...) verbergtruc */ clip-path: none !important; /* tegen clip-path verbergtruc */ transform: none !important; /* tegen scale(0)/wegschuiven */ -webkit-text-fill-color: currentColor !important; /* tegen color:transparent */ background: transparent !important; border: 0 !important; text-decoration: none !important; flex: 1 1 auto !important; /* label vult de resterende breedte */ } /* Hover op de chip: donkere achtergrond + witte tekst + lichte "lift". */ .quick-chip:hover { border-color: var(--cb-primary) !important; background: var(--cb-primary) !important; color: #ffffff !important; transform: translateY(-1px); /* 1px omhoog = subtiele lift */ box-shadow: 0 4px 12px rgba(0,0,0,.08); /* zachte schaduw bij hover */ } /* Bij hover kleurt ook het icoon-vakje mee (lichte achtergrond, wit icoon). */ .quick-chip:hover .chip-icon { background: rgba(255,255,255,.15); color: white; } /* Het vierkante icoon-vakje links in de chip. */ .chip-icon { width: 26px; height: 26px; border-radius: 8px; /* afgerond vierkantje */ background: var(--cb-chat-bg); /* lichtgrijze vulling */ display: flex; align-items: center; justify-content: center; /* icoon centreren */ font-size: 13px; flex-shrink: 0; transition: all .15s; /* niet krimpen + soepele hover */ } /* Context chips (na AI-antwoord) — klikbare vervolg-suggesties die de bot onder een antwoord toont, als afgeronde "pillen" die wrappen over meerdere regels. */ /* flex-wrap: chips springen netjes naar een nieuwe regel als ze niet passen. */ .wpaicb-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; } /* Eén context-chip: pil-vormige suggestieknop. */ .context-chip { background: var(--cb-surface); border: 1px solid var(--cb-border); /* wit met rand */ color: var(--cb-text); border-radius: 20px; /* sterke afronding -> "pil" */ padding: 7px 14px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; font-family: var(--cb-font); } /* Hover: kleurt donker met witte tekst (zelfde stijl als quick-chip hover). */ .context-chip:hover { background: var(--cb-primary); color: white; border-color: var(--cb-primary); } /* ── Action Cards ── Een ingebed kaartje met titel, invoervelden en een knop, dat de bot in de chat plaatst wanneer hij gestructureerde input nodig heeft (bv. e-mailadres of bestelnummer). */ .wpaicb-action-card { background: var(--cb-surface); border: 1px solid var(--cb-border); /* wit kaartje met rand */ border-radius: var(--cb-radius-sm); padding: 14px 16px; /* afgerond + binnenruimte */ margin-top: 8px; font-size: 14px; flex-shrink: 0 !important; /* voorkom inkrimpen in flex-column */ } /* Titel bovenin het kaartje. */ .wpaicb-action-card h4 { margin: 0 0 10px; color: var(--cb-text); font-size: 14px; font-weight: 600; } /* Invoervelden in het kaartje (volle breedte). */ .wpaicb-action-card input { width: 100%; padding: 10px 12px; /* volle breedte + binnenruimte */ border: 1px solid var(--cb-border); border-radius: 10px; /* grijze rand, afgerond */ font-size: 14px; margin: 5px 0; box-sizing: border-box; /* border-box = padding telt mee in breedte */ outline: none; transition: border-color .15s; /* eigen focus-stijl i.p.v. browser-outline */ font-family: var(--cb-font); background: var(--cb-chat-bg); } /* Focus (veld actief): randkleur naar primair + witte achtergrond. */ .wpaicb-action-card input:focus { border-color: var(--cb-primary); background: #fff; } /* De hoofdknop in het kaartje (volle breedte, donker). */ .wpaicb-action-card .card-btn { background: var(--cb-primary) !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; padding: 10px 16px !important; font-size: 14px !important; font-weight: 500; cursor: pointer; width: 100%; margin-top: 8px; transition: background .15s; font-family: var(--cb-font); text-decoration: none !important; } /* Hover: knop iets donkerder. */ .wpaicb-action-card .card-btn:hover { background: var(--cb-primary-dk) !important; color: #ffffff !important; } /* Disabled (uitgeschakeld): doorzichtig + "verboden"-cursor. */ .wpaicb-action-card .card-btn:disabled { opacity: .5 !important; cursor: not-allowed; } /* Order card — toont de details van een teruggevonden bestelling (status, nummer, track & trace). Defensief opgebouwd voor Opera/Chromium flex-quirks: de overdaad aan flex/height !important-regels forceert de natuurlijke hoogte zodat de kaart niet afgesneden raakt (zie ook de #wpaicb-messages-uitleg). */ .wpaicb-order-card { background: var(--cb-surface); border: 1px solid var(--cb-border); /* wit kaartje met rand */ border-radius: var(--cb-radius-sm); margin-top: 8px; font-size: 14px; /* Forceer natuurlijke hoogte — Opera respecteert soms geen flex-shrink in genestte flex-columns */ flex: 0 0 auto !important; /* niet groeien, niet krimpen, eigen hoogte */ -webkit-flex: 0 0 auto !important; /* idem voor oudere WebKit */ flex-shrink: 0 !important; /* extra: krimpen verbieden */ flex-grow: 0 !important; /* extra: groeien verbieden */ flex-basis: auto !important; /* startgrootte = natuurlijke inhoud */ height: auto !important; /* hoogte volgt de inhoud */ min-height: auto !important; max-height: none !important; /* geen hoogtelimiet -> niet afsnijden */ overflow: visible !important; /* inhoud niet wegknippen */ width: 100%; box-sizing: border-box; contain: none; /* geen CSS-containment dat de hoogte beperkt */ } /* Donkere kopbalk bovenin de order-kaart (titel/status). */ .order-card-header { background: var(--cb-primary); color: white; /* donker met witte tekst */ padding: 12px 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; /* icoon + tekst op een rij */ border-radius: var(--cb-radius-sm) var(--cb-radius-sm) 0 0; /* alleen bovenhoeken afronden */ flex-shrink: 0; } /* Het body-deel van de kaart met de regels (label/waarde). */ .order-card-body { padding: 14px 16px; /* Opera fallback — laat body natuurlijk groeien */ display: block; /* block i.p.v. flex tegen de Opera-afsnij-bug */ overflow: visible; height: auto; min-height: auto; } /* Eén regel in de order-body: label links, waarde rechts. */ .order-row { display: flex; justify-content: space-between; align-items: center; /* uit elkaar duwen */ padding: 6px 0; border-bottom: 1px solid var(--cb-border); /* scheidingslijntje onder elke regel */ gap: 12px; flex-shrink: 0; min-height: 28px; overflow: visible; } /* Laatste regel: geen scheidingslijn onderaan. */ .order-row:last-child { border: none; } /* Het label (linkerkant) is grijs en mag niet krimpen. */ .order-row .label { color: var(--cb-muted); font-size: 13px; flex-shrink: 0; } /* De waarde (rechterkant): halfvet, rechts uitgelijnd, breekt lange teksten af. */ .order-row .value { font-weight: 500; text-align: right; word-break: break-word; /* lange woorden afbreken */ overflow-wrap: anywhere; /* mag overal afbreken om uitlopen te voorkomen */ min-width: 0; /* nodig zodat flex-item echt mag krimpen/afbreken */ } /* Track & trace-knop onderaan de kaart (volle breedte). */ .order-track-btn { display: block !important; text-align: center; background: var(--cb-primary) !important; color: #ffffff !important; /* donker met witte tekst */ border-radius: 10px !important; padding: 10px !important; margin-top: 10px; font-weight: 500; text-decoration: none !important; transition: background .15s; } /* Hover: knop iets donkerder. */ .order-track-btn:hover { background: var(--cb-primary-dk) !important; color: #ffffff !important; } /* ── Link Buttons ── Een knop-vormige link die de bot in een antwoord kan plaatsen om de bezoeker naar een pagina te sturen (bv. een productpagina of contactformulier). */ .wpaicb-link-btn { display: inline-flex; align-items: center; gap: 6px; /* icoon + tekst, neemt alleen eigen breedte in */ background: var(--cb-primary); color: white; /* donker met witte tekst */ border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 500; text-decoration: none; margin-top: 8px; transition: background .15s; /* geen underline -> knop-look */ } /* Hover: iets donkerder. */ .wpaicb-link-btn:hover { background: var(--cb-primary-dk); color: white; } /* ── Input Area ── De onderbalk van het venster: "nieuwe chat"-link, het tekstveld (auto-groeiend tot max 100px), de microfoon- en verzendknop, plus de verplichte "powered by"-vermelding. */ #wpaicb-input-area { padding: 12px 16px 14px; background: var(--cb-bg); /* witte onderbalk */ border-top: 1px solid var(--cb-border); /* scheidingslijn naar het berichten-gebied */ flex-shrink: 0; /* onderbalk mag niet krimpen */ } /* "Nieuwe chat"-link bovenin de onderbalk (ziet eruit als tekstlink). */ #wpaicb-new-chat { display: block; width: 100%; background: none; border: none; /* knop zonder knop-uiterlijk */ padding: 0 0 8px; margin: 0; cursor: pointer; font-size: 12px; font-family: var(--cb-font); color: var(--cb-muted); /* klein en grijs */ text-decoration: underline; text-underline-offset: 2px; /* onderstreept als link */ text-align: center; transition: color .15s; } /* Hover: tekst kleurt naar accentkleur. */ #wpaicb-new-chat:hover { color: var(--cb-accent); } /* De invoerrij: tekstveld + mic-knop + verzendknop, onderaan uitgelijnd. */ #wpaicb-input-row { display: flex; gap: 8px; align-items: flex-end; } /* Het tekstinvoerveld (een textarea die meegroeit met de tekst). */ #wpaicb-input { flex: 1; border: 1px solid var(--cb-border); border-radius: 12px; /* vult de breedte; grijze rand */ padding: 10px 14px; font-size: 14px; font-family: var(--cb-font); resize: none; outline: none; max-height: 100px; min-height: 40px; /* niet handmatig schalen; groeit tot 100px */ line-height: 1.5; transition: border-color .15s; background: var(--cb-chat-bg); color: var(--cb-text); overflow-y: auto; /* scrollt intern bij veel tekst */ } /* Focus: rand wordt primair + achtergrond wit (veld "actief"). */ #wpaicb-input:focus { border-color: var(--cb-primary); background: #fff; } /* Placeholdertekst in gedempt grijs. */ #wpaicb-input::placeholder { color: var(--cb-muted); } /* De vierkante verzendknop (paper-plane icoon). */ #wpaicb-send { background: var(--cb-primary) !important; border: none !important; border-radius: 12px !important; /* donker, afgerond */ width: 40px !important; height: 40px !important; cursor: pointer; /* vast vierkantje */ display: flex !important; align-items: center !important; justify-content: center !important; /* icoon centreren */ flex-shrink: 0; transition: background .15s, transform .1s; padding: 0 !important; margin: 0 !important; } /* Hover: iets donkerder. */ #wpaicb-send:hover { background: var(--cb-primary-dk) !important; } /* Active (ingedrukt): knop iets kleiner -> klik-feedback. */ #wpaicb-send:active { transform: scale(.94); } /* Het paper-plane SVG-icoon (wit, geforceerd zichtbaar tegen site-CSS). */ #wpaicb-send svg { width: 18px !important; height: 18px !important; fill: #ffffff !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Ook de losse path binnen het SVG wit forceren (sommige iconen kleuren anders). */ #wpaicb-send svg path { fill: #ffffff !important; stroke: #ffffff !important; } /* Disabled (bv. leeg veld): doorzichtig + verboden-cursor. */ #wpaicb-send:disabled { opacity: .4 !important; cursor: not-allowed; } /* ── Microphone Button ── Knop voor spraakinvoer (Web Speech API). Krijgt .listening tijdens opname (rood + pulserende ring) en .disabled wanneer de browser geen spraak ondersteunt. */ /* Standaard: transparante knop met dunne rand (rust-toestand). */ #wpaicb-mic { background: transparent !important; border: 1px solid var(--cb-border) !important; border-radius: 12px !important; width: 40px !important; height: 40px !important; cursor: pointer; /* zelfde maat als verzendknop */ display: flex !important; align-items: center !important; justify-content: center !important; /* icoon centreren */ flex-shrink: 0; transition: all .2s; padding: 0 !important; margin: 0 !important; color: var(--cb-muted) !important; /* grijs icoon in rust */ } /* Hover: lichte achtergrond + primaire randkleur en icoon. */ #wpaicb-mic:hover { background: var(--cb-chat-bg) !important; border-color: var(--cb-primary) !important; color: var(--cb-primary) !important; } /* Het microfoon SVG-icoon erft de tekstkleur (currentColor) en blijft zichtbaar. */ #wpaicb-mic svg { width: 18px !important; height: 18px !important; fill: currentColor !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Losse path in het mic-icoon volgt ook currentColor. */ #wpaicb-mic svg path { fill: currentColor !important; } /* Tijdens opname (.listening): rood + wit icoon + pulserende ring-animatie. */ #wpaicb-mic.listening { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; animation: mic-pulse 1.2s infinite; } /* Niet-ondersteund (.disabled): doorzichtiger, blijft grijs. */ #wpaicb-mic.disabled { opacity: .55 !important; color: var(--cb-muted) !important; } /* Disabled-knop reageert niet op hover (geen kleurwissel). */ #wpaicb-mic.disabled:hover { border-color: var(--cb-border) !important; background: transparent !important; color: var(--cb-muted) !important; } /* Pulserende rode "halo" rond de mic tijdens opname (box-shadow groeit + vervaagt). */ @keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .4); } 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } } /* ── Voice Recording Status Indicator ── Het rode "aan het luisteren..."-balkje dat boven de invoerrij verschijnt tijdens spraakopname, met knipperend bolletje voor duidelijke feedback. */ #wpaicb-voice-status { display: flex; align-items: center; justify-content: center; /* bolletje + tekst gecentreerd */ gap: 8px; padding: 6px 10px; margin-bottom: 8px; background: #fef2f2; border: 1px solid #fecaca; /* licht rood balkje met rode rand */ border-radius: 10px; font-size: 12px; font-weight: 600; color: #dc2626; /* rode, vette tekst */ animation: voice-fade-in .25s ease-out; /* zacht inschuiven */ } /* Knipperend rood bolletje voor het "we luisteren"-gevoel. */ #wpaicb-voice-status .voice-dot { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; animation: voice-dot-blink 1s infinite; /* eindeloos knipperen */ flex-shrink: 0; } /* Tekstdeel van het status-balkje, iets ruimer gespatieerd. */ #wpaicb-voice-status .voice-text { letter-spacing: .02em; } /* Knipper-animatie: bolletje wordt zwakker en kleiner halverwege. */ @keyframes voice-dot-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } /* Inschuif-animatie voor het status-balkje (van boven, fade-in). */ @keyframes voice-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Pulsende rode rand op input-row tijdens opname */ /* Tijdens opname krijgt het invoerveld een rode rand + pulserende gloed. */ #wpaicb-input-row.recording #wpaicb-input { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); animation: input-pulse 1.5s infinite; } /* Pulsanimatie voor de rode gloed rond het invoerveld. */ @keyframes input-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); } 50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, .05); } } /* De verplichte "Powered by ..."-vermelding helemaal onderaan. */ #wpaicb-powered { text-align: center; font-size: 10px; /* heel klein en gecentreerd */ color: var(--cb-muted); margin-top: 8px; /* gedempt grijs */ letter-spacing: .01em; } /* De link in de powered-by-tekst (grijs, zonder underline). */ #wpaicb-powered a { color: var(--cb-muted); text-decoration: none; font-weight: 500; } /* Hover: tekst donkerder. */ #wpaicb-powered a:hover { color: var(--cb-text); } /* ── Input Overlay (order/OTP form) ── Een paneeltje met titel, sluitknop en invoerveld dat over de chat verschijnt voor stap-formulieren, zoals het opvragen van een bestelnummer of het invoeren van de e-mailverificatiecode (OTP). */ .wpaicb-input-overlay { background: var(--cb-surface); border: 1px solid var(--cb-border); /* wit paneel met rand */ border-radius: var(--cb-radius-sm); padding: 14px 16px; animation: msg-in .2s ease-out; /* zacht inschuiven */ } /* Kopregel van de overlay: titel links, sluitknop rechts. */ .wpaicb-input-overlay .overlay-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } /* De titel van de overlay (halfvet). */ .wpaicb-input-overlay .overlay-title { font-weight: 600; color: var(--cb-text); font-size: 14px; } /* De sluit/annuleer-knop (×) rechtsboven in de overlay. */ .wpaicb-input-overlay .overlay-cancel { background: transparent; border: none; color: var(--cb-muted); /* grijs kruisje, onzichtbare knop */ cursor: pointer; font-size: 16px; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: all .15s; } /* Hover op sluitknop: lichte achtergrond + donkerder kruisje. */ .wpaicb-input-overlay .overlay-cancel:hover { background: var(--cb-chat-bg); color: var(--cb-text); } /* Subtekst/uitleg onder de titel (klein en grijs). */ .wpaicb-input-overlay .overlay-sub { font-size: 12px; color: var(--cb-muted); margin: 0 0 10px; } /* Het invoerveld in de overlay. */ .wpaicb-input-overlay .overlay-input { width: 100%; padding: 10px 12px; border: 1px solid var(--cb-border); border-radius: 10px; font-size: 14px; margin: 5px 0; box-sizing: border-box; outline: none; background: var(--cb-chat-bg); font-family: var(--cb-font); transition: border-color .15s; } /* Focus: primaire randkleur + witte achtergrond. */ .wpaicb-input-overlay .overlay-input:focus { border-color: var(--cb-primary); background: #fff; } /* De bevestig-knop in de overlay (volle breedte, donker). */ .wpaicb-input-overlay .overlay-btn { background: var(--cb-primary) !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; padding: 11px 16px !important; font-size: 14px !important; font-weight: 500; cursor: pointer; width: 100%; margin-top: 8px; transition: background .15s; font-family: var(--cb-font); text-decoration: none !important; } /* Hover: iets donkerder. */ .wpaicb-input-overlay .overlay-btn:hover { background: var(--cb-primary-dk) !important; color: #ffffff !important; } /* Disabled: doorzichtig + verboden-cursor. */ .wpaicb-input-overlay .overlay-btn:disabled { opacity: .5 !important; cursor: not-allowed; } /* Variant "ghost": transparante secundaire knop (bv. "Overslaan"). */ .wpaicb-input-overlay .overlay-btn-ghost { background: transparent; color: var(--cb-text); border: 1px solid var(--cb-border); margin-top: 6px; } /* Hover op ghost-knop: lichte achtergrond. */ .wpaicb-input-overlay .overlay-btn-ghost:hover { background: var(--cb-chat-bg); } /* Een leeg meldingsvakje verbergen (:empty = geen inhoud -> niet tonen). */ .wpaicb-input-overlay .overlay-alert:empty { display: none; } /* ── OTP Display ── De rij losse cijfervakjes waarin de bezoeker de eenmalige verificatiecode (One-Time Password) invult die per e-mail is verstuurd. */ /* De rij met losse cijfervakjes, gecentreerd. */ .wpaicb-otp-grid { display: flex; gap: 8px; justify-content: center; margin: 12px 0; } /* Eén cijfervakje: groot, gecentreerd cijfer. */ .wpaicb-otp-input { width: 40px; height: 48px; text-align: center; /* vast vakje, cijfer in het midden */ font-size: 20px; font-weight: 700; /* groot en vet */ border: 1.5px solid var(--cb-border); border-radius: 10px; outline: none; transition: border-color .15s; background: var(--cb-chat-bg); } /* Focus: primaire randkleur + witte achtergrond (toont waar je typt). */ .wpaicb-otp-input:focus { border-color: var(--cb-primary); background: #fff; } /* ── Alerts ── Inline meldingsbalkjes in drie kleurvarianten: error (rood), success (groen) en info (blauw), bv. voor "code onjuist" of "e-mail verstuurd". */ /* Basisvorm van een melding (kleur komt van de varianten hieronder). */ .wpaicb-alert { padding: 8px 12px; border-radius: 10px; font-size: 13px; margin-top: 6px; } /* Foutmelding: rode tinten. */ .wpaicb-alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } /* Succesmelding: groene tinten. */ .wpaicb-alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } /* Infomelding: blauwe tinten. */ .wpaicb-alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; } /* ── Admin confidence badge ── Debug-label (monospace, gestippeld kader) dat alleen voor ingelogde beheerders de zekerheidsscore van het AI-antwoord toont — handig bij het testen, onzichtbaar voor gewone bezoekers. */ .wpaicb-confidence-badge { font-size: 11px; padding: 4px 10px; background: var(--cb-surface); border: 1px dashed var(--cb-border); /* gestippelde rand = "debug" */ border-radius: 8px; margin: -8px 0 4px 36px; /* negatieve top-marge: trekt het label dichter naar het bericht */ display: flex; gap: 4px; font-family: monospace; opacity: .8; /* monospace + iets doorzichtig */ } /* ── Email-collectie form (v1.3.0) ──────────────────────────────────── */ /* Klein in-chat formuliertje dat (optioneel) om het e-mailadres vraagt. Alle regels staan op !important en herhalen kleur/lettertype expliciet, zodat agressieve site-CSS het formulier niet kan verbergen of verminken. */ /* De bubbel rond het e-mailformulier krijgt iets meer binnenruimte. */ #wpaicb-widget .wpaicb-email-form .wpaicb-bubble { padding: 14px 14px 12px !important; } /* De uitleg-/vraagtekst boven het veld. */ #wpaicb-widget .wpaicb-email-prompt { font-size: 13px !important; line-height: 1.4 !important; color: var(--cb-text, #1a1a1a) !important; /* var met fallback-kleur */ -webkit-text-fill-color: var(--cb-text, #1a1a1a) !important; /* tegen color:transparent */ margin-bottom: 10px !important; } /* Rij met het e-mailveld + de verzendknop naast elkaar. */ #wpaicb-widget .wpaicb-email-row { display: flex !important; gap: 6px !important; align-items: stretch !important; /* veld en knop even hoog */ } /* Het e-mail-invoerveld (vult de beschikbare breedte). */ #wpaicb-widget .wpaicb-email-input { flex: 1 1 auto !important; min-width: 0 !important; /* mag krimpen i.p.v. uitlopen */ padding: 8px 10px !important; border: 1px solid var(--cb-border, #e5e7eb) !important; border-radius: 8px !important; font-size: 13px !important; line-height: 1.3 !important; font-family: var(--cb-font), system-ui, sans-serif !important; color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; /* tekst gegarandeerd zichtbaar */ background: #ffffff !important; outline: none !important; height: auto !important; } /* Focus: primaire randkleur. */ #wpaicb-widget .wpaicb-email-input:focus { border-color: var(--cb-primary, #2563eb) !important; } /* De verzend-knop van het e-mailformulier (vaste breedte, accent). */ #wpaicb-widget .wpaicb-email-submit { flex: 0 0 auto !important; /* niet groeien/krimpen: vaste maat */ padding: 8px 14px !important; background: var(--cb-primary, #2563eb) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 0 !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important; font-family: var(--cb-font), system-ui, sans-serif !important; cursor: pointer !important; transition: opacity .15s !important; height: auto !important; } /* Hover: knop iets transparanter (subtiele feedback). */ #wpaicb-widget .wpaicb-email-submit:hover { opacity: .9 !important; } /* Disabled: doorzichtiger + verboden-cursor. */ #wpaicb-widget .wpaicb-email-submit:disabled { opacity: .6 !important; cursor: not-allowed !important; } /* "Overslaan"-link onder het formulier (grijze tekstlink). */ #wpaicb-widget .wpaicb-email-skip { display: block !important; margin-top: 8px !important; background: transparent !important; border: 0 !important; color: var(--cb-muted, #6b7280) !important; -webkit-text-fill-color: var(--cb-muted, #6b7280) !important; font-size: 11px !important; text-decoration: underline !important; cursor: pointer !important; padding: 4px 0 !important; font-family: var(--cb-font), system-ui, sans-serif !important; } /* Hover: tekst donkerder. */ #wpaicb-widget .wpaicb-email-skip:hover { color: var(--cb-text, #1a1a1a) !important; } /* Rode foutmelding binnen het e-mailformulier (bv. "ongeldig adres"). */ #wpaicb-widget .wpaicb-email-alert { margin-top: 8px !important; padding: 6px 10px !important; background: #fef2f2 !important; border: 1px solid #fecaca !important; color: #991b1b !important; -webkit-text-fill-color: #991b1b !important; border-radius: 6px !important; font-size: 12px !important; } /* ── Responsive ── Aanpassingen voor smalle schermen (telefoons, <= 480px): de widget en het venster krijgen eigen mobile-offsets/-maten via aparte CSS-vars, met als fallback een (bijna) schermvullend venster. */ /* @media = "pas deze regels alleen toe als de schermbreedte <= 480px is". */ @media (max-width: 480px) { /* v1.4.6: aparte mobile offset CSS-vars (default fallback 16px) zodat beheerder de chatbot kan opschuiven als er bv. een sticky winkelwagen-knop onderaan staat */ /* Op mobiel eigen offsets gebruiken (met 16px als fallback). */ #wpaicb-widget { bottom: var(--cb-offset-y-mobile, 16px); right: var(--cb-offset-x-mobile, 16px); left: auto; } /* Links-variant op mobiel. */ #wpaicb-widget.position-bottom-left { left: var(--cb-offset-x-mobile, 16px); right: auto; } /* v1.4.7: aparte mobile-grootte. CSS-vars met fallback naar calc() (fullscreen). Worden alleen door JS gezet als beheerder een waarde > 0 heeft ingevuld — anders blijft het oude fullscreen-gedrag. */ /* Venster op mobiel: bijna schermvullend (calc rekent met de viewport). */ #wpaicb-window { width: var(--cb-w-mobile, calc(100vw - 32px)); /* breedte = schermbreedte min 32px */ height: var(--cb-h-mobile, calc(100vh - 100px)); /* hoogte = schermhoogte min 100px */ right: 0; bottom: 70px; /* Voorkom overflow buiten viewport bij grote vaste waarden */ max-width: calc(100vw - 32px); /* nooit breder dan het scherm */ max-height: calc(100vh - 80px); /* nooit hoger dan het scherm */ } /* Links-variant van het venster op mobiel. */ #wpaicb-widget.position-bottom-left #wpaicb-window { left: 0; right: auto; } /* Snelkoppelingen op mobiel: iets kleinere ruimte, blijft 2 kolommen. */ .wpaicb-quick-actions { gap: 5px; grid-template-columns: 1fr 1fr; } } /* ═══════════════════════════════════════════════════════════════════════ ── SITE-CSS SHIELD (v1.2.11) ───────────────────────────────────────── Bescherming tegen agressieve theme-CSS die tekst in buttons verbergt via color:transparent, -webkit-text-fill-color, font-size:0, visibility:hidden, opacity:0, etc. Geconstateerd op: dekbedovertrekkenkopen.nl (zonder hover onzichtbaar). ════════════════════════════════════════════════════════════════════════ */ /* Waarom dit "schild"? Een WordPress-plugin draait MIDDENIN de website van de klant. De CSS van dat thema kan per ongeluk (of agressief) elementen in de widget verbergen. De regels hieronder "vechten terug" met !important en zetten kleuren/zichtbaarheid expliciet terug naar de bedoelde waarde. */ /* 1. Universele text-fill kill-switch — voorkomt color:transparent attacks door erover heen `-webkit-text-fill-color: currentColor` te forceren. Geen impact op SVG-iconen (die gebruiken fill, niet text-fill). */ /* "#wpaicb-widget *" = de widget zelf én ALLES erin -> brede vangnet-regel. */ #wpaicb-widget, #wpaicb-widget * { -webkit-text-fill-color: currentColor !important; /* tekst krijgt weer een echte kleur */ -webkit-text-stroke-width: 0 !important; /* geen onzichtbare tekst-omlijning */ } /* 2. Header-knoppen (gesprek wissen / minimize / sluiten) — zorg dat ze altijd zichtbaar zijn met witte tekst op header-achtergrond. */ /* Forceert de header-knoppen terug naar hun bedoelde uiterlijk en grootte. */ #wpaicb-widget .wpaicb-header-btn { color: rgba(255,255,255,.85) !important; opacity: 1 !important; visibility: visible !important; font-size: 14px !important; line-height: 1 !important; display: flex !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; text-indent: 0 !important; text-transform: none !important; background: transparent !important; border: 0 !important; } /* Hover op header-knop ook geforceerd terugzetten. */ #wpaicb-widget .wpaicb-header-btn:hover { background: rgba(255,255,255,.15) !important; color: #ffffff !important; } /* SVG-iconen in de header-knoppen weer zichtbaar maken. */ #wpaicb-widget .wpaicb-header-btn svg { fill: currentColor !important; opacity: 1 !important; visibility: visible !important; } /* 3. "Nieuwe chat starten" link onderaan input-area — moet altijd zichtbaar zijn ook als site `button { color: ... }` overschrijft. */ /* Forceert de "nieuwe chat"-link terug naar een nette, zichtbare tekstlink. */ #wpaicb-widget #wpaicb-new-chat { display: block !important; width: 100% !important; visibility: visible !important; opacity: 1 !important; color: var(--cb-muted, #6b7280) !important; font-size: 12px !important; line-height: 1.4 !important; font-family: var(--cb-font), system-ui, sans-serif !important; font-weight: 500 !important; text-align: center !important; text-decoration: underline !important; text-indent: 0 !important; text-transform: none !important; letter-spacing: normal !important; background: transparent !important; border: 0 !important; padding: 0 0 8px !important; margin: 0 !important; cursor: pointer !important; height: auto !important; min-height: 0 !important; overflow: visible !important; white-space: normal !important; text-shadow: none !important; box-shadow: none !important; } /* Hover-kleur van de "nieuwe chat"-link geforceerd (accent, met fallbacks). */ #wpaicb-widget #wpaicb-new-chat:hover { color: var(--cb-accent, var(--cb-primary, #2563eb)) !important; } /* 4. "Vorige berichten wissen" link onderaan quick-actions */ /* Zelfde "altijd zichtbaar"-behandeling voor de wis-link. */ #wpaicb-widget .wpaicb-clear-hint { display: block !important; width: 100% !important; visibility: visible !important; opacity: 1 !important; color: var(--cb-muted, #6b7280) !important; font-size: 11px !important; line-height: 1.4 !important; font-family: var(--cb-font), system-ui, sans-serif !important; text-align: center !important; text-decoration: underline !important; text-indent: 0 !important; background: transparent !important; border: 0 !important; padding: 6px 0 !important; margin-top: 10px !important; cursor: pointer !important; height: auto !important; overflow: visible !important; white-space: normal !important; } /* 5. Context-chips (quick replies na AI-antwoord) — zelfde defense */ /* Forceert de context-chips terug naar hun nette pil-uiterlijk. */ #wpaicb-widget .context-chip { display: inline-block !important; visibility: visible !important; opacity: 1 !important; color: var(--cb-text, #1a1a1a) !important; background: var(--cb-surface, #ffffff) !important; border: 1px solid var(--cb-border, #e5e7eb) !important; font-size: 12px !important; line-height: 1.3 !important; font-family: var(--cb-font), system-ui, sans-serif !important; font-weight: 500 !important; padding: 7px 14px !important; text-indent: 0 !important; text-transform: none !important; letter-spacing: normal !important; height: auto !important; overflow: visible !important; white-space: normal !important; } /* 6. Send-knop (paper-plane) en mic-knop iconen blijven zichtbaar */ /* Garandeert dat de twee belangrijkste icoon-knoppen niet verdwijnen. */ #wpaicb-widget #wpaicb-send svg, #wpaicb-widget #wpaicb-mic svg { fill: currentColor !important; opacity: 1 !important; visibility: visible !important; display: inline-block !important; } /* 7. Quick-actions hint en wrap visibility */ /* Houdt het hint-zinnetje boven de snelkoppelingen zichtbaar en gecentreerd. */ #wpaicb-widget .wpaicb-qa-hint { display: block !important; visibility: visible !important; opacity: 1 !important; color: var(--cb-muted, #6b7280) !important; font-size: 11px !important; line-height: 1.4 !important; text-align: center !important; font-weight: 500 !important; margin-bottom: 10px !important; } /* 8. Chat-bubbel text — alleen kleur forceren, NIET font-size (font-size: inherit zou de bubbel-tekst laten erven van de body-font van de site, wat resulteerde in vergrootte welkomst-tekst op dekbedovertrekkenkopen.nl). */ /* Lettergrootte/-soort van bubbels vastzetten (niet erven van de site). */ #wpaicb-widget .wpaicb-bubble { font-size: 14px !important; line-height: 1.55 !important; font-family: var(--cb-font), system-ui, sans-serif !important; } /* Bot-bubbel (niet .user): donkere tekstkleur forceren. */ #wpaicb-widget .wpaicb-msg:not(.user) .wpaicb-bubble { color: var(--cb-text, #1a1a1a) !important; -webkit-text-fill-color: var(--cb-text, #1a1a1a) !important; } /* Gebruiker-bubbel: witte tekstkleur forceren (op donkere achtergrond). */ #wpaicb-widget .wpaicb-msg.user .wpaicb-bubble { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* 9. Quick-chip label & icon — HARDCODED kleuren (geen currentColor) omdat site-CSS `color: white !important` op buttons zet, en currentColor die witte kleur dan erft → wit-op-wit. Vereist v1.2.12. */ /* In rust (:not(:hover)): donkere tekst HARD ingesteld i.p.v. currentColor, anders zou een wit-op-knoppen-thema de tekst onleesbaar wit maken. */ #wpaicb-widget .quick-chip:not(:hover) .chip-label, #wpaicb-widget .quick-chip:not(:hover) > span:not(.chip-icon) { color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; } /* Idem voor het icoon-vakje in rust: donker. */ #wpaicb-widget .quick-chip:not(:hover) .chip-icon { color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; } /* Bij hover juist wit (donkere achtergrond) voor label + span + icoon. */ #wpaicb-widget .quick-chip:hover .chip-label, #wpaicb-widget .quick-chip:hover > span:not(.chip-icon), #wpaicb-widget .quick-chip:hover .chip-icon { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ── In-chat "chat wissen?"-bevestiging (vervangt browser-popup) ── Een nette bevestigingskaart binnen de chat met Ja/Nee-knoppen, gebruikt in plaats van de standaard browser-confirm() — dat sluit beter aan op het ontwerp en kan niet door de browser geblokkeerd worden. */ .wpaicb-clear-confirm { margin: 10px 14px; padding: 14px 16px; background: #ffffff; /* witte kaart */ border: 1px solid #e6e9f0; border-radius: 14px; box-shadow: 0 8px 20px -12px rgba(15, 23, 42, .3); /* zachte schaduw -> "zweeft" */ text-align: center; } /* De vraagtekst ("Weet je het zeker?") boven de knoppen. */ .wpaicb-clear-confirm-text { font-size: 14px; font-weight: 600; color: #0f172a; margin-bottom: 12px; } /* De rij met de Ja/Nee-knoppen, gecentreerd. */ .wpaicb-clear-confirm-actions { display: flex; gap: 8px; justify-content: center; } /* Gedeelde stijl voor beide bevestigingsknoppen. */ .wpaicb-clear-confirm-actions button { -webkit-appearance: none; /* standaard browser-knopstijl uitzetten... */ appearance: none; /* ...zodat onze eigen stijl geldt */ border: 0; cursor: pointer; font: inherit; /* lettertype erven van de omgeving */ font-weight: 600; font-size: 13px; padding: 9px 18px; border-radius: 9px; transition: filter .15s ease, background .15s ease; } /* "Ja"-knop: blauw met witte tekst (de bevestigende actie). */ .wpaicb-cc-yes { color: #ffffff; background: #2563eb; } /* Hover: iets feller maken (brightness > 1). */ .wpaicb-cc-yes:hover { filter: brightness(1.08); } /* "Nee"-knop: lichtgrijs (de veilige/annuleer-actie). */ .wpaicb-cc-no { color: #475569; background: #eef2f7; } /* Hover: iets donkerder grijs. */ .wpaicb-cc-no:hover { background: #e2e8f0; }