/* =========================================================================
   A JANELA DA CONVERSA — o modelo da casa
   -------------------------------------------------------------------------
   O mesmo comportamento do chat do Easy Guia, da Senhora Bone e do site da
   Essenza: a conversa não fica presa no meio da página. Ela mora na parte
   de baixo da tela, acompanha a rolagem, e tem quatro estados:

     barra   — recolhida, só o cabeçalho, no canto inferior direito
     solta   — janela flutuante (o estado normal), arrastável pelo cabeçalho
     max     — ampliada, tomando a tela, com véu por trás
     secao   — encaixada no lugar dela na página (quem preferir assim)

   Regra que vale em todos: nunca prender a pessoa. Esc, o véu, o "Fechar" e
   o "Voltar ao site" sempre devolvem a tela.

   Este arquivo é lido pelo index.html (lado She) e pelo ele.html (lado He);
   quem liga tudo é o js/chat-janela.js. As cores saem das variáveis da
   página — por isso a mesma folha serve ao vinho e ao azul.
   ========================================================================= */

/* ---------- os botões do cabeçalho ---------- */
.mc-acoes{display:flex;align-items:center;gap:.4rem;margin-left:auto;flex:none}
.mc-btn{
  flex:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  color:#fff;border-radius:999px;padding:.34rem .6rem;cursor:pointer;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;line-height:1;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.mc-btn:hover{background:var(--champagne);border-color:var(--champagne);color:var(--wine-deep)}
.mc-btn[hidden]{display:none}
.mc-btn svg{width:11px;height:11px;display:block}
/* na janela estreita o rótulo sai e fica só o ícone */
@media(max-width:720px){ .mc-btn .r{display:none} }

/* ---------- o véu do estado ampliado ---------- */
.chat-veu{position:fixed;inset:0;z-index:110;display:none;
  background:rgba(12,21,36,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
body.chat-max .chat-veu{display:block}

/* ---------- a vaga que fica na página ----------
   Sem ela, soltar a conversa encolheria a página inteira debaixo de quem
   está lendo — e a âncora do menu passaria a cair no lugar errado. */
.mc-vaga{max-width:760px;margin:0 auto;border:1px dashed var(--line);background:var(--paper-2);
  padding:clamp(1.6rem,4vw,2.4rem);display:grid;gap:.9rem;place-items:center;text-align:center;
  color:var(--muted);font-size:.92rem;line-height:1.6}
.mc-vaga[hidden]{display:none}
.mc-vaga .mc-btn{background:var(--wine);border-color:var(--wine);color:#fff}
.mc-vaga .mc-btn:hover{background:var(--champagne);border-color:var(--champagne);color:var(--wine-deep)}

/* =========================================================================
   OS ESTADOS
   ========================================================================= */
/* comum às três posições fora da página: a fita cresce e o resto fica fixo */
body.chat-solto .mc,body.chat-max .mc,body.chat-barra .mc{
  position:fixed;z-index:120;margin:0;max-width:none;display:flex;flex-direction:column;
  box-shadow:0 26px 70px -18px rgba(12,21,36,.6)}
body.chat-solto .mc-fita,body.chat-max .mc-fita{flex:1;max-height:none}
/* o .reveal da página entra com translateY: a janela sairia deslocada
   de onde a mão a deixou */
body.chat-solto .mc,body.chat-max .mc,body.chat-barra .mc{transform:none;opacity:1}

/* ---------- SOLTA — o estado normal, embaixo ---------- */
body.chat-solto .mc{
  width:min(400px,calc(100vw - 24px));
  height:min(600px,calc(100vh - 24px));
  border-radius:14px;overflow:hidden}

/* ---------- AMPLIADA ---------- */
body.chat-max{overflow:hidden}
body.chat-max .mc{inset:14px;width:auto;height:auto;border-radius:14px;overflow:hidden}
body.chat-max .mc-fita{padding:1.6rem clamp(1.2rem,5vw,3.4rem)}
body.chat-max .mc-msg{max-width:74ch}

/* ---------- BARRA — recolhida no canto ---------- */
body.chat-barra .mc{
  right:18px;bottom:18px;left:auto;top:auto;
  width:min(300px,calc(100vw - 24px));height:auto;border-radius:999px;overflow:hidden;cursor:pointer}
body.chat-barra .mc-topo{border-bottom:0;padding:.7rem .9rem}
body.chat-barra .mc-topo b{font-size:.95rem}
body.chat-barra .mc-fita,body.chat-barra .mc-estante,
body.chat-barra .mc-opcoes,body.chat-barra .mc-barra,body.chat-barra .mc-rodape{display:none}
body.chat-barra .mc-acoes .abrir{display:inline-flex}
.mc-acoes .abrir{display:none}

/* ---------- arrastar ---------- */
body.chat-solto .mc-topo,body.chat-max .mc-topo{cursor:grab;touch-action:none;
  user-select:none;-webkit-user-select:none}
body.chat-arrasta,body.chat-arrasta *{cursor:grabbing!important;
  user-select:none!important;-webkit-user-select:none!important}

/* ---------- o botão do WhatsApp não disputa o canto ---------- */
body.chat-solto .fab,body.chat-max .fab{display:none!important}
body.chat-barra .fab{bottom:5.2rem}

/* ---------- telefone: a janela encosta nas duas bordas ---------- */
@media(max-width:700px){
  body.chat-solto .mc{left:8px!important;right:8px;width:auto;
    height:min(72vh,540px);top:auto!important;bottom:8px}
  body.chat-max .mc{inset:8px}
  body.chat-barra .mc{right:10px;bottom:10px;width:min(260px,calc(100vw - 20px))}
}

/* quem pediu menos movimento não leva transição nenhuma */
@media(prefers-reduced-motion:reduce){ .mc-btn{transition:none} }

/* =========================================================================
   O CABEÇALHO NA JANELA ESTREITA
   -------------------------------------------------------------------------
   400 px não cabem avatar, nome, status e dois botões com rótulo: o status
   quebrava em três linhas e o cabeçalho dobrava de altura.
   ========================================================================= */
body.chat-solto .mc-topo,body.chat-barra .mc-topo{gap:.6rem;padding:.7rem .85rem}
body.chat-solto .mc-topo > div,body.chat-barra .mc-topo > div{min-width:0}
body.chat-solto .mc-topo b,body.chat-barra .mc-topo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.chat-solto .mc-topo span,body.chat-barra .mc-topo span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.chat-solto .mc-btn .r,body.chat-barra .mc-btn .r{display:none}
body.chat-solto .mc-btn,body.chat-barra .mc-btn{padding:.34rem .5rem}
body.chat-solto .mc-rosto,body.chat-barra .mc-rosto{width:34px;height:34px}
/* o rodapé é nota de rodapé: na janela ele encolhe e cola no fim */
body.chat-solto .mc-rodape,body.chat-max .mc-rodape,body.chat-barra .mc-rodape{
  margin:0;padding:.5rem .9rem .7rem;font-size:.72rem;text-align:left;
  border-top:1px solid var(--line);background:var(--paper)}