.zhora-launcher-wrap {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    --size: 115px;
    width: var(--size);
    height: var(--size);
    z-index: 99998;
    display: none;
    pointer-events: auto;
    user-select: none;
}

.zhora-launcher-wrap.zhora-pos-left {
    right: auto;
    left: max(16px, env(safe-area-inset-left));
}

/* При скрытии маскота активируется круглый лаунчер */
.zhora-is-dismissed .zhora-launcher-wrap {
    display: block;
    animation: zhoraLauncherEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes zhoraLauncherEnter {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.85);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Если пользователь нажал на крестик самой кнопки, отключаем её на время */
.zhora-launcher-hidden .zhora-launcher-wrap,
.zhora-launcher-wrap.is-temporarily-hidden {
    display: none !important;
}

/* Скрытое состояние основного маскота */
.zhora-is-dismissed .zhora-mascot-container {
    opacity: 0;
    transform: translateY(50px) scale(0.7);
    pointer-events: none;
}

/* Небольшой крестик сверху для временного отключения кнопки (появляется только при наведении!) */
.zhora-launcher-dismiss-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #64748b;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
    transition: opacity 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.zhora-launcher-dismiss-btn svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.5;
}

/* При наведении на контейнер крестик плавно появляется */
@media (hover: hover) {
    .zhora-launcher-wrap:hover .zhora-launcher-dismiss-btn {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
    }
}

.zhora-launcher-wrap:focus-within .zhora-launcher-dismiss-btn {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.zhora-launcher-dismiss-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #ef4444;
    transform: scale(1.12);
}

/* Компонент круглой кнопки .zhora */
.zhora {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 50%;
    color: #536378;
    cursor: pointer;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    margin: auto;
    transition: transform .3s ease;
}

.zhora:focus-visible {
    outline: 2px solid #137ec0;
    outline-offset: 8px;
}

.zhora:active {
    transform: scale(.97);
}

.zhora::before {
    content: "";
    position: absolute;
    inset: 13.333%;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #8ac8ed00, 0 0 28px #54acfa00;
    transition: box-shadow .7s cubic-bezier(.22, 1, .36, 1);
    z-index: -2;
    pointer-events: none;
}

.zhora__disc {
    position: absolute;
    inset: 13.333%;
    border-radius: 50%;
    overflow: hidden;
    background: #8bbde9;
    box-shadow: 0 8px 24px #33577512;
    z-index: -1;
}

