/* ============================================================
   Welcome Mascot - Core Styles
   Main container, mascot center, speech bubble, base layout
   ============================================================ */

/* ─── CSS Custom Properties ─── */
:root {
    --mascot-container-size: min(90vw, calc(100dvh - 120px), 720px);
    --mascot-center-size: 40%;
    --mascot-button-radius: 45%;
    --mascot-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --mascot-font: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --mascot-z-base: 100;
    --mascot-z-center: 110;
    --mascot-z-speech: 120;
    --mascot-z-overlay: 200;
    --mascot-primary: #4a90d9;
    --mascot-bg: #ffffff;
    --mascot-text: #333333;
    --mascot-shadow: rgba(0, 0, 0, 0.1);
    --mascot-shadow-hover: rgba(74, 144, 217, 0.3);
}

/* ─── Lock page scroll when homepage mascot is active ─── */
html.mascot-homepage-active,
html.mascot-homepage-active body {
    margin: 0;
    padding: 0;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
}

/* ─── Homepage Centering Wrapper ─── */
.mascot-homepage-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
}

/* ─── Main Container ─── */
.mascot-container {
    position: relative;
    width: var(--mascot-container-size);
    height: var(--mascot-container-size);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    overflow: visible;
    z-index: var(--mascot-z-base);
    flex-shrink: 0;
}

/* ─── Mascot Center (SVG holder) ─── */
.mascot-center {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--mascot-center-size);
    height: var(--mascot-center-size);
    z-index: var(--mascot-z-center);
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.mascot-center .mascot-body-svg,
.mascot-center .mascot-head-svg,
.mascot-center .mascot-tail-svg,
.mascot-center .mascot-scarf-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.mascot-center .mascot-body-svg img,
.mascot-center .mascot-head-svg img,
.mascot-center .mascot-tail-svg img,
.mascot-center .mascot-scarf-svg img,
.mascot-center .mascot-tail-svg svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Head img needs stacking context so sleep eyelids can sit behind it */
.mascot-center .mascot-head-svg img.mascot-head-base {
    position: relative;
    z-index: 2;
}

/* Ear images sit behind the head base, with CSS rotation driven by HeadTracker.
   Pivot points from generate_heads.py: L=(388,310) R=(633,250)
   viewBox 171 0 560 590 → CSS %: x=(px-171)/560*100, y=py/590*100 */
.mascot-center .mascot-head-svg img.mascot-ear-left,
.mascot-center .mascot-head-svg img.mascot-ear-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: transform 80ms ease-out;
}
.mascot-center .mascot-head-svg img.mascot-ear-left {
    transform-origin: 38.75% 52.54%;
}
.mascot-center .mascot-head-svg img.mascot-ear-right {
    transform-origin: 82.50% 42.37%;
}

/* Tail sits behind the body, shifted left to align with body at rotation.
   Percentage keeps the offset proportional across sizes (homepage 600px, corner 300px). */
.mascot-center .mascot-tail-svg {
    z-index: 0;
    left: -4.17%;
}

.mascot-center .mascot-body-svg {
    z-index: 1;
}

/* Scarf hangs in front of body, behind head */
.mascot-center .mascot-scarf-svg {
    z-index: 1;
}

.mascot-center .mascot-head-svg {
    /* Head viewBox 171 0 560 590, Body viewBox 0 520 903 989.
       Both render at same scale (S = containerSize/989).
       Head width: 560/989 = 56.62%,  Height: 590/989 = 59.66%.
       Center head over body: left = 50% - 56.62%/2 = 21.69%
       y = (0−520)/989 = −52.58%. */
    width: 56.62%;
    height: 59.66%;
    top: -52.58%;
    left: 21.69%;
    z-index: 2;
    overflow: visible;
}

/* ─── Mouth Overlay (inline SVG, matches body viewBox) ─── */
/* Fills .mascot-center so its SVG viewBox "0 520 903 989" aligns
   with the body SVG.  Hidden by default; shown via .active class. */
.mascot-center .mascot-mouth-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
    display: none;
}

.mascot-center .mascot-mouth-overlay.active {
    display: block;
}

.mascot-center .mascot-mouth-overlay svg {
    width: 100%;
    height: 100%;
}

/* mouth-hidden cover removed — filled head_base has no painted mouth to hide */

/* ─── Nose Overlay (animated during speech) ─── */
.mascot-center .mascot-head-svg .mascot-nose-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
}

