/* Phượng Đỏ Bot — interactive Codex-compatible bot on the home page. */
.home-bot {
    --bot-size: 116px;
    --bot-footer-lift: 0px;
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--bot-footer-lift));
    z-index: 1500;
    display: grid;
    width: calc(var(--bot-size) + 20px);
    justify-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: bottom .24s ease, opacity .24s ease, transform .24s ease;
    isolation: isolate;
}

.home-bot.is-ready {
    opacity: 1;
    transform: none;
}

.home-bot.is-ready.is-user-hidden {
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px) scale(.92);
}

.bot-visibility-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 66px;
    min-height: 42px;
    margin: 0;
    padding: 7px 12px;
    color: #0737a8;
    background: #ddf5ff;
    border: 2px solid #0737a8;
    border-radius: 999px;
    box-shadow: 2px 2px 0 #0737a8;
    font: 800 .72rem/1 "Noto Serif", Georgia, serif;
    letter-spacing: .04em;
    cursor: pointer;
    touch-action: manipulation;
}

.bot-visibility-toggle__dot {
    width: 10px;
    height: 10px;
    flex: none;
    background: #2fb673;
    border: 1.5px solid #0737a8;
    border-radius: 50%;
    box-shadow: 1px 1px 0 #ffd11a;
}

.bot-visibility-toggle[data-bot-visibility="off"] {
    background: #f1edff;
}

.bot-visibility-toggle[data-bot-visibility="off"] .bot-visibility-toggle__dot {
    background: #ff8b82;
    box-shadow: none;
}

.bot-visibility-toggle:hover,
.bot-visibility-toggle:focus-visible {
    background: #ffd11a;
    transform: translateY(1px);
    box-shadow: 1px 1px 0 #0737a8;
}

.bot-visibility-toggle:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.home-bot__button {
    display: grid;
    width: var(--bot-size);
    aspect-ratio: 192 / 208;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 34%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.home-bot__button:disabled {
    cursor: default;
    pointer-events: none;
}

.home-bot__button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #e8132a;
}

.home-bot__sprite {
    display: block;
    width: 100%;
    height: 100%;
    grid-area: 1 / 1;
    background-repeat: no-repeat;
    background-size: 800% 1100%;
    background-position: 0 0;
    transform-origin: 50% 92%;
    user-select: none;
    -webkit-user-select: none;
}

.home-bot__button.is-hopping {
    animation: homeBotHop .84s cubic-bezier(.2, .72, .25, 1) both;
}

@keyframes homeBotHop {
    0%, 100% { transform: translateY(0) scale(1); }
    18% { transform: translateY(3px) scale(1.04, .96); }
    48% { transform: translateY(-34px) scale(.98, 1.02); }
    72% { transform: translateY(-7px) scale(1); }
    88% { transform: translateY(2px) scale(1.03, .97); }
}

@media (max-width: 680px) {
    .bot-visibility-toggle {
        min-width: 58px;
        min-height: 38px;
        padding: 6px 9px;
        font-size: .64rem;
    }

    .home-bot {
        --bot-size: 90px;
        right: max(8px, env(safe-area-inset-right));
        bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--bot-footer-lift));
        width: 104px;
    }

    @keyframes homeBotHop {
        0%, 100% { transform: translateY(0) scale(1); }
        18% { transform: translateY(2px) scale(1.04, .96); }
        48% { transform: translateY(-26px) scale(.98, 1.02); }
        72% { transform: translateY(-5px) scale(1); }
        88% { transform: translateY(2px) scale(1.03, .97); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-bot,
    .home-bot__button {
        animation: none !important;
        transition: none !important;
    }
}

@media print {
    .home-bot { display: none !important; }
}