/* ============================================================
   Mascot Widget - "Mothership Guide"
   Friendly floating onboarding helper with speech bubble
   ============================================================ */

.mascot-container {
    position: fixed;
    bottom: 6px;
    right: 24px;
    z-index: 1020; /* below fixed header (1030) so header dropdowns & menus overlap the mascot */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

/* When the section-nav is present on the page, shift the mascot inward so
   the bubble does not hover under the vertical nav column on the right.
   A manually dragged mascot (.mascot-positioned) opts out - user placement
   wins. */
body:has(#section-nav.section-nav-position-right) .mascot-container:not(.mascot-positioned) {
    right: calc(24px + var(--space-4, 16px) + 56px);
}

body:has(#section-nav.section-nav-position-right) .mascot-container:not(.mascot-positioned) .mascot-bubble {
    width: min(340px, calc(100vw - 48px - var(--space-4, 16px) - 56px));
}

/* ---------- Drag-to-move ---------------------------------------------- */

.mascot-container.mascot-positioned {
    /* JS sets left/top inline; left/top override the default right/bottom */
    bottom: auto;
    right: auto;
}

.mascot-avatar {
    touch-action: none; /* let pointer events drive the drag on touch */
}

.mascot-container.mascot-dragging .mascot-avatar {
    cursor: grabbing;
    animation: none; /* pause the idle bob while dragging */
}

.mascot-container.mascot-dragging .mascot-bubble {
    pointer-events: none; /* don't let the bubble grab pointer events mid-drag */
}

/* Anchor quadrants - flip bubble stacking & arrow based on which viewport
   corner the avatar is closest to. Default (no anchor class) keeps the
   original bottom-right behavior. */

/* Left-anchored: avatar left of center → bubble right-aligned to container's left edge */
.mascot-container.mascot-anchor-bl,
.mascot-container.mascot-anchor-tl {
    align-items: flex-start;
}

.mascot-container.mascot-anchor-bl .mascot-bubble,
.mascot-container.mascot-anchor-tl .mascot-bubble {
    transform-origin: bottom left;
}

.mascot-container.mascot-anchor-bl .mascot-bubble::after,
.mascot-container.mascot-anchor-tl .mascot-bubble::after {
    right: auto;
    left: 36px;
}

/* Top-anchored: avatar above center → bubble BELOW avatar */
.mascot-container.mascot-anchor-tl,
.mascot-container.mascot-anchor-tr {
    flex-direction: column-reverse;
}

.mascot-container.mascot-anchor-tl .mascot-bubble,
.mascot-container.mascot-anchor-tr .mascot-bubble {
    order: 0; /* reset the default "bubble above avatar" order */
    transform-origin: top right;
}

.mascot-container.mascot-anchor-tl .mascot-bubble {
    transform-origin: top left;
}

/* Flip tail to point UP when bubble sits below avatar */
.mascot-container.mascot-anchor-tl .mascot-bubble::after,
.mascot-container.mascot-anchor-tr .mascot-bubble::after {
    bottom: auto;
    top: -8px;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.mascot-container > * {
    pointer-events: auto;
}

/* ---------- Avatar button ---------- */

.mascot-avatar {
    position: relative;
    right: -96px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.24s cubic-bezier(.2,.9,.3,1.4);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
    animation: mascot-idle-bob 4s ease-in-out infinite;
}

.mascot-avatar:hover {
    transform: scale(1.06) rotate(-2deg);
}

.mascot-avatar:focus-visible {
    outline: 3px solid var(--bs-primary, #0d6efd);
    outline-offset: 4px;
}

.mascot-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    user-select: none;
    -webkit-user-drag: none;
}

.mascot-avatar-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--bs-primary, #0d6efd);
    opacity: 0;
    pointer-events: none;
}

.mascot-container.mascot-has-updates .mascot-avatar-pulse {
    animation: mascot-pulse 1.8s ease-out infinite;
}

@keyframes mascot-idle-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@keyframes mascot-pulse {
    0%   { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.35); }
}

/* ---------- Speech bubble ---------- */

.mascot-bubble {
    width: min(360px, calc(100vw - 48px));
    max-height: 70vh;
    background: var(--bs-body-bg, #ffffff);
    color: var(--bs-body-color, #212529);
    border-radius: 16px;
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, 0.25),
        0 8px 16px -8px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    order: -1; /* bubble above avatar */
    position: relative;
    transform-origin: bottom right;
    animation: mascot-bubble-in 0.34s cubic-bezier(.2,.9,.3,1.2);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.mascot-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 36px;
    width: 16px;
    height: 16px;
    background: var(--bs-body-bg, #ffffff);
    transform: rotate(45deg);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

@keyframes mascot-bubble-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mascot-bubble-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(12px) scale(0.96); }
}

.mascot-bubble.mascot-bubble-opening {
    animation: mascot-bubble-in 0.32s cubic-bezier(.2,.9,.3,1.2) both;
}

.mascot-bubble.mascot-bubble-closing {
    animation: mascot-bubble-out 0.22s cubic-bezier(.4,.0,.6,1) forwards;
    pointer-events: none;
}

.mascot-bubble.d-none {
    display: none !important;
}

/* ---------- Initial site-arrival entry (avatar slides up with bounce) ---------- */

@keyframes mascot-enter-slide-up {
    0%   { opacity: 0; transform: translateY(140%) scale(0.85); }
    60%  { opacity: 1; transform: translateY(-8%)  scale(1.03); }
    80%  {              transform: translateY(4%)  scale(0.98); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

.mascot-container.mascot-entering .mascot-avatar {
    animation:
        mascot-enter-slide-up 0.72s cubic-bezier(.2,.9,.3,1.2) both,
        mascot-idle-bob 4s ease-in-out infinite 0.72s;
}

.mascot-container.mascot-entering .mascot-bubble {
    animation: mascot-bubble-in 0.34s cubic-bezier(.2,.9,.3,1.2) 0.5s both;
}

/* ---------- Step content swap (slide-left-out, slide-right-in) ---------- */

@keyframes mascot-step-out-left {
    from { opacity: 1; transform: translateX(0);     }
    to   { opacity: 0; transform: translateX(-28px); }
}

@keyframes mascot-step-in-right {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0);    }
}

#mascot-body.mascot-step-leaving,
#mascot-actions.mascot-step-leaving {
    animation: mascot-step-out-left 0.18s ease-in forwards;
}

#mascot-body.mascot-step-entering,
#mascot-actions.mascot-step-entering {
    animation: mascot-step-in-right 0.26s cubic-bezier(.2,.9,.3,1.2) both;
}

/* Header */
.mascot-bubble-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mascot-bubble-name {
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mascot-bubble-name::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
}

.mascot-bubble-dismiss {
    background: transparent;
    border: 0;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 13px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.mascot-bubble-dismiss:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Body */
.mascot-bubble-body {
    padding: 14px 18px 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.55;
}

.mascot-step-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
}

.mascot-step-body {
    margin: 0 0 12px;
    color: var(--bs-secondary-color, #4a5568);
}

/* Footer */
.mascot-bubble-footer {
    padding: 10px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    background: rgba(0, 0, 0, 0.015);
}

.mascot-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mascot-actions .btn {
    border-radius: 10px;
    font-size: 13px;
    padding: 6px 14px;
}

.mascot-ask-anything {
    align-self: flex-start;
    text-decoration: none !important;
    font-size: 12px;
    padding: 0;
}

.mascot-newsletter-form {
    flex: 1 1 100%;
    width: 100%;
}

.mascot-newsletter-input-group {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.mascot-newsletter-input-group .mascot-newsletter-email {
    flex: 1 1 auto;
    min-width: 0;
}

.mascot-newsletter-privacy {
    font-size: 11px;
}

.mascot-newsletter-skip {
    flex: 1 1 100%;
    text-align: left;
    padding-left: 0 !important;
    font-size: 12px;
    text-decoration: none !important;
}

/* ---------- Collapsed state ---------- */

.mascot-container.mascot-collapsed .mascot-bubble {
    display: none !important;
}

/* ---------- Chat mode (ask-me-anything) ---------- */

.mascot-chat {
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
}

.mascot-chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    max-height: 240px;
}

.mascot-chat-msg {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    max-width: 85%;
    word-wrap: break-word;
}

/* Message entrance animation */
@keyframes mascot-msg-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Thinking indicator (Ask me anything) ---------- */

.mascot-chat-msg.mascot-chat-thinking {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg,
        rgba(13, 110, 253, 0.08),
        rgba(13, 110, 253, 0.02) 50%,
        rgba(13, 110, 253, 0.08));
    background-size: 200% 200%;
    animation:
        mascot-msg-in 0.28s cubic-bezier(.2,.9,.3,1.2) both,
        mascot-thinking-shimmer 2.4s ease-in-out infinite;
    border: 1px solid rgba(13, 110, 253, 0.12);
    align-self: flex-start;
}

