/* =========================================================
   css/pepe.css — o Pépe no rodapé do menu e o painel flutuante
   da conversa (js/pepe.flutuante.js). Prefixo .pepe-.
   ========================================================= */

/* Cartão no rodapé do menu, logo acima da conta. */
.pepe-botao {
  width: 100%; display: flex; align-items: center; gap: 10px;
  /* Altura fixa, igual ao cartão da conta logo abaixo (.rodape-linha:
     44px do botão + 6px de folga em cima e embaixo + borda), para a
     frase de uma ou duas linhas nunca mudar o tamanho do cartão. */
  margin-bottom: 8px; padding: 6px 10px; height: 58px; box-sizing: border-box;
  border-radius: var(--r-card, 12px);
  background: linear-gradient(135deg, #f4c55c, #d99a1e);
  color: #1f2a1d; text-align: left; border: 0; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pepe-botao:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }
.pepe-botao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pepe-botao[aria-expanded="true"] { box-shadow: 0 0 0 2px #fff, 0 6px 18px rgba(0, 0, 0, .22); }

.pepe-foto { position: relative; flex: none; width: 38px; height: 38px; }
.pepe-foto img {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid rgba(255, 255, 255, .85);
}
.pepe-online {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #2fb35a; border: 2px solid #fff;
}
.pepe-foto .pepe-online { position: absolute; right: -1px; bottom: -1px; }
.pepe-texto { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pepe-nome { font-weight: 700; font-size: 14px; line-height: 1.15; }
/* A frase cabe em até duas linhas, sem reticências no meio. */
.pepe-sub {
  font-size: 11.5px; opacity: .8; line-height: 1.2; height: 2.4em; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

@media (max-width: 640px) {
  .pepe-botao { justify-content: center; padding: 6px 0; }
}

/* Painel flutuante: encosta no menu, na altura do rodapé. */
.pepe-painel {
  position: fixed; bottom: 16px; z-index: 60;
  /* Proporção de tela de celular (cerca de 9 por 19), acompanhando a
     altura da janela: ocupa quase toda a altura disponível, até 860px. */
  height: min(860px, calc(100dvh - 32px));
  width: min(440px, max(340px, calc((100dvh - 32px) * .5)), calc(100vw - 96px));
  display: flex; flex-direction: column;
  background: var(--card, #fff); border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(15, 31, 20, .35);
  box-shadow: 0 28px 70px rgba(8, 18, 11, .55), 0 10px 24px rgba(8, 18, 11, .35), 0 0 0 1px rgba(8, 18, 11, .2);
  animation: pepe-entra .18s ease-out;
}
.pepe-painel[hidden] { display: none; }
@keyframes pepe-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-height: 560px) { .pepe-painel { height: calc(100dvh - 16px); bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .pepe-painel { animation: none; } .pepe-botao { transition: none; } }

.pepe-cab {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: #0f1f14; color: #fff;
}
.pepe-cab img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #f4c55c; }
.pepe-cab-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pepe-cab-txt strong { font-size: 16px; }
.pepe-cab-txt span { font-size: 12px; color: #b9c7bc; }
.pepe-frase { font-weight: 400; transition: opacity .25s ease; }
.pepe-frase.pepe-frase-sai { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pepe-frase { transition: none; } }
.pepe-cab-txt .pepe-online { width: 8px; height: 8px; border: 0; margin-right: 6px; vertical-align: 1px; }
.pepe-fechar {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px;
  background: transparent; color: #fff; border: 0; cursor: pointer;
}
.pepe-fechar:hover { background: rgba(255, 255, 255, .1); }
.pepe-fechar svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.pepe-corpo { flex: 1; min-height: 0; display: flex; }
.pepe-corpo .cv-wrap { --cv-altura: 100%; height: 100%; flex: 1; border: 0; border-radius: 0; box-shadow: none; }

/* A frase do cartão troca sozinha (js/pepe.flutuante.js): esmaece e volta. */
.pepe-sub { transition: opacity .25s ease; }
.pepe-sub.pepe-sub-sai { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .pepe-sub { transition: none; } }

/* Frase em duas partes: cada parte numa linha (a segunda sempre embaixo). */
.pepe-sub .frase-parte { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }