/* ============================================================
   nox-avatar.css — Avatar SVG Nox
   ============================================================ */

#nox-avatar-wrap {
    display: flex;
    justify-content: center;
    margin: 16px 0 8px;
}

#nox-avatar {
    overflow: visible;
    display: block;
}

/* Transitions de base sur les éléments SVG */
#nox-orb,
#nox-ring {
    animation: rgb-stroke 10s infinite linear;
    transition: stroke 0.5s;
}
@keyframes rgb-stroke {
    0% { stroke: rgba(255, 0, 0, 0.3); }
    33% { stroke: rgba(0, 255, 0, 0.3); }
    66% { stroke: rgba(0, 0, 255, 0.3); }
    100% { stroke: rgba(255, 0, 0, 0.3); }
}
#eye-l,
#eye-r {
    transition: rx 0.3s cubic-bezier(0.4,0,0.2,1),
                ry 0.3s cubic-bezier(0.4,0,0.2,1),
                cy 0.3s cubic-bezier(0.4,0,0.2,1),
                opacity 0.3s;
}

#mouth-path {
    transition: d 0.4s cubic-bezier(0.4,0,0.2,1),
                stroke-width 0.3s;
}

/* ============================================================
   IDLE — respiration douce + anneau rotatif lent
   ============================================================ */
@keyframes nox-breathe {
    0%, 100% { r: 72; transform: scale(1); }
    50%       { r: 75; transform: scale(1.02); }
}
@keyframes nox-ring-idle {
    0%, 100% { opacity: 0.18; }
    50%       { opacity: 0.32; }
}
@keyframes nox-ring-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#nox-avatar.mood-idle #nox-orb {
    transform-origin: 100px 100px;
    animation: nox-breathe 4s ease-in-out infinite;
}
#nox-avatar.mood-idle #nox-ring {
    transform-origin: 100px 100px;
    animation: nox-ring-idle 4s ease-in-out infinite,
               nox-ring-rotate 22s linear infinite;
    /* L'anneau pulse maintenant doucement avec l'orbe */
    animation: nox-ring-idle 4s ease-in-out infinite, 
               nox-ring-rotate 22s linear infinite,
               nox-breathe 4s ease-in-out infinite;
}

/* ============================================================
   THINKING — rocking + anneau scan rapide + glow pulsant
   ============================================================ */
@keyframes nox-rock {
    0%, 100% { transform: rotate(-4deg); }
    50%       { transform: rotate(4deg);  }
}
@keyframes nox-glow-think {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255,255,255,0.2)); }
    50%       { filter: drop-shadow(0 0 18px rgba(255,255,255,0.55)); }
}
@keyframes nox-ring-scan {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#nox-avatar.mood-thinking #nox-avatar-group {
    transform-origin: 100px 100px;
    animation: nox-rock 2s ease-in-out infinite,
               nox-glow-think 2s ease-in-out infinite;
}
#nox-avatar.mood-thinking #nox-ring {
    transform-origin: 100px 100px;
    stroke-dasharray: 10 3;
    opacity: 0.55;
    animation: nox-ring-scan 1.4s linear infinite;
}

/* ============================================================
   TYPING — pulsation anneau + bouche animée
   ============================================================ */
@keyframes nox-ring-pulse {
    0%, 100% { r: 82;  opacity: 0.15; }
    50%       { r: 88; opacity: 0.35; }
}
@keyframes nox-mouth-talk {
    0%, 100% { transform: scaleY(1);   }
    50%       { transform: scaleY(0.2); }
}

#nox-avatar.mood-typing #nox-ring {
    animation: nox-ring-pulse 0.65s ease-in-out infinite;
}
#nox-avatar.mood-typing #nox-mouth {
    transform-origin: 100px 116px;
    animation: nox-mouth-talk 0.35s ease-in-out infinite;
}

/* ============================================================
   HAPPY — bounce + flash + particules
   ============================================================ */
@keyframes nox-bounce {
    0%   { transform: translateY(0);    }
    28%  { transform: translateY(-11px); }
    52%  { transform: translateY(-4px);  }
    72%  { transform: translateY(-7px);  }
    88%  { transform: translateY(-1px);  }
    100% { transform: translateY(0);    }
}
@keyframes nox-flash {
    0%, 75%, 100% { opacity: 0;    }
    20%           { opacity: 0.13; }
}

#nox-avatar.mood-happy #nox-avatar-group {
    animation: nox-bounce 0.75s cubic-bezier(0.36,0.07,0.19,0.97) forwards;
}
#nox-avatar.mood-happy #nox-flash {
    animation: nox-flash 0.75s ease-out forwards;
}
#nox-avatar.mood-happy #nox-particles {
    opacity: 1 !important;
}
#nox-avatar.mood-happy #nox-ring {
    transform-origin: 100px 100px;
    opacity: 0.4;
    animation: nox-ring-rotate 6s linear infinite;
}

/* ============================================================
   LAUGHING — yeux en arc, bouche ouverte, wiggle + cursor
   ============================================================ */
@keyframes nox-wiggle {
    0%, 100% { transform: rotate(0deg);   }
    20%       { transform: rotate(-6deg);  }
    40%       { transform: rotate(6deg);   }
    60%       { transform: rotate(-4deg);  }
    80%       { transform: rotate(4deg);   }
}
@keyframes nox-ring-laugh {
    0%, 100% { r: 82;  opacity: 0.2; }
    50%       { r: 90;  opacity: 0.45; }
}

#nox-avatar-wrap:has(#nox-avatar.mood-laughing) { cursor: default; }

#nox-avatar.mood-laughing #nox-avatar-group {
    transform-origin: 100px 100px;
    animation: nox-wiggle 0.5s ease-in-out infinite;
}
#nox-avatar.mood-laughing #nox-ring {
    animation: nox-ring-laugh 0.5s ease-in-out infinite;
}
#nox-avatar.mood-laughing #nox-particles {
    opacity: 1 !important;
}

/* Curseur pointer sur l'avatar au survol */
#nox-avatar-wrap {
    cursor: pointer;
}

/* ============================================================
   ERROR — shake + teinte rouge
   ============================================================ */
@keyframes nox-shake {
    0%, 100% { transform: translateX(0);   }
    14%       { transform: translateX(-7px); }
    28%       { transform: translateX(7px);  }
    42%       { transform: translateX(-5px); }
    57%       { transform: translateX(5px);  }
    71%       { transform: translateX(-3px); }
    85%       { transform: translateX(2px);  }
}

#nox-avatar.mood-error #nox-avatar-group {
    animation: nox-shake 0.55s cubic-bezier(0.36,0.07,0.19,0.97) forwards;
}
#nox-avatar.mood-error #nox-ring {
    stroke: #ff5555;
    opacity: 0.5;
    animation: none;
}