/* OUPI — Maquette UX · animations de conversation (démo) */
.demo-ctl{position:absolute;top:70px;left:calc(var(--edge-w) + 60px);z-index:13;display:flex;gap:6px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px 6px;box-shadow:var(--shadow-sm);font-size:11px}
.demo-ctl button{padding:5px 10px;border-radius:7px;background:var(--text);color:var(--bg);font-weight:500}
.demo-ctl button.ghost{background:none;color:var(--text-2)}
.demo-ctl .spd{display:flex;gap:2px}
.demo-ctl .spd span{padding:4px 7px;border-radius:6px;color:var(--text-3);cursor:pointer}
.demo-ctl .spd span.on{background:var(--surface-2);color:var(--text)}

/* Composer : texte tapé + curseur */
.composer .input.typing{color:var(--text)}
.composer .input .caret{display:inline-block;width:1px;height:13px;background:var(--text);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.send{transition:transform var(--t-fast),background var(--t-fast)}
.send.is-armed{background:var(--accent)!important;color:#fff!important}
.send.is-fired{transform:scale(.85)}
.send.is-stop{background:#e5484d!important;color:#fff!important}

/* Entrées de messages */
.msg-wrap,.user{opacity:0;transform:translateY(10px);animation:rise var(--t-med) forwards}
.user{transform:translateY(6px) scale(.98)}
@keyframes rise{to{opacity:1;transform:none}}

/* Pilule raisonnement : shimmer pendant la réflexion */
.reason.is-live{position:relative;overflow:hidden}
.reason.is-live::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.reason .t{font-variant-numeric:tabular-nums}

/* Étapes en direct */
.timeline .st{opacity:0;transform:translateX(-6px);animation:rise 240ms forwards}
.timeline .st .sp.spin{border-style:dashed;animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.timeline .st.ok .sp{border-style:solid;border-color:var(--accent);background:var(--accent);position:relative}
.timeline .st.ok .sp::after{content:"";position:absolute;left:3px;top:1px;width:3px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.timeline{transition:opacity var(--t-med),max-height var(--t-med)}
.timeline.is-collapsed{opacity:0;max-height:0;overflow:hidden;margin:0}

/* Streaming du texte */
.stream .w{opacity:0;animation:fade 180ms forwards}
@keyframes fade{to{opacity:1}}
.stream .cur{display:inline-block;width:7px;height:12px;background:var(--text-2);border-radius:2px;vertical-align:-1px;margin-left:2px;animation:blink .8s steps(1) infinite}

/* Carte mission : apparition + progression + livraison */
.mission{opacity:0;transform:scale(.97);transition:opacity var(--t-med),transform var(--t-med),border-color var(--t-med)}
.mission.is-in{opacity:1;transform:none}
.progress i{transition:width 900ms cubic-bezier(.2,.7,.2,1)}
.mission .status{transition:background var(--t-med),color var(--t-med)}
.mission.is-done{border-color:#bfe8d2}
.mission.is-done .status{background:var(--green-pill);color:var(--green-pill-text)}
.mission .deliver{max-height:0;overflow:hidden;opacity:0;transition:max-height 500ms cubic-bezier(.2,.7,.2,1),opacity 400ms 120ms}
.mission.is-done .deliver{max-height:220px;opacity:1}
.mission.is-done .keep{display:none}
.mission.is-done .progress{opacity:0;height:0;margin:0;transition:all var(--t-med)}
.file .btn.primary{position:relative;overflow:hidden}
.mission.is-done .file .btn.primary::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.5),transparent 60%);animation:pulse 900ms 200ms 2}
@keyframes pulse{0%{transform:scale(0);opacity:1}100%{transform:scale(2.5);opacity:0}}

/* Popover TrustLayer + score qui monte */
.trust-pop{opacity:0;transform:translateY(6px) scale(.98);transition:opacity var(--t-med),transform var(--t-med)}
.trust-pop.is-in{opacity:1;transform:none}
.trust-pop .row .p{opacity:0;animation:fade 200ms forwards}
.shield{transition:transform var(--t-fast),background var(--t-fast)}
.shield.is-hot{transform:scale(1.15);background:var(--green-pill)}

/* Bandeau tâches actives */
.tasks-pop{opacity:0;transform:translateY(8px);transition:opacity var(--t-med),transform var(--t-med)}
.tasks-pop.is-in{opacity:1;transform:none}
.tasks-fab .badge{transition:transform var(--t-fast)}
.tasks-fab .badge.is-bump{transform:scale(1.35)}

@media (prefers-reduced-motion:reduce){.msg-wrap,.user,.timeline .st,.stream .w{animation:none;opacity:1;transform:none}.reason.is-live::after,.send.is-fired,.file .btn.primary::after{animation:none}}
/* Bascule réponse → mission (morphing) */
.msg.morph{transition:border-color var(--t-med),background var(--t-med)}
.msg.morph .stream{transition:opacity 300ms,max-height 500ms cubic-bezier(.2,.7,.2,1);max-height:400px;overflow:hidden}
.msg.morph.is-morphing .stream{opacity:.45;max-height:52px}
.msg .mission.grow{opacity:1;transform:none;max-height:0;overflow:hidden;transition:max-height 700ms cubic-bezier(.2,.7,.2,1),margin 400ms;margin-top:0!important;border-color:transparent}
.msg .mission.grow.is-open{max-height:420px;margin-top:14px!important;border-color:var(--line)}
.msg .mission.is-open .head{animation:rise 400ms 150ms both}
.pipe-mini{display:flex;align-items:center;gap:6px;padding:10px 14px 0;font-size:9.5px;color:var(--text-3)}
.pipe-mini span{padding:3px 8px;border-radius:9px;border:1px solid var(--line-soft);transition:all 300ms;white-space:nowrap}
.pipe-mini span.on{background:#fdf2df;color:#a06a12;border-color:#f0d9a8}
.pipe-mini span.ok{color:var(--text);border-color:var(--line)}
.pipe-mini span.ok::before{content:"✓ ";color:var(--accent)}
.pipe-mini span.fail{background:#fdeceb;color:#c2413d;border-color:#e9a3a3}
.pipe-mini i{flex:1;height:1px;background:var(--line-soft)}
.progress i.rewind{background:#c2413d}
.mission.is-hold{border-color:#e6c98a;background:#fffaf0}
.mission.is-hold .status{background:#fdf2df;color:#a06a12}
.mission .hold{display:none;align-items:center;gap:10px;padding:10px 14px;font-size:11px;color:var(--text)}
.mission.is-hold .hold{display:flex}
.mission .hold .btn.primary{margin-left:auto;animation:pl2 1.1s ease-in-out 3}
@keyframes pl2{50%{box-shadow:0 0 0 6px rgba(79,122,74,.22)}}
.mission .receipt{max-height:0;overflow:hidden;opacity:0;transition:max-height 400ms,opacity 300ms 100ms;font-size:10px;color:var(--text-3);padding:0 14px}
.mission.is-done .receipt{max-height:30px;opacity:1;padding:8px 14px 12px}
.corner-orb.busy{animation:orbnudge 600ms cubic-bezier(.2,.7,.2,1)}
@keyframes orbnudge{40%{transform:scale(1.15)}}
.embedded .demo-ctl,.embedded .mock-nav,.embedded .edge{display:none}