#dienstly-bot-widget{--navy:#203043;--red:#f22e43;--sage:#c9d8ca;position:fixed;right:clamp(10px,2.4vw,30px);bottom:clamp(10px,2.4vw,28px);z-index:99999;width:auto;min-width:178px;display:flex;flex-direction:column;align-items:flex-end;font:15px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;color:var(--navy);pointer-events:none;transform:translate3d(0,0,0);transition:transform .72s cubic-bezier(.22,.78,.24,1)}
#dienstly-bot-widget *{box-sizing:border-box}
/* Intrinsic sizing keeps short messages compact while long text wraps. */
#dienstly-bot-widget .dienstly-bubble{
 width:max-content!important;
 min-width:min(200px,calc(100vw - 36px));
 max-width:min(420px,calc(100vw - 36px))!important;
}
#dienstly-bot-widget .dienstly-title{padding-inline:4px 24px;font-size:11px!important;}
#dienstly-bot-widget .dienstly-bubble,
#dienstly-bot-widget .dienstly-bubble::after{background:#e9edef!important;}
#dienstly-bot-widget .dienstly-close{border:1px solid #b6c2ca!important;}
#dienstly-bot-widget .dienstly-bubble{position:relative;width:min(420px,calc(100vw - 36px));max-width:none;margin:0 0 2px 0;align-self:flex-end;right:0;background:#eef1f3;border:2px solid #aebbc5;border-radius:19px;padding:15px 20px 15px 16px;box-shadow:0 14px 45px #20304322;opacity:0;transform:translateY(14px) scale(.92);transform-origin:85% 100%;transition:opacity .25s,transform .3s;visibility:hidden;pointer-events:auto;overflow-wrap:anywhere}
#dienstly-bot-widget.open .dienstly-bubble{opacity:1;transform:translateY(0) scale(1);visibility:visible}
#dienstly-bot-widget .dienstly-bubble::after{content:'';position:absolute;right:52px;bottom:-9px;background:#eef1f3;width:16px;height:16px;transform:rotate(45deg);border-right:2px solid #aebbc5;border-bottom:2px solid #aebbc5}
#dienstly-bot-widget .dienstly-title{position:relative;font-weight:800;font-size:14px;margin:0 0 7px;padding-bottom:7px;display:flex;align-items:center;justify-content:center;gap:7px;text-align:center}
#dienstly-bot-widget .dienstly-title-text{position:relative}
#dienstly-bot-widget .dienstly-message-nav{position:relative;align-self:center;display:none;width:18px;height:18px;padding:0;border:0;border-radius:6px;background:transparent;color:#526575;font-size:0;cursor:pointer;transition:background .16s,color .16s}
#dienstly-bot-widget .dienstly-message-nav::after{content:'';width:5px;height:5px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
#dienstly-bot-widget .dienstly-message-prev::after{transform:rotate(-135deg)}
#dienstly-bot-widget .dienstly-message-count{display:none;align-items:center;min-height:18px;padding:1px 5px 0;border-radius:999px;background:#dfe8ea;color:#607484;font-size:10px;font-weight:800;line-height:1}
#dienstly-bot-widget.has-message-pagination.open .dienstly-message-count:not([hidden]){display:inline-flex}
#dienstly-bot-widget.has-message-pagination.open .dienstly-message-nav:not([hidden]){display:inline-grid;place-items:center}
#dienstly-bot-widget .dienstly-message-nav:hover{background:#dce5e8;color:#203043}
#dienstly-bot-widget .dienstly-message-nav:focus-visible{outline:2px solid #56a77a;outline-offset:2px}
#dienstly-bot-widget .dienstly-title-text::after{content:'';position:absolute;left:0;bottom:-8px;width:100%;height:1px;border-radius:2px;background:rgba(93,115,126,.25)}
#dienstly-bot-widget .dienstly-dot{width:8px;height:8px;border-radius:50%;background:var(--red)}
#dienstly-bot-widget .dienstly-message{max-height:min(42vh,260px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px;font-size:14px;white-space:pre-wrap;margin:0;text-align:left!important;scrollbar-gutter:auto;scrollbar-width:thin;scrollbar-color:rgba(91,113,125,.5) transparent}
#dienstly-bot-widget.has-scrollable-message .dienstly-message{margin-right:-20px;padding-right:30px;scrollbar-gutter:stable}
#dienstly-bot-widget .dienstly-message::-webkit-scrollbar{width:6px}
#dienstly-bot-widget .dienstly-message::-webkit-scrollbar-track{background:transparent}
#dienstly-bot-widget .dienstly-message::-webkit-scrollbar-button{display:none;width:0;height:0}
#dienstly-bot-widget .dienstly-message::-webkit-scrollbar-thumb{min-height:30px;border:0;border-radius:999px;background:rgba(91,113,125,.5)}
#dienstly-bot-widget .dienstly-message::-webkit-scrollbar-thumb:hover{background:rgba(74,96,109,.7)}
#dienstly-bot-widget .dienstly-message a{color:#174f79;font-weight:750;text-decoration-color:rgba(23,79,121,.45);text-decoration-thickness:1.5px;text-underline-offset:2px;transition:color .16s,text-decoration-color .16s}
#dienstly-bot-widget .dienstly-message a:hover{color:#0c385a;text-decoration-color:currentColor}
#dienstly-bot-widget .dienstly-message a:focus-visible{outline:2px solid #2f8f68;outline-offset:2px;border-radius:2px}
#dienstly-bot-widget .dienstly-close,#dienstly-bot-widget .dienstly-minimize{position:absolute;top:9px;width:28px;height:28px;border:0;background:#f1f4f0;border-radius:9px;cursor:pointer;color:var(--navy);font-size:19px;line-height:1}
#dienstly-bot-widget .dienstly-close{right:10px}
#dienstly-bot-widget .dienstly-minimize{right:34px;font-size:22px;line-height:25px}
#dienstly-bot-widget.notice-can-permanently-dismiss .dienstly-bubble{padding-right:68px}
#dienstly-bot-widget .dienstly-ambient-hello{position:absolute;right:18px;bottom:78px;z-index:3;max-width:150px;padding:8px 12px;border:1px solid #b9daca;border-radius:13px;background:#f7faf8;color:var(--navy);box-shadow:0 8px 24px #2030431c;font-size:13px;font-weight:700;line-height:1.3;white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(6px) scale(.94);transform-origin:80% 100%;transition:opacity .18s,transform .22s,visibility .18s;pointer-events:none}
#dienstly-bot-widget .dienstly-ambient-hello::after{content:'';position:absolute;right:24px;bottom:-6px;width:10px;height:10px;border-right:1px solid #b9daca;border-bottom:1px solid #b9daca;background:#f7faf8;transform:rotate(45deg)}
#dienstly-bot-widget.ambient-greeting .dienstly-ambient-hello{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
#dienstly-bot-widget .dienstly-character{width:124px;height:124px;align-self:flex-end;pointer-events:auto;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 6px 7px #20304319);transform:translateY(140px);opacity:0;transition:transform .45s cubic-bezier(.19,1.2,.44,1),opacity .25s}
#dienstly-bot-widget.visible .dienstly-character{transform:translateY(0) scale(0.80);opacity:1;transform-origin:bottom right}
#dienstly-bot-widget.collapsed .dienstly-character{transform:scale(0.80);transform-origin:bottom right;cursor:pointer}
#dienstly-bot-widget.collapsed:not(.mascot-docked) .dienstly-character{transform:scale(0.80);transform-origin:bottom right;cursor:pointer}
#dienstly-bot-widget svg{width:100%;height:100%;overflow:visible;display:block}
#dienstly-bot-widget .bob{animation:dienstlyBob 3s ease-in-out infinite;transform-origin:center}
#dienstly-bot-widget .wave{transform-box:fill-box;transform-origin:10% 80%;animation:dienstlyWave 2.8s ease-in-out infinite}
#dienstly-bot-widget .eye{transform-box:fill-box;transform-origin:center;animation:dienstlyBlink 5s infinite}
#dienstly-bot-widget .wink{animation-delay:.08s}
#dienstly-bot-widget .shadow{animation:dienstlyShadow 3s ease-in-out infinite;transform-origin:center}
#dienstly-bot-widget .blip{animation:dienstlyBlip 2.8s ease-in-out infinite}
@keyframes dienstlyBob{0%,100%{transform:translateY(2px)}50%{transform:translateY(-9px)}}
@keyframes dienstlyWave{0%,12%,56%,100%{transform:rotate(0)}22%,40%{transform:rotate(-27deg)}31%,48%{transform:rotate(21deg)}}
@keyframes dienstlyBlink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}
@keyframes dienstlyShadow{0%,100%{transform:scaleX(1);opacity:.18}50%{transform:scaleX(.88);opacity:.1}}
@keyframes dienstlyBlip{0%,60%,100%{opacity:0;transform:scale(.9)}20%,40%{opacity:1;transform:scale(1.06)}}
@media(max-width:700px){#dienstly-bot-widget{width:auto;min-width:164px}#dienstly-bot-widget .dienstly-character{width:114px;height:114px}}
@media(max-width:500px){#dienstly-bot-widget{width:auto;min-width:132px}#dienstly-bot-widget .dienstly-character{width:96px;height:96px}}
@media(prefers-reduced-motion:reduce){#dienstly-bot-widget,#dienstly-bot-widget *{animation:none!important;transition:none!important}}

/* Expressies */
#dienstly-bot-widget .face{display:none}
#dienstly-bot-widget[data-mood="normal"] .face-normal,#dienstly-bot-widget[data-mood="surprised"] .face-surprised,#dienstly-bot-widget[data-mood="sad"] .face-sad,#dienstly-bot-widget[data-mood="happy"] .face-happy,#dienstly-bot-widget[data-mood="thinking"] .face-thinking,#dienstly-bot-widget[data-mood="message"] .face-message,#dienstly-bot-widget[data-mood="look"] .face-look,#dienstly-bot-widget[data-mood="sleepy"] .face-sleepy,#dienstly-bot-widget[data-mood="tired"] .face-tired,#dienstly-bot-widget[data-mood="angry"] .face-angry{display:inline}
#dienstly-bot-widget .surprise-marks,#dienstly-bot-widget .thinking-dots{display:none}
#dienstly-bot-widget[data-mood="surprised"] .surprise-marks{display:inline}
#dienstly-bot-widget[data-mood="thinking"] .thinking-dots{display:inline;animation:dienstlyThink 1.8s ease-in-out infinite}
#dienstly-bot-widget[data-mood="surprised"] .bob{animation:dienstlyStartle 2.4s ease-in-out infinite;transform-origin:50% 75%}
#dienstly-bot-widget[data-mood="sad"] .bob{animation:dienstlySad 3s ease-in-out infinite}
#dienstly-bot-widget[data-mood="happy"] .bob{animation:dienstlyCelebrate 1.6s ease-in-out infinite}
#dienstly-bot-widget[data-mood="thinking"] .bob{animation:dienstlyTilt 2.6s ease-in-out infinite;transform-origin:50% 65%}
#dienstly-bot-widget[data-mood="surprised"] .wave,#dienstly-bot-widget[data-mood="sad"] .wave,#dienstly-bot-widget[data-mood="thinking"] .wave{animation:none}
#dienstly-bot-widget[data-mood="sad"] .tear{animation:dienstlyTear 2.5s ease-in infinite}
#dienstly-bot-widget[data-mood="happy"] .dienstly-bubble{border-color:#b9daca}
#dienstly-bot-widget[data-mood="surprised"] .dienstly-dot,#dienstly-bot-widget[data-mood="sad"] .dienstly-dot{background:#f22e43}
#dienstly-bot-widget[data-mood="happy"] .dienstly-dot{background:#25a874}
#dienstly-bot-widget[data-mood="thinking"] .dienstly-dot{background:#d3a142}
/* De temperatuur neemt het vizier kort over; daarna zijn de ogen weer zichtbaar.
   Een bericht en de nachtstand houden altijd voorrang. */
#dienstly-bot-widget .weather-face-mark{display:none}
#dienstly-bot-widget[data-weather-badge="true"][data-weather-ready="true"][data-ambient="true"].collapsed:not(.notice-active):not(.message-active):not([data-sleeping="true"]) .weather-face-mark{display:inline;opacity:0;transform-box:view-box;transform-origin:250px 220px;animation:dienstlyWeatherVisor 30s ease-in-out infinite}
#dienstly-bot-widget[data-weather-badge="true"][data-weather-ready="true"][data-ambient="true"].collapsed:not(.notice-active):not(.message-active):not([data-sleeping="true"]) .message-face-layer{display:inline;transform-box:view-box;transform-origin:250px 225px;animation:dienstlyWeatherFace 30s ease-in-out infinite}
@keyframes dienstlyWeatherFace{0%,64%{opacity:1;transform:translateY(0) scale(1)}68%,97%{opacity:0;transform:translateY(3px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dienstlyWeatherVisor{0%,64%{opacity:0;transform:translateY(-3px) scale(.95)}68%,97%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-3px) scale(.95)}}
@media(prefers-reduced-motion:reduce){#dienstly-bot-widget[data-weather-badge="true"][data-weather-ready="true"][data-ambient="true"].collapsed:not(.notice-active):not(.message-active):not([data-sleeping="true"]) .weather-face-mark{opacity:1;transform:none;animation:none}#dienstly-bot-widget[data-weather-badge="true"][data-weather-ready="true"][data-ambient="true"].collapsed:not(.notice-active):not(.message-active):not([data-sleeping="true"]) .message-face-layer{opacity:0;transform:none;animation:none}}
#dienstly-bot-widget[data-mood="happy"] .face-happy .expression-eyes{animation:dienstlyHappyBlink81 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
#dienstly-bot-widget[data-mood="surprised"] .face-surprised .expression-eyes{animation:dienstlySurprisedBlink79 3.1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes dienstlyStartle{0%,100%{transform:translateY(3px) rotate(0)}12%,24%{transform:translateY(-18px) rotate(-5deg)}18%,30%{transform:translateY(-14px) rotate(4deg)}42%{transform:translateY(2px) rotate(0)}}
@keyframes dienstlySad{0%,100%{transform:translateY(7px) rotate(-3deg)}50%{transform:translateY(12px) rotate(-2deg)}}
@keyframes dienstlyCelebrate{0%,100%{transform:translateY(2px)}30%{transform:translateY(-24px) rotate(-6deg)}65%{transform:translateY(-13px) rotate(6deg)}}
@keyframes dienstlyTilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(7deg)}}
@keyframes dienstlyThink{0%,100%{opacity:.35;transform:translateY(3px)}50%{opacity:1;transform:translateY(-8px)}}
@keyframes dienstlyTear{0%,35%{opacity:0;transform:translateY(-4px)}45%{opacity:1}80%,100%{opacity:0;transform:translateY(20px)}}
@keyframes dienstlyHappyBlink81{0%,25%,31%,58%,64%,100%{transform:translateX(0) scaleY(1)}16%{transform:translateX(-3px) scaleY(1)}28%,61%{transform:translateX(0) scaleY(.08)}48%{transform:translateX(3px) scaleY(1)}}
@keyframes dienstlySurprisedBlink79{0%,46%,52%,100%{transform:scaleY(1)}49%{transform:scaleY(.08)}}
#dienstly-bot-widget .dienstly-character{visibility:hidden;transition:transform .45s cubic-bezier(.19,1.2,.44,1),opacity .25s,visibility .25s}
#dienstly-bot-widget.visible .dienstly-character{visibility:visible}
#dienstly-bot-widget.collapsed .dienstly-bubble{display:none}
#dienstly-bot-widget.mascot-docked{transform:translate3d(var(--mascot-dock-x,0),var(--mascot-dock-y,0),0)}
#dienstly-bot-widget.mascot-docked.collapsed .dienstly-character{clip-path:inset(0 0 42% 0 round 14px);transform:translateY(44px) scale(0.80);transform-origin:bottom right;filter:drop-shadow(0 3px 5px #20304318)}
#dienstly-bot-widget.mascot-walking{transition-property:transform;transition-duration:6s;transition-timing-function:linear}
#dienstly-bot-widget.mascot-walking.mascot-docked.collapsed .dienstly-character{clip-path:none;transform:translateY(71px) scale(0.80);filter:drop-shadow(0 3px 5px #20304318)}
#dienstly-bot-widget.mascot-walking.mascot-docked .bob{animation:dienstlyDockWalk .52s ease-in-out infinite alternate;transform-origin:50% 88%}
#dienstly-bot-widget.mascot-walking .dienstly-character{pointer-events:none}
#dienstly-bot-widget.mascot-walking.mascot-docked .wave{display:inline;animation:dienstlyDockWalkArm .52s ease-in-out infinite alternate;transform-origin:10% 80%}
#dienstly-bot-widget .dock-grip,#dienstly-bot-widget .dock-sleep-zzz,#dienstly-bot-widget .walk-side-orientation{display:none}
#dienstly-bot-widget.mascot-docked.collapsed:not(.mascot-walking):not([data-dock-surface="mobile"]) .dock-grip,#dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking):not([data-sleeping="true"]) .dock-grip{display:inline}
#dienstly-bot-widget.mascot-docked.collapsed:not(.mascot-walking) .dock-grip circle{filter:drop-shadow(0 2px 1px rgba(32,48,67,.18))}
#dienstly-bot-widget.mascot-walking .bob{display:none}
#dienstly-bot-widget.mascot-walking .walk-side-orientation{display:inline;transform-box:fill-box;transform-origin:center}
#dienstly-bot-widget.mascot-walking[data-walk-direction="right"] .walk-side-orientation{transform:scaleX(-1)}
#dienstly-bot-widget.mascot-walking .walk-side-step{animation:dienstlySideWalkBob .42s ease-in-out infinite alternate;transform-origin:50% 88%}
#dienstly-bot-widget.mascot-walking .walk-leg-front{animation:dienstlySideLegFront .42s ease-in-out infinite alternate;transform-origin:48% 82%}
#dienstly-bot-widget.mascot-walking .walk-leg-back{animation:dienstlySideLegBack .42s ease-in-out infinite alternate;transform-origin:54% 82%}
#dienstly-bot-widget.mascot-walking .walk-arm-front{animation:dienstlySideArmFront .42s ease-in-out infinite alternate;transform-origin:44% 67%}
#dienstly-bot-widget.mascot-walking .walk-arm-back{animation:dienstlySideArmBack .42s ease-in-out infinite alternate;transform-origin:58% 67%}
#dienstly-bot-widget .walk-side-sleepy-face{display:none}
#dienstly-bot-widget[data-mood="sleepy"] .walk-side-awake-face{display:none}
#dienstly-bot-widget[data-mood="sleepy"] .walk-side-sleepy-face{display:inline}
#dienstly-bot-widget.mascot-docked.collapsed[data-sleeping="true"] .dienstly-character{transform:translateY(33.4375%) scale(0.80);clip-path:inset(0 0 41.796875% 0 round 14px)}
#dienstly-bot-widget.mascot-docked[data-sleeping="true"] .dock-grip{display:none}
#dienstly-bot-widget.mascot-docked[data-sleeping="true"] .sleepy-zzz{display:none}
#dienstly-bot-widget.mascot-docked[data-sleeping="true"] .dock-sleep-zzz{display:inline;animation:dienstlyDockSleepZ 2.8s ease-in-out infinite;transform-origin:center}
#dienstly-bot-widget.mascot-docked[data-dock-pose="sitting"]:not(.mascot-walking) .bob{animation:dienstlyDockSit 5.5s ease-in-out infinite;transform-origin:50% 88%}
#dienstly-bot-widget.mascot-docked .wave,#dienstly-bot-widget.mascot-docked .shadow{display:none}
#dienstly-bot-widget.mascot-docked .bob{animation:dienstlyDockBreathe 5.5s ease-in-out infinite;transform-origin:center}
#dienstly-bot-widget.mascot-docked .eye{animation:dienstlyDockBlink 6.5s ease-in-out infinite}
#dienstly-bot-widget.mascot-docked .blip{animation:dienstlyDockBlip 4.8s ease-in-out infinite}
#dienstly-bot-widget.mascot-docked[data-mood="look"] .dock-look-pupils{animation:dienstlyLookAround 5s ease-in-out infinite;transform-origin:center}
#dienstly-bot-widget.mascot-docked[data-mood="sleepy"] .sleepy-zzz{animation:dienstlySleepyZ 2.8s ease-in-out infinite;transform-origin:center}
#dienstly-bot-widget.mascot-docked[data-mood="tired"] .tired-sigh{animation:dienstlyTiredSigh 3.4s ease-in-out infinite;transform-origin:center}
@keyframes dienstlyDockBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes dienstlyDockBlink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}}
@keyframes dienstlyDockBlip{0%,70%,100%{opacity:.3}82%{opacity:.75}}
@keyframes dienstlyLookAround{0%,18%,100%{transform:translateX(0)}35%,55%{transform:translateX(-7px)}72%,88%{transform:translateX(7px)}}
@keyframes dienstlySleepyZ{0%,100%{opacity:.3;transform:translateY(3px)}50%{opacity:.85;transform:translateY(-3px)}}
@keyframes dienstlyTiredSigh{0%,100%{opacity:.2;transform:translateX(0)}50%{opacity:.7;transform:translateX(5px)}}
@keyframes dienstlyDockWalk{from{transform:translateY(3px) rotate(-3deg)}to{transform:translateY(-4px) rotate(3deg)}}
@keyframes dienstlyDockWalkArm{from{transform:rotate(-24deg)}to{transform:rotate(18deg)}}
@keyframes dienstlySideWalkBob{from{transform:translateY(2px) rotate(-1deg)}to{transform:translateY(-5px) rotate(1deg)}}
@keyframes dienstlySideLegFront{from{transform:rotate(13deg)}to{transform:rotate(-14deg)}}
@keyframes dienstlySideLegBack{from{transform:rotate(-14deg)}to{transform:rotate(13deg)}}
@keyframes dienstlySideArmFront{from{transform:rotate(-13deg)}to{transform:rotate(15deg)}}
@keyframes dienstlySideArmBack{from{transform:rotate(15deg)}to{transform:rotate(-13deg)}}
@keyframes dienstlyDockSleepZ{0%,100%{opacity:.22;transform:translateY(6px) scale(.92)}50%{opacity:.9;transform:translateY(-8px) scale(1.04)}}
@keyframes dienstlyDockSit{0%,100%{transform:translateY(2px) rotate(-1deg)}50%{transform:translateY(5px) rotate(1deg)}}
#dienstly-bot-widget.mascot-tapped .bob{animation:dienstlyMascotTap .72s ease-in-out 1!important;transform-origin:50% 78%}
/* Een compacte SVG blijft scherper bij een por zonder kleine rotatiehoeken. */
@keyframes dienstlyMascotTap{0%,100%{transform:translateX(0)}14%{transform:translateX(-10px)}29%{transform:translateX(10px)}44%{transform:translateX(-5px)}59%{transform:translateX(5px)}74%,88%{transform:translateX(0)}}
#dienstly-bot-widget.mascot-tapped .face .eye,#dienstly-bot-widget.mascot-tapped .face .expression-eyes{animation:dienstlyMascotTapBlink .72s ease-in-out 1!important;transform-box:fill-box;transform-origin:center}
#dienstly-bot-widget.mascot-tapped .expression-eyes .eye{animation:none!important;transform:none!important}
@keyframes dienstlyMascotTapBlink{0%,28%,100%{transform:scaleY(1)}38%,49%{transform:scaleY(.08)}62%{transform:scaleY(1)}}
#dienstly-bot-widget.mascot-angry .bob{animation:dienstlyMascotAnger .42s ease-in-out 2!important;transform-origin:50% 78%}
#dienstly-bot-widget[data-mood="angry"] .wave{animation:none}
#dienstly-bot-widget[data-mood="angry"] .dienstly-dot{background:#c81e2b}
#dienstly-bot-widget[data-mood="angry"] .message-face-layer{animation:none!important;opacity:1!important;transform:none!important}
#dienstly-bot-widget[data-mood="angry"] .weather-face-mark{display:none!important}
@keyframes dienstlyMascotAnger{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(4px) rotate(-2deg)}55%{transform:translateY(1px) rotate(2deg)}75%{transform:translateY(3px) rotate(-1deg)}}
#dienstly-bot-widget.mascot-returning .dienstly-bubble{display:none}
#dienstly-bot-widget.mascot-returning .dienstly-character{transform:translateY(0) scale(0.80);transition:opacity .25s,visibility .25s}
#dienstly-bot-widget.mascot-opening{will-change:transform}
#dienstly-bot-widget.mascot-opening .dienstly-character{transition:transform .56s cubic-bezier(.22,.78,.24,1),opacity .25s,visibility .25s,clip-path .42s ease!important}
#dienstly-bot-widget.mascot-positioning,#dienstly-bot-widget.mascot-positioning .dienstly-character{transition:none!important}
#dienstly-bot-widget.mascot-awaiting-menu{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* Vanaf 21:00 slaapt Dienstly bij iedere dock. Een gesloten bericht blijft
   herkenbaar door het envelopsignaal, zonder de slaapstand weg te drukken. */
