/* Merlin — conversa animada (tutor completo) */
.merlin-demo .demo-messages{height:350px;min-height:0;overflow:hidden;justify-content:flex-end;position:relative}
.merlin-demo .demo-messages::before{content:"";position:absolute;left:0;right:0;top:0;height:34px;background:linear-gradient(#fff,rgba(255,255,255,0));z-index:2;pointer-events:none}
.merlin-demo .demo-message{animation:mx-in .45s cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom left}
.merlin-demo .demo-message.student{transform-origin:bottom right}
.merlin-demo .demo-message.teacher{align-self:flex-end;border-color:#ffd4bf;background:#fff3ec}
.merlin-demo .demo-messages.is-leaving>*{animation:mx-out .35s ease both}
@keyframes mx-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes mx-out{to{opacity:0;transform:translateY(-14px)}}

/* abas de modo */
.mx-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 16px 2px;padding:4px;border-radius:12px;background:#f1edfb}
.mx-modes button{position:relative;overflow:hidden;padding:7px 4px;border:0;border-radius:9px;background:transparent;color:#80779a;font:800 .64rem/1 Manrope,sans-serif;letter-spacing:.02em;cursor:pointer;transition:color .25s,background .25s,box-shadow .25s}
.mx-modes button:hover{color:#5a3fb8}
.mx-modes button.is-active{color:#4b2fb0;background:#fff;box-shadow:0 3px 10px rgba(80,50,170,.12)}
.mx-modes button i{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,#7048d5,#ff7a3d)}
.mx-modes button.is-active i{animation:mx-progress var(--mx-dur,9s) linear forwards}
.mx-modes.is-paused button.is-active i{animation-play-state:paused}
@keyframes mx-progress{to{width:100%}}

/* digitando */
.mx-typing{display:inline-flex;gap:4px;align-self:flex-start;padding:12px 14px;border:1px solid #eee9f7;border-radius:14px;background:#fff;box-shadow:0 5px 14px rgba(44,32,79,.045);animation:mx-in .3s ease both}
.mx-typing i{width:6px;height:6px;border-radius:50%;background:#9b83e6;animation:mx-dot 1s ease-in-out infinite}
.mx-typing i:nth-child(2){animation-delay:.15s}.mx-typing i:nth-child(3){animation-delay:.3s}
@keyframes mx-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.demo-chat-head small[data-mx-status].is-typing em{color:#fff}
.demo-chat-head small[data-mx-status].is-typing i{background:#ffd36e;box-shadow:0 0 9px #ffd36e}

/* texto sendo escrito */
.mx-stream::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.13em;background:#7855db;animation:merlin-caret .8s steps(2,start) infinite}
@keyframes merlin-caret{to{visibility:hidden}}
.demo-message .mx-meta{display:flex;align-items:center;gap:6px}
.mx-voice{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#efe9ff;color:#6b4fd0;font-size:9px}

/* componentes ricos dentro da resposta */
.mx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.mx-chips span{padding:5px 9px;border:1px solid #e3dafb;border-radius:99px;background:#f8f5ff;color:#5a3fb8;font-size:.66rem;font-weight:800;animation:mx-in .35s ease both}
.mx-chips span:nth-child(2){animation-delay:.08s}.mx-chips span:nth-child(3){animation-delay:.16s}
.mx-card{display:grid;gap:7px;margin-top:10px;padding:10px 11px;border:1px solid #ece6fa;border-radius:11px;background:#faf8ff;animation:mx-in .4s ease both}
.mx-row{display:flex;align-items:center;gap:9px;font-size:.72rem;color:#3a3052;line-height:1.35}
.mx-row b{display:block;font-size:.74rem;color:#2a2142}
.mx-row small{display:block;margin:0!important;color:#8e87a3!important;font-size:.62rem!important}
.mx-ico{display:grid;flex:0 0 28px;place-items:center;width:28px;height:28px;border-radius:8px;background:#ece5ff;color:#6445cf;font-size:.8rem;font-weight:900}
.mx-ico.pdf{background:#ffe9e1;color:#e2542a}
.mx-actions{display:flex;gap:6px;margin-top:10px}
.mx-actions span{padding:7px 11px;border-radius:9px;font-size:.68rem;font-weight:800;transition:transform .2s,box-shadow .2s,background .2s}
.mx-actions .yes{background:#7048d5;color:#fff;box-shadow:0 6px 14px rgba(112,72,213,.28)}
.mx-actions .no{background:#f1edfb;color:#6f6590}
.mx-actions .yes.is-pressed{transform:scale(.94);background:#5a36c2}
.mx-toast{align-self:center;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:99px;background:#1d1640;color:#fff;font-size:.68rem;font-weight:800;box-shadow:0 10px 24px rgba(29,22,64,.25);animation:mx-in .35s ease both}
.mx-toast i{width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:nx-spin-mx .7s linear infinite}
@keyframes nx-spin-mx{to{transform:rotate(360deg)}}
.mx-progress{height:7px;border-radius:9px;background:#ece6fa;overflow:hidden}
.mx-progress i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#7048d5,#ff7a3d);transition:width 1.4s cubic-bezier(.3,0,.2,1)}
.mx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mx-kpis div{padding:7px;border-radius:9px;background:#fff;border:1px solid #efeaf9;text-align:center}
.mx-kpis b{display:block;font-size:.86rem;color:#2a2142}
.mx-kpis small{display:block;margin:2px 0 0!important;font-size:.56rem!important;color:#8e87a3!important}
.mx-kpis .warn b{color:#e2542a}
.mx-quiz{display:grid;gap:5px}
.mx-quiz p{margin:0;font-size:.72rem;font-weight:700;color:#2a2142;line-height:1.4}
.mx-quiz span{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:7px;background:#fff;border:1px solid #efeaf9;font-size:.66rem;color:#4a4163;animation:mx-in .3s ease both}
.mx-quiz span::before{content:"";width:9px;height:9px;border:1.5px solid #b9a8ee;border-radius:50%}
.mx-quiz span:nth-child(3){animation-delay:.1s}.mx-quiz span:nth-child(4){animation-delay:.2s}
.mx-badges{display:flex;flex-wrap:wrap;gap:5px}
.mx-badges em{padding:3px 7px;border-radius:6px;background:#ece5ff;color:#5a3fb8;font-style:normal;font-size:.58rem;font-weight:900;letter-spacing:.03em}
.mx-badges em.draft{background:#fff1d6;color:#a86a00}

/* campo de digitação */
.merlin-demo .demo-chat-input span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.merlin-demo .demo-chat-input.is-writing span{color:#2d2545}
.merlin-demo .demo-chat-input.is-writing span::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-.15em;background:#7048d5;animation:merlin-caret .8s steps(2,start) infinite}
.merlin-demo .demo-chat-input button{transition:transform .2s,box-shadow .2s}
.merlin-demo .demo-chat-input.is-sending button{transform:scale(.86);box-shadow:0 0 0 6px rgba(112,72,213,.18)}

/* contexto e cards de poderes sincronizados */
.demo-chat-context.is-swap{animation:mx-in .4s ease both}
.merlin-powers article[data-mx-power]{cursor:pointer;transition:border-color .35s,background .35s,transform .35s,box-shadow .35s}
.merlin-powers article[data-mx-power]:hover{border-color:rgba(185,164,255,.35)}
.merlin-powers article.is-live{border-color:rgba(185,164,255,.6);background:linear-gradient(135deg,rgba(118,85,246,.2),rgba(255,122,61,.07));box-shadow:0 12px 30px rgba(60,30,160,.25);transform:translateY(-2px)}
.merlin-powers article.is-live>span{background:linear-gradient(135deg,#7655f6,#ff7a3d);color:#fff}

@media (max-width:560px){
  .merlin-demo .demo-messages{height:330px}
  .mx-modes button{font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .merlin-demo .demo-message,.mx-typing,.mx-chips span,.mx-card,.mx-toast,.mx-quiz span{animation:none!important}
  .mx-modes button.is-active i{animation:none;width:100%}
}

/* status sem itálico e cartão de limites fora da área da conversa */
.demo-chat-head small[data-mx-status] em{font-style:normal}
@media (min-width:1051px){
  .merlin-product{padding-bottom:84px}
  .merlin-product .merlin-proof-card{bottom:0;right:-30px;z-index:5}
}