/* ═══════════════════════════════════════════════════════════════════
   Zawi (زوي) — the zawaya AI mascot pet.
   Pure CSS animation driven by [data-state] on #zawiPet:
   idle · thinking · wave · happy · serving · sleep · hidden
   plus .zw-listening (input focused) and .zw-squish (tap feedback).
   Eye direction comes from --zw-lx/--zw-ly set by js/zawi-pet.js.
   The SVG itself is injected by js/zawi-pet.js.
   ═══════════════════════════════════════════════════════════════════ */

#zawiPet {
    position: fixed;
    /* inset-inline-end flips automatically in RTL — keep the pet in the
       "trailing" corner so it never covers the sidebar. While chatting,
       js/zawi-pet.js overrides bottom/inset to dock it behind the input pill. */
    inset-inline-end: 14px;
    bottom: 92px;
    width: 78px;
    height: 71px;
    z-index: 480; /* above chat content, below the input bar (500) and panels/modals (6000+) */
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Zawi is a real button (role="button" + tabindex in js/zawi-pet.js), so a
   keyboard user must be able to SEE where they are. The ring sits on a rounded
   box around his whole body rather than the irregular SVG silhouette. */
#zawiPet:focus { outline: none; }

#zawiPet:focus-visible {
    outline: 2px solid rgba(141, 245, 214, 0.9);
    outline-offset: 4px;
    border-radius: 18px;
}

#zawiPet[data-state="hidden"] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(24px) scale(0.6);
}

/* Welcome arrival (js/zawi-pet.js welcomeArrival): .zw-jump places Zawi
   beside the welcome bubble with no transition, .zw-travel is the long
   glide back to his docked corner. Inline transform carries the offset. */
#zawiPet.zw-jump { transition: opacity 0.45s ease; }
#zawiPet.zw-travel {
    transition: opacity 0.45s ease,
        transform 1s cubic-bezier(0.3, 0.9, 0.32, 1.08);
}

#zawiPet svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
    transition: transform 0.35s ease;
}

/* ── Idle: gentle float + periodic blink + pointer-following eyes ──── */
#zawiPet .zw-figure {
    animation: zwFloat 4.2s ease-in-out infinite;
    transform-origin: 50% 100%;
    will-change: transform;
}

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

/* Outer eye group: direction (JS-fed vars). Inner group: blink. */
#zawiPet .zw-eye {
    transform: translate(var(--zw-lx, 0px), var(--zw-ly, 0px));
    transition: transform 0.25s ease;
}
#zawiPet .zw-eye-blink {
    transform-box: fill-box;
    transform-origin: center;
    animation: zwBlink 5.4s ease-in-out infinite;
}
#zawiPet .zw-eye-r .zw-eye-blink { animation-delay: 0.07s; }

@keyframes zwBlink {
    0%, 92%, 100% { transform: scaleY(1); }
    94.5%, 96.5%  { transform: scaleY(0.08); }
}

#zawiPet .zw-brow {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.3s ease;
}

/* Second (bigger) smile swapped in on happy/serving */
#zawiPet .zw-mouth,
#zawiPet .zw-mouth-big { transition: opacity 0.25s ease; }
#zawiPet .zw-mouth-big { opacity: 0; }

/* ── Listening: lean toward the input while the guest types ────────── */
#zawiPet[data-state="idle"].zw-listening svg { transform: rotate(-4deg) translateY(1px); }
[dir="rtl"] #zawiPet[data-state="idle"].zw-listening svg { transform: rotate(4deg) translateY(1px); }
#zawiPet[data-state="idle"].zw-listening .zw-brow { transform: translateY(-2px); }

/* ── Tap feedback: quick squish ────────────────────────────────────── */
#zawiPet.zw-squish svg { transform: scale(0.9, 0.84); transition: transform 0.12s ease; }

/* ── Wave (greeting / tap) ─────────────────────────────────────────── */
#zawiPet .zw-arm-r {
    /* pivot exactly at the shoulder (arm path start in viewBox coords) —
       a bbox-percentage origin drifts because the bbox includes the hand */
    transform-box: view-box;
    transform-origin: 166px 120px;
}
#zawiPet[data-state="wave"] .zw-arm-r {
    animation: zwWave 1.7s ease-in-out;
}
@keyframes zwWave {
    0%, 100% { transform: rotate(0deg); }
    20%      { transform: rotate(-52deg); }
    40%      { transform: rotate(-14deg); }
    60%      { transform: rotate(-46deg); }
    80%      { transform: rotate(-6deg); }
}

/* ── Thinking (agent is working) ───────────────────────────────────── */
#zawiPet[data-state="thinking"] .zw-figure {
    animation: zwThink 2.4s ease-in-out infinite;
}
@keyframes zwThink {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    50%      { transform: rotate(-2.5deg) translateY(-3px); }
}
#zawiPet[data-state="thinking"] .zw-eye {
    transform: translateY(-4px);
}
#zawiPet[data-state="thinking"] .zw-eye-blink { animation: none; }
#zawiPet[data-state="thinking"] .zw-brow { transform: translateY(-3px); }