#dienstly-bot-widget.notice-active.notice-user-closed[data-night-sleep-dock="true"].mascot-docked.collapsed .dienstly-character{
    transform:translateY(33.4375%) scale(.80)!important;
    clip-path:inset(0 0 41.796875% 0 round 14px)!important;
}
#dienstly-bot-widget.notice-active.notice-user-closed[data-night-sleep-dock="true"] .dock-grip{display:none!important}
/* De ZZZ heeft in de SVG een vaste, rustige plek links van Dienstly. */
#dienstly-bot-widget.notice-active.notice-user-closed[data-night-sleep-dock="true"] .dock-sleep-zzz{display:inline!important}
#dienstly-bot-widget.mascot-restoring-dock{transition:none!important}
#dienstly-bot-widget.mascot-restoring-dock .dienstly-character{opacity:0!important;transition:none!important}
#dienstly-bot-widget[data-mood="peek"] .face-peek{display:inline}
#dienstly-bot-widget[data-mood="peek"] .face:not(.face-peek){display:none}
#dienstly-bot-widget .peek-happy-mouth{display:none}
#dienstly-bot-widget[data-mood="peek"] .dienstly-character{clip-path:inset(0 0 42% 0 round 14px);transform:scale(0.80);transform-origin:bottom right;filter:drop-shadow(0 3px 5px #20304310)}
#dienstly-bot-widget[data-mood="peek"] .bob{animation:dienstlyPeek 2.8s ease-in-out infinite;transform-origin:center}
#dienstly-bot-widget[data-mood="peek"] .wave,#dienstly-bot-widget[data-mood="peek"] .shadow{display:none}
#dienstly-bot-widget[data-mood="peek"] .blip{animation:dienstlyPeekBlip 2s ease-in-out infinite}
@keyframes dienstlyPeek{0%,100%{transform:translateY(2px)}50%{transform:translateY(7px)}}
@keyframes dienstlyPeekBlip{0%,100%{opacity:.2}50%{opacity:1}}
:root.dark-mode #dienstly-bot-widget[data-mood="peek"] .dienstly-character,:root.observer-dark-mode #dienstly-bot-widget[data-mood="peek"] .dienstly-character{filter:drop-shadow(0 3px 5px #0005)}
@media(min-width:701px){
  #dienstly-bot-widget{bottom:10px}
  #dienstly-bot-widget .dienstly-bubble{width:min(480px,calc(100vw - 56px));padding:17px 28px 17px 20px;border-radius:21px;box-shadow:0 16px 42px rgba(32,48,67,.16)}
  #dienstly-bot-widget .dienstly-message{max-height:min(24vh,156px);font-size:14px;line-height:1.55}
  #dienstly-bot-widget.collapsed:not(.mascot-docked) .dienstly-character{opacity:0;visibility:hidden;pointer-events:none}
}
@media(max-width:700px){
  #dienstly-bot-widget[data-mood="peek"]{z-index:59}
  #dienstly-bot-widget[data-mood="peek"] .dienstly-character{transform:translateY(54px) scale(0.80);clip-path:inset(0 0 42% 0 round 14px);transform-origin:bottom right}
  #dienstly-bot-widget[data-mood="peek"].visible .dienstly-character{transform:translateY(54px) scale(0.80);transform-origin:bottom right}
  #dienstly-bot-widget.mascot-docked[data-dock-surface="mobile"]{z-index:59}
  #dienstly-bot-widget.mascot-docked[data-dock-surface="mobile"].collapsed .dienstly-character{clip-path:inset(0 0 42% 0 round 14px);transform:translateY(32px) scale(0.80);transform-origin:bottom right}
  #dienstly-bot-widget.mascot-docked[data-dock-surface="mobile"]:not(.collapsed) .dienstly-character{transform:translateY(0) scale(0.80);transform-origin:bottom right}
  #dienstly-bot-widget.mascot-walking.mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{clip-path:none;transform:translateY(6px) scale(0.80)}
}
@media(max-width:500px){#dienstly-bot-widget.mascot-walking.mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{transform:translateY(6px) scale(0.80)}}
:root.dark-mode #dienstly-bot-widget .dienstly-bubble,:root.observer-dark-mode #dienstly-bot-widget .dienstly-bubble{border-color:#667783;background:#303a40;color:#edf5f2;box-shadow:0 14px 45px #0005}
:root.dark-mode #dienstly-bot-widget .dienstly-ambient-hello,:root.observer-dark-mode #dienstly-bot-widget .dienstly-ambient-hello{border-color:#667783;background:#303a40;color:#edf5f2;box-shadow:0 8px 24px #0005}
:root.dark-mode #dienstly-bot-widget .dienstly-ambient-hello::after,:root.observer-dark-mode #dienstly-bot-widget .dienstly-ambient-hello::after{border-color:#667783;background:#303a40}
:root.dark-mode #dienstly-bot-widget .dienstly-bubble::after,:root.observer-dark-mode #dienstly-bot-widget .dienstly-bubble::after{border-color:#667783;background:#303a40}
:root.dark-mode #dienstly-bot-widget .dienstly-close,:root.dark-mode #dienstly-bot-widget .dienstly-minimize,:root.observer-dark-mode #dienstly-bot-widget .dienstly-close,:root.observer-dark-mode #dienstly-bot-widget .dienstly-minimize{background:#2c4149;color:#edf5f2}
:root.dark-mode #dienstly-bot-widget .dienstly-title-text::after,:root.observer-dark-mode #dienstly-bot-widget .dienstly-title-text::after{background:rgba(210,224,230,.2)}
:root.dark-mode #dienstly-bot-widget .dienstly-message,:root.observer-dark-mode #dienstly-bot-widget .dienstly-message{scrollbar-color:rgba(190,207,216,.5) transparent}
:root.dark-mode #dienstly-bot-widget .dienstly-message::-webkit-scrollbar-track,:root.observer-dark-mode #dienstly-bot-widget .dienstly-message::-webkit-scrollbar-track{background:transparent}
:root.dark-mode #dienstly-bot-widget .dienstly-message::-webkit-scrollbar-thumb,:root.observer-dark-mode #dienstly-bot-widget .dienstly-message::-webkit-scrollbar-thumb{border:0;background:rgba(190,207,216,.5)}
:root.dark-mode #dienstly-bot-widget .dienstly-message a,:root.observer-dark-mode #dienstly-bot-widget .dienstly-message a{color:#a9d7f4;text-decoration-color:rgba(169,215,244,.55)}
@media(max-width:700px){#dienstly-bot-widget{right:10px;bottom:calc(64px + env(safe-area-inset-bottom,0px))}}
#dienstly-bot-widget[data-source="welcome"]{bottom:12px}

/* Standalone-PWA's kunnen de oude welcome-node kort behouden nadat React de
   app al heeft opgebouwd. De mascot mag dan niet door die oude selector
   verborgen blijven. Zodra de echte app bestaat, is de widget altijd zichtbaar. */
body:has(#root .app) #dienstly-bot-widget{display:flex!important}
body:has(#root .app) #dienstly-bot-widget.visible .dienstly-character{opacity:1!important;visibility:visible!important}
#dienstly-bot-widget[data-source="welcome"] .dienstly-bubble{width:min(190px,calc(100vw - 36px));margin-bottom:5px}
@media(max-width:700px){
  body:has(#root .welcome) #dienstly-bot-widget{display:none!important}
  #dienstly-bot-widget.welcome-mobile-inline{position:relative;right:auto;bottom:auto;z-index:2;width:100%;height:auto;margin:4px 0 0;display:flex;align-items:flex-end}
  #dienstly-bot-widget.welcome-mobile-inline .dienstly-bubble{position:relative;top:auto;right:0;width:min(190px,calc(100% - 18px));margin:0 0 2px}
  #dienstly-bot-widget.welcome-mobile-inline .dienstly-character{position:relative;right:0;bottom:auto;width:96px;height:96px}
  #dienstly-bot-widget.welcome-mobile-inline[data-mood="peek"] .dienstly-character{clip-path:none;transform:translateY(0)}
  #dienstly-bot-widget.welcome-mobile-inline[data-mood="peek"].visible .dienstly-character{transform:translateY(0)}
}
:root[data-dienstly-mascot-notice] #tta-custom-message-banner,:root[data-dienstly-mascot-notice] #tta-ndov-status-banner{display:none!important}
#dienstly-portrait-required{display:none!important}
/* Browsers die een PWA-oriëntatie niet mogen vergrendelen, krijgen geen
   liggende app-shell. De vaste melding blijft staan tot de telefoon weer
   rechtop is; op ondersteunde PWA's voorkomt het manifest dit al eerder. */
@media(max-height:700px) and (orientation:landscape) and (display-mode:standalone){
 #dienstly-portrait-required{
  position:fixed;inset:0;z-index:2147483647;display:grid!important;place-items:center;
  padding:28px;background:#192938;color:#f7faf8;text-align:center;
 }
 #dienstly-portrait-required>div{max-width:260px;font:600 16px/1.45 system-ui,-apple-system,Segoe UI,sans-serif}
 #dienstly-portrait-required strong{display:block;margin-bottom:8px;font-size:20px}
}
/* De mascotte hoort pas na het inloggen bij de app, nooit op het welkomstscherm. */
body:has(#root .welcome) #dienstly-bot-widget{display:none!important}

/* PWA-fix: één consistente grootte, 80% schaal met stabiele dockpositie. */
#dienstly-bot-widget{width:auto;min-width:178px}
#dienstly-bot-widget .dienstly-character{width:128px;height:128px;flex:none}
#dienstly-bot-widget.visible .dienstly-character{transform:translateY(0) scale(.80)}
#dienstly-bot-widget.collapsed .dienstly-character,
#dienstly-bot-widget.collapsed:not(.mascot-docked) .dienstly-character{transform:scale(.80)}
#dienstly-bot-widget.mascot-docked.collapsed .dienstly-character{transform:translateY(44px) scale(.80)}
#dienstly-bot-widget.mascot-walking.mascot-docked.collapsed .dienstly-character{transform:translateY(71px) scale(.80)}
#dienstly-bot-widget.mascot-returning .dienstly-character{transform:translateY(0) scale(.80)}
#dienstly-bot-widget[data-mood="peek"] .dienstly-character{transform:scale(.80)}
@media(max-width:700px){
 #dienstly-bot-widget{width:auto;min-width:164px}
 #dienstly-bot-widget .dienstly-character{width:124px;height:124px}
 #dienstly-bot-widget[data-mood="peek"] .dienstly-character,
 #dienstly-bot-widget[data-mood="peek"].visible .dienstly-character{transform:translateY(54px) scale(.80)}
 #dienstly-bot-widget.mascot-docked[data-dock-surface="mobile"].collapsed .dienstly-character{transform:translateY(32px) scale(.80)}
 #dienstly-bot-widget.mascot-docked[data-dock-surface="mobile"]:not(.collapsed) .dienstly-character{transform:translateY(0) scale(.80)}
 #dienstly-bot-widget.mascot-walking.mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{transform:translateY(6px) scale(.80)}
 #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"][data-sleeping="true"] .dienstly-character{transform:translateY(33.4375%) scale(.80);clip-path:inset(0 0 41.796875% 0 round 14px)}
 #dienstly-bot-widget.welcome-mobile-inline .dienstly-character{width:124px;height:124px}
 #dienstly-bot-widget.welcome-mobile-inline[data-mood="peek"] .dienstly-character,
 #dienstly-bot-widget.welcome-mobile-inline[data-mood="peek"].visible .dienstly-character{transform:translateY(0) scale(.80)}
}
@media(max-width:500px){#dienstly-bot-widget{width:auto;min-width:152px}#dienstly-bot-widget .dienstly-character{width:124px;height:124px}}

/* Bij een geopend dienst-detail houdt Dienstly de ritinformatie vrij: alleen
   zijn ogen gluren vanuit de rechterhoek boven de mobiele menubalk. */
@media(max-width:700px){
 #dienstly-bot-widget.mascot-duty-settling.mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{
  clip-path:none!important;transform:translateY(43px) scale(.80)!important;
  transition:transform .72s cubic-bezier(.22,.78,.24,1),clip-path .72s cubic-bezier(.22,.78,.24,1)!important;
 }
  /* Dagwissel: één korte, omkeerbare overgang, gelijk aan de sectieposes. */
  #dienstly-bot-widget.mascot-duty-returning.mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{
   clip-path:none!important;transform:translateY(43px) scale(.80)!important;
   transition:transform .72s cubic-bezier(.22,.78,.24,1),clip-path .72s cubic-bezier(.22,.78,.24,1)!important;
  }
  #dienstly-bot-widget.mascot-duty-returning[data-duty-return-started="true"].mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{
   clip-path:inset(12% 0 40% 0 round 14px)!important;transform:translateY(33.4375%) scale(.80)!important;
  }
 #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"][data-duty-peek="true"] .dienstly-character{
   /* Alleen een smalle band rond de ogen blijft zichtbaar; geen hele kop. */
   clip-path:inset(35% 0 47% 0 round 9px)!important;
   transform:translateY(54px) scale(.80)!important;
 }
 /* Onafhankelijke veiligheidslaag: een diensttijdlijn mag nooit door een
    volledige mascotte worden afgedekt, ook niet bij een oude scriptcache. */
 body:has(#root .timeline .leg) #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"][data-duty-peek="true"] .dienstly-character{
   clip-path:none!important;
   transform:translateY(43px) scale(.80)!important;
 }
 body:has(#root .timeline .leg) #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"]{z-index:1!important;pointer-events:none}
 body:has(#root .timeline .leg) #root .bottom-nav{z-index:60}
 body:has(#root .timeline .leg) #dienstly-bot-widget.mascot-duty-moving.mascot-docked.collapsed[data-dock-surface="mobile"]{z-index:59!important}
}

/* Bericht heeft voorrang boven alle dock-, loop- en gezichtsanimaties. */
#dienstly-bot-widget.notice-active{z-index:2147483000!important;transition:none!important;pointer-events:none}
#dienstly-bot-widget.notice-active .dienstly-character{pointer-events:auto;clip-path:none!important;transform:translateY(0) scale(.80)!important;opacity:1!important}
#dienstly-bot-widget.notice-active .dienstly-bubble{z-index:3;pointer-events:auto;visibility:visible!important;opacity:1!important;transform:none!important}
#dienstly-bot-widget.notice-active .dienstly-character *,
#dienstly-bot-widget.notice-active svg *{animation:none!important;transition:none!important}
#dienstly-bot-widget.notice-active .face{animation:none!important}
@media(max-width:700px){
  #dienstly-bot-widget.notice-active{bottom:calc(70px + env(safe-area-inset-bottom,0px))!important;right:12px!important;transform:none!important}
  #dienstly-bot-widget.notice-active .dienstly-bubble{width:min(380px,calc(100vw - 28px))}
  #dienstly-bot-widget.mascot-walking.mascot-docked[data-dock-surface="mobile"]{z-index:59}
}

/* v14: sluitknop werkt tijdens actieve beheerdersmelding; mascotte blijft aanklikbaar. */
#dienstly-bot-widget.notice-active.notice-user-closed .dienstly-bubble{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(12px) scale(.95)!important}
#dienstly-bot-widget.notice-active.notice-user-closed .dienstly-character{pointer-events:auto!important}
#dienstly-bot-widget.notice-active .dienstly-close,#dienstly-bot-widget.notice-active .dienstly-minimize{pointer-events:auto!important;position:absolute;z-index:10;touch-action:manipulation}
#dienstly-bot-widget.notice-active.open:not(.notice-user-closed) .dienstly-bubble{pointer-events:auto!important}

/* v15: loopanimatie bovenop de mobiele menubalk, met zichtbare voeten.
   dockAtTarget legt de onderkant op 4px onder de bovenrand van de balk.
   Tijdens lopen geen afknippen, geen verborgen poten en de balk mag er niet overheen liggen. */
@media(max-width:700px){
  #dienstly-bot-widget.mascot-walking.mascot-docked[data-dock-surface="mobile"]{z-index:1000001!important;overflow:visible!important}
  #dienstly-bot-widget.mascot-walking.mascot-docked[data-dock-surface="mobile"] .dienstly-character,
  #dienstly-bot-widget.mascot-walking.mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{
    transform:translateY(0) scale(.80)!important;transform-origin:bottom right!important;clip-path:none!important;overflow:visible!important;opacity:1!important;visibility:visible!important;
  }
  #dienstly-bot-widget.mascot-walking .walk-side-orientation,
  #dienstly-bot-widget.mascot-walking .walk-leg-front,
  #dienstly-bot-widget.mascot-walking .walk-leg-back{visibility:visible!important}
}

/* v16: na sluiten van een actieve melding peekt de mascotte boven de menubalk.
   De gesloten toestand krijgt voorrang op de algemene notice-active plaatsing. */
#dienstly-bot-widget.notice-active.notice-user-closed[data-mood="peek"] .dienstly-character{
  clip-path:inset(0 0 43% 0 round 14px)!important;
  transform:translateY(44px) scale(.80)!important;
  transform-origin:bottom right!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
#dienstly-bot-widget.notice-active.notice-user-closed .dienstly-bubble{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
@media(max-width:700px){
  #dienstly-bot-widget.notice-active.notice-user-closed{
    bottom:calc(63px + env(safe-area-inset-bottom,0px))!important;
    right:12px!important;
  }
  #dienstly-bot-widget.notice-active.notice-user-closed[data-mood="peek"] .dienstly-character{
    transform:translateY(51px) scale(.80)!important;
  }
}

/* v17: dockpositie gelijk aan de werkende looppositie.
   Alleen de stilstaande mobiele dockstand; loopstand blijft onaangetast. */
@media(max-width:700px){
  #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking):not(.notice-active) .dienstly-character{
    transform:translateY(0) scale(.80)!important;
    transform-origin:bottom right!important;
    clip-path:none!important;
  }
  /* Bij een door de gebruiker gesloten bericht mag de docktranslatie
     niet worden overschreven door de algemene meldingpositionering. */
  #dienstly-bot-widget.notice-active.notice-user-closed.mascot-docked[data-dock-surface="mobile"]{
    bottom:clamp(10px,2.4vw,28px)!important;
    transform:translate3d(var(--mascot-dock-x,0),var(--mascot-dock-y,0),0)!important;
    z-index:59!important;
  }
  #dienstly-bot-widget.notice-active.notice-user-closed.mascot-docked[data-dock-surface="mobile"] .dienstly-character{
    transform:translateY(0) scale(.80)!important;
    transform-origin:bottom right!important;
    clip-path:none!important;
  }
}

