/* Assistente de suporte por IA — balão e painel (sistema e landing page) */
.sup-botao { position: fixed; right: 34px; bottom: 26px; z-index: 1050; border: 0; border-radius: 50%; width: 58px; height: 58px; background: #1A56DB; color: #fff;
  display: grid; place-items: center; padding: 0; box-shadow: 0 10px 30px rgba(26, 86, 219, .35); cursor: pointer; transition: transform .15s; }
.sup-botao:hover { transform: translateY(-2px) scale(1.04); }
.sup-botao i { font-size: 1.7rem; }
/* dentro da coluna de botões flutuantes: mesmo tamanho e alinhamento dos outros */
.sup-botao.sup-na-coluna { position: static; width: 48px; height: 48px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.sup-botao.sup-na-coluna i { font-size: 1.45rem; }
.sup-painel.sup-na-coluna { right: 110px; bottom: 24px; }
@media (max-width: 991px) { .sup-painel.sup-na-coluna { right: 88px; } }
.sup-painel { position: fixed; right: 34px; bottom: 92px; z-index: 1060; width: 390px; max-width: calc(100vw - 24px); height: 600px; max-height: calc(100vh - 120px);
  background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .22); display: none; flex-direction: column; overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif; font-size: .92rem; color: #1F2937; }
.sup-painel.aberto { display: flex; animation: supAbre .18s ease-out; }
@keyframes supAbre { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sup-topo { display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; background: linear-gradient(135deg, #1A56DB, #3B82F6); color: #fff; }
.sup-topo small { display: block; opacity: .85; font-size: .78rem; }
.sup-ava { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; font-size: 1.2rem; }
.sup-icone { background: transparent; border: 0; color: #fff; width: 32px; height: 32px; border-radius: 8px; font-size: 1.1rem; }
.sup-icone:hover { background: rgba(255, 255, 255, .15); }
.sup-msgs { flex: 1; overflow-y: auto; padding: 1rem; background: #F7F9FC; display: flex; flex-direction: column; gap: .7rem; }
.sup-msg { display: flex; flex-direction: column; max-width: 88%; }
.sup-msg.user { align-self: flex-end; align-items: flex-end; }
.sup-msg.assistant, .sup-msg.sistema { align-self: flex-start; }
.sup-bolha { padding: .6rem .8rem; border-radius: 14px; line-height: 1.45; word-wrap: break-word; }
.sup-msg.user .sup-bolha { background: #1A56DB; color: #fff; border-bottom-right-radius: 4px; }
.sup-msg.assistant .sup-bolha { background: #fff; border: 1px solid #E5E7EB; border-bottom-left-radius: 4px; }
.sup-msg.sistema .sup-bolha { background: #ECFDF5; border: 1px solid #A7F3D0; font-size: .86rem; }
.sup-bolha ul { margin: .25rem 0 .25rem 1.1rem; padding: 0; }
.sup-bolha a { color: #1A56DB; font-weight: 600; }
.sup-bolha code { background: #EEF2FF; padding: 0 .25rem; border-radius: 4px; font-size: .85em; }
.sup-sug { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.sup-sug button { border: 1px solid #C7D7FE; background: #fff; color: #1A56DB; border-radius: 999px; padding: .3rem .7rem; font-size: .8rem; }
.sup-sug button:hover { background: #EBF1FD; }
.sup-acao { margin-top: .45rem; border: 1px dashed #93B4F5; background: #F3F6FD; border-radius: 12px; padding: .6rem .7rem; font-size: .85rem; }
.sup-acao-bts { display: flex; gap: .4rem; margin-top: .5rem; }
.sup-acao-bts button { border: 0; border-radius: 8px; padding: .35rem .8rem; font-weight: 600; font-size: .82rem; }
.sup-acao-bts .ok { background: #1A56DB; color: #fff; }
.sup-acao-bts .nao { background: #E5E7EB; color: #374151; }
.sup-acao-st { margin-top: .35rem; font-weight: 600; color: #047857; }
.sup-pix { margin-top: .45rem; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: .6rem; text-align: center; }
.sup-pix img { width: 180px; max-width: 100%; }
.sup-pix textarea { width: 100%; font: .72rem monospace; border: 1px solid #E5E7EB; border-radius: 8px; margin: .4rem 0; resize: none; }
.sup-pix button { border: 0; background: #1A56DB; color: #fff; border-radius: 8px; padding: .35rem .8rem; font-size: .82rem; font-weight: 600; }
.sup-aval { display: flex; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .76rem; color: #6B7280; flex-wrap: wrap; }
.sup-aval button { border: 1px solid #D1D5DB; background: #fff; color: #4B5563; border-radius: 999px; padding: .2rem .65rem; font-size: .78rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; }
.sup-aval button i { font-size: .95rem; }
.sup-aval button:hover { border-color: #1A56DB; color: #1A56DB; }
.sup-aval button.sim.on { background: #DCFCE7; border-color: #22C55E; color: #15803D; }
.sup-aval button.nao.on { background: #FEE2E2; border-color: #EF4444; color: #B91C1C; }
.sup-digitando .sup-bolha { display: flex; gap: 4px; }
.sup-digitando span { width: 7px; height: 7px; border-radius: 50%; background: #94A3B8; animation: supPula 1s infinite; }
.sup-digitando span:nth-child(2) { animation-delay: .15s; }
.sup-digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes supPula { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.sup-form { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid #E5E7EB; background: #fff; }
.sup-form textarea { flex: 1; border: 1px solid #D1D5DB; border-radius: 12px; padding: .55rem .75rem; resize: none; font: inherit; max-height: 120px; outline: none; }
.sup-form textarea:focus { border-color: #1A56DB; box-shadow: 0 0 0 3px rgba(26, 86, 219, .12); }
.sup-form button { border: 0; background: #1A56DB; color: #fff; width: 42px; border-radius: 12px; font-size: 1.15rem; }
.sup-rodape { text-align: center; font-size: .7rem; color: #9CA3AF; padding: 0 0 .5rem; background: #fff; }
@media (max-width: 576px) {
  .sup-painel { right: 12px; bottom: 80px; height: calc(100vh - 100px); }
  .sup-botao { right: 22px; bottom: 18px; }
  .sup-painel.sup-na-coluna { right: 12px; bottom: 140px; height: calc(100vh - 160px); }
}