/* Mluvící maskotka (titulka CZ3) – bublina se zajímavostmi; DOM a poloha řeší assets/js/mascot-bubble.js */
.wx-mb { position: absolute; left: 0; top: 0; z-index: 20; display: none; pointer-events: none; }
.wx-mb__bubble {
    position: relative; box-sizing: border-box; width: max-content; max-width: 250px;
    background: #fff; color: #2b2b2b; border-radius: 18px; padding: 11px 15px 12px;
    font-family: inherit; font-size: 14.5px; line-height: 1.38; text-align: left;
    box-shadow: 0 8px 22px rgba(70, 50, 0, .14), 0 1px 3px rgba(0, 0, 0, .08);
    opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 100% 80%;
    transition: opacity .35s ease, transform .4s cubic-bezier(.2, .8, .3, 1.15);
    will-change: opacity, transform;
}
.wx-mb__bubble.is-narrow { font-size: 13px; padding: 9px 12px 10px; }
.wx-mb__bubble.is-in { opacity: 1; transform: none; animation: wx-mb-float 4.5s ease-in-out .5s infinite; }
.wx-mb__bubble.is-out { opacity: 0; transform: translateY(-4px) scale(.97); animation: none; }
.wx-mb__tail {
    position: absolute; right: -6px; top: 22px; width: 14px; height: 14px;
    background: #fff; border-radius: 2px; transform: rotate(45deg);
    box-shadow: 3px -2px 5px -3px rgba(70, 50, 0, .18);
}
.wx-mb__text { display: block; }
@keyframes wx-mb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
    .wx-mb__bubble { transition: opacity .3s ease; transform: none; }
    .wx-mb__bubble.is-in { animation: none; }
}
@media (max-width: 767px) { .wx-mb { display: none !important; } }