/* v18: Mobiele ruststand = peek achter de menubalk; lopen blijft volledig zichtbaar.
   Specifiekere laatste regels herstellen de v17 regressie. */
@media (max-width:700px){
  #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking):not(.notice-active) .dienstly-character{
    transform:translateY(47px) scale(.80)!important;
    transform-origin:bottom right!important;
    clip-path:inset(0 0 43% 0 round 14px)!important;
    pointer-events:auto!important;
  }
  #dienstly-bot-widget.notice-active.notice-user-closed.mascot-docked[data-dock-surface="mobile"]:not(.mascot-walking) .dienstly-character{
    transform:translateY(47px) scale(.80)!important;
    clip-path:inset(0 0 43% 0 round 14px)!important;
  }
  #dienstly-bot-widget.mascot-walking.mascot-docked[data-dock-surface="mobile"] .dienstly-character{
    clip-path:none!important;transform:translateY(0) scale(.80)!important;
  }
}

/* v20: discrete herinnering voor een door gebruiker gesloten, nog actief bericht.
   Wijzig uitsluitend het interne hoofd/lichaam: dockpositie en loopstand blijven intact. */
@keyframes dienstlyClosedNoticeReminder{
  0%,100%{transform:rotate(0deg) translateY(0)}
  16%,44%{transform:rotate(-5deg) translateY(-5px)}
  30%,58%{transform:rotate(5deg) translateY(-2px)}
  74%{transform:rotate(0deg) translateY(0)}
}
#dienstly-bot-widget.notice-active.notice-user-closed.notice-reminder-nudge .dienstly-character svg .bob{
  animation:dienstlyClosedNoticeReminder 1.5s ease-in-out 1!important;
  transform-origin:50% 78%;
}
@media(prefers-reduced-motion:reduce){
  #dienstly-bot-widget.notice-active.notice-user-closed.notice-reminder-nudge .dienstly-character svg .bob{animation:none!important}
}

