/* ============================================================
   EASY ACADEMY — NOURA, assistante IA (Phase 16)
   Widget flottant bas-droite : personnage animé + panneau de
   discussion. S'appuie sur les jetons de marque de app.css.
   ============================================================ */

:root {
    --noura-z: 1200;
    --noura-panel-w: 380px;
}

.ea-noura {
    position: fixed;
    right: clamp(12px, 2.5vw, 28px);
    bottom: clamp(12px, 2.5vw, 26px);
    z-index: var(--noura-z);
    font-family: var(--ea-font);
}

/* ------------------------------------------------------------
   1. LE PERSONNAGE
   ------------------------------------------------------------ */

.ea-noura-stage { position: relative; }

.ea-noura-avatar {
    position: relative;
    width: 96px;
    height: 96px;
    border: 0;
    padding: 0;
    background: radial-gradient(circle at 50% 38%, #ffffff, #EAF0FF 70%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(10, 31, 68, .3), inset 0 0 0 3px rgba(30, 94, 255, .18);
    overflow: visible;
    transition: transform .2s ease;
}

.ea-noura-avatar:hover { transform: translateY(-4px) scale(1.03); }
.ea-noura-avatar:focus-visible { outline: 3px solid var(--ea-royal); outline-offset: 3px; }

.ea-noura-svg {
    width: 118%;
    height: 118%;
    margin: -9%;
    display: block;
    transform-origin: 50% 90%;
    animation: noura-breathe 4.5s ease-in-out infinite;
}

/* Léger halo pulsant « en ligne » */
.ea-noura-ping {
    position: absolute;
    top: 6px; right: 6px;
    width: 16px; height: 16px;
    background: #12A594;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(18, 165, 148, .55);
    animation: noura-ping 2.4s infinite;
}

/* Respiration au repos */
@keyframes noura-breathe {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-3px) rotate(1deg); }
}

@keyframes noura-ping {
    0%   { box-shadow: 0 0 0 0 rgba(18, 165, 148, .5); }
    70%  { box-shadow: 0 0 0 12px rgba(18, 165, 148, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 165, 148, 0); }
}

/* Clignement des yeux (ferme les paupières via scaleY) */
.noura-eyes { transform-box: fill-box; transform-origin: center; animation: noura-blink 5s infinite; }
@keyframes noura-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95%           { transform: scaleY(0.12); }
}

/* Bras droit : petit balancement permanent, grand salut ponctuel */
.noura-arm-right { transform-box: fill-box; transform-origin: 138px 150px; animation: noura-idle-arm 5s ease-in-out infinite; }
@keyframes noura-idle-arm {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-6deg); }
}

.noura-flower { transform-box: fill-box; transform-origin: center; animation: noura-breathe 3s ease-in-out infinite; }

/* --- États déclenchés par le script (classes sur .ea-noura) --- */

/* Parle : la bouche s'ouvre et se ferme */
.ea-noura.is-talking .noura-mouth {
    transform-box: fill-box;
    transform-origin: center;
    animation: noura-talk .28s ease-in-out infinite;
}
@keyframes noura-talk {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(2.1); }
}

/* Salue : grand geste du bras droit */
.ea-noura.is-waving .noura-arm-right { animation: noura-wave .5s ease-in-out 4; }
@keyframes noura-wave {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-42deg); }
    75%      { transform: rotate(-14deg); }
}

/* Danse : tout le personnage se déhanche */
.ea-noura.is-dancing .ea-noura-svg { animation: noura-dance .6s ease-in-out infinite; }
@keyframes noura-dance {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50%      { transform: rotate(8deg) translateY(-6px); }
}

/* Marche : le widget traverse le bas de l'écran, jambes en mouvement */
.ea-noura.is-walking {
    animation: noura-stroll 9s linear;
}
.ea-noura.is-walking .ea-noura-svg { animation: noura-step .5s ease-in-out infinite; }
@keyframes noura-stroll {
    0%   { transform: translateX(0); }
    45%  { transform: translateX(calc(-100vw + 220px)); }
    50%  { transform: translateX(calc(-100vw + 220px)) scaleX(-1); }
    95%  { transform: translateX(0) scaleX(-1); }
    100% { transform: translateX(0); }
}
@keyframes noura-step {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-5px) rotate(2deg); }
}

