.chat-symbool{display:inline-block;width:2.4em;height:2.4em;vertical-align:middle;white-space:normal;line-height:1;color:var(--kleur-icoontekst,#f3df9f);filter:drop-shadow(0 1px 1px #0004)}
.chat-symbool svg{display:block;width:100%;height:100%;overflow:visible}
.symbool-basis{stop-color:var(--kleur-icoon,#387b98)}
.symbool-licht{stop-color:color-mix(in srgb,var(--kleur-icoon,#387b98) 75%,white)}
.symbool-donker{stop-color:color-mix(in srgb,var(--kleur-icoon,#387b98) 80%,black)}
.symbool-rand{stroke:var(--kleur-icoonrand,#f3df9f);stroke-width:3}
.chat-symbool .symbool-tekening,.chat-symbool .symbool-tekening *{transform-box:fill-box;transform-origin:center}
.chat-symbool[data-bewegen="1"] .symbool-tekening{animation:symbool-knik 1.2s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-bewegen="1"]:is([data-symbool=lachen],[data-symbool=schateren],[data-symbool=verbaasd]) .symbool-mond{animation:symbool-lach 1.2s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-bewegen="1"][data-symbool=fout] .symbool-tekening{animation-name:symbool-schud}
.chat-symbool[data-bewegen="1"][data-symbool=goed] .symbool-vink{animation:symbool-teken 1.2s ease-out 3;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-bewegen="1"]:is([data-symbool=ok],[data-symbool=hart]) .symbool-tekening{animation-name:symbool-groei}
.chat-symbool[data-bewegen="1"][data-symbool=uitroep] .symbool-tekening{animation-name:symbool-sprong}
.chat-symbool[data-bewegen="1"][data-symbool=knipoog] .symbool-knipoog{animation:symbool-lach 1.2s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-bewegen="1"][data-symbool=verdriet] .symbool-traan{animation:symbool-traan 1.2s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
@keyframes symbool-knik{0%,100%{transform:rotate(0)}35%{transform:rotate(-7deg)}65%{transform:rotate(5deg)}}
@keyframes symbool-lach{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
@keyframes symbool-schud{0%,100%{transform:translateX(0)}25%,65%{transform:translateX(-5px)}45%,85%{transform:translateX(5px)}}
@keyframes symbool-teken{0%{stroke-dasharray:1;stroke-dashoffset:1}70%,100%{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes symbool-groei{0%,100%{transform:scale(1)}45%{transform:scale(1.12)}}
@keyframes symbool-sprong{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
@keyframes symbool-traan{0%{transform:translateY(-3px);opacity:0}50%{opacity:1}100%{transform:translateY(7px);opacity:0}}
@media(prefers-reduced-motion:reduce){.chat-symbool *{animation:none!important}}
.chat-symbolenkeuze{width:min(540px,calc(100vw - 32px))}
.chat-symbolenraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));grid-auto-rows:max-content;gap:10px;margin:16px 0}
.chat-window .chat-symbolenraster button{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:8px}
.chat-symbolenraster button>.chat-symbool{width:48px;height:48px;min-width:48px;min-height:48px;max-width:48px;max-height:48px;flex:0 0 48px;aspect-ratio:1}
.chat-symbolenraster button>span:last-child{font-size:.8rem;overflow-wrap:anywhere}
.chat-window [data-chat-smileys]{padding:5px;flex-shrink:0}
.chat-window [data-chat-smileys] .chat-symbool{width:30px;height:30px}

/* Berichtsymbolen volgen de tekstmaat; één los symbool is tweemaal zo groot. */
.chat-bericht>.chat-symbool,.chat-tekst .chat-symbool{width:1em;height:1em;vertical-align:-.12em}
.chat-enkel-symbool>.chat-symbool{width:4em;height:4em}
.chat-symbool.zonder-cirkel{color:var(--kleur-icoon,#387b98);filter:drop-shadow(0 0 1px var(--kleur-icoontekst,#f3df9f)) drop-shadow(0 1px 1px #0003)}
.chat-symbool[data-symbool=duimlaag] .symbool-tekening{transform:rotate(180deg)}
.chat-symbool[data-bewegen="1"]:is([data-symbool=schateren],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=nadenken],[data-symbool=slapen],[data-symbool=fout],[data-symbool=goed]) .symbool-tekening{animation:none}
.chat-symbool[data-bewegen="1"][data-symbool=duim] .symbool-tekening{animation-name:symbool-duim-op}
.chat-symbool[data-bewegen="1"][data-symbool=duimlaag] .symbool-tekening{animation-name:symbool-duim-neer}
.chat-symbool[data-bewegen="1"][data-symbool=groet] .symbool-tekening{animation-name:symbool-zwaai;transform-origin:50% 90%}
.chat-symbool[data-bewegen="1"][data-symbool=uitroep] .symbool-tekening{animation-name:symbool-groei}
.chat-symbool[data-bewegen="1"][data-symbool=krachtig] .symbool-tekening{animation-name:symbool-buig}
.chat-symbool[data-bewegen="1"] :is(.symbool-lachtraan,.symbool-wenkbrauw,.symbool-krab,.symbool-slaap,.symbool-kruis,.symbool-spier){animation-duration:1.5s;animation-timing-function:ease-in-out;animation-iteration-count:3;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-bewegen="1"] .symbool-lachtraan.links{animation-name:symbool-traan-links}
.chat-symbool[data-bewegen="1"] .symbool-lachtraan.rechts{animation-name:symbool-traan-rechts}
.chat-symbool[data-bewegen="1"] .symbool-wenkbrauw.links{animation-name:symbool-frons-links}
.chat-symbool[data-bewegen="1"] .symbool-wenkbrauw.rechts{animation-name:symbool-frons-rechts}
.chat-symbool[data-bewegen="1"] .symbool-krab{animation-name:symbool-krab}
.chat-symbool .symbool-slaap{opacity:0}.chat-symbool .symbool-slaap.z0{opacity:1}
.chat-symbool[data-bewegen="1"] .symbool-slaap{animation-name:symbool-slaap}
.chat-symbool[data-bewegen="1"] .symbool-slaap.z1{animation-delay:.35s}
.chat-symbool[data-bewegen="1"] .symbool-slaap.z2{animation-delay:.7s}
.chat-symbool[data-bewegen="1"] .symbool-kruis.een{animation-name:symbool-kruis-een}
.chat-symbool[data-bewegen="1"] .symbool-kruis.twee{animation-name:symbool-kruis-twee}
.chat-symbool[data-bewegen="1"] .symbool-spier{animation-name:symbool-spier}
@keyframes symbool-duim-op{0%,100%{transform:rotate(0)}35%{transform:rotate(180deg)}65%{transform:rotate(140deg)}}
@keyframes symbool-duim-neer{0%,100%{transform:rotate(180deg)}35%{transform:rotate(0)}65%{transform:rotate(40deg)}}
@keyframes symbool-traan-links{0%{transform:translate(0,0);opacity:0}25%{opacity:1}100%{transform:translate(-16px,13px);opacity:0}}
@keyframes symbool-traan-rechts{0%{transform:translate(0,0);opacity:0}25%{opacity:1}100%{transform:translate(16px,13px);opacity:0}}
@keyframes symbool-frons-links{0%,100%{transform:rotate(0)}50%{transform:rotate(22deg) translateY(3px)}}
@keyframes symbool-frons-rechts{0%,100%{transform:rotate(0)}50%{transform:rotate(-22deg) translateY(3px)}}
@keyframes symbool-krab{0%,100%{transform:translate(0,0)}25%,65%{transform:translate(-4px,-5px)}45%,85%{transform:translate(0,2px)}}
@keyframes symbool-slaap{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translate(23px,-29px) scale(1.2);opacity:0}}
@keyframes symbool-zwaai{0%,100%{transform:rotate(0)}25%,65%{transform:rotate(-18deg)}45%,85%{transform:rotate(18deg)}}
@keyframes symbool-kruis-een{0%{stroke-dasharray:1;stroke-dashoffset:1}45%,100%{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes symbool-kruis-twee{0%,45%{stroke-dasharray:1;stroke-dashoffset:1}90%,100%{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes symbool-buig{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg) scaleX(.94)}}
@keyframes symbool-spier{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

.chat-symbool[data-bewegen="1"][data-symbool=knipoog] .symbool-knipoog{animation-name:symbool-knip}
@keyframes symbool-knip{0%,25%,75%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(.05)}}
.chat-symbolenraster .chat-symbool.zonder-cirkel,.chat-bericht.eigen .chat-symbool.zonder-cirkel{color:var(--kleur-icoontekst,#f3df9f);filter:drop-shadow(0 1px 1px var(--kleur-icoon,#387b98))}
.chat-symbool[data-bewegen="1"]:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=krachtig]) .symbool-tekening{animation:none}
.chat-symbool[data-symbool=schateren] .symbool-mond{animation:none!important}
.chat-symbool[data-symbool=lachen] .symbool-mond{animation:none!important}
.chat-symbool[data-bewegen="1"][data-symbool=lachen] .symbool-mond path{animation:symbool-mondhoeken 2.5s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
@keyframes symbool-mondhoeken{0%,100%{d:path('M30 57Q50 78 70 57')}20%{d:path('M30 62Q50 62 70 62')}40%{d:path('M30 57Q50 78 70 57')}65%{d:path('M30 62Q50 62 70 62')}85%{d:path('M30 57Q50 78 70 57')}}
.knipoog-open{opacity:0}.knipoog-dicht{opacity:1}
.chat-symbool[data-bewegen="1"] .knipoog-open{animation:oog-open 1.5s forwards;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-bewegen="1"] .knipoog-dicht{animation:oog-dicht 1.5s forwards;animation-play-state:var(--symbool-afspelen,paused)}
@keyframes oog-open{0%,40%{opacity:1}75%,100%{opacity:0}}@keyframes oog-dicht{0%,40%{opacity:0}75%,100%{opacity:1}}
.chat-symbool[data-bewegen="1"] .symbool-vinger{animation:symbool-vinger 1.5s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
@keyframes symbool-vinger{0%,100%{transform:rotate(0)}25%,65%{transform:rotate(-12deg)}45%,85%{transform:rotate(6deg)}}

/* Alleen de wijsvinger krabt; pols en arm blijven op hun vaste positie. */
.chat-symbool[data-symbool=nadenken] .symbool-vinger{transform-box:view-box;transform-origin:81px 40px}

.chat-symbool[data-symbool=nadenken] .symbool-arm{transform-box:view-box;transform-origin:0 0}

/* Gedeelde 3D-basis: wit gezicht, diepte en compact bewegen. */
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-bal{position:relative;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 32% 24%,color-mix(in srgb,var(--kleur-icoon,#666),white 62%) 0%,color-mix(in srgb,var(--kleur-icoon,#666),white 23%) 24%,var(--kleur-icoon,#666) 58%,color-mix(in srgb,var(--kleur-icoon,#666),black 48%) 92%);box-shadow:inset -5px -9px 12px #0005,inset 2px 3px 4px #fff6,inset 0 -2px 3px #fff5;transform-origin:50% 100%;}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-glans{position:absolute;top:7%;left:20%;width:42%;height:20%;border-radius:50%;transform:rotate(-22deg);background:linear-gradient(#fff9,#fff0);filter:blur(1px)}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-gezicht{position:absolute;inset:29% 15% 15%}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-ogen{display:flex;justify-content:space-between;height:45%;padding:0 10%}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-ogen i{display:block;width:30%;height:100%;border-radius:48%;background:var(--inkt);box-shadow:0 2px 2px #0006;position:relative}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-ogen i:before{content:"";position:absolute;inset:24% 20% 10% 29%;border-radius:50%;background:color-mix(in srgb,var(--kleur-icoon,#666),black 70%)}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-ogen i:after{content:"";position:absolute;left:34%;top:27%;width:22%;height:23%;border-radius:50%;background:#fff}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-lach{position:absolute;left:8%;right:8%;bottom:0;height:43%;border-radius:12% 12% 50% 50% / 15% 15% 95% 95%;background:color-mix(in srgb,var(--kleur-icoon,#666),black 75%);box-shadow:0 2px 1px #fff3,inset 0 2px 3px #0008;overflow:hidden;transform:rotate(-3deg)}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-lach:before{content:"";position:absolute;left:4%;right:4%;top:0;height:32%;background:var(--inkt);border-radius:0 0 45% 45%}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-lach b{position:absolute;bottom:-20%;left:23%;width:65%;height:57%;border-radius:50%;background:color-mix(in srgb,var(--kleur-icoon,#666),var(--inkt) 65%)}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-bal{}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-wenkbrauwen{position:absolute;left:0;right:0;top:-14%;height:12%;display:flex;justify-content:space-between;padding:0 9%}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-wenkbrauwen span{width:31%;height:100%;border-top:2px solid color-mix(in srgb,var(--kleur-icoon,#666),black 78%);border-radius:50% 50% 0 0;box-shadow:0 -1px 0 #fff2;transform:rotate(-9deg)}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-wenkbrauwen span+span{transform:rotate(9deg)}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-lach{height:34%;bottom:3%;left:6%;right:6%;border-radius:0;transform:none;box-shadow:none;clip-path:polygon(0 0,7% 15%,15% 31%,24% 45%,34% 54%,44% 59%,50% 60%,56% 59%,66% 54%,76% 45%,85% 31%,93% 15%,100% 0,97% 28%,92% 51%,84% 72%,74% 87%,62% 97%,50% 100%,38% 97%,26% 87%,16% 72%,8% 51%,3% 28%);background:linear-gradient(color-mix(in srgb,var(--kleur-icoon,#666),black 90%),color-mix(in srgb,var(--kleur-icoon,#666),black 55%))}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-lach:before,.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-lach b{display:none}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-wenkbrauwen span{border-top-color:#fff}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-lach{background:linear-gradient(150deg,#555 0%,#8a8a8a 45%,#ddd 100%)}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-lach:after{content:"";position:absolute;inset:3% 1.5% 0;clip-path:inherit;background:linear-gradient(180deg,#999 0%,#d9d9d9 35%,#fff 78%);transform:translateY(3%)}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-ogen i+i{box-shadow:inset 2px 2px 3px #0006,0 1px 2px #0004}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-wenkbrauwen span{border-top-width:4px;box-shadow:0 -2px 0 #000}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]){position:relative;overflow:visible;container-type:inline-size}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-bal{filter:drop-shadow(0 0 .7px #fff) drop-shadow(0 0 .7px #fff9)}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]){filter:none}
body .chat-window [data-chat-smileys]:disabled{opacity:.38;filter:grayscale(.65);cursor:not-allowed;box-shadow:none}
.chat-symbolen-selectiestatus{flex-shrink:0;margin:0 0 8px}
body .chat-symbolenraster button[aria-pressed=true]{outline:2px solid var(--kleur-icoontekst,#fff);outline-offset:-5px;box-shadow:var(--relief-laag);position:relative}
.chat-symbolenraster button[aria-pressed=true]:after{content:'✓';position:absolute;top:3px;right:6px;color:inherit;font-weight:bold}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-bal{display:block;position:absolute;width:78%;height:78%;left:11%;top:11%;animation:none;box-shadow:inset -.035em -.055em .07em #0005,inset .015em .025em .035em #fff6}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-glans{filter:none}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-ogen i{background:#fff;box-shadow:inset -.025em .025em .04em #0003,0 .01em .02em #0002}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-ogen i+i{box-shadow:inset .025em .025em .04em #0003,0 .01em .02em #0002}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-wenkbrauwen span{border-top-width:.025em;box-shadow:0 -.0125em 0 #000}
.chat-symbolenraster button .chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) span{font-size:inherit}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-bal,.chat-symbolenraster button .chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-bal{font-size:100cqw}
.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig])[data-bewegen="1"] .lach3d-bal{animation:chat-lach3d-wiebel 2.4s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
@keyframes chat-lach3d-wiebel{
 0%,50%,100%{transform:rotate(0deg) scale(1.12,.89)}
 12.5%{transform:rotate(-6deg) scale(.96,1.04)}
 25%{transform:rotate(-11deg) scale(1.03,.95)}
 37.5%{transform:rotate(-5deg) scale(.97,1.025)}
 62.5%{transform:rotate(6deg) scale(.96,1.04)}
 75%{transform:rotate(11deg) scale(1.03,.95)}
 87.5%{transform:rotate(5deg) scale(.97,1.025)}
}
@media(prefers-reduced-motion:reduce){.chat-symbool:is([data-symbool=lachen],[data-symbool=knipoog],[data-symbool=boos],[data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=gek],[data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig]) .lach3d-bal{animation:none!important}}
/* Goedgekeurde boze bal: gedeelde gezichtsbasis, eigen gekoppelde beweging.
   Afmetingen blijven relatief aan het pictogram, ook in de kleine kiezer. */
.chat-symbool[data-symbool=boos] .lach3d-lach{transform:rotate(180deg);height:17%;bottom:12%}
.chat-symbool[data-symbool=boos] .lach3d-wenkbrauwen span{border-top-width:.041em;transform:rotate(15deg)}
.chat-symbool[data-symbool=boos] .lach3d-wenkbrauwen span+span{transform:rotate(-15deg)}
.chat-symbool[data-symbool=boos] .lach3d-ogen i{transform:rotate(6deg) scaleY(.9);transform-origin:50% 65%}
.chat-symbool[data-symbool=boos] .lach3d-ogen i+i{transform:rotate(-6deg) scaleY(.9)}
.chat-symbool[data-symbool=boos][data-bewegen="1"] .lach3d-bal{animation:none}
.chat-symbool[data-symbool=boos][data-bewegen="1"] .lach3d-wenkbrauwen span{animation:chat-boos-links 3s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-symbool=boos][data-bewegen="1"] .lach3d-wenkbrauwen span+span{animation-name:chat-boos-rechts}
.chat-symbool[data-symbool=boos][data-bewegen="1"] .lach3d-ogen i{animation:chat-boosoog-links 3s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-symbool=boos][data-bewegen="1"] .lach3d-ogen i+i{animation-name:chat-boosoog-rechts}
@keyframes chat-boos-links{0%,100%{transform:translate(0,0) rotate(15deg)}45%,65%{transform:translate(.035em,.035em) rotate(35deg)}}
@keyframes chat-boos-rechts{0%,100%{transform:translate(0,0) rotate(-15deg)}45%,65%{transform:translate(-.035em,.035em) rotate(-35deg)}}
@keyframes chat-boosoog-links{0%,100%{transform:rotate(6deg) scaleY(.9)}45%,65%{transform:translate(.018em,.018em) rotate(19deg) scaleY(.63)}}
@keyframes chat-boosoog-rechts{0%,100%{transform:rotate(-6deg) scaleY(.9)}45%,65%{transform:translate(-.018em,.018em) rotate(-19deg) scaleY(.63)}}
/* Los uitroepteken: drie kleine verende stappen binnen dezelfde pictogrammaat. */
.chat-symbool[data-symbool=uitroep]{position:relative;container-type:inline-size;overflow:visible;filter:none}
.chat-symbool[data-symbool=uitroep] .uitroep3d{position:absolute;inset:11%;display:block;transform-origin:50% 85%;filter:drop-shadow(0 0 .7px #fff) drop-shadow(0 0 .7px #fff9);font-size:100cqw}
.uitroep3d-stam{position:absolute;top:0;left:36.47%;width:28.24%;height:74.71%;border-radius:50% 50% 43% 43% / 22% 22% 75% 75%;background:linear-gradient(110deg,color-mix(in srgb,var(--kleur-icoon,#362e27),white 55%),var(--kleur-icoon,#362e27) 55%,color-mix(in srgb,var(--kleur-icoon,#362e27),black 45%));box-shadow:inset .012em .012em .024em #fff5,.012em .012em .012em #0004}
.uitroep3d-punt{position:absolute;bottom:0;left:41.76%;width:17.06%;height:17.06%;border-radius:50%;background:radial-gradient(circle at 28% 22%,color-mix(in srgb,var(--kleur-icoon,#362e27),white 62%),var(--kleur-icoon,#362e27) 60%,color-mix(in srgb,var(--kleur-icoon,#362e27),black 40%));box-shadow:inset .006em .006em .012em #fff7,.012em .018em .012em #0005}
.chat-symbool[data-symbool=uitroep][data-bewegen="1"] .uitroep3d{animation:chat-uitroep-stap 1.4s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
@keyframes chat-uitroep-stap{0%,100%{transform:scale(1) rotate(0)}20%{transform:scale(1.05,.9) rotate(-8deg)}50%{transform:translate(-2.35%,-4.7%) scale(.97,1.02) rotate(-4deg)}80%{transform:scale(1.05,.91) rotate(6deg)}}
@media(prefers-reduced-motion:reduce){.chat-symbool[data-symbool=boos] *,.chat-symbool[data-symbool=uitroep] *{animation:none!important}}
/* Goedgekeurde varianten. De bestaande renderer start/pauzeert de animaties;
   zonder toestemming voor beweging blijft steeds een volledig symbool staan. */
.chat-symbool:is([data-symbool=verdriet],[data-symbool=nadenken]) .lach3d-lach{transform:rotate(180deg);height:17%;bottom:12%}
.chat-symbool:is([data-symbool=verdriet],[data-symbool=nadenken])[data-bewegen="1"] .lach3d-bal{animation:none}
.chat-symbool[data-symbool=verdriet][data-bewegen="1"] .lach3d-ogen i{animation:chat-verdriet-oog 5s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused);transform-origin:50% 65%}
.chat-symbool[data-symbool=verdriet][data-bewegen="1"] .lach3d-ogen i:before,.chat-symbool[data-symbool=verdriet][data-bewegen="1"] .lach3d-ogen i:after{animation:chat-verdriet-pupil 5s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
.verdriet3d-baan{position:absolute;left:28.24%;top:53.53%;width:8.82%;height:13.53%;display:block}
.verdriet3d-traan{display:block;width:100%;height:100%;border-radius:0 70% 60% 70%;background:linear-gradient(140deg,#fff,color-mix(in srgb,var(--kleur-icoon,#362e27),white 70%));box-shadow:inset .006em .006em .012em #fff,.006em .012em .018em #0005;transform:translate(-50%,-50%) rotate(45deg) scale(.4)}
.chat-symbool[data-symbool=verdriet][data-bewegen="1"] .verdriet3d-baan{animation:chat-traan-wang 5s linear 3;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-symbool=verdriet][data-bewegen="1"] .verdriet3d-traan{animation:chat-traan-grootte 5s linear 3;animation-play-state:var(--symbool-afspelen,paused)}
@keyframes chat-verdriet-oog{0%,100%{transform:scaleY(1)}20%,75%{transform:scaleY(.12)}}
@keyframes chat-verdriet-pupil{0%,100%{opacity:1}20%,75%{opacity:0}}
@keyframes chat-traan-wang{0%,30%,100%{left:28.24%;top:53.53%}40%{left:28%;top:59%}50%{left:21%;top:65%}57%{left:20%;top:70%}63%{left:24%;top:77%}68%{left:25.88%;top:82.35%}90%,99%{left:25.88%;top:105.3%}}
@keyframes chat-traan-grootte{0%,100%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(.4)}5%,23%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.2)}30%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(.7)}68%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}90%,99%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(1)}}
.chat-symbool[data-symbool=nadenken] .lach3d-ogen i:before,.chat-symbool[data-symbool=nadenken] .lach3d-ogen i:after{transform:translate(-.018em,-.041em)}
.chat-symbool[data-symbool=nadenken][data-bewegen="1"] .lach3d-bal{animation:chat-denk-hoofd 3.5s ease-in-out 2;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-symbool=nadenken][data-bewegen="1"] .lach3d-ogen i:before,.chat-symbool[data-symbool=nadenken][data-bewegen="1"] .lach3d-ogen i:after{animation:chat-denk-pupil 3.5s ease-in-out 2;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-symbool=nadenken][data-bewegen="1"] .lach3d-wenkbrauwen{animation:chat-denk-brow 3.5s ease-in-out 2;animation-play-state:var(--symbool-afspelen,paused)}
@keyframes chat-denk-hoofd{0%,100%{transform:none}40%,60%{transform:perspective(3em) rotateX(-12deg) rotateY(-13deg) rotate(-8deg)}}
@keyframes chat-denk-pupil{0%,100%{transform:translate(-.018em,-.041em)}40%,60%{transform:translate(-.006em,-.088em)}}
@keyframes chat-denk-brow{0%,100%{transform:none}40%,60%{transform:translateY(-.035em)}}
.chat-symbool:is([data-symbool=goed],[data-symbool=fout],[data-symbool=ok]){position:relative;container-type:inline-size}
.teken3d-vak{position:absolute;inset:16%;border:.035em solid color-mix(in srgb,var(--kleur-icoon,#362e27),white 45%);border-radius:15%;box-shadow:inset .012em .012em .018em #0008,.012em .018em .018em #0005;background:linear-gradient(135deg,color-mix(in srgb,var(--kleur-icoon,#362e27),white 30%),var(--kleur-icoon,#362e27));font-size:100cqw}
.teken3d-vak svg{width:100%;height:100%;display:block}
.teken3d-vak path{stroke-dasharray:1;stroke-dashoffset:0}
.chat-symbool[data-bewegen="1"] .teken3d-vink{animation:chat-vink-schrijven 2.6s linear 1 forwards;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-bewegen="1"] .teken3d-kruis{animation:chat-kruis-eerste 3s linear 1 forwards;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-bewegen="1"] .teken3d-kruis.tweede{animation-name:chat-kruis-tweede}
@keyframes chat-vink-schrijven{0%,17%{stroke-dashoffset:0}17.01%,25%{stroke-dashoffset:1}44.2%,48.5%{stroke-dashoffset:.67}80%,100%{stroke-dashoffset:0}}
@keyframes chat-kruis-eerste{0%,15%{stroke-dashoffset:0}15.01%,25%{stroke-dashoffset:1}53%,100%{stroke-dashoffset:0}}
@keyframes chat-kruis-tweede{0%,15%{stroke-dashoffset:0}15.01%,57%{stroke-dashoffset:1}87%,100%{stroke-dashoffset:0}}
.ok3d-tegel{position:absolute;inset:13%;border-radius:16%;border:.018em solid color-mix(in srgb,var(--kleur-icoon,#362e27),white 60%);background:linear-gradient(135deg,var(--kleur-icoon,#362e27) 20%,color-mix(in srgb,var(--kleur-icoon,#362e27),white 35%) 40%,var(--kleur-icoon,#362e27) 80%);box-shadow:inset .012em .018em .024em #fff8,.029em .035em .012em color-mix(in srgb,var(--kleur-icoon,#362e27),black 50%);transform:rotate(-9deg);display:grid;place-items:center;color:#fff;font:bold 100cqw system-ui}
.ok3d-tegel span{font-size:.406em}
.chat-symbool[data-bewegen="1"] .ok3d-tegel span{animation:chat-ok-letters 1.8s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
@keyframes chat-ok-letters{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.chat-symbool:is([data-symbool=verdriet],[data-symbool=nadenken],[data-symbool=goed],[data-symbool=fout],[data-symbool=ok]) *{animation:none!important}}
/* Gek houdt de gedeelde bal; uitsluitend de ronde spiralen draaien. */
.chat-symbool[data-symbool=gek] .lach3d-ogen{height:49%;padding:0 3%}
.chat-symbool[data-symbool=gek] .lach3d-ogen i{width:43%;height:auto;aspect-ratio:1;border-radius:50%}
.chat-symbool[data-symbool=gek] .lach3d-ogen i:before,.chat-symbool[data-symbool=gek] .lach3d-ogen i:after{display:none}
.chat-symbool[data-symbool=gek] .lach3d-wenkbrauwen{top:-23%;height:22%;padding:0 3%}
.chat-symbool[data-symbool=gek] .lach3d-wenkbrauwen span{width:42%;height:100%;border-radius:60% 60% 0 0}
.gek3d-spiraal{color:color-mix(in srgb,var(--kleur-icoon,#362e27),black 65%)}
.chat-symbool[data-symbool=gek][data-bewegen="1"] .lach3d-bal{animation:none}
.chat-symbool[data-symbool=gek][data-bewegen="1"] .gek3d-spiraal{animation:chat-gek-spiraal 2.4s linear 3;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-symbool=gek][data-bewegen="1"] i+i .gek3d-spiraal{animation-direction:reverse}
@keyframes chat-gek-spiraal{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.chat-symbool[data-symbool=gek] *{animation:none!important}}
/* Een stilstaande knipoog blijft ook zonder animaties herkenbaar. */
.chat-symbool[data-symbool=knipoog] .lach3d-bal{transform:rotate(-7deg)}
.chat-symbool[data-symbool=knipoog] .lach3d-ogen i+i{transform:scaleY(.13);transform-origin:50% 60%}
.chat-symbool[data-symbool=knipoog] .lach3d-ogen i+i:before,.chat-symbool[data-symbool=knipoog] .lach3d-ogen i+i:after{opacity:0}
.chat-symbool[data-symbool=knipoog] .lach3d-lach{transform:translateY(-4%) rotate(-9deg) scaleX(.95);transform-origin:center}
.chat-symbool[data-symbool=knipoog] .lach3d-wenkbrauwen span+span{transform:translateY(16%) rotate(14deg)}
.chat-symbool[data-symbool=knipoog][data-bewegen="1"] .lach3d-bal{animation:chat-knipoog-hoofd 2.6s ease-in-out 3 forwards;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-symbool=knipoog][data-bewegen="1"] .lach3d-ogen i+i{animation:chat-knipoog-oog 2.6s ease-in-out 3 forwards;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-symbool=knipoog][data-bewegen="1"] .lach3d-ogen i+i:before,.chat-symbool[data-symbool=knipoog][data-bewegen="1"] .lach3d-ogen i+i:after{animation:chat-knipoog-pupil 2.6s ease-in-out 3 forwards;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-symbool=knipoog][data-bewegen="1"] .lach3d-lach{animation:chat-knipoog-mond 2.6s ease-in-out 3 forwards;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-symbool=knipoog][data-bewegen="1"] .lach3d-wenkbrauwen span+span{animation:chat-knipoog-wenkbrauw 2.6s ease-in-out 3 forwards;animation-play-state:var(--symbool-afspelen,paused)}
@keyframes chat-knipoog-hoofd{12%,18%{transform:rotate(0) scale(1)}38%,60%{transform:rotate(-8deg) scale(1.035,.965)}0%,78%,100%{transform:rotate(-7deg) scale(1)}}
@keyframes chat-knipoog-oog{12%,25%{transform:scaleY(1)}0%,38%,100%{transform:scaleY(.13)}}
@keyframes chat-knipoog-pupil{12%,34%{opacity:1}0%,38%,100%{opacity:0}}
@keyframes chat-knipoog-mond{12%,18%{transform:translateY(0) rotate(0) scaleX(1)}0%,38%,100%{transform:translateY(-4%) rotate(-9deg) scaleX(.95)}}
@keyframes chat-knipoog-wenkbrauw{12%,18%{transform:translateY(0) rotate(9deg)}0%,38%,100%{transform:translateY(16%) rotate(14deg)}}

/* Goedgekeurde 3D-varianten. Em-maten schalen mee met de bal; de beginpose
   blijft behouden wanneer de gebruiker animaties uitschakelt. */
.chat-symbool:is([data-symbool=slapen],[data-symbool=stoer],[data-symbool=angstig])[data-bewegen="1"] .lach3d-bal{animation:none}
.chat-symbool[data-symbool=slapen] .lach3d-ogen i{transform:scaleY(.12)}
.chat-symbool[data-symbool=slapen] .lach3d-ogen i:before,.chat-symbool[data-symbool=slapen] .lach3d-ogen i:after{display:none}
.chat-symbool[data-symbool=slapen] .lach3d-wenkbrauwen{top:15%}
.chat-symbool[data-symbool=slapen] .lach3d-lach{height:9%;left:36%;right:36%;border-radius:50%;clip-path:none}
.chat3d-z{position:absolute;left:45%;top:-12%;color:white;font:bold .59em/1 system-ui;opacity:0;transform:scale(.2)}
.chat3d-z:first-of-type{opacity:1}
.chat-symbool[data-bewegen="1"] .chat3d-z{animation:chat3d-slaap 4s linear 3;animation-delay:var(--delay);animation-play-state:var(--symbool-afspelen,paused)}
@keyframes chat3d-slaap{0%{transform:translate(0,0) scale(.2);opacity:0}15%{opacity:1}85%{opacity:.6}100%{transform:translate(.49em,-.47em) scale(1.4);opacity:0}}
.chat-symbool[data-symbool=stoer] .lach3d-bal{transform:rotate(-9deg);perspective:3.24em;transform-style:preserve-3d;filter:none}
.chat3d-bril{position:absolute;left:7%;top:25%;width:86%;height:41%;transform-origin:50% 60% -.294em;transform-style:preserve-3d;transform:translateZ(.324em)}
.chat3d-bril .glas{position:absolute;top:6%;left:4%;width:44%;height:84%;box-sizing:border-box;border-radius:23% 23% 40% 40%;border:.035em solid color-mix(in srgb,var(--kleur-icoon),black 35%);background:linear-gradient(150deg,#ffffff82 0%,#ffffff18 39%,#0009 40%,#000b 100%),var(--kleur-icoon);box-shadow:inset .006em .012em .012em #fff7,0 .018em .024em #0006}
.chat3d-bril .glas+.glas{left:52%}
.chat3d-bril .brug{position:absolute;left:45%;top:15%;width:15%;height:14%;border-radius:40%;background:color-mix(in srgb,var(--kleur-icoon),black 30%)}
.chat3d-bril .poot{position:absolute;left:4%;top:60%;width:.294em;height:.041em;background:var(--kleur-icoon);border-radius:.024em;transform-origin:0 50%;transform:translateZ(-.294em) rotateY(-90deg)}
.chat3d-bril .poot.rechts{left:auto;right:4%;transform-origin:100% 50%;transform:translateZ(-.294em) rotateY(90deg)}
.chat-symbool[data-bewegen="1"] .chat3d-bril{animation:chat3d-bril 4s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
.chat-symbool[data-bewegen="1"] .chat3d-bril .glas{animation:chat3d-glas 4s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
@keyframes chat3d-bril{0%,100%{transform:translateZ(.324em) rotateX(0deg)}35%,65%{transform:translateZ(.324em) rotateX(48deg)}}
@keyframes chat3d-glas{0%,100%{scale:1}35%,65%{scale:.93}}
.chat-symbool[data-symbool=angstig] .lach3d-ogen{padding:0;height:52%}
.chat-symbool[data-symbool=angstig] .lach3d-ogen i{width:43%;border-radius:48%}
.chat-symbool[data-symbool=angstig] .lach3d-ogen i:before{inset:38% 10% 9% 49%}
.chat-symbool[data-symbool=angstig] .lach3d-ogen i+i:before{inset:38% 49% 9% 10%}
.chat-symbool[data-symbool=angstig] .lach3d-ogen i:after{left:55%;top:42%}
.chat-symbool[data-symbool=angstig] .lach3d-ogen i+i:after{left:16%}
.chat-symbool[data-symbool=angstig] .lach3d-wenkbrauwen{top:-18%;padding:0;height:16%}
.chat-symbool[data-symbool=angstig] .lach3d-wenkbrauwen span{width:44%;transform:rotate(-22deg);border-top-width:.035em}
.chat-symbool[data-symbool=angstig] .lach3d-wenkbrauwen span+span{transform:rotate(22deg)}
.chat-symbool[data-symbool=angstig] .lach3d-lach{clip-path:none;height:34%;left:4%;right:4%;bottom:-2%;border-radius:38% 35% 30% 35%;background:color-mix(in srgb,var(--kleur-icoon),black 75%);box-shadow:inset 0 .012em .024em #000b,0 .006em .006em #fff8;overflow:hidden}
.chat-symbool[data-symbool=angstig] .lach3d-lach:after{display:none}
.chat3d-tanden{position:absolute;left:4%;right:4%;top:-5%;height:43%;display:flex;gap:.006em}
.chat3d-tanden.onder{top:auto;bottom:-5%}
.chat3d-tanden i{flex:1;background:linear-gradient(#c9c7c4,#fff);border-radius:0 0 35% 35%;box-shadow:inset -.006em 0 .006em #0003}
.chat3d-tanden.onder i{border-radius:35% 35% 0 0}
.chat3d-zweet{position:absolute;width:.1em;height:.16em;left:var(--x);top:var(--y);clip-path:polygon(50% 0,42% 16%,27% 35%,10% 52%,1% 67%,2% 80%,12% 92%,28% 99%,50% 100%,72% 99%,88% 92%,98% 80%,99% 67%,90% 52%,73% 35%,58% 16%);background:radial-gradient(ellipse at 35% 60%,white,color-mix(in srgb,var(--kleur-icoon),white 65%));transform:rotate(var(--tilt))}
.chat-symbool[data-bewegen="1"] .chat3d-zweet{animation:chat3d-zweet 3.6s linear 3;animation-delay:var(--wait);animation-play-state:var(--symbool-afspelen,paused)}
@keyframes chat3d-zweet{0%,100%{opacity:1;translate:0 0;rotate:0deg}15%{opacity:1;translate:calc(var(--dir)*.065em) -.024em;rotate:calc(var(--tilt)*-.25)}35%{opacity:1;translate:calc(var(--dir)*.135em) .018em;rotate:calc(var(--tilt)*-.65)}55%{opacity:1;translate:calc(var(--dir)*.182em) .112em;rotate:calc(var(--tilt)*-1)}78%{opacity:.6;translate:calc(var(--dir)*.212em) .259em;rotate:calc(var(--tilt)*-1)}90%{opacity:0;translate:calc(var(--dir)*.218em) .353em;rotate:calc(var(--tilt)*-1)}91%,99%{opacity:0;translate:0 0;rotate:0deg}}
.chat3d-hand{display:block;width:100%;height:100%;transform-origin:55% 86%;transform:rotate(-10deg) rotateY(-7deg);filter:drop-shadow(0 0 .6px #fffa)}
.chat-symbool[data-bewegen="1"] .chat3d-hand{animation:chat3d-zwaai 1.2s ease-in-out 3;animation-play-state:var(--symbool-afspelen,paused)}
@keyframes chat3d-zwaai{0%,100%{transform:rotate(-10deg) rotateY(-7deg)}50%{transform:rotate(12deg) rotateY(7deg)}}
@media(prefers-reduced-motion:reduce){.chat-symbool :is(.chat3d-z,.chat3d-bril,.glas,.chat3d-zweet,.chat3d-hand){animation:none!important}}

.chat3d-raster{display:block;width:100%;height:100%;filter:drop-shadow(0 0 .6px #fffa)}

/* Goedgekeurd Schaterlachen: vaste gezichtsvorm, ballistische tranen. */
.chat-symbool[data-symbool=schateren]{position:relative;container-type:inline-size}
.chat-symbool[data-symbool=schateren] .lach-stage{position:absolute;inset:0;display:block;font-size:100cqw}
.chat-symbool[data-symbool=schateren] .ball{position:absolute;left:19%;top:18%;width:62%;height:62%;border-radius:50%;background:radial-gradient(circle at 32% 24%,color-mix(in srgb,var(--kleur-icoon,#362e27),white 62%),color-mix(in srgb,var(--kleur-icoon,#362e27),white 23%) 24%,var(--kleur-icoon,#362e27) 58%,color-mix(in srgb,var(--kleur-icoon,#362e27),black 48%) 92%);box-shadow:inset -0.01471em -0.02647em 0.03529em #0005,inset 0.00588em 0.00882em 0.01176em #fff6;filter:drop-shadow(0 0 .0.02059em white);transform-origin:50% 50%}
.chat-symbool[data-symbool=schateren] .shine{position:absolute;top:7%;left:20%;width:42%;height:20%;border-radius:50%;transform:rotate(-22deg);background:linear-gradient(#fff9,#fff0)}
.chat-symbool[data-symbool=schateren] .face{position:absolute;inset:29% 15% 15%}
.chat-symbool[data-symbool=schateren] .eyes{display:flex;justify-content:space-between;height:34%;padding:0 8%}
.chat-symbool[data-symbool=schateren] .eyes i{display:block;width:34%;height:100%;background:linear-gradient(#aaa,#fff 45%);clip-path:polygon(0 85%,3% 59%,10% 33%,22% 13%,36% 3%,50% 0,64% 3%,78% 13%,90% 33%,97% 59%,100% 85%,87% 69%,74% 55%,61% 47%,50% 45%,39% 47%,26% 55%,13% 69%);filter:drop-shadow(0 0.00294em 0.00294em #0008)}
.chat-symbool[data-symbool=schateren] .brows{position:absolute;left:0;right:0;top:-19%;height:16%;display:flex;justify-content:space-between;padding:0 7%}
.chat-symbool[data-symbool=schateren] .brows i{width:34%;height:100%;border-top:0.01471em solid white;border-radius:60% 60% 0 0;box-shadow:0 -0.00588em 0 #000;transform:rotate(-12deg)}
.chat-symbool[data-symbool=schateren] .brows i+i{transform:rotate(12deg)}
.chat-symbool[data-symbool=schateren] .mouth{position:absolute;left:3%;right:3%;bottom:-1%;height:49%;overflow:hidden;border-radius:8% 8% 48% 48% / 12% 12% 94% 94%;background:linear-gradient(color-mix(in srgb,var(--kleur-icoon,#362e27),black 85%),color-mix(in srgb,var(--kleur-icoon,#362e27),black 55%));box-shadow:inset 0 0.00882em 0.01471em #000b,0 0.00588em 0.00294em #ffffff30}
.chat-symbool[data-symbool=schateren] .teeth{position:absolute;left:0;right:0;top:-6%;height:44%;border-radius:0 0 50% 50%;background:linear-gradient(#aaa,#fff 65%);box-shadow:0 0.00588em 0.00882em #0006}
.chat-symbool[data-symbool=schateren] .tongue{position:absolute;left:24%;right:24%;bottom:-16%;height:48%;border-radius:50%;background:radial-gradient(ellipse at 40% 20%,color-mix(in srgb,var(--kleur-icoon,#362e27),white 65%),color-mix(in srgb,var(--kleur-icoon,#362e27),white 25%));box-shadow:inset 0 0.00588em 0.00588em #fff4}
.chat-symbool[data-symbool=schateren] canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Bak koffie: vaste kop met afzonderlijke, schaalbare damp. */
.chat-symbool[data-symbool="koffie"]{background:none;border:0;box-shadow:none}
.chat-symbool .koffie3d-kop,.chat-symbool .koffie3d-damp{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.chat-symbool .koffie3d-kop{filter:drop-shadow(0 0 .5px #fff9)}

/* Taart: transparante basis met drie onafhankelijk flakkerende vlammen. */
.chat-symbool[data-symbool="taart"]{background:none;border:0;box-shadow:none}
.chat-symbool .taart3d-basis,.chat-symbool .taart3d-vlammen{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}

.chat-symbool[data-symbool="bedekken"] .cover-face{position:absolute;width:74%;height:74%;left:13%;top:8%;border-radius:50%;background:radial-gradient(circle at 32% 24%,color-mix(in srgb,var(--kleur-icoon,#362e27),white 62%),color-mix(in srgb,var(--kleur-icoon,#362e27),white 23%) 24%,var(--kleur-icoon,#362e27) 58%,color-mix(in srgb,var(--kleur-icoon,#362e27),black 48%) 92%);box-shadow:inset -5px -9px 12px #0005,inset 2px 3px 4px #fff6;transform-origin:50% 90%}
.chat-symbool[data-symbool="bedekken"] .shine{position:absolute;top:7%;left:20%;width:42%;height:20%;border-radius:50%;transform:rotate(-22deg);background:linear-gradient(#fff9,#fff0)}
.chat-symbool[data-symbool="bedekken"] .face{position:absolute;inset:29% 15% 15%}
.chat-symbool[data-symbool="bedekken"] .eyes{display:flex;justify-content:space-between;height:45%;padding:0 10%}
.chat-symbool[data-symbool="bedekken"] .eye{width:30%;height:100%;border-radius:48%;background:white;position:relative;box-shadow:inset -2px 2px 3px #0003;transform-origin:50% 65%;overflow:hidden}
.chat-symbool[data-symbool="bedekken"] .eye+.eye{box-shadow:inset 2px 2px 3px #0003}
.chat-symbool[data-symbool="bedekken"] .pupil{position:absolute;inset:24% 20% 10% 29%;border-radius:50%;background:color-mix(in srgb,var(--kleur-icoon,#362e27),black 70%)}
.chat-symbool[data-symbool="bedekken"] .pupil:after{content:"";position:absolute;left:15%;top:10%;width:30%;height:30%;border-radius:50%;background:white}
.chat-symbool[data-symbool="bedekken"] .brows{position:absolute;left:0;right:0;top:-14%;height:12%;display:flex;justify-content:space-between;padding:0 9%}
.chat-symbool[data-symbool="bedekken"] .brows i{width:31%;height:100%;border-top:4px solid white;border-radius:50% 50% 0 0;box-shadow:0 -2px 0 #000;transform:rotate(-9deg)}
.chat-symbool[data-symbool="bedekken"] .brows i+i{transform:rotate(9deg)}
.chat-symbool[data-symbool="bedekken"] .mouth{position:absolute;height:34%;bottom:3%;left:6%;right:6%;clip-path:polygon(0 0,15% 31%,34% 54%,50% 60%,66% 54%,85% 31%,100% 0,97% 28%,84% 72%,62% 97%,50% 100%,38% 97%,16% 72%,3% 28%);background:linear-gradient(#777,#ddd 50%,white 80%)}

.chat-symbool[role="button"]{cursor:pointer}
.chat-symbool[role="button"]:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.chat-symbool[data-symbool="stoer"] .chat3d-bril .glas{border-color:color-mix(in srgb,var(--kleur-icoon),white 80%)}
.chat-symbool[data-symbool="stoer"] .chat3d-bril :is(.brug,.poot){background:color-mix(in srgb,var(--kleur-icoon),white 80%)}

.chat-symbolenraster .chat-symbolen-scheiding{grid-column:1 / -1;width:100%;height:0;margin:6px 0;border:0;border-top:1px solid color-mix(in srgb,var(--kleur-icoon,#362e27),transparent 55%)}