/* v21: een gesloten beheerdersbericht mag nooit de mascotte verbergen.
   Zonder gemeten navigatiepositie staat de peek direct op de menubalk;
   zodra de balk bestaat neemt de berekende dockpositie het over. */
#dienstly-bot-widget.notice-active.notice-user-closed.collapsed{visibility:visible!important;opacity:1!important;pointer-events:none!important}
#dienstly-bot-widget.notice-active.notice-user-closed.collapsed .dienstly-character{visibility:visible!important;opacity:1!important;pointer-events:auto!important;display:block!important}
@media(max-width:700px){
 #dienstly-bot-widget.notice-active.notice-user-closed.collapsed.mascot-docked[data-dock-surface="mobile"]{z-index:59!important}
 #dienstly-bot-widget.notice-active.notice-user-closed.collapsed.mascot-docked[data-dock-surface="mobile"] .dienstly-character{transform:translateY(47px) scale(.80)!important;clip-path:inset(0 0 43% 0 round 14px)!important}
}

/* Ook op desktop blijft de mascotte na sluiten zichtbaar: één klik opent
   hetzelfde bericht opnieuw. */
@media(min-width:701px){
  #dienstly-bot-widget.notice-active.notice-user-closed.collapsed .dienstly-character{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;display:block!important;
    /* Houd direct de eindhouding vast. De eerdere scale zonder uitsnede
       liet bij sluiten één frame de volledige mascotte zien. */
    transform:translateY(44px) scale(.80)!important;
    clip-path:inset(0 0 42% 0 round 14px)!important;
    transition:none!important;
  }
}

