/* ===========================================================
   Alacon WhatsApp Chat — estilos del widget frontend
   =========================================================== */

#awc-widget {
	position: fixed;
	bottom: 20px;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}
#awc-widget *,
#awc-widget *::before,
#awc-widget *::after { box-sizing: border-box; }

#awc-widget.awc-pos-left  { left: 20px; }
#awc-widget.awc-pos-right { right: 20px; }

/* ----------------- Botón flotante (círculo, solo logo) ----------------- */
#awc-widget .awc-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	background: var(--awc-color, #25D366) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 50% !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	cursor: pointer !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
	line-height: 0 !important;
	text-decoration: none !important;
	transition: transform .18s ease, box-shadow .18s ease;
}
#awc-widget .awc-toggle:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important; }

#awc-widget .awc-toggle svg { width: 32px; height: 32px; display: block; }
.awc-toggle .awc-icon-x { display: none; }

/* Estado abierto: el botón muestra la X en vez del logo */
#awc-widget.awc-open .awc-toggle .awc-icon-wa { display: none; }
#awc-widget.awc-open .awc-toggle .awc-icon-x  { display: block; }

/* ----------------- Ventana del chat ----------------- */
.awc-chat {
	position: absolute;
	bottom: 74px;
	width: 340px;
	max-width: calc(100vw - 40px);
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px) scale(0.98);
	transform-origin: bottom left;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
#awc-widget.awc-pos-left  .awc-chat { left: 0; transform-origin: bottom left; }
#awc-widget.awc-pos-right .awc-chat { right: 0; transform-origin: bottom right; }

#awc-widget.awc-open .awc-chat {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/* Cabecera */
.awc-header {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--awc-color, #25D366);
	color: #fff;
	padding: 14px 16px;
}
.awc-avatar {
	width: 44px; height: 44px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.awc-header-text { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.awc-header-text strong { font-size: 15px; }
.awc-header-text span { font-size: 12px; opacity: 0.9; }
.awc-close {
	background: none; border: none; color: #fff;
	font-size: 26px; line-height: 1; cursor: pointer;
	opacity: 0.85; padding: 0 2px;
}
.awc-close:hover { opacity: 1; }

/* Cuerpo con burbujas */
.awc-body {
	padding: 18px 16px;
	background: #e5ddd5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 0h40v40H0z' fill='%23e5ddd5'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23d9cfc4'/%3E%3C/svg%3E");
	min-height: 90px;
	max-height: 220px;
	overflow-y: auto;
}
.awc-bubble {
	max-width: 85%;
	padding: 10px 13px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: #303030;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
	word-wrap: break-word;
}
.awc-bubble-in { background: #fff; border-top-left-radius: 2px; }

/* Pie con inputs */
.awc-footer {
	padding: 10px;
	background: #f7f7f7;
	border-top: 1px solid #ececec;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.awc-input {
	width: 100%;
	border: 1px solid #dcdcdc;
	border-radius: 22px;
	padding: 9px 14px;
	font-size: 14px;
	outline: none;
	background: #fff;
}
.awc-input:focus { border-color: var(--awc-color, #25D366); }

.awc-input-row { display: flex; align-items: flex-end; gap: 8px; }
.awc-textarea {
	flex: 1;
	border: 1px solid #dcdcdc;
	border-radius: 22px;
	padding: 10px 14px;
	font-size: 14px;
	resize: none;
	outline: none;
	max-height: 96px;
	line-height: 1.4;
	font-family: inherit;
	background: #fff;
}
.awc-textarea:focus { border-color: var(--awc-color, #25D366); }

.awc-send {
	flex-shrink: 0;
	width: 44px; height: 44px;
	border: none;
	border-radius: 50%;
	background: var(--awc-color, #25D366);
	color: #fff;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: filter .15s ease;
}
.awc-send:hover { filter: brightness(0.92); }
.awc-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----------------- Móvil ----------------- */
@media (max-width: 480px) {
	#awc-widget { bottom: 16px; }
	#awc-widget.awc-pos-left  { left: 16px; }
	#awc-widget.awc-pos-right { right: 16px; }

	#awc-widget .awc-toggle { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; }
	#awc-widget .awc-toggle svg { width: 30px; height: 30px; }

	.awc-chat {
		width: calc(100vw - 32px);
		bottom: 68px;
	}
}

/* Iconos del botón y avatar */
.awc-icon-holder {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.awc-icon-holder-button {
	width: 32px;
	height: 32px;
}
.awc-icon-holder-avatar {
	width: 36px;
	height: 36px;
}
.awc-inline-wa,
.awc-icon-wa,
.awc-avatar-icon {
	position: absolute;
	inset: 0;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
}
.awc-icon-wa,
.awc-avatar-icon {
	object-fit: contain;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	z-index: 2;
}
.awc-inline-wa {
	z-index: 1;
}
.awc-inline-wa-button {
	filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
#awc-widget.awc-open .awc-toggle .awc-icon-holder-button { display: none; }