/* Selectly · de spraakbol: het chat- en spreekpaneel van de site (vervangt de oude chatwidget).
   Recept 15-spraakbol-recept.md + studie _studie/spraakbol. Tokens uit ui/merk.css. */
@property --bol-hoek{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{--lv:0}

/* lanceerknop: het beeldmerk zelf */
.bol-lanceer{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:70;
  display:flex;align-items:center;gap:12px;padding:6px 20px 6px 6px;border:0;border-radius:999px;cursor:pointer;color:var(--tekst);font-family:var(--font-tekst);
  background:rgba(10,9,8,.8);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 18px 50px -12px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.08),0 0 40px -12px rgba(var(--goud-rgb),var(--gloed-goud));
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.bol-lanceer:hover{transform:translateY(-3px)}
.bol-lanceer:focus-visible{outline:1.5px solid var(--goud);outline-offset:3px}
.bol-lanceer.weg{opacity:0;pointer-events:none;transform:translateY(16px) scale(.9)}
.bol-lanceer .bol-mini{width:44px;height:44px;border-radius:50%;background:var(--beeldmerk) center/76% no-repeat,radial-gradient(circle,rgba(var(--goud-rgb),.18),transparent 70%);
  filter:drop-shadow(0 0 12px rgba(var(--goud-rgb),var(--gloed-goud)));animation:bol-adem 3.2s ease-in-out infinite}
.bol-lanceer b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;text-align:left}
.bol-lanceer small{display:block;font:500 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-2);margin-top:3px;text-align:left}
@keyframes bol-adem{50%{transform:scale(1.06) rotate(4deg)}}
body.sl-consent-open .bol-lanceer{bottom:150px}
/* voet in beeld: de knop krimpt tot de S (zoals bij de rekenbalk op /pakketten) */
body.voet-zicht .bol-lanceer{padding:6px}
body.voet-zicht .bol-lanceer > span:last-child{display:none}
body.voet-zicht .bol-ballon{display:none}

/* paneel */
.bol-paneel{position:fixed;z-index:10001;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
  width:min(430px,100vw - 32px);height:min(780px,100dvh - 32px);border-radius:30px;overflow:clip;isolation:isolate;display:flex;flex-direction:column;
  color:var(--tekst);font-family:var(--font-tekst);
  background:radial-gradient(120% 55% at 50% 0%,rgba(var(--goud-rgb),.12),transparent 60%),rgba(10,9,8,.95);
  backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 120px -20px rgba(0,0,0,.9),0 0 80px -30px rgba(var(--goud-rgb),var(--gloed-goud));
  opacity:0;visibility:hidden;filter:blur(6px);transform:translateY(24px) scale(.94);transform-origin:100% 100%;
  transition:opacity .45s,transform .6s cubic-bezier(.16,1,.3,1),filter .5s,visibility 0s .6s}
.bol-paneel.open{opacity:1;visibility:visible;filter:none;transform:none;transition:opacity .45s,transform .7s cubic-bezier(.16,1,.3,1),filter .5s,visibility 0s}
.bol-paneel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:3;pointer-events:none;opacity:.7;
  background:conic-gradient(from var(--bol-hoek),rgba(255,255,255,.05) 0 45%,var(--goud-diep) 58%,var(--goud-licht) 68%,var(--goud) 76%,rgba(255,255,255,.05) 88%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:bol-draai 7s linear infinite}
.bol-paneel[data-staat=denkt]::before{opacity:1;animation-duration:1.6s}
.bol-paneel[data-staat=luistert]::before,.bol-paneel[data-staat=spreekt]::before{opacity:1;animation-duration:3s}
@keyframes bol-draai{to{--bol-hoek:360deg}}