/* v22: gesloten maar actief bericht: subtiele expressie + duidelijk rood signaal.
   Dock- en looptransforms blijven expliciet ongemoeid. */
#dienstly-bot-widget .dienstly-unread-marks{display:none}
#dienstly-bot-widget.notice-active.notice-user-closed.collapsed .dienstly-unread-marks{
  display:inline!important;
  opacity:1!important;
  visibility:visible!important;
  animation:dienstlyUnreadPulse 3.6s ease-in-out infinite!important;
  transform-origin:365px 110px;
}
@keyframes dienstlyUnreadPulse{
  0%,78%,100%{opacity:1;transform:scale(1)}
  85%{opacity:.38;transform:scale(.92)}
  94%{opacity:1;transform:scale(1.11)}
}
/* De globale animatiestop voor open beheerdersberichten mag de kleine
   expressie van een reeds gesloten bericht niet blokkeren. */
#dienstly-bot-widget.notice-active.notice-user-closed.collapsed .dienstly-character svg .face-peek ellipse{
  animation:dienstlyPeekBlink 8s infinite!important;
  transform-box:fill-box;
  transform-origin:center;
}
@keyframes dienstlyPeekBlink{0%,44%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.1)}}
#dienstly-bot-widget.notice-active.notice-user-closed.collapsed.notice-reminder-nudge .dienstly-character svg .bob{
  animation:dienstlyClosedNoticeReminder 1.5s ease-in-out 1!important;
  transform-origin:50% 78%;
}
/* Een notificatie blijft herkenbaar voor gebruikers met minder beweging. */
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget.notice-active.notice-user-closed.collapsed .dienstly-unread-marks,
 #dienstly-bot-widget.notice-active.notice-user-closed.collapsed .dienstly-character svg .face-peek ellipse,
 #dienstly-bot-widget.notice-active.notice-user-closed.collapsed.notice-reminder-nudge .dienstly-character svg .bob{animation:none!important}
}


/* v23: berichten mogen de mascotte niet bevriezen. Geen lopen terwijl een
   beheerdersbericht actief is; wel gezichts- en rustige hoofdbeweging. */
#dienstly-bot-widget.notice-active .blip{display:none!important}
#dienstly-bot-widget.notice-active .dienstly-unread-marks{
  display:inline!important;opacity:1!important;visibility:visible!important;
  animation:dienstlyNoticeRedSignal 2.8s ease-in-out infinite!important;
  transform-box:fill-box;transform-origin:center;
}
@keyframes dienstlyNoticeRedSignal{
  0%,58%,100%{opacity:1;transform:rotate(0deg) scale(1)}
  67%{opacity:.55;transform:rotate(-9deg) scale(.88)}
  78%{opacity:1;transform:rotate(7deg) scale(1.10)}
  89%{opacity:.85;transform:rotate(0deg) scale(1)}
}
/* Zorg dat de gesloten dockstand met kopje boven de balk niet verandert. */
#dienstly-bot-widget.notice-active .dienstly-character svg .bob{
  animation:dienstlyNoticeAlive 4.4s ease-in-out infinite!important;
  transform-origin:50% 80%;
}
@keyframes dienstlyNoticeAlive{
  0%,100%{transform:translateY(0) rotate(0deg)}
  40%{transform:translateY(-3px) rotate(-2deg)}
  65%{transform:translateY(-1px) rotate(2deg)}
}
#dienstly-bot-widget.notice-active .dienstly-character svg .eye,
#dienstly-bot-widget.notice-active .dienstly-character svg .face-peek ellipse{
  animation:dienstlyPeekBlink 5.6s infinite!important;
  transform-box:fill-box;transform-origin:center;
}
/* Specifieke herinneringsbeweging blijft sterker dan het rustige ademhalen. */
#dienstly-bot-widget.notice-active.notice-user-closed.collapsed.notice-reminder-nudge .dienstly-character svg .bob{
  animation:dienstlyClosedNoticeReminder 1.5s ease-in-out 1!important;
}
@media(prefers-reduced-motion:reduce){
  #dienstly-bot-widget.notice-active .dienstly-unread-marks,
  #dienstly-bot-widget.notice-active .dienstly-character svg .bob,
  #dienstly-bot-widget.notice-active .dienstly-character svg .eye,
  #dienstly-bot-widget.notice-active .dienstly-character svg .face-peek ellipse{
    animation:none!important;
  }
}

/* v24: Notificatiestreepjes zijn onderdeel van de bewegende .bob-groep.
   Eén samengevoegde beweging; de basis blijft optisch aan de helm vastzitten. */
#dienstly-bot-widget.notice-active .dienstly-character svg .dienstly-unread-marks{
 display:inline!important;
 animation:dienstlyHeadSignal24 3.4s ease-in-out infinite!important;
 transform-box:view-box!important;
 transform-origin:355px 145px!important;
}
@keyframes dienstlyHeadSignal24{
 0%,40%,100%{opacity:1;transform:rotate(0deg) scale(1)}
 52%{opacity:.72;transform:rotate(-5deg) scale(.95)}
 65%{opacity:1;transform:rotate(5deg) scale(1.06)}
 78%{opacity:1;transform:rotate(0deg) scale(1)}
}
/* Bij bericht kijkt Dienstly van normaal even richting rechtsboven,
   naar het notificatiesymbool (ook in peek-stand). */
#dienstly-bot-widget.notice-active .dienstly-character svg .face-peek ellipse{
 animation:dienstlyNoticeGaze24 6s ease-in-out infinite!important;
 transform-box:fill-box;transform-origin:center;
}
#dienstly-bot-widget.notice-active .dienstly-character svg .face-peek circle{
 animation:dienstlyNoticeHighlight24 6s ease-in-out infinite!important;
}
#dienstly-bot-widget.notice-active .dienstly-character svg .face-normal .eye,
#dienstly-bot-widget.notice-active .dienstly-character svg .face-message .eye{
 animation:dienstlyNoticeGaze24 6s ease-in-out infinite!important;
 transform-box:fill-box;transform-origin:center;
}
@keyframes dienstlyNoticeGaze24{
 0%,18%,48%,100%{transform:translate(0,0) scaleY(1)}
 23%,37%{transform:translate(5px,-4px) scaleY(1)}
 42%{transform:translate(5px,-4px) scaleY(.12)}
 45%{transform:translate(5px,-4px) scaleY(1)}
}
@keyframes dienstlyNoticeHighlight24{
 0%,18%,48%,100%{transform:translate(0,0)}
 23%,45%{transform:translate(5px,-4px)}
}
/* Voorkom dat een oude, globale regel de signalen dubbel laat bewegen. */
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget.notice-active .dienstly-character svg .dienstly-unread-marks,
 #dienstly-bot-widget.notice-active .dienstly-character svg .face-peek ellipse,
 #dienstly-bot-widget.notice-active .dienstly-character svg .face-peek circle,
 #dienstly-bot-widget.notice-active .dienstly-character svg .face-normal .eye,
 #dienstly-bot-widget.notice-active .dienstly-character svg .face-message .eye{animation:none!important}
}

/* v25: een bericht oogt vriendelijk en de blik wijst duidelijk naar de twee
   rode notificatiestreepjes. Dit geldt ook voor een gewone ongelezen chat. */
#dienstly-bot-widget:is(.notice-active,.message-active) .dienstly-unread-marks{
 display:inline!important;opacity:1!important;visibility:visible!important;
 animation:dienstlyHeadSignal24 3.4s ease-in-out infinite!important;
 transform-box:view-box!important;transform-origin:355px 145px!important;
}
#dienstly-bot-widget:is(.notice-active,.message-active)[data-mood="peek"] .peek-neutral-mouth{display:none}
#dienstly-bot-widget:is(.notice-active,.message-active)[data-mood="peek"] .peek-happy-mouth{display:inline}
#dienstly-bot-widget:is(.notice-active,.message-active) .face-peek .notice-gaze-eyes{
 animation:dienstlyNoticeGaze25 5.4s ease-in-out infinite;
 transform-box:fill-box;transform-origin:center;
}
#dienstly-bot-widget:is(.notice-active,.message-active) :is(.face-normal,.face-message) .eye{
 animation:dienstlyNoticeGazeOpen25 5.4s ease-in-out infinite!important;
 transform-box:fill-box;transform-origin:center;
}
@keyframes dienstlyNoticeGaze25{
 0%,16%,54%,100%{transform:translate(0,0)}
 24%,46%{transform:translate(10px,-7px)}
}
@keyframes dienstlyNoticeGazeOpen25{
 0%,16%,54%,100%{transform:translate(0,0) scaleY(1)}
 24%,40%{transform:translate(9px,-6px) scaleY(1)}
 44%{transform:translate(9px,-6px) scaleY(.12)}
 47%{transform:translate(9px,-6px) scaleY(1)}
}
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget:is(.notice-active,.message-active) .dienstly-unread-marks,
 #dienstly-bot-widget:is(.notice-active,.message-active) .face-peek .notice-gaze-eyes,
 #dienstly-bot-widget:is(.notice-active,.message-active) :is(.face-normal,.face-message) .eye{animation:none!important}
 #dienstly-bot-widget:is(.notice-active,.message-active) .face-peek .notice-gaze-eyes{transform:translate(8px,-6px)}
 #dienstly-bot-widget:is(.notice-active,.message-active) :is(.face-normal,.face-message) .eye{transform:translate(8px,-6px)}
}

/* v26: natuurlijkere ogen, voeten exact op de mobiele menulijn en
   duidelijkere handen die over de rand grijpen. */
