/* ============================================================
   A SIA no canto: a bolha e a janela da conversa.
   ============================================================ */

.ia-oculta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sia{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:14px}

.sia-bolha{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border:1px solid rgba(246,243,238,.14);border-radius:999px;cursor:pointer;
  background:#080808;color:var(--cream);
  font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.015em;
  /* o halo cor de rosa vem por sombra e nao por uma camada atras: o
     translateY do hover cria contexto proprio e engoliria essa camada */
  box-shadow:0 16px 38px -14px rgba(5,5,5,.75),0 0 26px -4px rgba(255,0,105,.55);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s;
  order:2;
}
.sia-bolha:hover{transform:translateY(-2px);box-shadow:0 22px 48px -16px rgba(5,5,5,.85),0 0 32px -2px rgba(255,0,105,.7)}
.sia-icone{display:inline-flex;color:var(--lime)}
.sia-icone svg{width:18px;height:18px}
/* ao minimizar, o botao fica mais discreto e o halo apaga-se */
.sia.aberta .sia-bolha{font-size:13.5px;padding:11px 18px;box-shadow:0 14px 32px -16px rgba(5,5,5,.7),0 0 18px -8px rgba(255,0,105,.4)}
.sia.aberta .sia-icone{color:var(--cream)}

/* Tem de vir antes da regra de baixo, e com mais peso do que ela: o
   display:flex do .sia-janela anulava o esconder que o atributo hidden faz,
   e por isso a janela nunca fechava. */
.sia-janela[hidden]{display:none !important}

.sia-janela{
  order:1;display:flex;flex-direction:column;
  width:min(404px,calc(100vw - 44px));height:min(560px,calc(100vh - 140px));
  background:rgba(246,243,238,.92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(5,5,5,.1);border-radius:26px;
  box-shadow:0 40px 90px -36px rgba(5,5,5,.6);overflow:hidden;
  animation:sia-sobe .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes sia-sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.sia-topo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;flex-shrink:0;color:var(--cream);
  background:
    radial-gradient(120% 200% at 100% 0%,rgba(255,0,105,.4),transparent 62%),
    #080808;
}
.sia-quem b{display:block;font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.025em}
.sia-quem small{
  display:block;margin-top:2px;
  font-family:"DM Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(246,243,238,.55);
}
.sia-fechar{background:none;border:none;cursor:pointer;color:rgba(246,243,238,.7);padding:6px;display:inline-flex}
.sia-fechar:hover{color:var(--cream)}
.sia-fechar svg{width:18px;height:18px}

.sia-fio{flex-grow:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}

.sia-balao{max-width:86%;border-radius:20px;padding:13px 16px}
.sia-balao p{margin:0;font-size:14.5px;line-height:1.55}
.sia-balao p + p{margin-top:9px}

/* os links dentro de uma resposta dela.
   O sia-liga-crua e para quando o proprio endereco e o texto do link: ai
   deixa-se partir a meio da palavra, senao um endereco comprido estica o
   balao e rebenta com a largura da janela. */
.sia-balao a{
  color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}
.sia-balao a:hover{text-decoration-thickness:2.5px}
.sia-balao--sia a{color:var(--pink-bt,#E10060)}
.sia-balao--sia a:hover{color:var(--ink,#050505)}
.sia-balao a.sia-liga-crua{overflow-wrap:anywhere;word-break:break-word}
.sia-balao strong{font-weight:700}
.sia-balao--sia{background:#fff;color:var(--ink);align-self:flex-start;border-bottom-left-radius:7px;box-shadow:0 1px 2px rgba(5,5,5,.05)}
.sia-balao--eu{background:linear-gradient(118deg,#FF0069,#FF3A2E);color:#fff;align-self:flex-end;border-bottom-right-radius:7px}
.sia-balao.a-pensar p{color:var(--tinta-3);font-style:italic}
.sia-balao.falhou{background:rgba(255,89,0,.12);border:1px solid rgba(255,89,0,.3)}
.sia-balao.falhou p{color:#8A3000}

.sia-escrever{
  display:flex;align-items:flex-end;gap:10px;flex-shrink:0;
  padding:14px;border-top:1px solid var(--risco);background:var(--cream);
}
.sia-escrever textarea{
  flex-grow:1;resize:none;max-height:140px;
  background:#fff;border:1px solid rgba(5,5,5,.1);border-radius:16px;
  padding:12px 14px;font-family:var(--corpo);font-size:15px;line-height:1.45;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;
}
.sia-escrever textarea:focus{border-color:var(--pink);outline:none;box-shadow:0 0 0 4px rgba(255,0,105,.12)}
.sia-escrever button{
  flex-shrink:0;width:44px;height:44px;border:none;border-radius:14px;cursor:pointer;
  background:linear-gradient(118deg,#FF0069,#FF5900);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -12px rgba(255,0,105,.9);
  transition:transform .2s;
}
.sia-escrever button:hover{transform:translateY(-2px)}
.sia-escrever button svg{width:18px;height:18px}

@media(max-width:560px){
  .sia{right:14px;bottom:14px;left:14px;align-items:stretch}
  .sia-bolha{align-self:flex-end}
  .sia-janela{width:100%;height:min(70vh,520px)}
}

@media(prefers-reduced-motion:reduce){
  .sia-janela{animation:none}
  .sia-bolha,.sia-escrever button{transition:none}
}


/* A linha que separa a conversa de antes da de agora. Sem ela, quem
   abrisse encontrava mensagens antigas sem perceber de onde vinham. */
.sia-balao.de-antes{
  align-self:center;max-width:none;
  background:none;border:none;padding:6px 0;
  font-family:var(--mono,ui-monospace,monospace);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(5,5,5,.42);text-align:center;
}