/* Groepen.nl Chatbot (Mastra) — floating widget v1.2.0 (prefix .gmc-). * Richting (na Kiki-onderzoek): bot-antwoorden vlak op het paneel met mini-avatar, * alleen de gast krijgt een bubbel; geen zware headerbalk; zachte dubbele schaduwen; * frosted paneel; het "huisje met oogjes" als karakter. Palet: groen #0a7d4b, * donker #075c37, wash #e8f4ed, inkt #1c2b23. Typografie erft van de site. */ /* Paneelbreedte op :root en niet op .gmc-root, want de pagina-wegduw-stap zet de * marge op body en die kan een variabele van .gmc-root niet zien. */ :root { /* 480 en niet meer 420 (v1.3.6): de startkaarten en het invoerkader van het * Kayak-model hebben een volle zin op één of twee regels nodig, en op 420 werd elk * kaartlabel drie regels. Alles wat met deze maat rekent staat in var(--gmc-w); * de enige harde getallen die eraan hangen zijn de fotohoogte op de kaarten en * PUSH_MIN in chatbot.js. */ --gmc-w: 480px; } .gmc-root { position: fixed; right: 20px; /* --gmc-onder is wat de vaste balken van de site onderaan bezet houden; zetOnderrand() * in chatbot.js meet dat en zet het op . Zonder die meting (oude cache, JS nog * niet geladen) valt het terug op 0 en staat de knop waar hij altijd stond. Alleen de * knop schuift op: het paneel is zelf fixed van boven tot onder. */ bottom: calc(20px + var(--gmc-onder, 0px)); /* Boven tawk.to (dat rond 1000002-2000000000 zit), anders blokkeert die * bubbel de Sam-launcher rechtsonder. */ z-index: 2147483000; font-family: inherit; font-size: 15px; line-height: 1.55; color: #1c2b23; } .gmc-root *, .gmc-root *::before, .gmc-root *::after { box-sizing: border-box; } /* ------------------------------------------------------------- launcher */ .gmc-launcher { display: flex; align-items: center; gap: 8px; /* Vaste breedte: de pil mag niet meebewegen met de tekstlengte, anders danst * hij bij elk teken dat de typregel erbij zet. 360 en niet 320, want bij 320 * blijft er 234 px tekstruimte over en dat is te weinig: de vaste rusttekst * meet zelf al 239 px, dus die werd afgekapt met puntjes. Nu houdt de langste * regel ruim 30 px over, genoeg marge voor een sitefont dat breder valt dan * het font waarin dit is nagemeten. */ width: min(360px, calc(100vw - 28px)); height: 52px; padding: 0 14px; margin-left: auto; border: 0; border-radius: 999px; background: linear-gradient(160deg, #0d9159, #075c37); color: #fff; cursor: pointer; text-align: left; box-shadow: 0 4px 20px rgba(10, 125, 75, 0.35); transition: transform 0.18s ease, box-shadow 0.18s ease; animation: gmc-pil-glow 3.4s ease-in-out infinite; } .gmc-launcher:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(10, 125, 75, 0.45); } /* Oplichtende rand: één geanimeerde schaduw, geen extra laag. */ @keyframes gmc-pil-glow { 0%, 100% { box-shadow: 0 4px 20px rgba(10, 125, 75, 0.35), 0 0 0 0 rgba(13, 145, 89, 0.45); } 50% { box-shadow: 0 4px 20px rgba(10, 125, 75, 0.35), 0 0 0 6px rgba(13, 145, 89, 0); } } .gmc-launcher-txt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; line-height: 1.2; } /* Knipperend streepje achter de typregel, zodat het als typen leest en niet als * een tekst die stukjes mist. */ .gmc-launcher-txt::after { content: "|"; margin-left: 1px; animation: gmc-caret 1s steps(1) infinite; } @keyframes gmc-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .gmc-ico-spark { flex: none; overflow: visible; /* de gloed van een sterretje mag buiten het icoonkader vallen */ } /* Drie sterretjes die na elkaar oplichten: opschalen, een zachte witte gloed en een * langzame draai. transform-box maakt het midden van ELK pad het draaipunt; zonder * die regel draait alles om de hoek van de SVG en schuiven de sterretjes weg. * De draai loopt van 0 naar 90 graden: een vierpuntig sterretje ziet er op 90 graden * hetzelfde uit als op 0, dus de lus sluit naadloos en er is geen terugsprong. */ .gmc-sp { transform-box: fill-box; transform-origin: center; animation: gmc-twink 3.6s ease-in-out infinite; } .gmc-sp2 { animation-delay: 0.8s; } .gmc-sp3 { animation-delay: 1.6s; } /* De laagste stand blijft ruim zichtbaar (0,7 en niet 0,5): op de groene kopbalk zag een * sterretje in zijn dieptepunt uitgebleekt uit in plaats van rustig. */ @keyframes gmc-twink { 0% { opacity: 0.7; transform: scale(0.88) rotate(0deg); filter: none; } 20% { opacity: 1; transform: scale(1.3) rotate(24deg); filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)); } 48% { opacity: 0.78; transform: scale(0.97) rotate(52deg); filter: none; } 100% { opacity: 0.7; transform: scale(0.88) rotate(90deg); filter: none; } } /* Onder 480 typt magBewegen() niet meer, dus een knipperend streepje achter een * vaste tekst zou suggereren dat er nog iets komt. */ @media (max-width: 480px) { .gmc-launcher-txt::after { content: ""; animation: none; } } /* Knipperende oogjes: het huisje leeft. */ .gmc-eye { transform-box: fill-box; transform-origin: center; animation: gmc-blink-eye 4.4s infinite; } @keyframes gmc-blink-eye { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } } /* Staat er onderaan een vaste balk van de site (op /reserveren de filterbalk, met drie * vergelijk-items 281 van 640 pixels), dan krimpt de knop tot een rondje van 52 bij 52 * rechts. Zo staat hij naast de knoppen van de site in plaats van eroverheen, en op een * pagina die zelf al twee knoppen onderaan heeft is een pil van 360 breed te druk. * De rechterrand blijft precies waar hij was (margin-left: auto in een rechts verankerde * .gmc-root), en dat is een voorwaarde voor de meting: die rekent met een vaste kolom, * anders zou een krimpende knop zijn eigen aanleiding wegmeten en gaan flikkeren. */ .gmc-root.gmc-klein .gmc-launcher { width: 52px; padding: 0; gap: 0; justify-content: center; } /* In het rondje staan de drie sterretjes en NIET het huisje (v1.3.11, keuze Awin): die * sterretjes zijn het teken dat dit de AI-assistent is, en ze bewegen al (gmc-twink), dus * het rondje leeft zonder een tweede animatie. Het huisje zou hier juist als een gewone * site-knop lezen. Verberg je per ongeluk allebei de iconen, dan is het rondje leeg; dat * is wat geval (o) in tests/test-onderrand.php vastlegt. */ .gmc-root.gmc-klein .gmc-launcher-txt, .gmc-root.gmc-klein .gmc-ico-chat { display: none; } /* Iets groter dan in de pil: daar staat het naast tekst, hier vult het als enige een * rondje van 52 en op 22 px oogde dat mager. */ .gmc-root.gmc-klein .gmc-ico-spark { width: 28px; height: 28px; } /* Open = de pil is weg; sluiten gebeurt met de kruisknop in de kop, die dus altijd * zichtbaar moet zijn en niet alleen op mobiel. */ .gmc-root.gmc-open .gmc-launcher { display: none; } /* Legt de site zelf een schermvullende laag over de pagina (op mobiel het menu, en ook een * cookiedialoog), dan stapt onze knop helemaal opzij in plaats van op te schuiven: hij zou * er met zijn z-index bovenop liggen en zo de menu-items onaanklikbaar maken. Optillen helpt * daar niet, want zo'n laag vult het hele scherm. display en niet visibility, want de knop * is de enige inhoud van .gmc-root en anders houdt die lege doos de taps nog steeds tegen. * bedektDoorOverlay() in chatbot.js zet de klasse; tests/test-onderrand.php houdt beide * kanten vast. */ .gmc-root.gmc-bedekt .gmc-launcher { display: none; } .gmc-launcher:focus-visible, .gmc-full:focus-visible, .gmc-hist-btn:focus-visible, .gmc-hist-item:focus-visible, .gmc-hist-nieuw:focus-visible, .gmc-hist-terug:focus-visible, .gmc-close:focus-visible, .gmc-send:focus-visible, .gmc-chip:focus-visible, .gmc-empty-anders:focus-visible, .gmc-compare-btn:focus-visible, .gmc-compare-cta:focus-visible, .gmc-fav-btn:focus-visible, .gmc-fav-cta:focus-visible, .gmc-overzicht-cta:focus-visible { outline: 2px solid #075c37; outline-offset: 2px; } /* --------------------------------------------------------------- paneel */ .gmc-panel { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: var(--gmc-w); display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 0; /* Schaduw naar links: het paneel legt zich over de pagina zolang die niet * weggeduwd wordt. */ box-shadow: -8px 0 40px rgba(10, 30, 20, 0.14), -2px 0 12px rgba(10, 30, 20, 0.06); overflow: hidden; opacity: 0; /* Schuiven, niet schalen: een scale van 0,94 op volle hoogte laat het paneel * gemeten 91 pixels lager beginnen en dat leest als een sprong. */ transform: translateX(100%); visibility: hidden; pointer-events: none; /* visibility krijgt geen looptijd maar een vertraging, en die geldt alleen bij * SLUITEN: dit is de dicht-stand, dus deze regel loopt als de klasse eraf gaat. * Met een looptijd (0.26s) klapt de discrete waarde halverwege om, en dan is het * paneel tijdens het openen nog onzichtbaar en weigert de browser focus() op * alles wat erin zit. Zo blijft het paneel bij sluiten in beeld tot het * uitschuiven klaar is, en is het bij openen meteen focusbaar. */ transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.26s; } .gmc-root.gmc-open .gmc-panel { opacity: 1; transform: translateX(0); visibility: visible; pointer-events: auto; transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; } /* Volledig scherm: dezelfde strook, maar links ook open. */ .gmc-root.gmc-full .gmc-panel { left: 0; width: auto; } /* De WP-adminbalk is fixed en houdt de viewport als anker, dus een paneel met * top:0 dekt hem af. De widget staat live op alleen-beheerders, dus dit is precies * de situatie waarin getest wordt. * * Alleen BOVEN 600px: daaronder zet WordPress de balk op position:absolute en scrollt hij * met de pagina weg. Hield het paneel daar ruimte vrij, dan stond er zodra de gast scrolde * een strook bovenaan waar de site doorheen te zien was (gemeten op een telefoon: eerst 46, * na een halve fix nog 32 pixels). Onder de 601px dus geen marge, het paneel dekt gewoon * het hele scherm. */ @media screen and (min-width: 601px) { body.admin-bar .gmc-panel { top: 32px; } } @media screen and (min-width: 601px) and (max-width: 782px) { body.admin-bar .gmc-panel { top: 46px; } } /* Slanke, transparante kop: alleen merknaam + acties, geen kleurbalk. */ /* Groene balk: dezelfde kleurverloop als de pil, zodat het paneel leest als hetzelfde * ding dat de gast heeft aangeklikt. Wit erin, dus de knoppen krijgen hieronder ook een * witte variant. */ .gmc-head { display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 16px; background: linear-gradient(160deg, #0d9159, #075c37); color: #fff; flex: none; } .gmc-head-spark { flex: none; color: #fff; } /* AI-label achter de naam: de gast moet niet hoeven raden of hij een medewerker spreekt. */ .gmc-ai { display: inline-block; /* Nooit meekrimpen met de naam ernaast: dit label is de reden dat de kop bestaat. */ flex: none; margin-left: 7px; padding: 1px 6px 0; border-radius: 999px; background: rgba(255, 255, 255, 0.24); font-size: 0.72em; font-weight: 700; letter-spacing: 0.08em; vertical-align: 1.5px; } .gmc-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } /* Afkappen in plaats van afbreken: de botnaam is instelbaar in WordPress, dus een lange naam * duwde de kop van 53 naar 85 pixels zodra de gesprekken-knop er een label bij kreeg (DRA-230). * Een kop die per naam van hoogte verspringt is erger dan een naam die eindigt op drie puntjes. * Alleen de NAAM kapt af, nooit het AI-label erachter: daar ziet de gast aan dat hij geen * medewerker spreekt. */ .gmc-head-txt strong { display: flex; align-items: center; min-width: 0; font-size: 0.92em; color: #fff; } .gmc-head-naam { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Alleen de ondertitel: het AI-label staat in de en houdt zijn eigen opmaak. */ .gmc-head-txt > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.76em; color: rgba(255, 255, 255, 0.78); } /* Drie knoppen op de groene balk: zelfde maat, witte inkt, lichte hover. */ .gmc-close, .gmc-full, .gmc-hist-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: rgba(255, 255, 255, 0.85); cursor: pointer; font-size: 1em; transition: background 0.15s, color 0.15s; flex: 0 0 auto; } .gmc-close:hover, .gmc-full:hover, .gmc-hist-btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } /* De gesprekken-knop is een pil MET tekst in plaats van een vierkantje van 30 bij 30: als * kaal klokje vond niemand hem en kostte opnieuw beginnen twee onvindbare klikken (DRA-230). * Gemeten past hij: er is 147px vrij in de kop en deze pil meet 119. De rand staat er ALTIJD * en alleen de kleur wisselt bij hover; een maat die bij :hover verandert liet de kop * verspringen en de knop onder de muis wegglijden (flikkerregel v1.3.7). */ .gmc-hist-btn { width: auto; gap: 6px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, 0.42); font-size: 0.78em; font-weight: 600; white-space: nowrap; } /* Open gesprekken-scherm: de knop blijft ingedrukt staan, anders is niet te zien * waar dit scherm vandaan komt. */ .gmc-root.gmc-hist-aan .gmc-hist-btn { background: rgba(255, 255, 255, 0.26); color: #fff; } /* ---------------------------------------------------- gesprekken-scherm */ /* Vult het paneel onder de kop in plaats van een klein uitklapmenu: op een telefoon is * een menu van 300 px naast de rand niet te raken, en dit is ook wat Kayak doet. */ .gmc-hist-menu { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 2px; background: #fff; } /* `display: flex` hierboven zou het hidden-attribuut overrulen. */ .gmc-hist-menu[hidden] { display: none; } /* Zolang dit scherm open staat is het de enige inhoud van het paneel. */ .gmc-root.gmc-hist-aan .gmc-log, .gmc-root.gmc-hist-aan .gmc-form, .gmc-root.gmc-hist-aan .gmc-intake { display: none; } /* Terugweg naar het lopende gesprek (DRA-230): dit scherm dekt het paneel af en de enige * uitweg was nogmaals dezelfde kopknop. Bewust rustiger dan de knop eronder, want opnieuw * beginnen is waar de gast voor kwam; dit is het vluchtluik. */ .gmc-hist-terug { align-self: flex-start; /* Negatieve linkermarge: de tekst lijnt zo uit met de knop eronder, terwijl de aanraakzone wel groot genoeg blijft voor een duim. */ margin: -4px 0 8px -10px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: #075c37; font-family: inherit; font-size: 0.86em; font-weight: 600; cursor: pointer; transition: background 0.15s; } .gmc-hist-terug:hover { background: #e8f4ed; } /* Volle groene knop over de hele breedte in plaats van een tekstlinkje: dit is de reden dat * de gast dit scherm opent, dus hij moet er als eerste uitspringen. */ .gmc-hist-nieuw { margin-bottom: 18px; padding: 12px 16px; border: 0; border-radius: 12px; background: linear-gradient(160deg, #0d9159, #075c37); color: #fff; font-family: inherit; font-size: 0.95em; font-weight: 700; cursor: pointer; transition: filter 0.15s; } .gmc-hist-nieuw:hover { filter: brightness(1.08); } .gmc-hist-kop { padding: 0 2px 6px; font-size: 0.78em; font-weight: 600; color: #6d7d74; } .gmc-hist-leeg { margin: 0 2px; color: #6d7d74; font-size: 0.86em; max-width: 36ch; } .gmc-hist-item { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 9px 8px; border: 0; border-radius: 9px; background: none; color: #1c2b23; font-family: inherit; text-align: left; cursor: pointer; } .gmc-hist-item:hover { background: #e8f4ed; } .gmc-hist-titel { max-width: 100%; overflow: hidden; font-size: 0.92em; white-space: nowrap; text-overflow: ellipsis; } .gmc-hist-wanneer { font-size: 0.76em; color: #6d7d74; } /* ------------------------------------------------------------------ log */ .gmc-log { flex: 1; overflow-y: auto; padding: 10px 18px 14px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; } /* Welkomststaat in Kayak-vorm (v1.3.6): de sterretjes-illustratie LINKS naast een grote * kop, daaronder een rustige subregel, en onderaan "Aan de slag" met de startkaarten. * * De hoogte van het logvak wordt volledig gevuld en de vrije ruimte gaat naar de twee * `margin-top: auto` hieronder. Die eerste stond op .gmc-hello-face, maar de illustratie * zit nu ÍN .gmc-hello-top, dus hij is naar dat blok verhuisd: de begroeting zakt daarmee * nog steeds naar de bovenruimte. De tweede staat als voorheen op .gmc-empty-kop en duwt * het kopje met de startkaarten naar de onderkant, net boven het invoerveld. Past de * inhoud niet, dan vallen beide marges vanzelf weg en scrollt het gewoon zonder overloop. */ .gmc-hello { display: flex; flex-direction: column; align-items: stretch; text-align: left; min-height: 100%; /* Krappe kop: elke losse pixel hier is er een die de gast moet wegscrollen voor hij de onderste startkaart ziet. Vandaar 10px en niet 14px: de langere introtekst en de regel onder de startkaarten (v1.3.8) kostten samen 42px, en die zijn hier en in de vier maten hieronder weer teruggehaald. */ padding: 10px 2px 8px; animation: gmc-in 0.3s ease both; } /* Illustratie links, kop ernaast; samen het blok dat de bovenruimte pakt. */ .gmc-hello-top { margin-top: auto; display: flex; align-items: center; gap: 14px; } .gmc-hello-face { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(160deg, #0d9159, #075c37); color: #fff; box-shadow: 0 10px 30px rgba(10, 125, 75, 0.3); } /* De blikvanger van het paneel: twee regels, stevig vet, korte regelafstand. Geen em-maat maar 26px, want de kop moet los van de sitefont-grootte deze verhouding houden. */ .gmc-hello-titel { min-width: 0; font-size: 26px; font-weight: 800; line-height: 1.15; color: #1c2b23; } /* De regelafstand staat hier vast op 1,4 en wordt niet van de site geërfd: op een telefoon loopt deze tekst over vijf regels, en de erfelijke 1,55 kostte daar 11 pixels die het leegscherm niet heeft. */ .gmc-hello-sub { margin: 12px 0 0; color: #5d6d64; font-size: 15px; line-height: 1.4; } /* "Aan de slag" links, de tekstknop "Toon meer" rechts. De auto-marge duwt dit kopje en * alles eronder naar de onderkant van het leegscherm. */ .gmc-empty-kop { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .gmc-empty-kop-t { font-size: 15px; font-weight: 700; color: #1c2b23; } /* Vijfde ingang, onder de startkaarten. Streepjesrand in de groene lijnkleur en geen vulling: de vier knoppen erboven zijn kant-en-klare groepen, deze knop start juist de vijf vragen. Die vorm zegt zonder extra tekst dat het een ander soort keuze is. */ /* Dezelfde brede rij als de startkaarten erboven (v1.3.10): met een stippellijn en zonder plaatje las deze knop als een tekstlink en niet als een van de keuzes (feedback Awin). Wat hem apart houdt is nu alleen de achtergrond: doorzichtig met een dunne rand in plaats van het grijze vlak. Zo hoort hij bij de rij zonder als vijfde quick start te lezen. De vorm (flex, padding, hoeken) komt van .gmc-chip-start; hier staat alleen het verschil, want deze regels staan later in het bestand en winnen bij gelijke specificiteit. */ .gmc-empty-anders { /* Extra lucht bovenop de 6px rij-gap: net genoeg om de knop van de vier erboven te scheiden, zonder hem uit de rij te trekken. */ margin-top: 4px; background: transparent; border: 1px solid #d7e4dc; /* De rand kost 1px aan alle kanten; die eraf halen houdt de hoogte gelijk aan de kaarten erboven, die geen rand hebben. */ padding: 9px 13px; color: #075c37; } .gmc-empty-anders:hover { background: #e8f4ed; border-color: #0a7d4b; } /* De twee regels onder elkaar in de tekstkolom; de knop zelf blijft een rij met het icoon ernaast. Zonder deze regel zetten titel en uitleg zich naast elkaar. */ .gmc-empty-anders .gmc-chip-txt { display: flex; flex-direction: column; gap: 2px; } .gmc-empty-anders-t { font-size: 0.9em; } /* Kleiner en grijs: deze regel legt uit wat de knop doet en mag de knoptekst zelf niet beconcurreren. Niet kleiner dan 0,82em en niet lichter dan #5d6d64: dit is de regel die het verschil met de vier knoppen erboven moet dragen, en op #6b7f74 haalde hij met 4,3:1 de contrasteis van 4,5:1 niet. */ .gmc-empty-anders-s { font-size: 0.82em; color: #5d6d64; /* De tekstkolom is vet (.gmc-chip-txt, v1.3.10); die tweede regel moet juist rustig blijven, anders lezen titel en uitleg als twee even belangrijke labels. */ font-weight: 400; } /* Deze knop hoort bij de opgevouwen rest achter "Toon meer". Zonder deze regel zou de `display: flex` hierboven het hidden-attribuut overrulen en stond hij er meteen. */ .gmc-empty-anders[hidden] { display: none; } /* '.gmc-hello p' bestaat niet meer (de intro heet nu .gmc-hello-sub), dus deze regel hoeft niet langer onder .gmc-hello gescoped te staan om ervan te winnen. */ .gmc-empty-note { /* Nul onderaan, want dit is een

en de standaardmarge van de browser zou hier anders een gat van een hele regel onder het leegscherm zetten. */ margin: 12px 0 0; font-size: 12px; color: #6b7f74; } /* ------------------------------------------------------- intake-voortgang */ /* Stand van zaken, geen wizard: welke van de vijf onderwerpen bekend zijn. Bewust * zonder de ingevulde waarden, want intakeBekend is zelfrapportage van het model. */ .gmc-intake { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 9px 18px 7px; /* ruimte tussen de groene balk en de eerste bubbel */ font-size: 11.5px; line-height: 1.4; color: #6b7f74; } .gmc-intake-item { padding: 2px 8px; border: 1px solid #dbe5e0; border-radius: 999px; background: rgba(255, 255, 255, 0.6); } .gmc-intake-ok { border-color: #0a7d4b; background: #e8f4ed; color: #075c37; font-weight: 600; } /* Berichten. Gast = bubbel; bot = vlak op het paneel met meta-regel erboven. */ .gmc-msg { white-space: pre-wrap; word-wrap: break-word; animation: gmc-in 0.22s ease both; } @keyframes gmc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .gmc-user { align-self: flex-end; max-width: 86%; padding: 0.55rem 0.85rem; background: #0a7d4b; color: #fff; border-radius: 16px 16px 4px 16px; } .gmc-turn { align-self: stretch; animation: gmc-in 0.22s ease both; } .gmc-tmeta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .gmc-avatar { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(160deg, #0d9159, #075c37); color: #fff; flex: 0 0 auto; } .gmc-tmeta strong { font-size: 0.78em; font-weight: 600; color: #1c2b23; } .gmc-time { font-size: 0.72em; color: #6d7d74; } /* Leesbaar van jong tot oud: inhoudstekst nooit kleiner dan 15px. */ .gmc-bot { color: #1c2b23; padding-left: 26px; font-size: 15px; line-height: 1.55; } .gmc-bot a { color: #0a7d4b; font-weight: 600; text-decoration: underline; } .gmc-error { color: #b3261e !important; } .gmc-sources { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #e7ede9; font-size: 0.85em; color: #555; } /* Suggestie-chips. */ .gmc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .gmc-chip { background: rgba(255, 255, 255, 0.7); border: 1px solid #bcd9c9; color: #075c37; border-radius: 16px; padding: 7px 13px; font-size: 0.9em; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s; /* Vangnet op een lang label: zonder '::' wordt de volle vraag de knoptekst (terugval op een oud antwoord), en die mag het paneel niet oprekken. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gmc-chip:hover { background: #e8f4ed; border-color: #0a7d4b; } /* Startkaarten van het leegscherm ("Aan de slag"). Ze staan hier en niet bij .gmc-hello, want het zijn varianten van .gmc-chip met dezelfde specificiteit (één klasse): stonden ze eerder in het bestand, dan won de basis-chip en werden ze weer smalle pilletjes. */ .gmc-chips-start { margin-top: 10px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; } /* Volle breedte, licht grijs vlak, de emoji in een eigen kolom links. */ .gmc-chip-start { display: flex; align-items: center; gap: 12px; width: 100%; /* 10px en niet 12px: dat scheelt 16 pixels over de vier kaarten, en een kaart van één regel blijft 40px hoog over de volle breedte van het paneel. Veel meer dan de 24px die WCAG 2.2 AA als vingerdoel vraagt, dus daar is ruimte voor. */ padding: 10px 14px; border: 0; border-radius: 12px; background: #f1f5f2; color: #1c2b23; font-family: inherit; font-size: inherit; text-align: left; cursor: pointer; transition: background 0.15s; /* De basis-chip kapt af met puntjes; een volle vraag als label moet hier juist over twee regels kunnen wikkelen, dus die drie eigenschappen gaan er weer af. */ max-width: none; overflow: visible; text-overflow: clip; white-space: normal; } .gmc-chip-start:hover { background: #e4ebe6; } .gmc-chip-emoji { flex: none; font-size: 18px; line-height: 1; /* Vaste kolom, zodat alle labels in de rij op dezelfde plek beginnen: een emoji is bijna vierkant, een lijnicoon is dat niet (fa-euro-sign is smal, fa-people-roof breed). */ width: 20px; text-align: center; } /* Het lijnicoon van de site (Font Awesome, zie zetIcoon in chatbot.js). Iets kleiner dan de emoji die het vervangt: een solid-icoon op 18px oogt zwaarder dan de tekst ernaast. De kleur is die van de knop zelf, dus het icoon volgt vanzelf de hover en de aan-stand. */ .gmc-chip-emoji .fa-solid { font-size: 15px; color: #0a7d4b; } .gmc-chip-txt { min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; } /* Denken/zoeken: stipjes in de antwoordflow; pas na 10s een regeltje tekst. */ .gmc-typing { display: inline-flex; gap: 4px; align-items: center; min-height: 1em; padding-top: 2px; } .gmc-typing span { width: 6px; height: 6px; border-radius: 50%; background: #0a7d4b; animation: gmc-blink 1.2s infinite both; } .gmc-typing span:nth-child(2) { animation-delay: 0.2s; } .gmc-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes gmc-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } } /* "Aan het denken" met daaronder de stap die nu loopt. Staat in het tekstvak van de beurt * en verdwijnt daardoor zichzelf zodra de typemachine het eerste woord schrijft. */ .gmc-denk { display: flex; flex-direction: column; gap: 2px; } .gmc-denk-kop { font-size: 0.94em; font-weight: 600; color: #4a6155; } /* Drie stippen die na elkaar oplichten: dit is tegelijk de laadindicatie, dus er staat * nooit een kopje zonder beweging eronder. */ .gmc-denk-kop i { font-style: normal; animation: gmc-denk-punt 1.4s ease-in-out infinite; } .gmc-denk-kop i:nth-child(2) { animation-delay: 0.2s; } .gmc-denk-kop i:nth-child(3) { animation-delay: 0.4s; } @keyframes gmc-denk-punt { 0%, 65%, 100% { opacity: 0.25; } 30% { opacity: 1; } } .gmc-denk-regel { display: flex; align-items: center; gap: 7px; font-size: 0.86em; color: #6d7d74; } /* Draaiend rondje vóór de statusregel. */ .gmc-denk-regel::before { content: ""; flex: none; width: 12px; height: 12px; border: 2px solid #cfe0d6; border-top-color: #0a7d4b; border-radius: 50%; animation: gmc-draai 0.7s linear infinite; } @keyframes gmc-draai { to { transform: rotate(360deg); } } /* --------------------------------------------------------------- kaarten */ .gmc-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } /* De afsluiter met de vervolgvraag staat ONDER het kaartenblok, tegen de knoppen in de suggestiestrook aan. Dezelfde afstand als boven het blok, zodat het antwoord één geheel blijft en de vraag niet aan de kaarten vastplakt. */ .gmc-na-kaarten { margin-top: 10px; } .gmc-bot a.gmc-card { text-decoration: none; color: inherit; } /* Foto boven, tekst onder (net als in de mockup): de foto krijgt de volle * kaartbreedte, dus geen `gap` meer, die zou een streep onder de foto trekken. */ .gmc-card { display: flex; flex-direction: column; border: 1px solid #e7ede9; border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s; animation: gmc-in 0.28s ease both; /* met per-kaart animationDelay uit de JS */ } .gmc-card:hover { box-shadow: 0 4px 16px rgba(10, 30, 20, 0.12); border-color: #0a7d4b; transform: translateY(-1px); } /* Vaste hoogte, want in een kolom heeft de foto geen rij meer om zich aan te * rekken. Met een paneel van 480 px is de kaart ongeveer 440 px breed, en 160 px * (was 140 bij een paneel van 420) houdt daar dezelfde liggende uitsnede aan * zonder dat er minder kaarten in beeld passen. */ .gmc-card-thumb { height: 160px; flex: none; background: #eef2ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a7d4b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.35'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5 10.5V20h14v-9.5'/%3E%3C/svg%3E") center / 30px no-repeat; } .gmc-card-geen-foto { height: 74px; } .gmc-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Fotoslider: meerdere foto's naast elkaar, één per keer in beeld. Swipen en scroll-snap doet de browser zelf; autoSlide() in chatbot.js schuift 'm door. overscroll-behavior voorkomt dat een swipe de pagina of de browser-back meeneemt. */ .gmc-card-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } .gmc-card-slider::-webkit-scrollbar { display: none; } .gmc-card-slider img { flex: 0 0 100%; scroll-snap-align: start; } .gmc-card-body { flex: 1; min-width: 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; } .gmc-card-title { font-weight: 600; color: #0a7d4b; } .gmc-card-meta { font-size: 0.85em; color: #444; } .gmc-card-free { font-size: 0.8em; color: #666; } .gmc-card-foot { display: flex; align-items: center; flex-wrap: wrap; /* Aanvragen + Vergelijk + hartje: lange labels mogen afbreken */ gap: 10px; margin-top: 4px; } .gmc-card-btn { font-size: 0.8em; font-weight: 600; color: #0a7d4b; } /* Vergelijker-koppeling (DRA-167): toggle-knop op de kaart + CTA onder het blok. */ .gmc-compare-btn { background: rgba(255, 255, 255, 0.7); border: 1px solid #bcd9c9; color: #075c37; border-radius: 12px; padding: 4px 10px; font-size: 0.78em; font-weight: 600; line-height: 1.4; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; } .gmc-compare-btn:hover { background: #e8f4ed; border-color: #0a7d4b; } .gmc-compare-btn.gmc-on { background: #0a7d4b; border-color: #0a7d4b; color: #fff; } .gmc-compare-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .gmc-bot a.gmc-compare-cta { padding: 7px 13px; border: 1px solid #0a7d4b; border-radius: 16px; background: #fff; color: #075c37; font-size: 0.9em; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s; } .gmc-bot a.gmc-compare-cta:hover { background: #0a7d4b; color: #fff; } /* Favorieten (DRA-171): hartje op de kaart + link naar /favorieten. */ .gmc-fav-btn { background: rgba(255, 255, 255, 0.7); border: 1px solid #bcd9c9; color: #0a7d4b; border-radius: 12px; padding: 3px 9px; font-size: 0.95em; line-height: 1.2; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s, color 0.15s; } .gmc-fav-btn:hover { background: #e8f4ed; border-color: #0a7d4b; } .gmc-fav-btn.gmc-on { background: #0a7d4b; border-color: #0a7d4b; color: #fff; } .gmc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Knop naar het aanbodoverzicht (DRA-229): zelfde pil als de andere twee CTA's, want het is dezelfde soort actie. In de praktijk staat hij er meestal alleen: vergelijken en favorieten verbergen zichzelf zolang die lijsten leeg zijn. */ .gmc-bot a.gmc-fav-cta, .gmc-bot a.gmc-overzicht-cta { padding: 7px 13px; border: 1px solid #0a7d4b; border-radius: 16px; background: #fff; color: #075c37; font-size: 0.9em; font-weight: 600; text-decoration: none; transition: background 0.15s, color 0.15s; } .gmc-bot a.gmc-fav-cta:hover, .gmc-bot a.gmc-overzicht-cta:hover { background: #0a7d4b; color: #fff; } .gmc-compare-clear { background: none; border: 0; padding: 4px 2px; color: #5c6b63; font-family: inherit; font-size: 0.82em; font-weight: 600; text-decoration: underline; cursor: pointer; } .gmc-compare-clear:hover { color: #075c37; } /* Beschikbaarheids-check: bezette opties blijven zichtbaar maar duidelijk gedimd. */ .gmc-card-uit { opacity: 0.55; } .gmc-card-uit .gmc-card-thumb { filter: grayscale(1); } .gmc-card-uit .gmc-card-free { color: #a33; font-weight: 600; } /* ------------------------------------------------- suggestierij in de beurt */ /* De knoppenrij staat sinds v1.3.10 weer ONDER het antwoord waar hij bij hoort (DRA-225). * Tussen v1.3.6 en v1.3.9 hing hij in een vaste strook boven het invoerkader; die stond * altijd op dezelfde plek, maar bij een kort antwoord gaapte er een half scherm tussen de * vraag en de knoppen die hem beantwoorden. Hier is geen hoogtegrens meer nodig: het * gespreksvenster scrolt zelf, dus de rij kan het invoerkader niet meer wegduwen. */ .gmc-chips-blok { margin-top: 10px; } /* De rij zit al in een blok met ruimte erboven; een tweede marge maakt er een gat van. */ .gmc-chips-blok > .gmc-chips { margin-top: 0; } .gmc-chips-blok .gmc-chip { flex: 0 0 auto; } /* Het vierkantje rechts op een wensenknop (DRA-227): alleen daar mag de gast er meerdere * aanvinken. margin-left: auto duwt hem tegen de rechterrand zonder de tekstkolom aan te * raken. Precies 24 bij 24, de vingerdoel-ondergrens van WCAG 2.5.8, en niet minder: het * vierkantje houdt de klik bij zich (stopPropagation), dus de ruimte ernaast hoort bij de rij * en verstuurt juist. De aanraakzone is dus exact dit vierkantje en niets meer. */ .gmc-chip-vink { flex: none; margin-left: auto; width: 24px; height: 24px; border: 2px solid #b6c8bd; border-radius: 6px; background: #fff; box-sizing: border-box; } .gmc-chip-vink::after { content: "✓"; display: block; color: #fff; font-size: 13px; font-weight: 700; /* Gelijk aan de binnenmaat van het vierkantje (24 min tweemaal de rand van 2), anders staat het vinkje niet gecentreerd. */ line-height: 20px; text-align: center; /* Het vinkje bestaat altijd, maar is onzichtbaar tot de knop aanstaat: zo springt de rij niet van hoogte op het moment dat de gast hem aantikt. */ opacity: 0; } .gmc-chip-aan { background: #e2f0e8; box-shadow: inset 0 0 0 1px #0a7d4b; } /* Zonder deze regel wint .gmc-chip-start:hover en verliest een aangevinkte rij zijn kleur zodra de muis erop staat. Alleen de kleur verandert: geen enkele maat mag aan :hover hangen, dat gaf in v1.3.6 een eindeloze flikkering. */ .gmc-chip-aan:hover { background: #d5e9de; } .gmc-chip-aan .gmc-chip-vink { background: #0a7d4b; border-color: #0a7d4b; } .gmc-chip-aan .gmc-chip-vink::after { opacity: 1; } /* Verschijnt pas zodra er iets aanstaat. Plakt onderaan de schuivende strook, anders staat hij onder de laatste rij en dus buiten beeld precies wanneer je hem nodig hebt. */ .gmc-chip-verstuur { position: sticky; bottom: 0; flex: none; border: 0; border-radius: 10px; padding: 10px 14px; background: #0a7d4b; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .gmc-chip-verstuur[hidden] { display: none; } /* Uitgeschakeld zolang er niets is aangevinkt. Hij BLIJFT staan (v1.3.13): hij is de enige * uitgang van een meerkeuzevraag, en een knop die pas verschijnt nadat je iets aanvinkt * leert de gast niet dat hij bestaat. Grijs met dezelfde maten, zodat de rij niet verspringt * op het moment dat de eerste wens wordt aangevinkt. */ /* Een suggestieknop die niet meer kan (v1.3.13): 'Geen speciale wensen' zodra er een echte * wens aanstaat, en andersom. Doorzichtig in plaats van weg, want een knop die verdwijnt * laat de rij verspringen onder de vinger van de gast. */ .gmc-chip-start:disabled { opacity: 0.45; cursor: default; } .gmc-chip-verstuur:disabled { background: #e3eae6; color: #6b7a72; cursor: default; } .gmc-chip-verstuur:hover:not(:disabled) { background: #086b41; } /* De datumkiezer onder de suggestieknoppen (DRA-235): twee native datumvelden naast elkaar met de verstuurknop eronder. Native betekent dat de kalender zelf van het systeem komt en dus nooit buiten het paneel valt; wat we hier opmaken is alleen het kader eromheen. */ .gmc-datums { display: grid; /* ALTIJD onder elkaar, op elk apparaat (keuze Awin 2026-08-14). Hier stond auto-fit met een minimum van 150px, en dat brak precies op de maten die niemand test: een iPhone van 393 breed heeft na de marges 329px over en zet ze dus naast elkaar, een Chrome-venster van 360 zet ze eronder. Dezelfde widget zag er op twee telefoons dus anders uit, en de smalle variant was de betere. Onder elkaar is bovendien wat de knoppen erboven ook doen: volle breedte per regel. */ grid-template-columns: 1fr; gap: 10px 8px; /* Meer lucht dan tussen twee knoppen: dit is geen vijfde keuze in de rij maar het blok dat erachter opengaat, en op een telefoon liepen die twee in elkaar over (melding Awin 2026-08-14, met schermafdruk). */ margin-top: 10px; /* Even breed als de tekst op een knop erboven (die heeft padding 10px 14px), zodat de labels in één lijn staan met de knoptekst en het blok niet verschoven lijkt. */ padding: 12px 14px; border-radius: 12px; /* WIT met een rand, niet hetzelfde grijs als de knoppen. Op dat grijs was dit blok niet van de keuzeknoppen te onderscheiden, terwijl het iets heel anders is: hier vul je zelf iets in. De velden zijn daarom juist grijs, dus omgekeerd aan de knoppen erboven. */ border: 1px solid #d7e3dc; background: #fff; } .gmc-datums .gmc-chip-verstuur { grid-column: 1 / -1; position: static; /* Los van de velden erboven: zonder deze regel plakt de groene balk tegen de vakken aan en wordt het blok één zware klomp. */ margin-top: 2px; } .gmc-datum-veld { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .gmc-datum-kop { font-size: 12px; font-weight: 600; /* Iets lichter dan de tekst in het veld eronder: het label is de aanduiding, de datum is het antwoord. */ color: #5b6f65; } /* Het vak waarin het datumveld en onze eigen tekst over elkaar liggen. */ .gmc-datum-vak { position: relative; display: block; } .gmc-datum-inp { width: 100%; box-sizing: border-box; /* 44 en niet 40: dat is de maat die Apple en WCAG als vingerdoel aanhouden, en het maakt het vak even hoog als een knop in de rij erboven. */ min-height: 44px; padding: 9px 12px; border: 1px solid #cbd8d0; border-radius: 10px; background: #f6f9f7; color: #1c2b23; font-family: inherit; /* 16px en niet kleiner: onder die maat zoomt Safari op iOS het hele paneel in zodra het veld de aandacht krijgt, en dan staat de chat scheef. */ font-size: 16px; /* Op iOS zet Safari de datum in het midden van het vak; links uitgelijnd staat hij onder zijn eigen label en leest de rij als een formulier in plaats van als twee losse blokjes. */ text-align: left; /* Zonder dit legt iOS zijn eigen maten over het vak heen: eigen binnenmarges, een eigen hoogte en de waarde niet op de plek waar wij hem neerzetten. Nagemeten in echt WebKit. */ -webkit-appearance: none; appearance: none; } /* Onzichtbare inkt in het veld, zodat er nooit twee datums in hetzelfde vak staan: die van de browser en die van ons. Alleen als wij de tekst ook echt overnemen (zie datumVeld): kent de browser 'date' niet, dan is dit een tekstvak en moet je je eigen letters juist wél zien. Twee eigenschappen, geen luxe: op WebKit is 'color' op een invoerveld niet genoeg. */ .gmc-datum-eigen .gmc-datum-inp { color: transparent; -webkit-text-fill-color: transparent; } /* Waar de browser het toestaat het hele datumhokje weghalen in plaats van alleen de inkt: dan licht er ook geen dagvakje op onder onze tekst als het veld de aandacht heeft. De regel erboven blijft nodig, want Firefox kent dit hokje niet. Het kalender-icoontje van Chrome is een ander hokje en blijft dus staan. */ .gmc-datum-eigen .gmc-datum-inp::-webkit-datetime-edit { visibility: hidden; } .gmc-datum-tekst { position: absolute; top: 0; bottom: 0; left: 12px; /* Rechts meer ruimte: daar zet Chrome zijn kalender-icoontje, en daar mag onze tekst niet onder schuiven. Op iOS staat daar niets en is die ruimte onzichtbaar. */ right: 34px; display: flex; align-items: center; /* De tikken horen bij het veld eronder, niet bij deze tekst. */ pointer-events: none; font-size: 16px; font-weight: 600; color: #1c2b23; white-space: nowrap; overflow: hidden; } /* Nog niets gekozen: lichter en zonder nadruk, zoals de grijze tekst in het invoerveld. Niet lichter dan dit, want het is de enige aanwijzing dat je hier iets moet kiezen (4,6:1 op het grijs van het vak). */ .gmc-datum-leeg .gmc-datum-tekst { font-weight: 400; color: #62746a; } /* Waarom de verstuurknop uit staat. Staat er alleen zolang dat zo is: een grijze knop zonder uitleg leest als een kapotte kiezer (melding Awin 2026-08-12). Bewust geen rood alarm, want het is een aanwijzing en geen fout van de gast. */ .gmc-datum-hint { grid-column: 1 / -1; margin: -2px 0 0; font-size: 12px; line-height: 1.3; color: #3f5148; } .gmc-datum-inp:focus-visible { outline: 2px solid #0a7d4b; outline-offset: 1px; } /* "Of typ hieronder je eigen antwoord": staat onder ELKE knoppenrij, want die knoppen zijn * suggesties en geen keuzemenu (eis van de klant). Klein en grijs, maar wél een gewone zin: * de kapitalen schreeuwden (wens klant, v1.3.9). Iets kleiner en zwaarder dan de * AI-disclaimer op het leegscherm, zodat het een label bij de rij erboven blijft en niet als * tweede voetnoot naast die disclaimer gaat lezen. */ .gmc-eigen-hint { margin: 6px 0 0; font-size: 11px; font-weight: 600; line-height: 1.25; /* Niet lichter dan #5d6d64: op #6b7f74 haalde deze regel met 3,9:1 op de strook de contrasteis van 4,5:1 niet, en 11px vet telt niet als grote tekst. Dit is dezelfde kleur als .gmc-empty-anders-s, die om precies dezelfde reden donkerder werd. */ color: #5d6d64; } /* Op het leegscherm komt de regel tussen de startkaarten en de AI-disclaimer te staan. Die twee grijze regels gaan anders als één voetnotenblok lezen, dus de regel hoort dichter bij de knoppen waar hij over gaat (6px boven) dan bij de disclaimer eronder (8px). Krapper dan de 12px die de disclaimer eerst had, want het leegscherm paste op een telefoon precies en een extra regel duwt de laatste zin anders half uit beeld. */ .gmc-eigen-hint + .gmc-empty-note { margin-top: 8px; } /* ---------------------------------------------------------------- invoer */ .gmc-form { flex: none; padding: 10px 14px 14px; } /* Kayak-vorm: een duidelijk kader met een stevige donkere rand waar de tekst bovenin * staat en de ronde verzendknop rechtsonder in het kader zelf hangt. */ .gmc-inputbox { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px 8px 12px; border: 2px solid #1c2b23; border-radius: 14px; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; } /* Nadruk op het hele kader in plaats van een outline om de textarea: die zou binnen de * 2px-rand vallen en er als een tweede kader uitzien. Daarom staat .gmc-input ook niet * meer in de focus-visible-groep bovenaan dit bestand. */ .gmc-inputbox:focus-within { border-color: #0a7d4b; box-shadow: 0 0 0 3px rgba(10, 125, 75, 0.14); } /* Een textarea, geen input: Enter verstuurt, Shift+Enter maakt een nieuwe regel, en de * hoogte groeit mee met de tekst. De JS zet die hoogte (op scrollHeight), deze regels * zetten alleen de grenzen: min = één regel, max = ongeveer vier regels en daarna scrollt * de textarea zelf. Zonder de vaste line-height hier zou de JS met een andere regelhoogte * rekenen dan de browser tekent. */ .gmc-input { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: #1c2b23; /* 16px en niet kleiner, om dezelfde reden als bij .gmc-datum-inp (DRA-244): onder die * maat zoomt Safari op iOS het hele paneel in zodra het veld de aandacht krijgt. Het * paneel is fixed en dus zo breed als de LAYOUT-viewport, maar je ziet er na het inzoomen * maar een deel van: de kop valt boven weg, de gastbubbels lopen rechts buiten beeld en * je kunt zijwaarts pannen. Ook op iPad, dus niet op een breekpunt scopen. */ font-size: 16px; font-family: inherit; line-height: 1.45; resize: none; overflow-y: auto; /* Altijd twee regels hoog, ook leeg. Dat is bewust vaste ruimte: het kader mag niet * groeien zodra er tekst in komt, want dan schuift alles erboven omhoog en springt de * knoppenrij onder de muis weg. */ min-height: calc(16px * 1.45 * 2); max-height: calc(16px * 1.45 * 4); } .gmc-input:focus { outline: none; } .gmc-input::placeholder { color: #9aa8a0; /* De meelopende tekst moet wikkelen op een smal scherm, niet afgekapt worden. */ white-space: pre-wrap; opacity: 1; } .gmc-inputrow { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } /* Twee standen. Rust (leeg veld): gedempt grijs met een grijze pijl, zodat het kader zelf * de aandacht houdt. Actief (getypte tekst): onze groene vulling met een witte pijl. */ .gmc-send { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #e7ede9; color: #8a998f; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s; flex: 0 0 auto; } .gmc-send:hover { background: #dbe5e0; transform: scale(1.05); } .gmc-inputbox.gmc-heeft-tekst .gmc-send { background: #0a7d4b; color: #fff; } /* Twee klassen diep, want de actief-stand hierboven is specifieker dan een losse * :hover en zou die anders overrulen. */ .gmc-inputbox.gmc-heeft-tekst .gmc-send:hover { background: #075c37; } /* Tijdens het streamen is dit de stopknop: die moet altijd actief staan, ook bij een * leeg veld. */ .gmc-root.gmc-busy .gmc-send { background: #0a7d4b; color: #fff; } .gmc-send:disabled { background: #bcd9c9; color: #fff; cursor: not-allowed; transform: none; } /* Tijdens het streamen wordt de verstuurknop een stopknop (vierkant icoon). */ .gmc-send .gmc-ico-stop { display: none; } .gmc-root.gmc-busy .gmc-send .gmc-ico-send { display: none; } .gmc-root.gmc-busy .gmc-send .gmc-ico-stop { display: block; } /* ------------------------------------------- pagina wegduwen (alleen boven 1520) */ /* De klasse zit op html en de marge op body: zo blijft de variabele --gmc-vw op * dezelfde knoop als de klasse en kan een plugin die body-klassen schrijft er niet * tussen komen. Geen transform op body of een wrapper: dan verliest élk fixed * element (de site-kop, de cookiebanner, tawk.to én ons eigen paneel) zijn * viewport-anker. Gemeten: de kop sprong van top 32 naar 204. */ :root.gmc-push body { margin-right: var(--gmc-w); } /* De overgang hangt aan een APARTE klasse die alleen bij een handeling van de gast * meekomt. Stond hij bij de marge, dan animeerde ook het herstel na een paginawissel: * de nieuwe pagina werd op volle breedte getekend en schoof daarna zichtbaar 420 naar * links (gemeten first paint 136 ms, marge pas op 420 bij 388 ms, layout-shift 0,13 * zonder gebruikersactie, dus vol meetellend voor CLS). Niet op gmc-push scopen, want * bij het sluiten moet de marge ook terug kunnen glijden. */ :root.gmc-schuif body { transition: margin-right 0.26s cubic-bezier(0.22, 1, 0.36, 1); } /* De site-kop is fixed met left/right 0 en krimpt dus niet mee: zonder deze regel * ligt de rechterkant van het menu (inclusief de boek-knop) onder het paneel en is * die niet aanklikbaar. .fixed-top is themacode waar wij geen afspraak over hebben: * hernoemt het thema die klasse, dan valt deze override stil weg. */ :root.gmc-push .fixed-top { right: var(--gmc-w); } /* Full-bleed secties rekenen met 100vw en -50vw, en dat is altijd de hele viewport, * ook als body smaller wordt. Herrekenen op de echte beschikbare breedte. */ :root.gmc-push .width-100 { width: calc(var(--gmc-vw) - var(--gmc-w)); margin-left: calc((var(--gmc-vw) - var(--gmc-w)) / -2); } /* Onze eigen vergelijkerbalk op /reserveren is ook fixed over de volle breedte. * Die zit in de plugin groepen-vergelijker, buiten deze repo. */ :root.gmc-push #groepenCompareBar { right: var(--gmc-w); } /* --------------------------------------------------------------- mobiel */ @media (max-width: 767px) { :root { --gmc-w: 100vw; } .gmc-root { right: 14px; bottom: calc(14px + var(--gmc-onder, 0px)); } .gmc-panel { left: 0; width: 100%; } /* Het paneel is hier al schermvullend, dus de knop verandert niets. Hij meldde wel een * andere stand (aria-pressed), en dan kondigt hulpsoftware iets aan wat niet bestaat. */ .gmc-full { display: none; } /* Eén balk in plaats van een blok (wens Awin 2026-08-17). Op de desktop staat de * verzendknop ONDER het veld en is het veld altijd twee regels hoog: samen ongeveer * honderd pixels. Op een telefoon is dat te veel, want met een open toetsenbord is er * maar zo'n 395 pixels over voor het hele paneel. Hier dus de knop ERNAAST en het veld * één regel hoog in rust. Groeien doet hij nog steeds: groeiInput() zet de hoogte op de * echte teksthoogte, dus zodra de tekst over de regel loopt wordt de balk hoger, tot de * vier regels van INPUT_MAX_H. De reden dat het veld op desktop vaste ruimte houdt (het * kader mag niet onder de muis weggroeien) geldt hier niet: er hangt geen muis boven. */ .gmc-inputbox { flex-direction: row; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 12px; } .gmc-input { /* De textarea vult de rest van de balk; zonder deze twee kiest hij zijn eigen breedte * en schuift de knop het kader uit. */ flex: 1 1 auto; width: auto; min-height: calc(16px * 1.45); /* De regel optisch op de hoogte van het hart van de ronde knop leggen. */ padding-bottom: 7px; } .gmc-inputrow { flex: 0 0 auto; } /* Op 360 px past de naam niet meer naast de gesprekken-knop mét label (gemeten: 168 nodig, * 155 over) en werd hij afgekapt. De sterretjes zijn versiering; het AI-label achter de * naam is dat niet. Juist op een telefoon is die knop het hardst nodig, dus die houdt zijn * label en de sterretjes gaan eruit. Met de krappere marges hieronder past de * standaardnaam precies; een langere ingestelde naam kapt netjes af in plaats van de kop * op twee regels te duwen. */ .gmc-head-spark { display: none; } .gmc-head { gap: 8px; padding-left: 12px; padding-right: 10px; } .gmc-hist-btn { padding: 0 9px; } } /* In volledig scherm loopt een antwoord anders over de hele breedte: op 1440 pixels werd * dat een regel van ruim 140 tekens, tegen de 45 tot 90 die goed leesbaar is. De strook * blijft even breed, alleen de inhoud houdt leeswijdte. */ .gmc-root.gmc-full .gmc-log, .gmc-root.gmc-full .gmc-form { max-width: 780px; margin-left: auto; margin-right: auto; width: 100%; } /* Met de foto boven de tekst zou één kaart per regel op leeswijdte een foto van * ruim 700 bij 140 pixels geven, oftewel een strook. Twee kaarten naast elkaar * houden dezelfde verhouding als in het smalle paneel. Alleen boven 767 px, want * daaronder is het paneel schermvullend en past er maar één kaart. */ @media (min-width: 768px) { .gmc-root.gmc-full .gmc-cards { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } .gmc-root.gmc-full .gmc-actions { grid-column: 1 / -1; } } /* --------------------------------------------------- toegankelijkheid */ @media (prefers-reduced-motion: reduce) { .gmc-panel, .gmc-launcher, .gmc-msg, .gmc-turn, .gmc-hello, .gmc-card, .gmc-send, .gmc-chip-start, .gmc-inputbox, .gmc-input { transition: none; animation: none; } .gmc-typing span, .gmc-eye, .gmc-launcher-txt::after, .gmc-denk-kop i, .gmc-denk-regel::before, .gmc-sp { animation: none; } /* Zonder beweging moeten de stippen zichtbaar blijven, anders leest er "Aan het * denken" met drie bijna onzichtbare stippen erachter. */ .gmc-denk-kop i { opacity: 0.6; } .gmc-launcher-txt::after { content: ""; } .gmc-typing span { opacity: 0.6; } /* Zonder deze regel schuift de HELE pagina geanimeerd weg bij het openen. */ :root.gmc-schuif body { transition: none; } } /* Onderhoudsbalk: de backend is even weg (deploy). Boven het invoerveld en niet in de * log, want hij hoort bij wat de gast NU kan doen (namelijk niets typen) en niet bij het * gesprek dat er staat. Amber en niet rood: er is niets stuk, het duurt alleen even. */ .gmc-onderhoud { margin: 0 14px 8px; padding: 9px 12px; border: 1px solid #f0d28a; border-radius: 10px; background: #fdf6e3; color: #6b4f12; font-size: 13px; line-height: 1.45; } .gmc-root.gmc-hist-aan .gmc-onderhoud { display: none; } /* Het invoerveld staat uit zolang de balk er is; zonder dit ziet het er gewoon * beschikbaar uit en blijft een gast typen. */ .gmc-input:disabled { background: transparent; cursor: not-allowed; opacity: 0.55; } .gmc-send:disabled { opacity: 0.4; cursor: not-allowed; }