#dienstly-bot-widget.mascot-open-menu-aligned:not(.collapsed):not(.mascot-docked){
 transform:translate3d(0,var(--mascot-open-menu-y,0),0);
}
#dienstly-bot-widget:is(.notice-active,.message-active) .dienstly-character svg :is(.face-normal,.face-message) .eye{
 animation:dienstlyMessageEyeLife26 5.8s ease-in-out infinite!important;
}
#dienstly-bot-widget:is(.notice-active,.message-active) .dienstly-character svg .face-peek .notice-gaze-eyes ellipse{
 animation:dienstlyMessageBlink26 5.8s ease-in-out infinite!important;
 transform-box:fill-box;transform-origin:center;
}
@keyframes dienstlyMessageEyeLife26{
 0%,12%,19%,22%,38%,66%,69%,72%,100%{transform:translate(0,0) scaleY(1)}
 14%,17%{transform:translate(0,0) scaleY(.08)}
 40%,64%{transform:translate(9px,-6px) scaleY(1)}
 67%,71%{transform:translate(9px,-6px) scaleY(.08)}
}
@keyframes dienstlyMessageBlink26{
 0%,12%,19%,22%,66%,69%,72%,100%{transform:scaleY(1)}
 14%,17%,67%,71%{transform:scaleY(.08)}
}
#dienstly-bot-widget.mascot-docked.collapsed:not(.mascot-walking) .dock-hand{
 transform-box:fill-box;transform-origin:center;
 animation:dienstlyDockGripLife26 4.8s ease-in-out infinite;
}
#dienstly-bot-widget.mascot-docked.collapsed:not(.mascot-walking) .dock-hand-right{animation-delay:-2.4s}
@keyframes dienstlyDockGripLife26{0%,82%,100%{transform:translateY(0)}89%{transform:translateY(-3px)}94%{transform:translateY(1px)}}
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget:is(.notice-active,.message-active) .dienstly-character svg :is(.face-normal,.face-message) .eye,
 #dienstly-bot-widget:is(.notice-active,.message-active) .dienstly-character svg .face-peek .notice-gaze-eyes ellipse,
 #dienstly-bot-widget.mascot-docked.collapsed:not(.mascot-walking) .dock-hand{animation:none!important}
}

/* v27: op mobiele gebruikersschermen blijft het volledige gezicht met beide
   handen boven de menubalk zichtbaar. Open meldingen en de voetenuitlijning
   blijven ongewijzigd. */
@media(max-width:700px){
 #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking) .dienstly-character,
 #dienstly-bot-widget.notice-active.notice-user-closed.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking) .dienstly-character{
  transform:translateY(39px) scale(.80)!important;
  clip-path:inset(0 0 43% 0 round 14px)!important;
 }
}

/* v28: de mobiele menubalk heeft z-index 60. Zet uitsluitend de stilstaande,
   gesloten dockhouding één laag hoger zodat mond en grijphanden zichtbaar zijn. */
@media(max-width:700px){
 #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking),
 #dienstly-bot-widget.notice-active.notice-user-closed.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking){
  z-index:61!important;
 }
}

/* v29: elke mobiele docktoestand heeft een eigen vaste rusthoogte.
   Zonder bericht staat de mascotte iets hoger; bericht- en slaapstanden
   behouden hun eigen uitlijning. */
@media(max-width:700px){
 #dienstly-bot-widget[data-ambient="true"]:not([data-sleeping="true"]).mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking) .dienstly-character{
  transform:translateY(33px) scale(.80)!important;
 }
 #dienstly-bot-widget[data-sleeping="true"].mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking) .dienstly-character{
   transform:translateY(calc(33.4375% - 4px)) scale(.80)!important;
  clip-path:inset(0 0 41.796875% 0 round 14px)!important;
 }
}

/* One mobile grip anchor for every awake dock state. SVG hands end at y=298
   in the 512 viewBox. With bottom-origin scale(.8), the required translation
   is .8 * (512 - 298) / 512 = 33.4375% of the actual button height.
   This stays on the menu edge at both 96px and 114px character sizes. */
@media(max-width:700px){
 #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking):not([data-sleeping="true"]) .dienstly-character,
 #dienstly-bot-widget.notice-active.notice-user-closed.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking) .dienstly-character,
 #dienstly-bot-widget[data-ambient="true"]:not([data-sleeping="true"]).mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking) .dienstly-character{
  transform:translateY(33.4375%) scale(.80)!important;
  transform-origin:bottom right!important;
  clip-path:inset(0 0 41.796875% 0 round 14px)!important;
 }
 #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking):not([data-sleeping="true"]) .bob,
 #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking):not([data-sleeping="true"]) .dock-hand{
  animation:none!important;transform:none!important;
 }
}

@media(max-width:700px){
  #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking):not(.mascot-sliding){transition:none!important}
  #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking):not(.mascot-sliding) .dienstly-character{transition:transform .72s cubic-bezier(.22,.78,.24,1),clip-path .72s cubic-bezier(.22,.78,.24,1)!important}
}

/* De mascotte verdwijnt eerst onder de menubalk en komt daarna op een andere
   plek weer omhoog. De root mag tijdens het verborgen verplaatsen niet glijden. */
@media(max-width:700px){
 #dienstly-bot-widget.mascot-relocating.mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{
  transform:translateY(118%) scale(.80)!important;
  clip-path:none!important;opacity:0!important;pointer-events:none!important;
  transition:transform .95s cubic-bezier(.42,0,.58,1),opacity .68s ease!important;
 }
 #dienstly-bot-widget.mascot-reappearing.mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{
  transform:translateY(33.4375%) scale(.80)!important;
  transform-origin:bottom right!important;clip-path:inset(0 0 41.796875% 0 round 14px)!important;
  opacity:1!important;pointer-events:auto!important;
  transition:transform .95s cubic-bezier(.22,.78,.24,1),opacity .68s ease!important;
 }
 #dienstly-bot-widget.mascot-repositioning{transition:none!important}
}

/* Walking soles end at y=489/512. Anchor that baseline to the same menu edge
   as the resting hands. One foot stays planted while the other lifts. */
@media(max-width:700px){
 #dienstly-bot-widget.mascot-walking.mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{
  transform:translateY(3.59375%) scale(.80)!important;transition:none!important;
 }
 #dienstly-bot-widget.mascot-walking .walk-side-step{animation:none;transform:none}
 #dienstly-bot-widget.mascot-walking .walk-leg-front{animation:dienstlyPlantedFront 1s ease-in-out infinite}
 #dienstly-bot-widget.mascot-walking .walk-leg-back{animation:dienstlyPlantedBack 1s ease-in-out infinite}
}
@keyframes dienstlyPlantedFront{0%,50%,100%{transform:translateY(0)}75%{transform:translateY(-18px)}}
@keyframes dienstlyPlantedBack{0%,50%,100%{transform:translateY(0)}25%{transform:translateY(-18px)}}

/* v55: mobiele mascotte is compacter; verplaatsen en begroeten blijven duidelijk zichtbaar. */
@media(max-width:700px){
 #dienstly-bot-widget .dienstly-character{width:108px;height:108px}
}
@media(max-width:500px){
 #dienstly-bot-widget .dienstly-character{width:94px;height:94px}
}
#dienstly-bot-widget.mascot-docked.mascot-dock-waving .wave{
 display:inline!important;
 transform-box:fill-box;transform-origin:10% 80%;
 animation:dienstlyDockGreeting55 2.2s ease-in-out 1!important;
}
@keyframes dienstlyDockGreeting55{
 0%,100%{transform:rotate(0)}
 18%,50%,82%{transform:rotate(-30deg)}
 34%,66%{transform:rotate(24deg)}
}
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget.mascot-docked.mascot-dock-waving .wave{animation:none!important}
}

/* v56: het berichtsignaal sluit dichter bij de mascotte aan en valt sneller op. */
#dienstly-bot-widget:is(.notice-active,.message-active) .dienstly-character svg .dienstly-unread-marks{
 animation:dienstlyMessageAlert56 2.25s ease-in-out infinite!important;
 transform-box:view-box!important;transform-origin:340px 135px!important;
 filter:drop-shadow(0 0 3px rgba(242,46,67,.52));
}
@keyframes dienstlyMessageAlert56{
 0%,54%,100%{opacity:1;transform:rotate(0) scale(1)}
 62%{opacity:.22;transform:rotate(-4deg) scale(.82)}
 69%{opacity:1;transform:rotate(5deg) scale(1.14)}
 77%{opacity:.34;transform:rotate(-3deg) scale(.9)}
 84%{opacity:1;transform:rotate(2deg) scale(1.08)}
}
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget:is(.notice-active,.message-active) .dienstly-character svg .dienstly-unread-marks{animation:none!important;filter:none}
}

/* v57: open bericht staat met de voeten op de menubalk; dockposities blijven onaangeroerd. */
@media(max-width:700px){
 #dienstly-bot-widget.notice-active.mascot-open-menu-aligned:not(.collapsed):not(.mascot-docked){
  transform:translate3d(0,var(--mascot-open-menu-y,0),0)!important;
 }
}
#dienstly-bot-widget .message-pointer{display:none}
#dienstly-bot-widget:is(.notice-active,.message-active):not(.collapsed):not(.mascot-docked) .message-left-arm{display:none}
#dienstly-bot-widget:is(.notice-active,.message-active):not(.collapsed):not(.mascot-docked) .message-pointer{
 display:inline;transform-box:fill-box;transform-origin:88% 18%;
 animation:dienstlyMessagePoint57 2.8s ease-in-out infinite;
}
@keyframes dienstlyMessagePoint57{
 0%,58%,100%{transform:rotate(0)}
 70%{transform:rotate(-8deg)}
 82%{transform:rotate(3deg)}
}
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget:is(.notice-active,.message-active):not(.collapsed):not(.mascot-docked) .message-pointer{animation:none}
}

/* Een open melding houdt op mobiel dezelfde rustige houding als op desktop.
   De ballon wijst al naar Dienstly; een extra wijzende arm maakt de compacte
   mobiele weergave onrustig. */
@media(max-width:700px){
 #dienstly-bot-widget:is(.notice-active,.message-active):not(.collapsed):not(.mascot-docked) .message-pointer{
  display:none!important;
  animation:none!important;
 }
 #dienstly-bot-widget:is(.notice-active,.message-active):not(.collapsed):not(.mascot-docked) .message-left-arm,
 #dienstly-bot-widget:is(.notice-active,.message-active):not(.collapsed):not(.mascot-docked) .wave{
  display:inline!important;
  animation:none!important;
 }
}

/* v58: alleen de open mobiele tekstballon sluit nauwer aan op de mascotte. */
@media(max-width:700px){
 #dienstly-bot-widget.visible.open:not(.collapsed):not(.mascot-docked) .dienstly-bubble{margin-bottom:-18px}
}

/* v61: zonder bericht blijft Dienstly opgewekt en zichtbaar levendig. */
@media(max-width:700px){
 #dienstly-bot-widget[data-ambient="true"][data-dock-surface="mobile"]:not([data-sleeping="true"]).mascot-docked.collapsed:not(.mascot-walking) .peek-neutral-mouth{display:none}
 #dienstly-bot-widget[data-ambient="true"][data-dock-surface="mobile"]:not([data-sleeping="true"]).mascot-docked.collapsed:not(.mascot-walking) .peek-happy-mouth{display:inline}
 #dienstly-bot-widget[data-ambient="true"][data-dock-surface="mobile"]:not([data-sleeping="true"]).mascot-docked.collapsed:not(.mascot-walking) .face-peek .notice-gaze-eyes ellipse{
  animation:dienstlyAmbientBlink61 5.8s ease-in-out infinite!important;transform-box:fill-box;transform-origin:center;
 }
 #dienstly-bot-widget[data-ambient="true"][data-dock-surface="mobile"]:not([data-sleeping="true"]).mascot-docked.collapsed:not(.mascot-walking) .dock-hand{
  animation:dienstlyAmbientGrip61 5.8s ease-in-out infinite!important;transform-box:fill-box;transform-origin:center;
 }
 #dienstly-bot-widget[data-ambient="true"][data-dock-surface="mobile"]:not([data-sleeping="true"]).mascot-docked.collapsed:not(.mascot-walking) .dock-hand-right{animation-delay:-2.9s!important}
}
@keyframes dienstlyAmbientBlink61{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.08)}}
@keyframes dienstlyAmbientGrip61{0%,78%,100%{transform:translateY(0)}86%{transform:translateY(-3px)}92%{transform:translateY(1px)}}
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget[data-ambient="true"] .face-peek .notice-gaze-eyes ellipse,
 #dienstly-bot-widget[data-ambient="true"] .dock-hand{animation:none!important}
}

