/* ==========================================================================
   Kaiyo Mascot - Styles
   ========================================================================== */

.kaiyo-mascot {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kaiyo-mascot.is-visible {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

.kaiyo-mascot.is-hiding {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Close button */
.kaiyo-mascot-close {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 5;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 2px solid #fff;
    background: #444;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.15s ease;
}

.kaiyo-mascot:hover .kaiyo-mascot-close,
.kaiyo-mascot-close:focus-visible {
    opacity: 1;
}

.kaiyo-mascot-close:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

.kaiyo-mascot-close:hover {
    background: #333;
}

/* Speech bubble */
.kaiyo-mascot-bubble {
    background: #fff;
    border-radius: 16px 16px 4px 16px;
    padding: 10px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    max-width: 200px;
    opacity: 0;
    transform: scale(0.8) translateY(8px);
    transition: opacity 0.4s ease 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
    pointer-events: none;
}

.kaiyo-mascot.is-visible .kaiyo-mascot-bubble.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.kaiyo-mascot-bubble.is-hiding {
    opacity: 0;
    transform: scale(0.8) translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.kaiyo-mascot-bubble-text {
    font-family: "Reddit Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #333;
}

/* Mascot figure */
.kaiyo-mascot-figure {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.2s ease, opacity 0.3s ease;
}

.kaiyo-mascot-figure:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.kaiyo-mascot-figure:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
    transform: scale(1.08);
}

.kaiyo-mascot-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-select: none;
}

/* Play indicator - centered overlay on hover (background set via inline style) */
.kaiyo-mascot-play {
    position: absolute;
    inset: 0;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding-left: 3px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.kaiyo-mascot-figure:hover .kaiyo-mascot-play,
.kaiyo-mascot-figure:focus-visible .kaiyo-mascot-play {
    opacity: 1;
}

/* ==========================================================================
   Inline Video (expands from mascot circle)
   ========================================================================== */

.kaiyo-mascot-video-inline {
    position: absolute;
    bottom: -10px;
    right: -10px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    z-index: 2;
    opacity: 0;
    transform: scale(0.3);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s 0.4s;
}

.kaiyo-mascot-video-inline.is-playing {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s;
}

.kaiyo-mascot-video-inline video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

/* Hide mascot figure when video is playing */
.kaiyo-mascot.is-playing .kaiyo-mascot-figure {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.kaiyo-mascot.is-playing .kaiyo-mascot-play {
    opacity: 0;
}

/* Bubble smoothly fades out when video plays */
.kaiyo-mascot.is-playing .kaiyo-mascot-bubble {
    opacity: 0;
    transform: scale(0.8) translateY(8px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
    .kaiyo-mascot {
        bottom: 16px;
        gap: 8px;
    }

    .kaiyo-mascot-bubble {
        max-width: 160px;
        padding: 8px 12px;
    }

    .kaiyo-mascot-bubble-text {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   Reduced motion (WCAG 2.3.3)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .kaiyo-mascot,
    .kaiyo-mascot.is-visible,
    .kaiyo-mascot.is-hiding,
    .kaiyo-mascot-bubble,
    .kaiyo-mascot.is-visible .kaiyo-mascot-bubble.is-visible,
    .kaiyo-mascot-bubble.is-hiding,
    .kaiyo-mascot-figure,
    .kaiyo-mascot-play,
    .kaiyo-mascot-video-inline,
    .kaiyo-mascot-video-inline.is-playing,
    .kaiyo-mascot.is-playing .kaiyo-mascot-figure,
    .kaiyo-mascot.is-playing .kaiyo-mascot-bubble {
        transition: none;
        animation: none;
    }

    .kaiyo-mascot {
        transform: none;
    }

    .kaiyo-mascot.is-visible .kaiyo-mascot-bubble.is-visible {
        transform: none;
    }

    .kaiyo-mascot-video-inline.is-playing {
        transform: none;
    }

    .kaiyo-mascot-figure:hover {
        transform: none;
    }
}