/**
 * ZAV Character Styles - v4.0
 * 
 * Visuals: Bright White/Mint Center -> Neon Green Edge (#00FFA3).
 * Eyes: Dark Green/Black contrast pills.
 * Animations target .zav-orb and .eye ONLY (dialogue never moves).
 * 
 * @package ZavrAI
 */

:root {
    --zav-orb-color: #00FFA3;
    --zav-scale: 1.0;
    --zav-speed-multiplier: 1.0;
}

/* ==========================================================================
   CONTAINER & POSITIONING
   ========================================================================== */
.zav-character {
    position: fixed;
    z-index: 9999;
    pointer-events: auto;
    transition:
        top 1.8s cubic-bezier(0.22, 1, 0.36, 1),
        left 1.8s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease,
        filter 0.4s ease;
    transform: scale(var(--zav-scale));
    transform-origin: center center;
    cursor: pointer;
    will-change: top, left;
    --zav-char-size: 130px;
}

/* Entering Chat Mode - Dissolve Effect */
.zav-character.entering-chat {
    transform: scale(1.2);
    opacity: 0;
    filter: blur(20px);
    transition: all 0.4s ease-out;
    pointer-events: none;
}

/* Docked into chat: hide site orb completely */
.zav-character.chat-docked {
    opacity: 0 !important;
    pointer-events: none !important;
}

.zav-character.chat-docked .zav-eyes-wrapper {
    transform: translate(-50%, -50%) !important;
}

.zav-character.chat-docked .eye {
    width: 12px !important;
    height: 20px !important;
    border-radius: 6px !important;
    transform: none !important;
    animation: none !important;
}

/* After returning from chat, keep eyes neutral briefly */
.zav-character.zav-return-neutral .zav-eyes-wrapper {
    transform: translate(-50%, -50%) !important;
}

.zav-character.zav-return-neutral .eye {
    width: 12px !important;
    height: 20px !important;
    border-radius: 6px !important;
    transform: none !important;
    animation: none !important;
}