/* v64: Meekijkmodus gebruikt een echte dockhouding: handen op de rand. */
#dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="observer"] .dienstly-character{transform-origin:bottom right!important}
@media(max-width:700px){
 body:has(.observer-page-main):has(#observer-users[hidden]) #dienstly-bot-widget{display:none!important}
 #dienstly-bot-widget.mascot-docked.collapsed[data-observer-mobile-dock="true"]{
  position:fixed!important;left:var(--observer-mobile-dock-x)!important;top:var(--observer-mobile-dock-y)!important;right:auto!important;bottom:auto!important;
  height:0!important;transform:none!important;visibility:visible!important;opacity:1!important;z-index:2147483000!important;
 }
 #dienstly-bot-widget.mascot-docked.collapsed[data-observer-mobile-dock="true"] .dienstly-character{
  display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
  position:absolute!important;right:0!important;bottom:0!important;top:auto!important;margin:0!important;translate:none!important;
  transform:translateY(33.6%) scale(.80)!important;transform-origin:bottom right!important;clip-path:inset(0 0 42% 0 round 14px)!important;
 }
}

/* v63: in Meekijkmodus zwaait de bestaande rechterarm, niet een losse extra arm. */
#dienstly-bot-widget.mascot-docked.mascot-dock-waving[data-dock-surface="observer"] .wave{display:none!important}
#dienstly-bot-widget.mascot-docked.mascot-dock-waving[data-dock-surface="observer"] .dock-grip-right{
 display:inline;transform-box:fill-box;transform-origin:5% 18%;
 animation:dienstlyObserverHandWave63 2.2s ease-in-out 1!important;
}
#dienstly-bot-widget.mascot-docked.mascot-dock-waving[data-dock-surface="observer"] .dock-hand-right{animation:none!important}
@keyframes dienstlyObserverHandWave63{
 0%,100%{transform:rotate(0)}
 18%,50%,82%{transform:rotate(-42deg)}
 34%,66%{transform:rotate(-12deg)}
}
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget.mascot-docked.mascot-dock-waving[data-dock-surface="observer"] .dock-grip-right{animation:none!important}
}

/* v67: ook mobiel zwaait alleen de bestaande dockhand; schuiven blijft zichtbaar. */
#dienstly-bot-widget.mascot-docked.mascot-dock-waving .wave{display:none!important;animation:none!important}
#dienstly-bot-widget.mascot-docked.mascot-dock-waving .dock-grip-right{
 display:inline;transform-box:fill-box;transform-origin:5% 18%;
 animation:dienstlyDockGripWave67 2.2s ease-in-out 1!important;
}
#dienstly-bot-widget.mascot-docked.mascot-dock-waving .dock-hand-right{animation:none!important}
@keyframes dienstlyDockGripWave67{
 0%,100%{transform:rotate(0)}
 18%,50%,82%{transform:rotate(-42deg)}
 34%,66%{transform:rotate(-12deg)}
}
#dienstly-bot-widget.mascot-sliding{transition-property:transform;transition-duration:.76s;transition-timing-function:cubic-bezier(.22,.78,.24,1);will-change:transform;backface-visibility:hidden}
/* Houd de huidige houding vast tijdens het schuiven. Een tweede bob-animatie
   boven op de horizontale transitie zorgde op mobiele schermen voor schokken. */
#dienstly-bot-widget.mascot-sliding.mascot-docked .bob{animation-play-state:paused!important;transform-origin:50% 88%}
#dienstly-bot-widget.mascot-sliding .dienstly-character{will-change:transform,clip-path;backface-visibility:hidden;filter:none!important;transition:none!important}
#dienstly-bot-widget.mascot-sliding[data-walk-direction="right"] .face-happy{animation-play-state:paused!important;transform-origin:center}
#dienstly-bot-widget.mascot-sliding[data-walk-direction="left"] .dock-look-pupils{animation-play-state:paused!important;transform-origin:center}
@keyframes dienstlyDockSlide67{from{transform:translateY(1px)}to{transform:translateY(-3px)}}
@keyframes dienstlySlideCheer67{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@keyframes dienstlySlideLook67{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget.mascot-sliding,#dienstly-bot-widget.mascot-sliding .bob,#dienstly-bot-widget.mascot-sheltered .dienstly-character,#dienstly-bot-widget.mascot-docked.mascot-dock-waving .dock-grip-right{animation:none!important;transition:none!important}
}
@media(max-width:700px){
 #dienstly-bot-widget.mascot-sliding.mascot-docked.collapsed[data-dock-surface="mobile"]{transition:transform .76s cubic-bezier(.22,.78,.24,1)!important}
}

/* Maak de kleine, vaste docklagen al klaar bij het openen van de PWA. De
   eerste zichtbare beweging hoeft dan niet tegelijk een clip/filter-laag op
   te bouwen, wat vooral op iOS een eerste-frame-hapering voorkomt. */
@media(max-width:700px){
 #dienstly-bot-widget.mascot-compositor-warm.mascot-docked[data-dock-surface="mobile"]{
  will-change:transform;backface-visibility:hidden;
 }
 #dienstly-bot-widget.mascot-compositor-warm.mascot-docked[data-dock-surface="mobile"] .dienstly-character{
  will-change:auto;backface-visibility:visible;filter:none!important;
 }
}

/* De schuilpositie bewaart de compacte startstand voor de reveal terug naar
   Mijn dienst; na de horizontale beweging wordt het widget verborgen. */
@media(max-width:700px){
 #dienstly-bot-widget.mascot-sheltered.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking) .dienstly-character{
  transform:translateY(52%) scale(.80)!important;
  clip-path:inset(35% 0 47% 0 round 9px)!important;opacity:1!important;pointer-events:auto!important;
   transition:transform .5s cubic-bezier(.22,.78,.24,1),clip-path .5s cubic-bezier(.22,.78,.24,1)!important;
 }
 /* Een gesloten bericht mag de sectie-schuilstand nooit terug naar de
    vaste slaapplek trekken. Deze selector wint bewust van alle notice- en
    slaapregels; Mijn dienst verwijdert data-section-peek bij terugkeer. */
 #dienstly-bot-widget[data-section-peek="true"].notice-active.notice-user-closed.mascot-sheltered.mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{
  transform:translateY(52%) scale(.80)!important;
  clip-path:inset(35% 0 47% 0 round 9px)!important;
  opacity:1!important;pointer-events:auto!important;
   transition:transform .5s cubic-bezier(.22,.78,.24,1),clip-path .5s cubic-bezier(.22,.78,.24,1)!important;
 }
}
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget.mascot-sheltered.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking) .dienstly-character{transition:none!important}
}

/* Sectiepeek: JS ankert de widget exact aan de gemeten menubalkrand.
   Alleen de bovenste strook van de mascotte blijft buiten de balk zichtbaar. */
@media(max-width:700px){
 #dienstly-bot-widget[data-section-peek="true"]{
  position:fixed!important;transform:none!important;transition:none!important;
  z-index:1000002!important;overflow:hidden!important;clip-path:inset(0)!important;
  visibility:visible!important;opacity:1!important;pointer-events:none!important;
 }
 #dienstly-bot-widget[data-section-peek="true"] .dienstly-character{
  transform-origin:bottom right!important;visibility:visible!important;opacity:1!important;
 }
 body:has(#dienstly-bot-widget[data-section-peek="true"]) #root .bottom-nav{z-index:1000003!important}
}

/* Dagwissels blijven boven de balk: het lichaam onder de dockrand wordt
   gedurende de hele overgang afgeknipt, ook als de tijdlijn verdwijnt. */
@media(max-width:700px){
 #dienstly-bot-widget:is(.mascot-duty-returning,.mascot-duty-settling).mascot-docked.collapsed[data-dock-surface="mobile"]{
  overflow:visible!important;
  clip-path:inset(-200px -200px 0 -200px)!important;
  pointer-events:none!important;
 }
}

/* Bij het verlaten van Muurkrant komt Dienstly net zo rustig weer omhoog. */
@media(max-width:700px){
  /* Het dock staat met zijn onderrand precies op de bovenrand van de balk.
     Knip tijdens de terugkeer alles daaronder af: zo blijft Dienstly boven
     de pagina zichtbaar zonder door de navigatie heen te tekenen. */
  #dienstly-bot-widget.mascot-revealing.mascot-docked.collapsed[data-dock-surface="mobile"]{
   z-index:1000003!important;pointer-events:none!important;overflow:visible!important;
   clip-path:inset(-200px -200px 0 -200px)!important;
  }
  body:has(#dienstly-bot-widget.mascot-revealing.mascot-docked.collapsed[data-dock-surface="mobile"]) #root .bottom-nav{
   z-index:60!important;
  }
  #dienstly-bot-widget.mascot-revealing.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-sheltered):not(.mascot-walking) .dienstly-character{
   transform:translateY(33.4375%) scale(.80)!important;
    clip-path:inset(0 0 41.796875% 0 round 14px)!important;opacity:1!important;pointer-events:auto!important;
   transition:transform .5s cubic-bezier(.22,.78,.24,1),clip-path .5s cubic-bezier(.22,.78,.24,1)!important;
 }
}

/* De terugkeer uit Nieuws/Muurkrant/Live OV mag nooit achter de pagina
   verdwijnen. De reveal-laag blijft boven de sectie en de menubalk. */
@media(max-width:700px){
  #dienstly-bot-widget.mascot-revealing.mascot-docked.collapsed[data-dock-surface="mobile"]{
    z-index:1000003!important;
  }
  #dienstly-bot-widget.mascot-revealing.mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{
    opacity:1!important;visibility:visible!important;
  }
}
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget.mascot-revealing.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-sheltered) .dienstly-character{transition:none!important}
}

/* De dagelijkse begroeting blijft een klein berichtje aan de bestaande
   zijbalk-dock: de ballon past binnen de kolom en Dienstly blijft zitten. */
@media(min-width:701px){
 #dienstly-bot-widget.mascot-docked.docked-greeting .dienstly-bubble{
  width:min(210px,calc(100vw - 48px));
  margin-bottom:2px;
  padding:12px 32px 12px 13px;
 }
 #dienstly-bot-widget.mascot-docked.docked-greeting.open .dienstly-bubble{
  /* The seated SVG is clipped at its top; bring the tail down to that
     visible edge instead of leaving a visual gap to the full SVG box. */
  transform:translateY(68px) scale(1);
  z-index:2;
 }
 #dienstly-bot-widget.mascot-docked.docked-greeting .dienstly-title{font-size:13px;margin-bottom:5px;padding-bottom:5px}
 #dienstly-bot-widget.mascot-docked.docked-greeting .dienstly-message{font-size:13px;line-height:1.35}
 #dienstly-bot-widget.mascot-docked.docked-greeting:not(.collapsed) .dienstly-character{
  clip-path:inset(0 0 42% 0 round 14px);
  transform:translateY(44px) scale(.80);
  transform-origin:bottom right;
  filter:drop-shadow(0 3px 5px #20304318);
 }
 #dienstly-bot-widget.mascot-docked.docked-greeting:not(.collapsed) .dock-grip{display:inline}
}

