/* ═══════════════════════════════════════════════════════════
   WINSTON — SOPORTE (chat en vivo) y VOZ
   ═══════════════════════════════════════════════════════════ */

/* botón flotante */
.soporte-btn {
  position: fixed; bottom: 22px; right: 22px; z-index: 200;
  display: flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--azul), var(--violeta));
  color: #fff; border: 0; border-radius: 999px;
  padding: .85rem 1.25rem; font: inherit; font-weight: 600; font-size: .92rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(77,157,255,.42);
  transition: transform .2s, box-shadow .2s;
}
.soporte-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(77,157,255,.55); }
.soporte-et { display: inline; }

/* ventana */
.soporte-caja {
  position: fixed; bottom: 92px; right: 22px; z-index: 200;
  width: min(370px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 130px));
  background: rgba(14,19,30,.97);
  backdrop-filter: blur(20px);
  border: 1px solid var(--borde-vivo);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.97);
  pointer-events: none;
  transition: opacity .28s, transform .28s;
}
.soporte-caja.abierta { opacity: 1; transform: none; pointer-events: auto; }

.soporte-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--borde);
  background: rgba(77,157,255,.05);
}
.soporte-tit { display: flex; align-items: center; gap: .7rem; }
.soporte-tit b { font-size: .95rem; display: block; }
.soporte-tit small { color: var(--texto-suave); font-size: .74rem; }
.sp-punto {
  width: 9px; height: 9px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 12px var(--verde);
  animation: latir 2s ease-in-out infinite;
}
.soporte-cerrar {
  background: none; border: 0; color: var(--texto-dim);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .2rem;
}
.soporte-cerrar:hover { color: var(--texto); }

.soporte-hilo {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.sp-burbuja {
  max-width: 84%; padding: .7rem .95rem; border-radius: 15px;
  font-size: .87rem; line-height: 1.55; word-wrap: break-word;
}
.sp-burbuja.bot {
  background: rgba(77,157,255,.11);
  border: 1px solid rgba(77,157,255,.22);
  align-self: flex-start;
  border-bottom-left-radius: 5px;
}
.sp-burbuja.yo {
  background: linear-gradient(135deg, var(--azul), var(--violeta));
  color: #fff; align-self: flex-end;
  border-bottom-right-radius: 5px;
}
.sp-burbuja a { color: var(--azul-claro); }
.sp-burbuja.yo a { color: #fff; }

.soporte-sug {
  display: flex; gap: .4rem; flex-wrap: wrap;
  padding: 0 1rem .7rem;
}
.sp-chip {
  background: rgba(120,170,255,.09);
  border: 1px solid var(--borde-vivo);
  color: var(--texto-dim);
  border-radius: 999px; padding: .35rem .8rem;
  font: inherit; font-size: .78rem; cursor: pointer;
  transition: .2s;
}
.sp-chip:hover { background: rgba(120,170,255,.18); color: var(--texto); }

.soporte-form {
  display: flex; gap: .5rem; padding: .8rem 1rem 1rem;
  border-top: 1px solid var(--borde);
}
.soporte-form input {
  flex: 1; background: rgba(0,0,0,.35);
  border: 1px solid var(--borde); border-radius: 999px;
  color: var(--texto); font: inherit; font-size: .86rem;
  padding: .7rem 1rem;
}
.soporte-form input:focus { outline: none; border-color: var(--borde-vivo); }
.soporte-form button {
  background: linear-gradient(135deg, var(--azul), var(--violeta));
  border: 0; border-radius: 50%;
  width: 42px; height: 42px; flex-shrink: 0;
  color: #fff; font-size: 1rem; cursor: pointer;
}

/* botón de voz */
.voz-btn {
  background: rgba(120,170,255,.08);
  border: 1px solid var(--borde-vivo);
  color: var(--texto);
  border-radius: 999px; padding: 1rem 1.6rem;
  font: inherit; font-size: 1rem; font-weight: 500;
  cursor: pointer; transition: .22s;
}
.voz-btn:hover { background: rgba(120,170,255,.16); }

@media (max-width: 640px) {
  .soporte-et { display: none; }
  .soporte-btn { padding: 1rem; border-radius: 50%; }
  .soporte-caja { right: 12px; bottom: 84px; }
}