/*
 * Chat do site — atendimento da IA do CRM sem sair da página.
 * CSS próprio (não passa pelo Tailwind) para o widget não depender do build.
 */
.costi-chat,
.costi-chat * { box-sizing: border-box; }

.costi-chat {
  --deep: oklch(0.24 0.055 255);
  --deep-soft: oklch(0.38 0.065 250);
  --gold: oklch(0.79 0.038 85);
  --sand: oklch(0.945 0.014 85);
  --card: #fff;
  --texto: oklch(0.24 0.055 255);
  --suave: oklch(0.48 0.028 255);
  --borda: oklch(0.9 0.014 85);
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Bolha ---------- */
.costi-chat__bolha {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.35rem 0.85rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--deep);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 18px 40px -18px rgba(12, 35, 64, 0.75);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.costi-chat__bolha:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -18px rgba(12, 35, 64, 0.85); }
.costi-chat__bolha svg { width: 1.25rem; height: 1.25rem; color: var(--gold); }
.costi-chat__pulso {
  position: absolute;
  top: 0.35rem; right: 0.35rem;
  width: 0.6rem; height: 0.6rem;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(201, 185, 154, 0.7);
  animation: costi-pulso 2.4s infinite;
}
@keyframes costi-pulso {
  0% { box-shadow: 0 0 0 0 rgba(201, 185, 154, 0.7); }
  70% { box-shadow: 0 0 0 0.7rem rgba(201, 185, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 185, 154, 0); }
}

/* ---------- Janela ---------- */
.costi-chat__janela {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: 23rem;
  max-width: calc(100vw - 2.5rem);
  height: 32rem;
  max-height: calc(100vh - 7rem);
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 1.25rem;
  box-shadow: 0 30px 70px -30px rgba(12, 35, 64, 0.6);
}
.costi-chat--aberto .costi-chat__janela {
  display: flex;
  animation: costi-entrada 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes costi-entrada {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.costi-chat--aberto .costi-chat__bolha { display: none; }

.costi-chat__topo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: var(--deep);
  color: #fff;
}
.costi-chat__avatar {
  width: 2.4rem; height: 2.4rem;
  flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--gold);
  color: var(--deep);
  font-weight: 700;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.1rem;
}
.costi-chat__titulo { flex: 1; line-height: 1.25; }
.costi-chat__titulo strong { display: block; font-size: 0.92rem; }
.costi-chat__titulo span {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; opacity: 0.75;
}
.costi-chat__online {
  width: 0.45rem; height: 0.45rem;
  border-radius: 999px;
  background: #35d07f;
}
.costi-chat__fechar {
  background: transparent; border: 0; color: #fff;
  opacity: 0.7; cursor: pointer; padding: 0.25rem;
  font: inherit; line-height: 1;
}
.costi-chat__fechar:hover { opacity: 1; }
.costi-chat__fechar svg { width: 1.1rem; height: 1.1rem; }

.costi-chat__corpo {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  background: var(--sand);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  scroll-behavior: smooth;
}

.costi-chat__msg {
  max-width: 85%;
  padding: 0.65rem 0.9rem;
  border-radius: 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  animation: costi-msg 0.3s ease both;
}
@keyframes costi-msg {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.costi-chat__msg--ia {
  align-self: flex-start;
  background: var(--card);
  color: var(--texto);
  border-bottom-left-radius: 0.3rem;
  border: 1px solid var(--borda);
}
.costi-chat__msg--eu {
  align-self: flex-end;
  background: var(--deep);
  color: #fff;
  border-bottom-right-radius: 0.3rem;
}
.costi-chat__msg--erro {
  align-self: center;
  background: #fdeceb;
  color: #a3261e;
  font-size: 0.8rem;
  text-align: center;
  max-width: 100%;
}

.costi-chat__digitando {
  align-self: flex-start;
  display: flex;
  gap: 0.25rem;
  padding: 0.8rem 0.95rem;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 1rem;
  border-bottom-left-radius: 0.3rem;
}
.costi-chat__digitando span {
  width: 0.4rem; height: 0.4rem;
  border-radius: 999px;
  background: var(--suave);
  opacity: 0.5;
  animation: costi-ponto 1.3s infinite;
}
.costi-chat__digitando span:nth-child(2) { animation-delay: 0.18s; }
.costi-chat__digitando span:nth-child(3) { animation-delay: 0.36s; }
@keyframes costi-ponto {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-0.25rem); opacity: 1; }
}

.costi-chat__rodape {
  border-top: 1px solid var(--borda);
  background: var(--card);
  padding: 0.7rem;
}
.costi-chat__forma { display: flex; gap: 0.5rem; align-items: flex-end; }
.costi-chat__campo {
  flex: 1;
  resize: none;
  max-height: 6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--borda);
  border-radius: 0.75rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--texto);
  background: #fff;
}
.costi-chat__campo:focus { outline: 2px solid var(--deep-soft); outline-offset: 1px; }
.costi-chat__enviar {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: var(--gold);
  color: var(--deep);
  cursor: pointer;
}
.costi-chat__enviar:disabled { opacity: 0.5; cursor: not-allowed; }
.costi-chat__enviar svg { width: 1.1rem; height: 1.1rem; }

.costi-chat__zap {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.45rem;
  border-radius: 0.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--deep-soft);
  text-decoration: none;
}
.costi-chat__zap:hover { background: var(--sand); }
.costi-chat__zap svg { width: 0.95rem; height: 0.95rem; }

/* Não cobrir a barra fixa de contato do celular. */
@media (max-width: 767px) {
  .costi-chat { right: 0.9rem; bottom: 5.25rem; }
  .costi-chat__janela { height: calc(100vh - 11rem); }
}

@media (prefers-reduced-motion: reduce) {
  .costi-chat__bolha, .costi-chat__janela, .costi-chat__msg { animation: none; transition: none; }
  .costi-chat__pulso, .costi-chat__digitando span { animation: none; }
}