/* In de meekijkvoorvertoning krijgt een open bericht een vaste veilige
   ondermarge. Zonder die marge kan het lichaam van de mascotte onder de
   viewport vallen terwijl de ballon al wel zichtbaar is. */
@media(min-width:701px){
 :root:not(.admin-preview-mode) #dienstly-bot-widget.notice-active:not(.collapsed) .dienstly-bubble{margin-bottom:-14px}
 #dienstly-bot-widget:is(.notice-active,.message-active):not(.collapsed):not(.mascot-docked) .message-pointer{display:none!important;animation:none!important}
 #dienstly-bot-widget:is(.notice-active,.message-active):not(.collapsed):not(.mascot-docked) .message-left-arm,
 #dienstly-bot-widget:is(.notice-active,.message-active):not(.collapsed):not(.mascot-docked) .wave{display:inline!important;animation:none!important}
 :root.admin-preview-mode #dienstly-bot-widget.notice-active:not(.collapsed){
  bottom:clamp(76px,9vh,104px)!important;
  z-index:10001!important;
  transform:translate3d(0,0,0)!important;
  transition:none!important;
 }
 :root.admin-preview-mode #dienstly-bot-widget.notice-active:not(.collapsed) .dienstly-character{
  transform:translateY(0) scale(.80)!important;
  clip-path:none!important;
  opacity:1!important;
  visibility:visible!important;
  transition:none!important;
 }
 :root.admin-preview-mode #dienstly-bot-widget.notice-active:not(.collapsed) .bob{animation:none!important;transform:none!important}
 :root.admin-preview-mode #dienstly-bot-widget.notice-active:not(.collapsed) .dienstly-bubble{
  margin-bottom:-32px!important;
 }
}

/* Houd de ruststand van Mijn dienst vast terwijl React de tijdlijn vervangt
   door een vrije dag. Daardoor heeft de volgende reveal een echt startpunt. */
@media(max-width:700px){
 #dienstly-bot-widget.mascot-sheltered.mascot-docked.collapsed[data-dock-surface="mobile"][data-duty-peek="true"] .dienstly-character{
  transform:translateY(43px) scale(.80)!important;clip-path:none!important;
  transition:transform 1.8s cubic-bezier(.22,.78,.24,1),clip-path 1.8s cubic-bezier(.22,.78,.24,1)!important;
 }
 #dienstly-bot-widget.mascot-reveal-preparing.mascot-docked.collapsed[data-dock-surface="mobile"][data-duty-peek="true"] .dienstly-character{
  transform:translateY(43px) scale(.80)!important;clip-path:none!important;transition:none!important;
 }
 #dienstly-bot-widget.mascot-revealing.mascot-reveal-preparing[data-section-dock-locked="true"].mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{
  transform:translateY(43px) scale(.80)!important;clip-path:none!important;opacity:1!important;transition:none!important;
 }
}

/* Bij een gesloten bericht krijgt het vizier af en toe een rustig
   berichtmoment: gezicht weg, envelop erin, gezicht weer terug. */
#dienstly-bot-widget .message-bubble-mark{display:none}
#dienstly-bot-widget.collapsed:is(.notice-active,.message-active) .message-bubble-mark{
 display:inline!important;
 opacity:0;
 visibility:visible!important;
 transform-box:view-box;
 transform-origin:250px 222px;
 filter:none;
 animation:dienstlyClosedMessageEnvelope 10s ease-in-out infinite!important;
}
/* Eén vaste laag houdt alle gezichten op dezelfde klok, ook bij een moodwissel. */
#dienstly-bot-widget.collapsed:is(.notice-active,.message-active) .message-face-layer{
 transform-box:view-box;
 transform-origin:250px 225px;
 animation:dienstlyClosedMessageFace 10s ease-in-out infinite!important;
}
@keyframes dienstlyClosedMessageFace{
 0%,44%{opacity:0;transform:translateY(3px) scale(.94)}
 56%,88%{opacity:1;transform:translateY(0) scale(1)}
 96%,100%{opacity:0;transform:translateY(3px) scale(.94)}
}
@keyframes dienstlyClosedMessageEnvelope{
 0%,34%{opacity:1;transform:translateY(0) scale(1)}
 17%{opacity:1;transform:translateY(0) scale(1.05)}
 42%,98%{opacity:0;transform:translateY(-3px) scale(.96)}
 100%{opacity:1;transform:translateY(0) scale(1)}
}
#dienstly-bot-widget.mascot-docked.collapsed:is(.notice-active,.message-active) .dienstly-character svg .dienstly-unread-marks{
 display:inline!important;
 opacity:1!important;
 visibility:visible!important;
 animation:dienstlyDockUnreadLines 3.8s ease-in-out infinite!important;
 transform-box:view-box!important;
 transform-origin:346px 130px!important;
 filter:drop-shadow(0 0 3px rgba(242,46,67,.46))!important;
}
@keyframes dienstlyDockUnreadLines{0%,54%,100%{opacity:.72;transform:rotate(0) scale(1)}64%{opacity:1;transform:rotate(-4deg) scale(1.08)}76%{opacity:.8;transform:rotate(3deg) scale(.98)}}
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget.collapsed:is(.notice-active,.message-active) .message-bubble-mark,
 #dienstly-bot-widget.collapsed:is(.notice-active,.message-active) .message-face-layer,
 #dienstly-bot-widget.collapsed:is(.notice-active,.message-active) .dienstly-character svg .dienstly-unread-marks,
 #dienstly-bot-widget.collapsed:is(.notice-active,.message-active) .face{animation:none!important}
 #dienstly-bot-widget.collapsed:is(.notice-active,.message-active) .message-bubble-mark{opacity:1!important;transform:none!important}
 #dienstly-bot-widget.collapsed:is(.notice-active,.message-active) .message-face-layer{opacity:0!important;transform:none!important}
}

/* De bewegende mascotte is uitsluitend decoratief zolang hij over de mobiele
   menubalk loopt. Zo kan de onzichtbare rechthoek van zijn knop nooit een tik
   op navigatie, inloggen of een bericht onderscheppen. Berichten en meldingen
   verwijderen data-ambient zodra ze openen en blijven dus gewoon aanklikbaar. */
@media(max-width:700px){
  #dienstly-bot-widget[data-ambient="true"].mascot-docked.collapsed[data-dock-surface="mobile"] .dienstly-character{
    pointer-events:auto!important;
    cursor:pointer!important;
  }
}

/* Weer en gezicht zijn twee expliciete, exclusieve standen. De gewone stand
   behoudt alle mascotte-animaties; de temperatuurstand schakelt in één paint
   over, zonder lege of dubbel getekende tussenlaag. */
#dienstly-bot-widget[data-weather-badge="true"][data-weather-ready="true"][data-ambient="true"].collapsed:not(.notice-active):not(.message-active):not([data-sleeping="true"]) .message-face-layer{
 display:inline!important;opacity:1!important;visibility:visible!important;transform:none!important;animation:none!important;
}
#dienstly-bot-widget[data-weather-badge="true"][data-weather-ready="true"][data-ambient="true"].collapsed:not(.notice-active):not(.message-active):not([data-sleeping="true"]) .weather-face-mark{
 display:inline!important;opacity:0!important;visibility:hidden!important;transform:none!important;animation:none!important;
}
#dienstly-bot-widget[data-weather-display="temperature"][data-weather-badge="true"][data-weather-ready="true"][data-ambient="true"].collapsed:not(.notice-active):not(.message-active):not([data-sleeping="true"]) .message-face-layer{
 opacity:0!important;visibility:hidden!important;
}
#dienstly-bot-widget[data-weather-display="temperature"][data-weather-badge="true"][data-weather-ready="true"][data-ambient="true"].collapsed:not(.notice-active):not(.message-active):not([data-sleeping="true"]) .weather-face-mark{
 display:inline!important;opacity:1!important;visibility:visible!important;transform:translateZ(0)!important;
}
/* Duidelijkere gezichtstrekken op het kleine vizier, zonder extra transforms
   die de bestaande knipper- en poranimaties beïnvloeden. */
#dienstly-bot-widget .face [fill="#203043"]{fill:#101923}
#dienstly-bot-widget .face [stroke="#203043"]{stroke:#101923}
#dienstly-bot-widget .face path[stroke="#203043"][stroke-width="6"]{stroke-width:7}
#dienstly-bot-widget .face path[stroke="#203043"][stroke-width="7"]{stroke-width:8}
#dienstly-bot-widget .face ellipse[fill="#203043"][cx="213"],
#dienstly-bot-widget .face ellipse[fill="#203043"][cx="287"],
#dienstly-bot-widget .face ellipse[fill="#203043"][cx="211"],
#dienstly-bot-widget .face ellipse[fill="#203043"][cx="286"],
#dienstly-bot-widget .face circle[fill="#203043"]{stroke:#101923;stroke-width:3;paint-order:stroke fill}
/* Eerst de oude inhoud uit, daarna de nieuwe in: geen overlappende tekens. */
#dienstly-bot-widget[data-weather-ready="true"][data-ambient="true"].collapsed:not(.notice-active):not(.message-active):not([data-sleeping="true"]) .message-face-layer{
 transition:opacity .5s ease .5s,visibility 0s linear .5s!important;
}
#dienstly-bot-widget[data-weather-ready="true"][data-ambient="true"].collapsed:not(.notice-active):not(.message-active):not([data-sleeping="true"]) .weather-face-mark{
 transition:opacity .5s ease,visibility 0s linear .5s!important;
}
#dienstly-bot-widget[data-weather-display="temperature"][data-weather-ready="true"][data-ambient="true"].collapsed:not(.notice-active):not(.message-active):not([data-sleeping="true"]) .message-face-layer{
 transition:opacity .5s ease,visibility 0s linear .5s!important;
}
#dienstly-bot-widget[data-weather-display="temperature"][data-weather-ready="true"][data-ambient="true"].collapsed:not(.notice-active):not(.message-active):not([data-sleeping="true"]) .weather-face-mark{
 transition:opacity .5s ease .5s,visibility 0s linear .5s!important;
}
@media(prefers-reduced-motion:reduce){
 #dienstly-bot-widget .message-face-layer,#dienstly-bot-widget .weather-face-mark{transition:none!important}
}

/* De stilstaande mascotte rust achter de mobiele menubalk. Alleen tijdens het
   lopen mag hij over de balk heen komen, zodat de navigatie leesbaar blijft. */
@media(max-width:700px){
  #dienstly-bot-widget[data-ambient="true"].mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking):not(.notice-active):not(.message-active){z-index:1000002!important}
  /* De rustende mascotte zit achter de balk. Zo kan zijn clip-/schaduwlaag
     de egale achtergrond van de menubalk niet lichter maken of laten flikkeren. */
  body:has(#dienstly-bot-widget[data-ambient="true"].mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking)) #root .bottom-nav{z-index:1000003!important;isolation:isolate}
}

/* De ogen blijven in iedere rustige mobiele dockstand in beeld. De oude
   uitsnede liet bij een kleine viewport soms alleen de helm/rode markering zien. */
@media(max-width:700px){
  #dienstly-bot-widget.mascot-docked.collapsed[data-dock-surface="mobile"]:not(.mascot-walking) .dienstly-character{
    transform:translateY(33.4375%) scale(.80)!important;
    clip-path:inset(12% 0 40% 0 round 14px)!important;
    transform-origin:bottom right!important;
  }
}