@keyframes mascot-thinking-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.mascot-thinking-avatar {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mascot-thinking-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    animation: mascot-thinking-bob 1.6s ease-in-out infinite;
}

/* Concentric pulse rings around the mini avatar */
.mascot-thinking-avatar::before,
.mascot-thinking-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--bs-primary, #0d6efd);
    opacity: 0;
    pointer-events: none;
    animation: mascot-thinking-ring 1.8s ease-out infinite;
}
.mascot-thinking-avatar::after {
    animation-delay: 0.9s;
}

@keyframes mascot-thinking-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-2px) rotate(2deg); }
}

@keyframes mascot-thinking-ring {
    0%   { opacity: 0.65; transform: scale(1); }
    100% { opacity: 0;    transform: scale(1.9); }
}

/* Three dots with gentle wave + color pulse */
.mascot-thinking-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 2px;
}

.mascot-thinking-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-primary, #0d6efd);
    opacity: 0.35;
    animation: mascot-thinking-wave 1.2s ease-in-out infinite;
}

.mascot-thinking-dot:nth-child(1) { animation-delay: 0s; }
.mascot-thinking-dot:nth-child(2) { animation-delay: 0.18s; }
.mascot-thinking-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes mascot-thinking-wave {
    0%, 60%, 100% {
        opacity: 0.35;
        transform: translateY(0) scale(1);
    }
    30% {
        opacity: 1;
        transform: translateY(-5px) scale(1.15);
        box-shadow: 0 0 8px rgba(13, 110, 253, 0.45);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mascot-chat-msg.mascot-chat-thinking,
    .mascot-thinking-avatar img,
    .mascot-thinking-avatar::before,
    .mascot-thinking-avatar::after,
    .mascot-thinking-dot {
        animation: none !important;
    }
    .mascot-thinking-dot { opacity: 0.7; }
}

.mascot-chat-msg.user {
    align-self: flex-end;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.mascot-chat-msg.bot {
    align-self: flex-start;
    background: rgba(0, 0, 0, 0.05);
    color: var(--bs-body-color, #212529);
    border-bottom-left-radius: 4px;
}

.mascot-chat-link {
    color: var(--bs-link-color, #0d6efd);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.mascot-chat-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

[data-theme="dark"] .mascot-chat-msg.bot .mascot-chat-link,
html.theme-dark .mascot-chat-msg.bot .mascot-chat-link {
    color: #8ab4ff;
}

.mascot-chat-input-row {
    display: flex;
    gap: 6px;
}

.mascot-chat-input {
    flex: 1 1 auto;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    resize: none;
    font-family: inherit;
}

.mascot-chat-back {
    background: transparent;
    border: 0;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

/* ---------- Dark mode ---------- */

[data-theme="dark"] .mascot-bubble,
html.theme-dark .mascot-bubble {
    background: #1f2937;
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mascot-bubble::after,
html.theme-dark .mascot-bubble::after {
    background: #1f2937;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mascot-bubble-header,
html.theme-dark .mascot-bubble-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mascot-chat-msg.bot,
html.theme-dark .mascot-chat-msg.bot {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

[data-theme="dark"] .mascot-bubble-footer,
html.theme-dark .mascot-bubble-footer {
    background: rgba(255, 255, 255, 0.03);
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* ---------- Mobile ---------- */

@media (max-width: 575.98px) {
    .mascot-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
        align-items: flex-end;
    }
    .mascot-avatar {
        width: 64px;
        height: 64px;
    }
    .mascot-bubble {
        width: 100%;
    }
    .mascot-bubble::after {
        right: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mascot-avatar { animation: none; }
    .mascot-bubble { animation: none; }
    .mascot-avatar-pulse { animation: none !important; }
    .mascot-container.mascot-entering .mascot-avatar,
    .mascot-container.mascot-entering .mascot-bubble,
    .mascot-bubble.mascot-bubble-opening,
    .mascot-bubble.mascot-bubble-closing,
    #mascot-body.mascot-step-leaving,
    #mascot-body.mascot-step-entering,
    #mascot-actions.mascot-step-leaving,
    #mascot-actions.mascot-step-entering {
        animation: none !important;
    }
}