.zav-container {
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   THE ORB (BRIGHT SPRITE)
   ========================================================================== */
.zav-orb {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #00FFA3;
    background: radial-gradient(circle at center, #FFFFFF 10%, #E0FFF8 30%, #00FFA3 80%, rgba(0, 255, 163, 0.1) 100%);
    border: 1px solid rgba(0, 255, 163, 0.4);
    box-shadow:
        0 0 30px #00FFA3,
        0 0 70px rgba(0, 255, 163, 0.5),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    position: relative;
    animation: zav-float calc(4s / var(--zav-speed-multiplier)) ease-in-out infinite;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
}

/* ==========================================================================
   THE EYES (DARK CONTRAST)
   ========================================================================== */
.zav-eyes-wrapper {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 20px;
    z-index: 2;
    transition: transform 0.2s ease;
}

.eye {
    width: 12px;
    height: 20px;
    background: #002b1b;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: zav-blink 6s infinite;
}

/* Squint Interaction (CTA hover) */
.zav-character.squint .eye {
    height: 4px !important;
    border-radius: 2px;
    animation: none;
}

/* ==========================================================================
   BASE ANIMATIONS
   ========================================================================== */
@keyframes zav-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes zav-blink {
    0%, 48%, 52%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
}

/* Jump In Intro */
.zav-enter {
    animation: zav-jump-in 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes zav-jump-in {
    0% { transform: scale(0) translateY(200px); opacity: 0; }
    100% { transform: scale(var(--zav-scale)) translateY(0); opacity: 1; }
}

/* ==========================================================================
   DIALOGUE BUBBLE
   ========================================================================== */
.zav-dialogue {
    position: absolute;
    background: rgba(5, 5, 5, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #EDEDED;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    width: max-content;
    min-width: 240px;
    max-width: min(520px, calc(100vw - 220px));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 5px 20px rgba(0, 255, 163, 0.2);
    z-index: 999999;
}

.zav-dialogue::after {
    content: '';
}

.zav-dialogue.cursor-on::after {
    content: '\2588';
    margin-left: 8px;
    animation: zav-cursor-blink 0.95s steps(1) infinite;
}

@keyframes zav-cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.zav-dialogue.visible {
    opacity: 1;
}

/* ==========================================================================
   SECTION POSITIONS
   IMPORTANT: Use ONLY top/left so transitions are interpolatable.
   ========================================================================== */

/* Hero: Watcher (Top Right) */
.zav-character[data-section="hero"] {
    top: 35vh;
    left: calc(100vw - 80px - var(--zav-char-size));
}

/* Services: Guide (Bottom Left) */
.zav-character[data-section="services"] {
    top: calc(100vh - 40px - var(--zav-char-size));
    left: 40px;
}

/* Process: Observer (Mid Right) */
.zav-character[data-section="process"] {
    top: 50vh;
    left: calc(100vw - 40px - var(--zav-char-size));
}

/* Results: Analyst (Upper Left) */
.zav-character[data-section="results"] {
    top: 30vh;
    left: 40px;
}

/* Contact: (Bottom Left) */
.zav-character[data-section="contact"] {
    top: calc(100vh - 40px - var(--zav-char-size));
    left: 40px;
}

/* About: Storyteller (Mid Right) */
.zav-character[data-section="about"] {
    top: 45vh;
    left: calc(100vw - 40px - var(--zav-char-size));
}

/* Ecosystem: (Mid Left) */
.zav-character[data-section="ecosystem"] {
    top: 45vh;
    left: 40px;
}

/* Testimonials: (Upper Left) */
.zav-character[data-section="testimonials"] {
    top: 30vh;
    left: 40px;
}

/* ==========================================================================
   SMART DIALOGUE FLIPPING
   Dialogue is positioned relative to container, never inherits orb transforms.
   ========================================================================== */

/* Orb on Right -> Dialogue on LEFT */
.zav-character[data-section="hero"] .zav-dialogue,
.zav-character[data-section="process"] .zav-dialogue,
.zav-character[data-section="about"] .zav-dialogue {
    right: 110%;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: right center;
}

/* Orb on LEFT -> Dialogue on RIGHT */
.zav-character[data-section="services"] .zav-dialogue,
.zav-character[data-section="results"] .zav-dialogue,
.zav-character[data-section="contact"] .zav-dialogue,
.zav-character[data-section="testimonials"] .zav-dialogue,
.zav-character[data-section="ecosystem"] .zav-dialogue {
    left: 110%;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: left center;
}

/* ==========================================================================
   VISUAL SCALING
   Scale ORB only, never the wrapper (which holds dialogue).
   ========================================================================== */
.zav-character {
    --current-scale: 1;
}

.zav-character.zav-sidecar {
    --current-scale: 1;
}

.zav-orb {
    width: calc(120px * var(--current-scale));
    height: calc(120px * var(--current-scale));
}

/* ==========================================================================
   SECTION ORB ANIMATIONS
   All target .zav-orb ONLY so dialogue stays stationary.
   ========================================================================== */

/* 1. SCAN (Hero) - Fast vibration + brightness flash */
@keyframes zav-scan-fx {
    0%   { transform: translateX(0); filter: brightness(1); }
    20%  { transform: translateX(-3px); filter: brightness(1.4); }
    40%  { transform: translateX(3px); filter: brightness(1); }
    60%  { transform: translateX(-3px); filter: brightness(1.4); }
    80%  { transform: translateX(3px); filter: brightness(1); }
    100% { transform: translateX(0); filter: brightness(1); }
}

.zav-scan .zav-orb {
    animation: zav-scan-fx 0.6s linear forwards !important;
}

/* 2. SYNC (Ecosystem) - Pulse + glow expand */
@keyframes zav-sync-fx {
    0%   { transform: scale(1); box-shadow: 0 0 30px #00FFA3, 0 0 70px rgba(0,255,163,0.5); }
    50%  { transform: scale(1.15); box-shadow: 0 0 50px #00FFA3, 0 0 100px rgba(0,255,163,0.6), 0 0 140px rgba(0,255,163,0.3); }
    100% { transform: scale(1); box-shadow: 0 0 30px #00FFA3, 0 0 70px rgba(0,255,163,0.5); }
}

.zav-sync .zav-orb {
    animation: zav-sync-fx 1.5s ease-in-out forwards !important;
}

/* 3. BUILD (Process) - Mechanical piston bounce */
@keyframes zav-build-fx {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-18px); }
    50%  { transform: translateY(0); }
    75%  { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

.zav-build .zav-orb {
    animation: zav-build-fx 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* 4. CELEBRATE (Testimonials) - Bounce + scale pop */
@keyframes zav-celebrate-fx {
    0%   { transform: scale(1) translateY(0); }
    20%  { transform: scale(0.9) translateY(5px); }
    50%  { transform: scale(1.2) translateY(-25px); }
    70%  { transform: scale(1.05) translateY(0); }
    85%  { transform: scale(1.1) translateY(-8px); }
    100% { transform: scale(1) translateY(0); }
}

.zav-celebrate .zav-orb {
    animation: zav-celebrate-fx 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* 5. JOY ROLL (Results) - Full barrel roll */
@keyframes zav-joy-roll-fx {
    0%   { transform: translateY(0) scale(1) rotate(0deg); }
    50%  { transform: translateY(-40px) scale(1.2) rotate(180deg); }
    100% { transform: translateY(0) scale(1) rotate(360deg); }
}

.zav-joy-roll .zav-orb {
    animation: zav-joy-roll-fx 0.6s cubic-bezier(0.45, 0, 0.55, 1) forwards !important;
}

/* 6. NOD (About) - Gentle agreeing nod */
@keyframes zav-nod-fx {
    0%   { transform: translateY(0) rotate(0deg); }
    25%  { transform: translateY(6px) rotate(3deg); }
    50%  { transform: translateY(0) rotate(0deg); }
    75%  { transform: translateY(6px) rotate(3deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

.zav-nod .zav-orb {
    animation: zav-nod-fx 1s ease-in-out forwards !important;
}

/* 7. ALERT (Contact) - Quick head-shake to get attention */
@keyframes zav-alert-fx {
    0%   { transform: translateX(0) scale(1); }
    15%  { transform: translateX(-8px) scale(1.05); }
    30%  { transform: translateX(8px) scale(1.05); }
    45%  { transform: translateX(-6px) scale(1.02); }
    60%  { transform: translateX(6px) scale(1.02); }
    75%  { transform: translateX(-3px) scale(1); }
    100% { transform: translateX(0) scale(1); }
}

.zav-alert .zav-orb {
    animation: zav-alert-fx 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

/* 8. IDLE: BREATHE */
@keyframes zav-breathe-fx {
    0%, 100% { transform: scale(0.95); opacity: 0.9; }
    50%      { transform: scale(1.05); opacity: 1; }
}

.zav-breathe .zav-orb {
    animation: zav-breathe-fx 4s ease-in-out infinite !important;
}

/* 9. IDLE: DRIFT */
@keyframes zav-drift-fx {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(5px, -5px); }
    50%  { transform: translate(-3px, 5px); }
    75%  { transform: translate(-5px, -3px); }
    100% { transform: translate(0, 0); }
}

.zav-drift .zav-orb {
    animation: zav-drift-fx 6s ease-in-out infinite !important;
}

/* 10. IDLE: CURIOUS - Slight tilt + eyes scan (paired with eyes-look-around in JS) */
@keyframes zav-curious-fx {
    0%   { transform: rotate(0deg) scale(1); }
    15%  { transform: rotate(-8deg) scale(1.03); }
    40%  { transform: rotate(5deg) scale(1.03); }
    60%  { transform: rotate(-3deg) scale(1.01); }
    80%  { transform: rotate(2deg) scale(1); }
    100% { transform: rotate(0deg) scale(1); }
}

.zav-curious .zav-orb {
    animation: zav-curious-fx 3s ease-in-out infinite !important;
}

/* 11. IDLE: BORED - Subtle sag + paired with bored eye-roll in JS */
@keyframes zav-bored-fx {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(4px) scale(0.97); }
    60%  { transform: translateY(4px) scale(0.97); }
    80%  { transform: translateY(-2px) scale(1.01); }
    100% { transform: translateY(0) scale(1); }
}

.zav-bored .zav-orb {
    animation: zav-bored-fx 4s ease-in-out infinite !important;
}

/* 12. IDLE: SLEEPY - Gentle droop + paired with sleepy eye-droop in JS */
@keyframes zav-sleepy-fx {
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    25%  { transform: translateY(3px) scale(0.96); opacity: 0.85; }
    50%  { transform: translateY(5px) scale(0.94); opacity: 0.75; }
    70%  { transform: translateY(5px) scale(0.94); opacity: 0.75; }
    85%  { transform: translateY(-4px) scale(1.04); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.zav-sleepy .zav-orb {
    animation: zav-sleepy-fx 3.5s ease-in-out infinite !important;
}

/* 13. IDLE: WIGGLE - Playful side-to-side */
@keyframes zav-wiggle-fx {
    0%   { transform: translateX(0) rotate(0deg); }
    15%  { transform: translateX(-6px) rotate(-5deg); }
    30%  { transform: translateX(6px) rotate(5deg); }
    45%  { transform: translateX(-4px) rotate(-3deg); }
    60%  { transform: translateX(4px) rotate(3deg); }
    75%  { transform: translateX(-2px) rotate(-1deg); }
    100% { transform: translateX(0) rotate(0deg); }
}

.zav-wiggle .zav-orb {
    animation: zav-wiggle-fx 2s ease-in-out infinite !important;
}

/* 14. IDLE: JOY-IDLE - Small bounce + happy eyes (paired in JS) */
@keyframes zav-joy-idle-fx {
    0%   { transform: translateY(0) scale(1); }
    20%  { transform: translateY(-12px) scale(1.08); }
    40%  { transform: translateY(0) scale(0.98); }
    55%  { transform: translateY(-6px) scale(1.04); }
    70%  { transform: translateY(0) scale(1); }
    100% { transform: translateY(0) scale(1); }
}

.zav-joy-idle .zav-orb {
    animation: zav-joy-idle-fx 2s ease-in-out infinite !important;
}

/* ==========================================================================
   EYE ANIMATIONS
   All target .eye elements inside .zav-orb. Dialogue unaffected.
   ========================================================================== */

/* 1. WIDEN (Hero) - Eyes go big on arrival */
@keyframes eyes-widen-fx {
    0%   { transform: scaleY(1) scaleX(1); }
    20%  { transform: scaleY(1.5) scaleX(1.2); }
    70%  { transform: scaleY(1.5) scaleX(1.2); }
    100% { transform: scaleY(1) scaleX(1); }
}

.eyes-widen .eye {
    animation: eyes-widen-fx 2s ease-out forwards !important;
}

/* 2. LOOK AROUND (Ecosystem) - Eyes scan left to right */
@keyframes eyes-look-around-fx {
    0%   { transform: translate(-50%, -50%); }
    20%  { transform: translate(calc(-50% - 10px), -50%); }
    40%  { transform: translate(calc(-50% + 10px), -50%); }
    60%  { transform: translate(calc(-50% - 5px), calc(-50% - 3px)); }
    80%  { transform: translate(calc(-50% + 5px), calc(-50% + 3px)); }
    100% { transform: translate(-50%, -50%); }
}

.eyes-look-around .zav-eyes-wrapper {
    animation: eyes-look-around-fx 2.5s ease-in-out forwards !important;
}

/* 3. FOCUS (Process) - Eyes squint with concentration */
@keyframes eyes-focus-fx {
    0%   { height: 20px; border-radius: 6px; }
    20%  { height: 8px; border-radius: 3px; }
    80%  { height: 8px; border-radius: 3px; }
    100% { height: 20px; border-radius: 6px; }
}

.eyes-focus .eye {
    animation: eyes-focus-fx 2s ease-in-out forwards !important;
}

/* 4. HAPPY (Testimonials) - Eyes squish into happy crescents */
@keyframes eyes-happy-fx {
    0%   { height: 20px; border-radius: 6px; transform: scaleY(1); }
    20%  { height: 6px; border-radius: 10px 10px 0 0; transform: scaleY(0.4); }
    75%  { height: 6px; border-radius: 10px 10px 0 0; transform: scaleY(0.4); }
    100% { height: 20px; border-radius: 6px; transform: scaleY(1); }
}

.eyes-happy .eye {
    animation: eyes-happy-fx 1.5s ease-in-out forwards !important;
}

/* 5. SPARKLE (Results) - Eyes flash bright green then back */
@keyframes eyes-sparkle-fx {
    0%   { background: #002b1b; box-shadow: none; }
    20%  { background: #00FFA3; box-shadow: 0 0 12px #00FFA3, 0 0 24px rgba(0,255,163,0.5); }
    50%  { background: #00FFA3; box-shadow: 0 0 12px #00FFA3, 0 0 24px rgba(0,255,163,0.5); }
    80%  { background: #002b1b; box-shadow: none; }
    100% { background: #002b1b; box-shadow: none; }
}

.eyes-sparkle .eye {
    animation: eyes-sparkle-fx 1.8s ease-in-out forwards !important;
}

/* 6. WINK (About) - Left eye winks */
@keyframes eyes-wink-left-fx {
    0%   { transform: scaleY(1); }
    25%  { transform: scaleY(0.1); }
    50%  { transform: scaleY(0.1); }
    75%  { transform: scaleY(1); }
    100% { transform: scaleY(1); }
}

.eyes-wink .eye.left {
    animation: eyes-wink-left-fx 1.2s ease-in-out forwards !important;
}

/* 7. ALERT EYES (Contact) - Eyes go wide + pupils dilate */
@keyframes eyes-alert-fx {
    0%   { transform: scaleY(1) scaleX(1); width: 12px; }
    15%  { transform: scaleY(1.6) scaleX(1.3); width: 14px; }
    50%  { transform: scaleY(1.6) scaleX(1.3); width: 14px; }
    100% { transform: scaleY(1) scaleX(1); width: 12px; }
}

.eyes-alert .eye {
    animation: eyes-alert-fx 1.5s ease-out forwards !important;
}

/* ==========================================================================
   IDLE EYE ANIMATIONS
   Paired with idle orb animations. Loop infinite.
   ========================================================================== */

/* BORED EYES - Roll upward, slow blink, look away */
@keyframes eyes-bored-fx {
    0%   { transform: translate(-50%, -50%); }
    15%  { transform: translate(-50%, calc(-50% - 6px)); }
    35%  { transform: translate(-50%, calc(-50% - 6px)); }
    40%  { transform: translate(-50%, -50%); }
    45%  { transform: translate(-50%, -50%) scaleY(0.1); }
    55%  { transform: translate(-50%, -50%) scaleY(0.1); }
    60%  { transform: translate(-50%, -50%); }
    75%  { transform: translate(calc(-50% + 8px), calc(-50% + 2px)); }
    90%  { transform: translate(calc(-50% + 8px), calc(-50% + 2px)); }
    100% { transform: translate(-50%, -50%); }
}

.eyes-bored .zav-eyes-wrapper {
    animation: eyes-bored-fx 4s ease-in-out infinite !important;
}

/* SLEEPY EYES - Slowly droop shut, hold, then snap open */
@keyframes eyes-sleepy-fx {
    0%   { transform: scaleY(1); }
    20%  { transform: scaleY(0.6); }
    35%  { transform: scaleY(0.3); }
    50%  { transform: scaleY(0.1); }
    65%  { transform: scaleY(0.1); }
    70%  { transform: scaleY(1.3); }
    80%  { transform: scaleY(1); }
    100% { transform: scaleY(1); }
}

.eyes-sleepy .eye {
    animation: eyes-sleepy-fx 3.5s ease-in-out infinite !important;
}

/* JOY-IDLE EYES - Happy crescent squish (reuses happy shape, loops) */
@keyframes eyes-joy-idle-fx {
    0%   { height: 20px; border-radius: 6px; transform: scaleY(1); }
    15%  { height: 6px; border-radius: 10px 10px 0 0; transform: scaleY(0.4); }
    40%  { height: 6px; border-radius: 10px 10px 0 0; transform: scaleY(0.4); }
    55%  { height: 20px; border-radius: 6px; transform: scaleY(1); }
    100% { height: 20px; border-radius: 6px; transform: scaleY(1); }
}

.eyes-joy-idle .eye {
    animation: eyes-joy-idle-fx 2s ease-in-out infinite !important;
}

/* CURIOUS EYES - reuses eyes-look-around but infinite loop version */
@keyframes eyes-curious-fx {
    0%   { transform: translate(-50%, -50%); }
    20%  { transform: translate(calc(-50% - 8px), calc(-50% - 2px)); }
    40%  { transform: translate(calc(-50% + 8px), calc(-50% - 2px)); }
    60%  { transform: translate(calc(-50% + 4px), calc(-50% + 3px)); }
    80%  { transform: translate(calc(-50% - 4px), calc(-50% + 3px)); }
    100% { transform: translate(-50%, -50%); }
}

.eyes-curious .zav-eyes-wrapper {
    animation: eyes-curious-fx 3s ease-in-out infinite !important;
}

/* ==========================================================================
   MOBILE OPTIMIZATION
   ========================================================================== */

@media (max-width: 768px) {
    .zav-character {
        position: fixed !important;
        bottom: 80px !important;
        left: 20px !important;
        right: auto !important;
        top: auto !important;
        transform: scale(0.6) !important;
        transform-origin: center center;
        z-index: 9999;
        pointer-events: auto;
        --current-scale: 0.6 !important;
    }

    .zav-orb {
        width: 60px !important;
        height: 60px !important;
    }

    .zav-container {
        width: 60px !important;
        height: 60px !important;
    }

    .zav-orb,
    .zav-container {
        animation: none !important;
    }

    .zav-eyes-wrapper {
        animation: none !important;
    }

    .zav-dialogue {
        position: absolute !important;
        bottom: 70px !important;
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        width: 250px !important;
        max-width: calc(100vw - 40px) !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
        transform-origin: bottom left !important;
        z-index: 10000;
        min-width: 200px;
    }

    .zav-character[data-section] .zav-dialogue,
    .zav-character[data-section="hero"] .zav-dialogue,
    .zav-character[data-section="services"] .zav-dialogue,
    .zav-character[data-section="process"] .zav-dialogue,
    .zav-character[data-section="results"] .zav-dialogue,
    .zav-character[data-section="about"] .zav-dialogue,
    .zav-character[data-section="contact"] .zav-dialogue,
    .zav-character[data-section="ecosystem"] .zav-dialogue,
    .zav-character[data-section="testimonials"] .zav-dialogue {
        right: auto !important;
        left: 0 !important;
        top: auto !important;
        bottom: 70px !important;
        transform: translateY(-100%) translateX(0) !important;
    }

    .zav-character[data-section] .zav-dialogue.visible {
        transform: translateY(-100%) translateX(0) !important;
    }

    .zav-dialogue.hide {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-100%) translateX(0) scale(0.9) !important;
        transition: all 0.3s ease !important;
    }

    .zav-eyes-wrapper {
        transform: scale(0.7) translate(-50%, -50%) !important;
    }

    .zav-eye {
        width: 4px !important;
        height: 8px !important;
    }
}

/* ==========================================================================
   MENU OPEN ORB POSITIONING
   ========================================================================== */

/* When menu is open, ensure orb stays above drawer */
body.menu-open .zav-character {
    z-index: 10001 !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.menu-open .zav-character .zav-dialogue {
    z-index: 10002 !important;
}

/* Menu positioning class - applied by JS when orb needs to move to right */
.zav-character.menu-positioned {
    transition: top 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* When orb is positioned on right side for menu, dialogue goes on LEFT */
.zav-character.menu-positioned .zav-dialogue {
    right: 110% !important;
    left: auto !important;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: right center;
}

/* ==========================================================================
   MENU OPEN ORB SLIDE - MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    body.menu-open .zav-character {
        z-index: 10001 !important;
    }
    
    body.menu-open .zav-character .zav-dialogue {
        z-index: 10002 !important;
    }
    
    /* Mobile: When orb is positioned for menu, dialogue appears above/below */
    .zav-character.menu-positioned .zav-dialogue {
        right: auto !important;
        left: 50% !important;
        top: auto !important;
        bottom: 110% !important;
        transform: translateX(-50%) !important;
        transform-origin: center bottom !important;
        min-width: 200px;
        max-width: calc(100vw - 40px);
    }
}