/* Figée : plus aucune animation */
.ea-noura.is-frozen .ea-noura-svg,
.ea-noura.is-frozen .noura-eyes,
.ea-noura.is-frozen .noura-arm-right,
.ea-noura.is-frozen .noura-flower { animation: none !important; }

/* ------------------------------------------------------------
   2. BULLE PROACTIVE (astuces)
   ------------------------------------------------------------ */

.ea-noura-bubble {
    position: absolute;
    bottom: 106px;
    right: 0;
    width: min(300px, 78vw);
    background: #fff;
    border: 1px solid var(--ea-border);
    border-radius: 18px 18px 6px 18px;
    padding: 14px 16px;
    box-shadow: 0 18px 44px rgba(10, 31, 68, .22);
    animation: noura-pop .32s cubic-bezier(.2, 1.4, .5, 1);
}

.ea-noura-bubble::after {
    content: '';
    position: absolute;
    bottom: -9px; right: 26px;
    width: 18px; height: 18px;
    background: #fff;
    border-right: 1px solid var(--ea-border);
    border-bottom: 1px solid var(--ea-border);
    transform: rotate(45deg);
}

@keyframes noura-pop {
    from { opacity: 0; transform: translateY(10px) scale(.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ea-noura-bubble-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ea-royal);
    margin-bottom: 6px;
}
.ea-noura-bubble-badge i { color: var(--ea-gold); }
.ea-noura-bubble p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ea-text); }

.ea-noura-bubble-close {
    position: absolute;
    top: 8px; right: 8px;
    width: 22px; height: 22px;
    border: 0; border-radius: 50%;
    background: var(--ea-bg);
    color: var(--ea-text-muted);
    cursor: pointer;
    display: grid; place-items: center;
}

/* ------------------------------------------------------------
   3. PANNEAU DE DISCUSSION
   ------------------------------------------------------------ */

.ea-noura-panel {
    position: absolute;
    bottom: 0;
    right: 0;
    width: min(var(--noura-panel-w), 92vw);
    height: min(560px, 78vh);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(10, 31, 68, .34);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ea-border);
    animation: noura-panel-in .3s cubic-bezier(.2, 1, .4, 1);
}

@keyframes noura-panel-in {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ea-noura-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    color: #fff;
    background:
        radial-gradient(420px 160px at 10% -40%, rgba(233, 168, 32, .5), transparent 60%),
        linear-gradient(135deg, #1E5EFF, #129B8A);
}

.ea-noura-head-id { display: flex; align-items: center; gap: 10px; min-width: 0; }

.ea-noura-head-avatar {
    width: 44px; height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    overflow: hidden;
    display: grid; place-items: center;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.ea-noura-head-avatar .ea-noura-svg { width: 128%; height: 128%; margin: -14%; animation: none; }

.ea-noura-head-id strong { display: block; font-size: 1rem; line-height: 1.1; }
.ea-noura-head-id small { font-size: .74rem; color: rgba(255, 255, 255, .82); }

.ea-noura-head-tools { display: flex; gap: 4px; }
.ea-noura-tool {
    width: 34px; height: 34px;
    border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    display: grid; place-items: center;
    transition: .16s ease;
}
.ea-noura-tool:hover { background: rgba(255, 255, 255, .3); }
.ea-noura-tool.is-active { background: var(--ea-gold); color: #3B2A03; }

/* Journal des messages */
.ea-noura-log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(30, 94, 255, .05), transparent 60%),
        var(--ea-bg);
    scrollbar-width: thin;
}

.ea-noura-msg { display: flex; gap: 8px; max-width: 90%; }
.ea-noura-msg.from-user { align-self: flex-end; flex-direction: row-reverse; }

.ea-noura-msg-avatar {
    width: 30px; height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(10, 31, 68, .14);
    display: grid; place-items: center;
    align-self: flex-end;
}
.ea-noura-msg-avatar .ea-noura-svg { width: 140%; height: 140%; margin: -20%; animation: none; }

.ea-noura-bubble-msg {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: .9rem;
    line-height: 1.55;
    box-shadow: 0 4px 14px rgba(10, 31, 68, .07);
}
.from-noura .ea-noura-bubble-msg {
    background: #fff;
    color: var(--ea-text);
    border-bottom-left-radius: 5px;
}
.from-user .ea-noura-bubble-msg {
    background: linear-gradient(135deg, var(--ea-royal), var(--ea-royal-dark));
    color: #fff;
    border-bottom-right-radius: 5px;
}

.ea-noura-bubble-msg strong { color: inherit; }
.ea-noura-title { display: block; font-weight: 800; color: var(--ea-navy); margin-bottom: 3px; }
.from-noura .ea-noura-bubble-msg.is-quote {
    font-style: italic;
    border-left: 3px solid var(--ea-gold);
    background: linear-gradient(135deg, rgba(233,168,32,.08), #fff);
}

/* Indicateur « écrit… » */
.ea-noura-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.ea-noura-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ea-text-muted);
    animation: noura-typing 1.2s infinite;
}
.ea-noura-typing span:nth-child(2) { animation-delay: .2s; }
.ea-noura-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes noura-typing {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1; transform: translateY(-4px); }
}

