/* Central: feedback (fix/central-ui-bento rodada 3, 2026-11-02). Carregado depois de styles.css.
   Os avisos do rodapé (toast.js), os esqueletos de carregamento (esqueleto.js) e as microinterações
   discretas. Tudo que mexe com movimento some em prefers-reduced-motion (no fim). */

/* ── Avisos do rodapé: cartão escuro, ícone do tipo, texto, ação e × ──
   Desktop: centrado embaixo. Nas telas de conversa (há uma barra de envio, .comp) sobe para não
   cobrir o campo: 112 px no desktop (o topo da barra fica a 99 px do fim, medido), 72 px no celular
   (a barra ocupa os 58 px de baixo). Celular fora da conversa: 12 px de margem. Só transform e opacity animam. */
.toast{position:fixed;left:0;right:0;bottom:24px;margin:0 auto;width:max-content;max-width:min(560px,calc(100vw - 32px));box-sizing:border-box;display:flex;flex-wrap:nowrap;align-items:center;gap:12px;padding:8px 8px 8px 14px;background:var(--realce);color:var(--texto);border:1px solid var(--borda-forte);border-radius:14px;box-shadow:0 14px 40px -12px rgba(0,0,0,.7);font-size:14px;font-weight:500;line-height:1.45;transform:none;z-index:30;animation:toast-entra 200ms ease-out both}
body:has(.comp) .toast{bottom:112px}
.toast.saindo{animation:toast-sai 150ms ease-out both}
@keyframes toast-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toast-sai{from{opacity:1}to{opacity:0}}

.toast-icone{display:inline-flex;flex:none;width:20px;height:20px}
.toast-icone svg{display:block}
.toast-ok .toast-icone{color:var(--destaque)}
.toast-erro .toast-icone{color:var(--perigo)}
.toast-info .toast-icone{color:var(--apagado)}
.toast-texto{flex:1 1 auto;min-width:0;color:var(--texto);overflow-wrap:anywhere}

/* a ação (um só botão, primário) e o × de fechar: foco visível, sem a cor do toast antigo */
.toast-btn{flex:none;display:inline-flex;align-items:center;min-height:32px;padding:6px 14px;background:var(--primario);color:var(--sobre-primario);border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;transition:filter 150ms ease-out,transform 120ms ease-out}
.toast-btn:hover{filter:brightness(1.08)}
.toast-btn:focus-visible{outline:2px solid var(--destaque);outline-offset:2px}
.toast-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:none;border:0;border-radius:999px;color:var(--apagado);cursor:pointer;transition:background-color 150ms ease-out,color 150ms ease-out}
.toast-x:hover{background:var(--hover);color:var(--texto)}
.toast-x:focus-visible{outline:2px solid var(--destaque);outline-offset:1px}

/* celular: o aviso ocupa a largura com 12px de margem; o × e a ação com 40px de toque */
@media (max-width: 639px){
  .toast{left:12px;right:12px;bottom:12px;width:auto;max-width:none;margin:0}
  body:has(.comp) .toast{bottom:72px}
  .toast-x{width:40px;height:40px}
  .toast-btn{min-height:40px}
}

/* ── Esqueletos de carregamento (esqueleto.js): a forma do que vem, com um brilho que passa ──
   Cartão cinza #151c18, linhas #1b231e. O brilho é um gradiente que anda com transform (1,2 s). */
.esq{min-width:0}
.esq-cartao,.esq-bolha,.esq-folha{position:relative;overflow:hidden;min-width:0;background:#151c18;border:1px solid var(--borda);border-radius:var(--raio-cartao)}
.esq-cartao::after,.esq-bolha::after,.esq-folha::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(126,240,193,0),rgba(126,240,193,.06),rgba(126,240,193,0));transform:translateX(-100%);animation:esq-brilho 1.2s ease-in-out infinite}
@keyframes esq-brilho{to{transform:translateX(100%)}}

.esq-linha{display:block;height:10px;border-radius:999px;background:var(--linha-suave)}
.esq-l100{width:100%}
.esq-l96{width:96%}
.esq-l95{width:95%}
.esq-l88{width:88%}
.esq-l72{width:72%}
.esq-l70{width:70%}
.esq-l60{width:60%}
.esq-l45{width:45%}
.esq-titulo{height:18px;width:55%;margin-bottom:6px}
.esq-quadro{display:block;flex:none;width:40px;height:40px;border-radius:var(--raio-controle);background:var(--linha-suave)}