/* ── Happy / Serving bounce ────────────────────────────────────────── */
#zawiPet[data-state="happy"] .zw-figure,
#zawiPet[data-state="serving"] .zw-figure {
    animation: zwBounce 0.9s ease;
}
@keyframes zwBounce {
    0%   { transform: scale(1, 1); }
    30%  { transform: scale(1.08, 0.92); }
    55%  { transform: scale(0.96, 1.06) translateY(-7px); }
    75%  { transform: scale(1.03, 0.98); }
    100% { transform: scale(1, 1); }
}
#zawiPet[data-state="happy"] .zw-mouth,
#zawiPet[data-state="serving"] .zw-mouth { opacity: 0; }
#zawiPet[data-state="happy"] .zw-mouth-big,
#zawiPet[data-state="serving"] .zw-mouth-big { opacity: 1; }

/* Cloche (room-service dome) pops out only while serving */
#zawiPet .zw-cloche {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center bottom;
    transform: scale(0.5) translateY(12px);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#zawiPet[data-state="serving"] .zw-cloche {
    opacity: 1;
    transform: scale(1) translateY(0);
}
#zawiPet .zw-arm-l { transition: opacity 0.25s ease; }
#zawiPet[data-state="serving"] .zw-arm-l { opacity: 0; }

/* ── Sleep (long inactivity) ───────────────────────────────────────── */
#zawiPet[data-state="sleep"] .zw-figure { animation: zwFloat 6.5s ease-in-out infinite; }
#zawiPet[data-state="sleep"] .zw-eye { transform: none; }
#zawiPet[data-state="sleep"] .zw-eye-blink {
    animation: none;
    transform: scaleY(0.08);
}
#zawiPet[data-state="sleep"] .zw-brow { transform: translateY(3px); }

.zw-pet-zzz {
    position: absolute;
    bottom: calc(100% - 8px);
    inset-inline-start: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(112, 234, 200, 0.85);
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
#zawiPet[data-state="sleep"] .zw-pet-zzz {
    opacity: 1;
    animation: zwZzz 2.6s ease-in-out infinite;
}
@keyframes zwZzz {
    0%   { transform: translateY(4px); opacity: 0; }
    40%  { opacity: 1; }
    100% { transform: translateY(-8px); opacity: 0; }
}

/* ── Thought dots (thinking) ───────────────────────────────────────── */
.zw-pet-thought {
    position: absolute;
    bottom: calc(100% + 2px);
    inset-inline-start: 2px;
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: rgba(10, 26, 24, 0.92);
    border: 1px solid rgba(94, 201, 160, 0.4);
    border-radius: 12px;
    border-end-end-radius: 3px;
    opacity: 0;
    transform: translateY(6px) scale(0.85);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
#zawiPet[data-state="thinking"] .zw-pet-thought {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.zw-pet-thought span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(94, 201, 160, 0.95);
    animation: zwDot 1.2s ease-in-out infinite;
}
.zw-pet-thought span:nth-child(2) { animation-delay: 0.15s; }
.zw-pet-thought span:nth-child(3) { animation-delay: 0.3s; }
@keyframes zwDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* ── Speech bubble (greeting / one-liners) ─────────────────────────── */
.zw-pet-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-end: 6px;
    max-width: 220px;
    background: rgba(10, 26, 24, 0.94);
    border: 1px solid rgba(94, 201, 160, 0.45);
    color: rgba(234, 255, 247, 0.95);
    padding: 8px 12px;
    border-radius: 14px;
    border-end-end-radius: 4px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(8px) scale(0.9);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
#zawiPet.zw-talking .zw-pet-bubble {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── Mini avatar used inside chat message rows ─────────────────────── */
.zw-mini-avatar { display: block; }

/* ── Embedded Zawi in the onboarding (greeting) card header ────────── */
/* The slot keeps .onboarding-logo-ring as a no-JS star fallback; once
   zawi-pet.js mounts the figure it drops the ring chrome. */
.onboarding-logo-ring.zw-embed {
    width: 108px;
    height: 98px;
    background: none;
    border: none;
    border-radius: 0;
}
.zw-embed svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}
.zw-embed .zw-figure {
    animation: zwFloat 4.2s ease-in-out infinite;
    transform-origin: 50% 100%;
}
.zw-embed .zw-eye-blink {
    transform-box: fill-box;
    transform-origin: center;
    animation: zwBlink 5.4s ease-in-out infinite;
}
.zw-embed .zw-arm-r {
    transform-box: view-box;
    transform-origin: 166px 120px;
    /* wave twice as the card opens, then rest */
    animation: zwWave 1.7s ease-in-out 0.5s 2;
}
.zw-embed .zw-cloche { display: none; }
.zw-embed .zw-mouth-big { opacity: 0; }

/* ── Responsive + accessibility ────────────────────────────────────── */
@media (max-width: 640px) {
    #zawiPet {
        width: 58px;
        height: 53px;
        inset-inline-end: 10px;
    }
    .zw-pet-bubble { font-size: 11.5px; max-width: 170px; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    #zawiPet .zw-figure,
    #zawiPet .zw-eye-blink,
    #zawiPet .zw-arm-r,
    #zawiPet .zw-pet-zzz,
    .zw-embed .zw-figure,
    .zw-embed .zw-eye-blink,
    .zw-embed .zw-arm-r,
    .zw-pet-thought span {
        animation: none !important;
    }
    #zawiPet,
    #zawiPet svg,
    #zawiPet .zw-eye { transition-duration: 0.01s; }
}