/* Aislamiento básico del contenedor que crea waibot.js */
.gq-chat, .gq-fab { all: initial; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.gq-chat *, .gq-fab * { box-sizing: border-box; font-family: inherit; }





/* Cerrar: solo ícono, sin botón visual, conservando funcionalidad */
.gq-chat .gq-header .gq-close,
.gq-chat .gq-close,
.gq-header .gq-close,
.gq-chat [data-role="close"],
.gq-chat button[aria-label="Cerrar"],
.gq-chat button[aria-label="Close"],
.gq-chat .gq-header > *:last-child {
  /* quita aspecto de botón del theme */
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  cursor: pointer !important;
  /* oculta cualquier texto “X” para que no desborde */
  font-size: 0 !important;
  line-height: 0 !important;
  /* coloca el icono a la derecha */
  margin: 6px 10px 6px 6px !important;
  /* color del icono (cámbialo si tu header no es oscuro) */
  color: #111 !important; /* el SVG usa stroke #111 */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ícono “X” como pseudo-elemento (independiente de fuentes, solo el ícono) */
.gq-chat .gq-header .gq-close::before,
.gq-chat .gq-close::before,
.gq-chat [data-role="close"]::before,
.gq-chat button[aria-label="Cerrar"]::before,
.gq-chat button[aria-label="Close"]::before,
.gq-chat .gq-header > *:last-child::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  /* X en SVG inline (stroke #111). Si tu header es claro, usa #000; si es oscuro, usa #fff */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \
stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M18 6L6 18M6 6l12 12'/></svg>") !important;
}

.gq-icbtn svg{
	color:white !important;
}

/* feedback al pasar el mouse y foco accesible */
.gq-chat .gq-close:hover,
.gq-chat [data-role='close']:hover,
.gq-chat .gq-header > *:last-child:hover { opacity: .8 !important; }

.gq-chat .gq-close:focus-visible,
.gq-chat [data-role='close']:focus-visible,
.gq-chat .gq-header > *:last-child:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
}