/* artefato e Compartilhados: o quadro à esquerda e duas linhas, como o .art-card */
.esq-art{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px}
.esq-corpo{display:flex;flex-direction:column;gap:10px;min-width:0;padding-top:4px}

/* Loja: o topo (ícone e selo), o título, duas linhas e o botão, como o .loja-card */
.esq-loja{display:flex;flex-direction:column;gap:10px;padding:16px}
.esq-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.esq-icone{width:36px;height:36px;border-radius:10px}
.esq-pilula{display:block;width:64px;height:20px;border-radius:999px;background:var(--linha-suave)}
.esq-loja .esq-titulo{height:14px;width:70%;margin:4px 0 0}
.esq-rodape{display:flex;justify-content:flex-end;margin-top:auto}
.esq-botao{display:block;width:96px;height:34px;border-radius:999px;background:var(--linha-suave)}

/* documento: a folha com o título e linhas de larguras diferentes */
.esq-folha{display:flex;flex-direction:column;gap:12px;padding:22px 24px;max-width:720px}
.esq-folha .esq-titulo{margin-bottom:8px}

/* conversa: o balão do DOT (com o avatar), o de quem escreve e outro do DOT */
.esq-baloes{display:flex;flex-direction:column;gap:16px;max-width:620px;padding:8px 0}
.esq-msg{display:flex;align-items:flex-start;gap:12px;min-width:0}
.esq-msg.esq-eu{justify-content:flex-end}
.esq-avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--linha-suave)}
.esq-bolha{display:flex;flex-direction:column;gap:9px;flex:0 1 420px;min-width:0;padding:14px 16px;border-radius:18px 18px 18px 4px}
.esq-eu .esq-bolha{flex-basis:300px;border-radius:18px 18px 4px 18px}
.esq-bolha .esq-linha{height:9px}

/* ── Microinterações (discretas, sem exagero): o botão primário e os cartões clicáveis afundam ── */
.btn{transition:transform 120ms ease-out,filter 150ms ease-out}
.btn:not(.g):not(.q):not(.c):active:not(:disabled){transform:scale(.97)}
.art-card{transition:background-color 150ms ease-out,border-color 150ms ease-out,transform 120ms ease-out}
.art-card:active{transform:scale(.99)}
.loja-card:active{transform:scale(.99)}
/* a entrada do sugestão usa "backwards": depois dela o :active consegue mexer no transform */
.sugestao{transition:background-color 150ms ease-out,border-color 150ms ease-out,transform 120ms ease-out;animation-fill-mode:backwards}
.sugestao:active{transform:scale(.99)}
.toast-btn:active{transform:scale(.97)}
/* a habilidade ligada ou desligada no DOT: a cor muda em 150 ms. O pintar troca o nó do chip,
   então a transição comum não roda: o chip que acabou de mudar (chip-liga/chip-desliga, app.js)
   anima a cor de onde estava até o estado atual. */
.chip[data-act="hab-dot"]{transition:background-color 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out}
.chip.chip-liga{animation:chip-liga 150ms ease-out}
.chip.chip-desliga{animation:chip-desliga 150ms ease-out}
@keyframes chip-liga{from{background-color:transparent;border-color:#2a3530;color:var(--texto-corpo)}}
@keyframes chip-desliga{from{background-color:var(--verde-ativo);border-color:var(--verde-escuro);color:var(--destaque)}}

@media (prefers-reduced-motion: reduce){
  .toast,.toast.saindo{animation:none}
  .esq-cartao::after,.esq-bolha::after,.esq-folha::after{animation:none;display:none}
  .btn,.art-card,.sugestao,.toast-btn,.toast-x,.chip[data-act="hab-dot"]{transition:none}
  .chip.chip-liga,.chip.chip-desliga{animation:none}
  .btn:not(.g):not(.q):not(.c):active:not(:disabled),.art-card:active,.loja-card:active,.sugestao:active,.toast-btn:active{transform:none}
}