.mascot-center .mascot-head-svg .mascot-nose-overlay.nose-wiggle {
    animation: noseWiggle 0.3s ease-in-out infinite alternate;
    transform-origin: 50% 85%;
}

@keyframes noseWiggle {
    0%   { transform: translateY(0) scaleY(1); }
    100% { transform: translateY(1.5%) scaleY(0.97); }
}

/* ─── Speech Bubble ─── */
/* Positioned inside .mascot-container via JS getBoundingClientRect().
   JS computes the mouth pixel position at runtime and sets inline
   top / left / right so the tail tip points exactly at the mouth. */
.speech-bubble {
    position: absolute;
    max-width: min(320px, calc(100vw - 24px));
    min-width: 120px;
    padding: 14px 20px;
    background: var(--mascot-bg);
    border: 2px solid var(--mascot-primary);
    border-radius: 18px;
    font-family: var(--mascot-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--mascot-text);
    box-shadow: 0 4px 20px var(--mascot-shadow);
    z-index: var(--mascot-z-speech);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    white-space: normal;
    width: max-content;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.speech-bubble.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ─── Tail: right-side bubble (tail points LEFT toward mouth) ─── */
/* Tail sits above the border-radius curve so it merges seamlessly
   with the bubble wall.  ::before = border stroke, ::after = fill. */
.speech-bubble[data-side="right"]::before {
    content: '';
    position: absolute;
    left: -12px;
    bottom: 10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 12px solid var(--mascot-primary);
    border-left: none;
}

.speech-bubble[data-side="right"]::after {
    content: '';
    position: absolute;
    left: -8px;
    bottom: 12px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--mascot-bg);
    border-left: none;
}

/* ─── Tail: left-side bubble (tail points RIGHT toward mouth) ─── */
.speech-bubble[data-side="left"]::before {
    content: '';
    position: absolute;
    right: -12px;
    bottom: 10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 12px solid var(--mascot-primary);
    border-right: none;
}

.speech-bubble[data-side="left"]::after {
    content: '';
    position: absolute;
    right: -8px;
    bottom: 12px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--mascot-bg);
    border-right: none;
}

/* ─── Tail: above bubble (tail points DOWN toward mascot head) ─── */
.speech-bubble[data-side="above"]::before {
    content: '';
    position: absolute;
    bottom: -12px;
    right: 30px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid var(--mascot-primary);
    border-bottom: none;
}

.speech-bubble[data-side="above"]::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 32px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--mascot-bg);
    border-bottom: none;
}

/* ─── Download progress bar inside speech bubble ─── */
.speech-bubble .speech-progress-track {
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.speech-bubble .speech-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--mascot-primary);
    border-radius: 4px;
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.speech-bubble.speech-success .speech-progress-fill {
    background: #2ecc71;
}

.speech-bubble.speech-error .speech-progress-fill {
    background: #e74c3c;
}

/* ─── Typing cursor animation ─── */
.speech-bubble .typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--mascot-primary);
    margin-left: 2px;
    animation: mascot-blink 0.7s infinite;
    vertical-align: text-bottom;
}

@keyframes mascot-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ─── Speech Bubble Action Buttons (showWithActions) ─── */
.speech-bubble-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.speech-bubble-action-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    line-height: 1.4;
    white-space: nowrap;
}

.speech-bubble-action-btn:active {
    transform: scale(0.96);
}

.speech-bubble-action-btn.primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
}

.speech-bubble-action-btn.primary:hover {
    background: linear-gradient(135deg, #5a6fd6, #6a4192);
}

.speech-bubble-action-btn.secondary {
    background: rgba(0, 0, 0, 0.08);
    color: #444;
}

.speech-bubble-action-btn.secondary:hover {
    background: rgba(0, 0, 0, 0.14);
}

/* ─── Audio Toggle Button ─── */
/* Hidden by default to prevent flash — JS shows it after checking config */
.mascot-audio-toggle {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px var(--mascot-shadow);
    cursor: pointer;
    z-index: var(--mascot-z-center);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: var(--mascot-transition);
}

.mascot-audio-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px var(--mascot-shadow-hover);
}

.mascot-audio-toggle.muted {
    opacity: 0.5;
}

/* ─── Loading State ─── */
.mascot-container.loading .mascot-center {
    animation: mascot-pulse 1.5s infinite;
}

@keyframes mascot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ─── Accessibility ─── */
@media (prefers-reduced-motion: reduce) {
    .mascot-container,
    .mascot-container * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ─── Hidden utility ─── */
.mascot-hidden {
    display: none !important;
}

.mascot-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}