/* AM Chat — widget flotante (marca negro/naranja, lado izquierdo).
   El botón de WhatsApp del tema vive abajo a la derecha; el chat va a la
   izquierda para no chocar. Usa las variables del tema cuando existen. */

.amchat {
	--ac-orange: var(--am-orange, #ff6a00);
	--ac-orange-600: var(--am-orange-600, #e85d00);
	--ac-surface: var(--am-surface, #17181d);
	--ac-surface-2: var(--am-surface-2, #1f2127);
	--ac-border: var(--am-border, #2a2c34);
	--ac-text: var(--am-text, #ecedf1);
	--ac-muted: var(--am-muted, #9a9ca6);
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 119;
	font-family: inherit;
}

/* CLAVE: el atributo [hidden] debe ganar siempre. Sin esto, los display:flex de
   abajo (panel, cuerpo, compositor) ignoran "hidden" → el chat no cierra y se
   ve el formulario junto al compositor. */
.amchat [hidden] { display: none !important; }

/* --- Botón flotante --- */
.amchat-fab {
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--ac-orange);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 14px;
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(255, 106, 0, .45);
	transition: transform .2s ease, background .2s ease;
}
.amchat-fab:hover { background: var(--ac-orange-600); transform: translateY(-2px); }
.amchat-fab__icon { flex: 0 0 auto; }
.amchat-fab__txt {
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	font-weight: 700;
	transition: max-width .3s ease, opacity .25s ease, margin .3s ease;
}
.amchat-fab:hover .amchat-fab__txt { max-width: 160px; opacity: 1; margin: 0 6px 0 10px; }
.amchat.is-open .amchat-fab { display: none; }

/* --- Panel --- */
.amchat-panel {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 360px;
	max-width: calc(100vw - 32px);
	height: 520px;
	max-height: calc(100vh - 40px);
	display: flex;
	flex-direction: column;
	background: var(--ac-surface);
	color: var(--ac-text);
	border: 1px solid var(--ac-border);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
	animation: amchat-in .22s ease;
}
@keyframes amchat-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.amchat-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: linear-gradient(135deg, #15171c, #0b0b0d);
	border-bottom: 1px solid var(--ac-border);
}
.amchat-head__dot { width: 9px; height: 9px; border-radius: 50%; background: #36d399; box-shadow: 0 0 0 3px rgba(54, 211, 153, .2); flex: 0 0 auto; }
.amchat-head__id { flex: 1; min-width: 0; line-height: 1.2; color: #fff; }
.amchat-head__id strong { display: block; font-size: 14px; }
.amchat-head__id small { color: var(--ac-muted); font-size: 11.5px; }
.amchat-x {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 0;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.amchat-x:hover { background: rgba(255, 255, 255, .22); }

/* --- Formulario de datos --- */
.amchat-lead { padding: 18px 16px; overflow: auto; }
.amchat-lead__intro { margin: 0 0 14px; color: var(--ac-text); font-size: 14px; }
.amchat-field { display: block; margin-bottom: 12px; }
.amchat-field > span { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--ac-muted); }
.amchat-field input, .amchat-field textarea {
	width: 100%;
	background: var(--ac-surface-2);
	border: 1px solid var(--ac-border);
	border-radius: 10px;
	padding: 10px 12px;
	color: var(--ac-text);
	font-size: 14px;
	box-sizing: border-box;
}
.amchat-field input:focus, .amchat-field textarea:focus { outline: none; border-color: var(--ac-orange); }
.amchat-btn {
	width: 100%;
	background: var(--ac-orange);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 12px;
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
	margin-top: 4px;
}
.amchat-btn:hover { background: var(--ac-orange-600); }
.amchat-btn:disabled { opacity: .6; cursor: progress; }
.amchat-lead__err { color: #ff8a8a; font-size: 13px; margin: 10px 0 0; }

/* --- Conversación --- */
.amchat-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Scrollbars finos y a tono (en vez de los gruesos del navegador).
   Gris translúcido para que se vea bien tanto en tema oscuro como claro. */
.amchat-body,
.amchat-lead,
.amchat-compose textarea {
	scrollbar-width: thin;
	scrollbar-color: rgba(140, 140, 150, .45) transparent;
}
.amchat-body::-webkit-scrollbar,
.amchat-lead::-webkit-scrollbar,
.amchat-compose textarea::-webkit-scrollbar { width: 6px; height: 6px; }
.amchat-body::-webkit-scrollbar-track,
.amchat-lead::-webkit-scrollbar-track,
.amchat-compose textarea::-webkit-scrollbar-track { background: transparent; }
.amchat-body::-webkit-scrollbar-thumb,
.amchat-lead::-webkit-scrollbar-thumb,
.amchat-compose textarea::-webkit-scrollbar-thumb { background: rgba(140, 140, 150, .45); border-radius: 999px; }
.amchat-body::-webkit-scrollbar-thumb:hover,
.amchat-lead::-webkit-scrollbar-thumb:hover,
.amchat-compose textarea::-webkit-scrollbar-thumb:hover { background: rgba(140, 140, 150, .7); }
.amchat-msg { display: flex; max-width: 86%; }
.amchat-msg--bot { align-self: flex-start; }
.amchat-msg--user { align-self: flex-end; }
.amchat-msg__txt {
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.45;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.amchat-msg--bot .amchat-msg__txt { background: var(--ac-surface-2); color: var(--ac-text); border-bottom-left-radius: 4px; }
.amchat-msg--user .amchat-msg__txt { background: var(--ac-orange); color: #fff; border-bottom-right-radius: 4px; }
.amchat-msg__txt a { color: var(--ac-orange); font-weight: 600; text-decoration: underline; }
.amchat-msg--user .amchat-msg__txt a { color: #fff; }

/* indicador "escribiendo…" */
.amchat-typing .amchat-msg__txt { display: flex; gap: 4px; align-items: center; }
.amchat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-muted); display: inline-block; animation: amchat-bounce 1.2s infinite ease-in-out; }
.amchat-typing i:nth-child(2) { animation-delay: .15s; }
.amchat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes amchat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* --- Composer --- */
.amchat-compose {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--ac-border);
	background: var(--ac-surface);
}
.amchat-compose textarea {
	flex: 1;
	resize: none;
	background: var(--ac-surface-2);
	border: 1px solid var(--ac-border);
	border-radius: 14px;
	padding: 10px 12px;
	color: var(--ac-text);
	font-size: 14px;
	line-height: 1.4;
	max-height: 110px;
	font-family: inherit;
}
.amchat-compose textarea:focus { outline: none; border-color: var(--ac-orange); }
.amchat-send {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: var(--ac-orange);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.amchat-send:hover { background: var(--ac-orange-600); }
.amchat-send:disabled { opacity: .6; cursor: progress; }

/* --- Móvil --- */
@media (max-width: 600px) {
	.amchat { left: 16px; bottom: 16px; }
	.amchat-panel {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.amchat-fab, .amchat-panel, .amchat-typing i { transition: none; animation: none; }
}