/*
 * Asistente Virtual — chat en directo (parte del visitante).
 *
 * Sólo se añaden reglas nuevas, todas con el prefijo .wp-va-directo-, para no
 * pisar las clases del bot: assistant.css lo genera automáticamente un programa
 * y cualquier cambio ahí se perdería. Los colores, los radios y las sombras
 * salen de las mismas variables que usa el chat (.wp-va).
 */

/* --- Bloque de elección: seguir con el asistente o hablar con una persona --- */

.wp-va-directo-barra {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	align-self: stretch;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--wp-va-borde);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
}

.wp-va-directo-barra[hidden],
.wp-va-directo-barra [hidden],
.wp-va-directo-formulario[hidden] {
	display: none;
}

/* La pregunta única del bloque: seguir con el asistente o pasar con una persona. */
.wp-va-directo-pregunta {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp-va-texto);
}

/* Las dos salidas, una al lado de la otra; en pantalla estrecha se apilan. */
.wp-va-directo-eleccion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.wp-va-directo-nota {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: #6b7280;
}

/* El horario que ha puesto el dueño: va debajo de la nota, algo más pequeño. */
.wp-va-directo-horario {
	flex: 1 1 100%;
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #6b7280;
}

/* --- Botones --- */

.wp-va-directo-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	max-width: 100%;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--wp-va-color);
	color: var(--wp-va-color-texto);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

.wp-va-directo-boton:hover,
.wp-va-directo-boton:focus-visible {
	filter: brightness( 0.95 );
}

.wp-va-directo-boton[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* «Seguir con el asistente»: mismo botón, pero en tono suave (es la salida
   que no cambia nada). */
.wp-va-directo-boton--suave {
	border: 1px solid var(--wp-va-borde);
	background: #fff;
	color: var(--wp-va-texto);
}

/* Enlace discreto (el de «Dejar un mensaje»). */
.wp-va-directo-enlace {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp-va-color);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	cursor: pointer;
}

.wp-va-directo-enlace:hover,
.wp-va-directo-enlace:focus-visible {
	text-decoration: none;
}

/* --- Línea de estado («enviando…», «esperando respuesta…») --- */

.wp-va-directo-estado {
	margin: 0;
	padding: 6px 12px 0;
	background: #fff;
	font-size: 11.5px;
	line-height: 1.4;
	color: #6b7280;
}

/* Sin texto no ocupa sitio ni empuja la conversación. */
.wp-va-directo-estado:empty {
	display: none;
}

/* --- Mensajes que pinta este script --- */

/* Una URL larga o una palabra sin espacios no debe romper el ancho del chat. */
.wp-va-directo-mensaje {
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: pre-wrap;
}

/* «Persona del equipo»: avisa de que quien escribe no es el bot. */
.wp-va-directo-etiqueta {
	display: block;
	margin-bottom: 3px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp-va-color);
}

.wp-va-directo-mensaje .wp-va-directo-boton {
	margin-top: 8px;
}

/* --- Formulario para dejar un mensaje --- */

.wp-va-directo-formulario {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: stretch;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--wp-va-borde);
	border-radius: 14px;
}

.wp-va-directo-titulo {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
}

.wp-va-directo-campo {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	border: 1px solid #d5d9de;
	border-radius: 10px;
	background: #fff;
	color: var(--wp-va-texto);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
}

.wp-va-directo-campo:focus {
	outline: 2px solid var(--wp-va-color);
	outline-offset: 1px;
	border-color: var(--wp-va-color);
}

textarea.wp-va-directo-campo {
	min-height: 72px;
	resize: vertical;
}

.wp-va-directo-acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Dentro del formulario el estado va sin márgenes laterales. */
.wp-va-directo-formulario .wp-va-directo-estado {
	padding: 0;
}

/* --- Móvil --- */

@media (max-width: 480px) {
	.wp-va-directo-barra,
	.wp-va-directo-formulario {
		padding: 10px;
	}

	.wp-va-directo-boton {
		width: 100%;
	}
}

/* ==================================================================
 * Firma de la persona que atiende (avatar + nombre)
 * ================================================================== */

.wp-va-directo-firma {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

.wp-va-directo-avatar {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

/* ==================================================================
 * Invitación a dejar un mensaje (aparece después de que conteste el bot)
 * ================================================================== */

.wp-va-directo-invitacion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 4px 0 2px;
	padding: 8px 10px;
	border: 1px dashed var(--wp-va-color, #0073e6);
	border-radius: 8px;
	background: #ffffff;
	font-size: 13.5px;
}

.wp-va-directo-invitacion__texto {
	flex: 1 1 12rem;
	color: #374151;
}

/* El horario dentro de la invitación: ocupa su propia línea. */
.wp-va-directo-invitacion__horario {
	flex: 1 1 100%;
	color: #6b7280;
	font-size: 12px;
	line-height: 1.4;
}

.wp-va-directo-cerrar-invitacion {
	border: 0;
	background: none;
	padding: 2px 4px;
	color: #6b7280;
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
	text-decoration: underline;
}

.wp-va-directo-cerrar-invitacion:hover,
.wp-va-directo-cerrar-invitacion:focus-visible {
	color: #374151;
}

/* ==================================================================
 * Pregunta del nombre antes de pasar con una persona
 *
 * Aparece sólo si el visitante pulsa «Hablar con una persona» y todavía no
 * ha dicho cómo se llama: así la persona que atiende sabe con quién habla.
 * ================================================================== */

.wp-va-directo-nombre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 6px 0 2px;
	padding: 10px 12px;
	border: 1px solid var(--wp-va-color, #0073e6);
	border-radius: 8px;
	background: #ffffff;
	font-size: 13.5px;
}

.wp-va-directo-nombre__texto {
	flex: 1 1 100%;
	margin: 0;
	color: #374151;
}

.wp-va-directo-nombre .wp-va-directo-campo {
	flex: 1 1 8rem;
	min-width: 0;
}

.wp-va-directo-nombre__botones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}