.zhora__fluid {
    position: absolute;
    inset: -24%;
    background: radial-gradient(ellipse at 20% 25%, #65d9fa 0, transparent 47%),
                radial-gradient(ellipse at 82% 30%, #1053ce 0, transparent 48%),
                radial-gradient(ellipse at 65% 85%, #b2e7ff 0, transparent 44%),
                radial-gradient(ellipse at 15% 80%, #0875e3 0, transparent 48%),
                #4088e8;
    filter: blur(8px);
    animation: zhora-fluid 6s ease-in-out infinite alternate;
}

.zhora__fluid::after {
    content: "";
    position: absolute;
    inset: 2%;
    border-radius: 46% 54% 70% 30%;
    background: radial-gradient(ellipse at 20% 40%, #a0edffa8, transparent 45%),
                radial-gradient(ellipse at 85% 65%, #479bffb8, transparent 48%);
    mix-blend-mode: screen;
    animation: zhora-fluid 4s ease-in-out infinite alternate-reverse;
}

.zhora__band {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.zhora__band circle {
    fill: none;
    stroke: #ffffff;
    stroke-width: 19;
}

.zhora__type {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: zhora-orbit 24s linear infinite;
    pointer-events: none;
}

.zhora__type text {
    fill: currentColor;
    font-family: Arial, sans-serif;
    font-size: 10.8px;
    font-weight: 600;
    letter-spacing: 3.1px;
}

.zhora__portrait {
    position: absolute;
    inset: 0;
    clip-path: url(#zhora-portrait-clip);
    pointer-events: none;
}

.zhora__head {
    position: absolute;
    left: 3.5%;
    top: 4%;
    width: 90%;
    height: 90%;
    object-fit: contain;
    pointer-events: none;
}

.zhora__head--wink {
    opacity: 0;
    transition: opacity .14s ease-in-out;
    mask-image: radial-gradient(ellipse 16% 14% at 56% 28%, #000 70%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 16% 14% at 56% 28%, #000 70%, transparent 100%);
}

@media (hover: hover) {
    .zhora:hover::before {
        box-shadow: 0 0 0 1px #8ac8ed88, 0 0 24px #54acfa50, 0 0 42px #72c8ef24;
    }
}

.zhora:focus-visible::before,
.zhora.is-winking::before {
    box-shadow: 0 0 0 1px #8ac8ed88, 0 0 24px #54acfa50, 0 0 42px #72c8ef24;
}

@media (hover: hover) {
    .zhora:hover .zhora__head--wink {
        opacity: 1;
    }
}

.zhora:focus-visible .zhora__head--wink,
.zhora.is-winking .zhora__head--wink {
    opacity: 1;
}

@keyframes zhora-orbit {
    to { transform: rotate(360deg); }
}

@keyframes zhora-fluid {
    0%   { transform: translate(-7%, -4%) rotate(-25deg) scale(.9); }
    50%  { transform: translate(8%, 5%) rotate(65deg) scale(1.1); }
    100% { transform: translate(-3%, 7%) rotate(155deg) scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
    .zhora__type,
    .zhora__fluid,
    .zhora__fluid::after {
        animation: none;
    }
    .zhora,
    .zhora__head,
    .zhora::before {
        transition: none;
    }
}

@media (max-width: 600px) {
    .zhora-launcher-wrap {
        --size: 90px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
    }
    .zhora-launcher-wrap.zhora-pos-left {
        left: 12px;
        right: auto;
    }
    .zhora-launcher-dismiss-btn {
        top: 2px;
        right: 2px;
        width: 22px;
        height: 22px;
    }
    .zhora-launcher-dismiss-btn svg {
        width: 10px;
        height: 10px;
    }
}


/* v4.4: compact, non-obstructive widget; no work while hidden. */
.zhora-launcher-wrap{--size:104px;z-index:30;bottom:max(18px,env(safe-area-inset-bottom));}
.zhora-launcher-wrap .zhora-launcher-dismiss-btn{width:28px;height:28px;}
.zhora__type{will-change:transform;transform-box:view-box;transform-origin:50% 50%;backface-visibility:hidden;}
.zhora__fluid{filter:none;animation-duration:10s;}
.zhora__fluid::after{mix-blend-mode:normal;animation-duration:7s;}
.zhora__head--wink{transition:opacity .1s ease-out;}
.zhora[aria-busy="true"]{opacity:.7;cursor:progress;}
.zhora-suspended *,.zhora-suspended *::before,.zhora-suspended *::after,
.zhora-is-dismissed .zhora-mascot-container *{animation-play-state:paused!important;}
.zhora-is-dismissed .zhora-mascot-container{visibility:hidden;}
.zhora-is-dismissed .zhora-mascot-container *{pointer-events:none!important;}
#zhora-launcher-shell[hidden]{display:none!important;}
@media(max-width:600px){.zhora-launcher-wrap{--size:84px;bottom:max(16px,env(safe-area-inset-bottom));}}
@media(prefers-reduced-motion:reduce){.zhora *,.zhora *::before,.zhora *::after{animation:none!important;transition:none!important;}}

/* Keep both launcher and expanded mascot off the photographic hero. */
html.zhora-hero-visible .zhora-launcher-wrap,
html.zhora-hero-visible .zhora-mascot-container{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
html.zhora-hero-visible #zhora-launcher-shell *,
html.zhora-hero-visible #zhora-mascot-root *{animation-play-state:paused!important}

.zhora-launcher-wrap .zhora-launcher-dismiss-btn{box-sizing:border-box;width:28px;height:28px;min-width:28px;min-height:28px;max-width:28px;max-height:28px;flex:0 0 28px;padding:0;aspect-ratio:1;border-radius:50%;line-height:1}