/* Cartes de formation (tâche de recherche) */
.ea-noura-course {
    display: block;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--ea-border);
    text-decoration: none;
    color: var(--ea-navy);
    transition: .16s ease;
}
.ea-noura-course:hover { border-color: var(--ea-royal); transform: translateX(3px); color: var(--ea-navy); }
.ea-noura-course strong { display: block; font-size: .88rem; line-height: 1.3; }
.ea-noura-course span { font-size: .76rem; color: var(--ea-text-muted); }
.ea-noura-course .price { color: var(--ea-emerald); font-weight: 700; }

/* Suggestions « sur le même thème » */
.ea-noura-sugg { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.ea-noura-sugg button {
    border: 1px solid var(--ea-border);
    background: #fff;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: .76rem;
    color: var(--ea-royal-dark);
    cursor: pointer;
    transition: .14s ease;
}
.ea-noura-sugg button:hover { background: var(--ea-royal); color: #fff; border-color: var(--ea-royal); }

/* Bloc « apprends-moi » */
.ea-noura-teach {
    margin-top: 10px;
    padding: 12px;
    border: 1.5px dashed var(--ea-gold);
    border-radius: 14px;
    background: rgba(233, 168, 32, .07);
}
.ea-noura-teach label { display: block; font-size: .78rem; font-weight: 700; color: #8A6108; margin-bottom: 6px; }
.ea-noura-teach textarea {
    width: 100%;
    border: 1px solid var(--ea-border);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: .86rem;
    resize: vertical;
    min-height: 60px;
}
.ea-noura-teach-actions { display: flex; gap: 6px; margin-top: 8px; }

/* Chips de démarrage rapide */
.ea-noura-chips {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--ea-border);
    background: #fff;
}
.ea-noura-chips::-webkit-scrollbar { display: none; }
.ea-noura-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--ea-border);
    background: var(--ea-bg);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ea-navy);
    cursor: pointer;
    white-space: nowrap;
    transition: .14s ease;
}
.ea-noura-chip:hover { border-color: var(--ea-royal); color: var(--ea-royal); }
.ea-noura-chip i { color: var(--ea-royal); }

/* Formulaire de saisie */
.ea-noura-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--ea-border);
    background: #fff;
}
.ea-noura-input {
    flex: 1 1 auto;
    border: 1px solid var(--ea-border);
    border-radius: 999px;
    padding: 11px 16px;
    font-size: .9rem;
    outline: none;
    transition: .16s ease;
}
.ea-noura-input:focus { border-color: var(--ea-royal); box-shadow: 0 0 0 4px rgba(30, 94, 255, .12); }
.ea-noura-send {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border: 0; border-radius: 50%;
    background: linear-gradient(135deg, var(--ea-royal), var(--ea-emerald));
    color: #fff;
    cursor: pointer;
    display: grid; place-items: center;
    transition: .16s ease;
}
.ea-noura-send:hover { transform: scale(1.06); }
.ea-noura-send:disabled { opacity: .5; cursor: default; transform: none; }

/* ------------------------------------------------------------
   4. ÉTATS D'OUVERTURE / RESPONSIVE
   ------------------------------------------------------------ */

.ea-noura.is-open .ea-noura-stage { display: none; }

@media (max-width: 480px) {
    .ea-noura-panel { width: 94vw; height: 80vh; right: -4px; }
}

@media (prefers-reduced-motion: reduce) {
    .ea-noura-svg, .noura-eyes, .noura-arm-right, .noura-flower,
    .ea-noura-ping, .ea-noura.is-walking, .ea-noura.is-dancing .ea-noura-svg { animation: none !important; }
}

/* Ne pas masquer le contenu derrière NOURA quand on imprime */
@media print { .ea-noura { display: none !important; } }