.pwbot{display:block;width:100%;height:100%;overflow:visible}
.pwbot__eye{transform-box:fill-box;transform-origin:center;transition:transform .09s ease-in,opacity .15s}
.pwbot__happy,.pwbot__open,.pwbot__z{opacity:0;transition:opacity .15s}
.pwbot__smile{transition:opacity .1s}
.pwbot__open{transform-box:fill-box;transform-origin:center}
.pwbot__bob{animation:pwbot-bob 4s ease-in-out infinite}
.pwbot__tip{animation:pwbot-tip 2.6s ease-in-out infinite}

.is-blink .pwbot__eye,.is-wink .pwbot__eye--l{transform:scaleY(.1)}
.is-happy .pwbot__eye{opacity:0}
.is-happy .pwbot__happy{opacity:1}
.is-talk .pwbot__smile,.is-oh .pwbot__smile{opacity:0}
.is-talk .pwbot__open{opacity:1;animation:pwbot-talk .16s ease-in-out infinite alternate}
.is-oh .pwbot__open{opacity:1;transform:scale(.75,1.15)}

.is-asleep .pwbot__eye{transform:scaleY(.1);opacity:.7}
.is-asleep .pwbot__happy{opacity:0}
.is-asleep .pwbot__smile{opacity:.6}
.is-asleep .pwbot__z{opacity:1}
.is-asleep .pwbot__bob,.is-asleep .pwbot__tip{animation:none}

@keyframes pwbot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(1.2px)}}
@keyframes pwbot-tip{0%,100%{fill:#B27BFF}50%{fill:#E9D6FF}}
@keyframes pwbot-talk{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

@media (prefers-reduced-motion:reduce){
  .pwbot__bob,.pwbot__tip,.is-talk .pwbot__open{animation:none}
  .pwbot__eye{transition:none}
}

/* Robottino come pulsante dell'assistente */
.chat__fab--bot { position: relative; display: block; width: 88px; height: 80px; min-height: 0; padding: 0; border-radius: 26px; background: none; box-shadow: none; color: var(--c-primary); }
.chat__fab--bot:hover { background: none; transform: translateY(-3px); }
.chat__fab--bot:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }
.chat__bot { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 14px rgb(43 7 72 / .28)) drop-shadow(0 2px 3px rgb(43 7 72 / .18)); }
.chat__bubble { position: absolute; left: -26px; top: -14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 34px; border-radius: 14px 14px 4px 14px; background: var(--c-primary); color: #fff; box-shadow: 0 8px 18px -6px rgb(43 7 72 / .5); transform-origin: 85% 100%; transition: background-color .25s, transform .3s var(--ease); }
.chat__bubble svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.chat__bubble-x { display: none; }
.chat__fab--bot:hover .chat__bubble { background: var(--c-secondary); transform: scale(1.08); }
.chat.is-open .chat__bubble-msg { display: none; }
.chat.is-open .chat__bubble-x { display: block; }
.chat__botpause { display: grid; place-items: center; width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.chat__botpause:hover { background: rgba(255, 255, 255, .24); }
.chat__botpause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chat__bp-play { display: none; fill: currentColor !important; stroke-width: 1.5 !important; }
.chat__botpause.is-asleep .chat__bp-play { display: block; }
.chat__botpause.is-asleep .chat__bp-pause { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .chat:not(.is-open) .chat__bubble { animation: pwbot-bubble 6s ease-in-out infinite; }
  .is-asleep ~ .chat__bubble, .chat__fab--bot.is-asleep .chat__bubble { animation: none; }
}
@keyframes pwbot-bubble { 0%, 80%, 100% { transform: none; } 86% { transform: translateY(-3px) rotate(-6deg); } 92% { transform: translateY(0) rotate(4deg); } }
@media (max-width: 520px) { .chat__fab--bot { width: 72px; height: 66px; } .chat__bubble { left: -20px; top: -12px; width: 36px; height: 30px; } .chat__bubble svg { width: 18px; height: 18px; } }
.chat.is-open .chat__fab--bot, .chat .chat__fab--bot { padding: 0; }
/* Robottino a colori invertiti nell'intestazione della chat */
.pwbot--inv .pwbot__tip { animation-name: pwbot-tip-inv; }
@keyframes pwbot-tip-inv { 0%, 100% { fill: #E9D6FF; } 50% { fill: #FFFFFF; } }
.chat__avatar--bot { width: 52px; height: 48px; border-radius: 0; background: none; }
.chat__avatar--bot svg.pwbot { width: 100%; height: 100%; stroke: none; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .35)); }
