/* Animação do caso de uso com assistente de IA (/docs e /suporte). Janela genérica, escura de propósito, sem marca de produto.
   Sem JS ou com movimento reduzido: fica o estado final (conversa pronta). Com JS, .is-run liga a sequência. */
.ia-caso { display: grid; gap: 1.5rem; margin: 1rem 0 1.5rem; align-items: start; }
@media (min-width: 900px) { .ia-caso { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 2.5rem; } }
.ia-caso__texto, .ia-caso__demo { min-width: 0; }
.ia-passos li { overflow-wrap: anywhere; }
.ia-regra { padding: .75rem 1rem; border-left: 3px solid var(--color-accent); background: var(--color-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: 1rem 0; }
kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: rgba(255,255,255,.08); border: 1px solid var(--color-border); border-radius: 6px; padding: .1em .45em; }

.ia-demo { margin: 0; --ia-win: #121212; --ia-pill: #2a2a2a; --ia-bubble: #2f2f2f; }
.ia-demo svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* página do manual (de onde o link sai) */
.ia-demo__page { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: .85rem; }
.ia-demo__page-name { color: var(--color-text-muted); }
.ia-demo__url { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; color: var(--color-text); }
.ia-demo__btn { padding: .3rem .7rem; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text); transition: background .2s, border-color .2s, transform .15s; white-space: nowrap; }
.ia-demo__btn.is-ok { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-dim); }
.ia-demo__btn.is-press { transform: scale(.94); background: var(--color-surface-hover); }

.ia-demo__label { margin: 1rem 0 .4rem; font-size: .8rem; color: var(--color-text-muted); }

/* janela */
.ia-demo__win { position: relative; background: var(--ia-win); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,.35); padding: 1rem 1rem 0; overflow: hidden; color: var(--color-text); text-align: left; }
.ia-demo__body { position: relative; padding-bottom: 5.25rem; }
.ia-demo__hello { position: absolute; inset: 0 0 5.25rem; display: grid; place-items: center; margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; text-align: center; opacity: 0; visibility: hidden; transition: opacity .35s; }
.ia-demo__msgs { display: grid; gap: 1rem; font-size: .95rem; line-height: 1.55; }
.ia-demo__user { justify-self: end; max-width: 92%; background: var(--ia-bubble); border-radius: 18px; padding: .6rem .9rem; display: grid; gap: .25rem; overflow-wrap: anywhere; }
.ia-demo__user-link { color: var(--color-accent); font-size: .85rem; }
.ia-demo__bot { display: grid; }
.ia-demo__bot > * { grid-area: 1 / 1; }
.ia-demo__answer p { margin: 0 0 .5rem; color: var(--color-text); }
.ia-demo__answer ol { margin: 0 0 .6rem; padding-left: 1.3rem; display: grid; gap: .35rem; color: var(--color-text); }
.ia-demo__dots::after { content: '...'; }
.is-run.s-typing .ia-demo__dots::after { animation: ia-dot 1.2s steps(1) infinite; }
@keyframes ia-dot { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } }
.ia-demo__ver { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.ia-demo__typing { margin: 0; color: var(--color-text-muted); font-size: .9rem; opacity: 0; visibility: hidden; }

/* caixa de mensagem: cresce para cima, sem mexer na altura da janela */
.ia-demo__composer { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; display: flex; align-items: flex-end; gap: .6rem; background: var(--ia-pill); border-radius: 26px; padding: .6rem .6rem .6rem 1rem; color: var(--color-text-muted); }
.ia-demo__composer > svg { margin-bottom: .55rem; }
.ia-demo__input { flex: 1; min-width: 0; padding: .5rem 0; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; display: grid; gap: .2rem; }
.ia-demo__ph { color: var(--color-text-muted); }
.ia-demo__t-link, .ia-demo__t-q { display: none; color: var(--color-text); }
.ia-demo__t-link { color: var(--color-accent); font-size: .85rem; }
.ia-demo__send { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--color-text); color: #1a1a1a; display: grid; place-items: center; flex: none; opacity: .55; transition: opacity .2s, background .2s; }
.ia-demo__send.is-on { opacity: 1; background: var(--color-accent); }
.ia-demo__caret::after { content: ''; display: inline-block; width: 1px; height: 1em; margin-left: 1px; background: currentColor; vertical-align: -.15em; animation: ia-caret 1s steps(1) infinite; }
@keyframes ia-caret { 50% { opacity: 0; } }

.ia-demo__ctl { display: flex; gap: .5rem; margin-top: .75rem; }
.ia-demo__ctl .btn { display: inline-flex; align-items: center; gap: .4rem; }
.ia-demo__ctl svg { width: 1rem; height: 1rem; }
.ia-demo:not(.is-run) .ia-demo__ctl, .ia-demo__ctl[hidden] { display: none; }

/* sequência (só com JS e sem movimento reduzido) */
.is-run .ia-demo__user, .is-run .ia-demo__answer { opacity: 0; visibility: hidden; transition: opacity .3s; }
.is-run .ia-demo__hello { opacity: 1; visibility: visible; }
.is-run.s-chat .ia-demo__hello { opacity: 0; visibility: hidden; }
.is-run.s-user .ia-demo__user { opacity: 1; visibility: visible; }
.is-run.s-typing .ia-demo__typing { opacity: 1; visibility: visible; }
.is-run.s-answer .ia-demo__answer { opacity: 1; visibility: visible; }
.is-run .ia-demo__ver { opacity: 0; transition: opacity .4s; }
.is-run.s-ver .ia-demo__ver { opacity: 1; }
.is-run .ia-demo__ph.is-off { display: none; }
.is-run .ia-demo__t-link.is-on, .is-run .ia-demo__t-q.is-on { display: block; }

@media (prefers-reduced-motion: reduce) {
  .ia-demo * { animation: none !important; transition: none !important; }
}
@media (max-width: 480px) {
  .ia-demo__win { padding: .85rem .85rem 0; }
  .ia-demo__hello { font-size: 1.3rem; }
}