.bol-kop{display:flex;align-items:center;gap:8px;padding:18px 18px 0 22px;position:relative;z-index:5}
.bol-merk{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.bol-merk .woordmerk{--logo-hoogte:22px}
.bol-status{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border-radius:999px;font:500 11px/1 var(--font-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-2);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--haar);white-space:nowrap}
.bol-status i{width:6px;height:6px;border-radius:50%;background:var(--goud);box-shadow:0 0 8px var(--goud)}
.bol-paneel[data-staat=luistert] .bol-status i{animation:bol-knip .8s infinite;background:var(--goud-licht)}
.bol-paneel[data-staat=denkt] .bol-status i{animation:bol-knip .5s infinite}
@keyframes bol-knip{50%{opacity:.3}}
.bol-knop{width:36px;height:36px;border:0;border-radius:12px;display:grid;place-items:center;flex:none;cursor:pointer;color:var(--tekst-2);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--haar)}
.bol-knop:hover{color:var(--goud-licht);background:rgba(var(--goud-rgb),.1)}
.bol-knop:focus-visible{outline:1.5px solid var(--goud);outline-offset:2px}
.bol-knop svg{width:18px;height:18px}
.bol-knop.bol-geluid{width:auto;padding:0 12px 0 9px;gap:6px;display:inline-flex;align-items:center;border-radius:999px;font:500 12px/1 var(--font-tekst);color:var(--goud-licht);background:rgba(var(--goud-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.3);white-space:nowrap}
.bol-knop.bol-geluid:not(.uit){color:var(--tekst-2);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--haar)}
.bol-knop .x{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.bol-knop .aan{fill:currentColor}.bol-knop .af{display:none;fill:none;stroke:currentColor;stroke-width:1.6}
.bol-knop.uit .aan{display:none}.bol-knop.uit .af{display:block}

.bol-toneel{position:relative;flex:none;height:250px;display:grid;place-items:center}
.bol-toneel canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.bol-hud{position:absolute;width:236px;height:236px;left:50%;top:50%;margin:-118px 0 0 -118px;pointer-events:none}
.bol-hud svg{width:100%;height:100%;overflow:visible;transform:scale(calc(1 + var(--lv) * .05))}
.bol-hud .r1{fill:none;stroke:rgba(255,255,255,.06)}
.bol-hud .r2{fill:none;stroke:rgba(var(--goud-rgb),.45);stroke-width:1.1;stroke-dasharray:3 11 44 16 8 30;transform-origin:150px 150px;animation:bol-rot 26s linear infinite}
.bol-hud .vijf{fill:none;stroke:rgba(var(--goud-rgb),.22);stroke-width:1;transform-origin:150px 150px;animation:bol-rot 60s linear infinite reverse}
.bol-paneel[data-staat=denkt] .bol-hud .r2{animation-duration:2.4s}
.bol-paneel[data-staat=denkt] .bol-hud .vijf{animation-duration:3s;stroke:rgba(239,220,176,.45)}
.bol-hud .tik line{stroke:rgba(255,255,255,.14)}
.bol-hud .tik{transform-origin:150px 150px;animation:bol-rot 90s linear infinite}
@keyframes bol-rot{to{transform:rotate(360deg)}}
/* terugval zonder WebGL of met minder beweging: een gouden bol in CSS die op het niveau zwelt */
.bol-terug{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;display:none;
  background:radial-gradient(circle at 35% 30%,var(--goud-licht) 0%,var(--goud) 32%,var(--goud-diep) 64%,var(--zwart-1) 100%);
  box-shadow:0 0 calc(30px + var(--lv) * 60px) rgba(var(--goud-rgb),calc(var(--gloed-goud) * (.4 + var(--lv) * .6)));transform:scale(calc(1 + var(--lv) * .12))}
.bol-paneel.zonder-gl .bol-terug{display:block}
.bol-paneel.zonder-gl canvas{display:none}
.bol-onderschrift{text-align:center;min-height:1.5em;margin:0 24px 6px;font-size:14px;line-height:1.45;color:var(--tekst-2)}

.bol-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 18px 10px;display:flex;flex-direction:column;gap:9px;font-size:14.5px;line-height:1.5;
  -webkit-mask-image:linear-gradient(transparent,#000 14px);mask-image:linear-gradient(transparent,#000 14px)}
.bol-b{max-width:88%;padding:9px 13px;border-radius:16px;white-space:pre-wrap;word-wrap:break-word}
.bol-b.as{align-self:flex-start;background:var(--zwart-3);border-bottom-left-radius:5px}
.bol-b.ik{align-self:flex-end;background:rgba(var(--goud-rgb),.16);color:var(--goud-licht);border-bottom-right-radius:5px}
.bol-b a{color:var(--goud-licht);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.bol-boek{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--goud-verloop);color:#0A0908;font-weight:600;font-size:14px;text-decoration:none}
.bol-typt{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:16px;background:var(--zwart-3)}
.bol-typt i{width:6px;height:6px;border-radius:50%;background:var(--goud);animation:bol-stip 1s infinite}
.bol-typt i:nth-child(2){animation-delay:.15s}.bol-typt i:nth-child(3){animation-delay:.3s}
@keyframes bol-stip{50%{transform:translateY(-3px);opacity:.4}}

.bol-voet{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--haar)}
.bol-voet input{flex:1;min-width:0;height:46px;padding:0 14px;border:0;border-radius:14px;background:rgba(255,255,255,.05);outline:0;color:var(--tekst);font:inherit;font-size:16px}
.bol-voet input::placeholder{color:var(--tekst-3)}
.bol-voet input:focus{box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.6)}
.bol-voet button{width:46px;height:46px;border:0;border-radius:14px;background:var(--goud-verloop);color:#0A0908;display:grid;place-items:center;cursor:pointer}
.bol-voet button:disabled{opacity:.45;cursor:default}
.bol-voet svg{width:18px;height:18px}
.bol-onder{padding:0 18px 14px;font-size:11.5px;color:var(--tekst-3);text-align:center}
.bol-onder a{color:var(--tekst-2);text-decoration:underline;text-underline-offset:2px}

/* vangnet: formulier als de assistent onbereikbaar is */
.bol-vangnet{align-self:stretch;display:grid;gap:8px;padding:14px;border-radius:16px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.25)}
.bol-vangnet h4{font:600 14px var(--font-tekst);margin:0}
.bol-vangnet p{margin:0;font-size:13px;color:var(--tekst-2)}
.bol-vangnet input,.bol-vangnet textarea{width:100%;box-sizing:border-box;border:0;border-radius:10px;padding:10px 12px;font:inherit;font-size:15px;color:var(--tekst);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--haar);outline:0}
.bol-vangnet textarea{min-height:70px;resize:vertical}
.bol-vangnet button{border:0;border-radius:999px;padding:11px;font:600 15px var(--font-tekst);background:var(--goud-verloop);color:#0A0908;cursor:pointer}
.bol-vangnet .weg-veld{position:absolute;left:-9999px}

@media (max-width:560px){
  .bol-paneel{inset:0;width:100%;height:100dvh;border-radius:0;transform-origin:bottom;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .bol-paneel::before{border-radius:0}
  .bol-toneel{height:220px}
  .bol-hud{transform:scale(.85)}
  .bol-lanceer{padding:6px}
  .bol-lanceer > span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bol-paneel::before,.bol-hud *,.bol-lanceer .bol-mini,.bol-typt i{animation:none!important}
  .bol-paneel,.bol-lanceer{transition:opacity .2s!important;transform:none!important;filter:none!important}
}

/* ---------- lanceerknop: ademen, glansband, nabijheid, één ballonnetje (feedback 29/10) ---------- */
:root{--nabij:0}
.bol-lanceer{box-shadow:0 18px 50px -12px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.08),0 0 calc(40px + var(--nabij) * 30px) calc(-12px + var(--nabij) * 6px) rgba(var(--goud-rgb),calc(.3 + var(--nabij) * .35));transform:scale(calc(1 + var(--nabij) * .04))}
.bol-lanceer:hover{transform:translateY(-3px) scale(1.04)}
.bol-lanceer .bol-mini{position:relative;overflow:hidden;border-radius:50%;animation:bol-adem 3.2s ease-in-out infinite,bol-gloei 3.2s ease-in-out infinite}
@keyframes bol-gloei{50%{filter:drop-shadow(0 0 18px rgba(var(--goud-rgb),var(--gloed-goud)))}}
.bol-lanceer .bol-mini::after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 40%,rgba(255,244,214,.75) 50%,transparent 60%);transform:translateX(-120%);animation:bol-glans 7s cubic-bezier(.45,0,.2,1) infinite 2s;mix-blend-mode:screen}
@keyframes bol-glans{0%,82%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.bol-ballon{position:fixed;z-index:71;right:max(18px,env(safe-area-inset-right));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 68px);max-width:240px;padding:11px 14px;border-radius:16px 16px 4px 16px;border:0;
  background:rgba(22,21,19,.94);color:var(--tekst);font:500 14px/1.35 var(--font-tekst);text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.35),0 20px 50px -20px rgba(0,0,0,.8);
  opacity:0;transform:translateY(8px) scale(.96);transform-origin:100% 100%;transition:opacity .5s var(--uit),transform .6s var(--uit);pointer-events:none}
.bol-ballon b{color:var(--goud-licht);font-weight:600}
.bol-ballon.zicht{opacity:1;transform:none;pointer-events:auto}
body.sl-consent-open .bol-ballon{bottom:218px}
@media (prefers-reduced-motion:reduce){.bol-lanceer .bol-mini::after{display:none}.bol-lanceer{transform:none!important}}

/* ---------- lanceerknop: gouden stof en fonkels rond de S (ui/bol.js tekent op dit canvas) ---------- */
.bol-glinster{position:absolute;z-index:-1;pointer-events:none;width:124px;height:124px;left:calc(6px + 22px - 62px);top:calc(50% - 62px)}
.bol-lanceer .bol-mini{z-index:1}
@media (max-width:560px){.bol-glinster{width:92px;height:92px;left:calc(6px + 22px - 46px);top:calc(50% - 46px);opacity:.8}}
@media (prefers-reduced-motion:reduce){.bol-glinster{display:none}}