/* Shell del widget React (FAB + panel). Estilos del chat en alcaldia-chat.css */

:root {
	--alcaldia-chat-admin-offset: 0px;
	--alcaldia-chat-panel-top: 0px;
	--alcaldia-chat-panel-height: 100dvh;
}

body.alcaldia-chat-open {
	overflow: hidden;
	overscroll-behavior: none;
}

body.alcaldia-chat-open::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 999998;
	pointer-events: auto;
}

@media (min-width: 1024px) {
	body.alcaldia-chat-open::before {
		display: none;
	}
}

/* FAB por encima del overlay; por debajo del panel abierto */
.alcaldia-chat-fab-wrap {
	--alcaldia-chat-fab-size: 3.75rem;
	--alcaldia-chat-fab-offset: 1.25rem;
	position: fixed;
	bottom: calc(var(--alcaldia-chat-fab-offset) + env(safe-area-inset-bottom, 0px));
	right: calc(var(--alcaldia-chat-fab-offset) + env(safe-area-inset-right, 0px));
	z-index: 999999;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.alcaldia-chat-fab-wrap.is-fab-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (min-width: 640px) {
	.alcaldia-chat-fab-wrap {
		--alcaldia-chat-fab-size: 4rem;
		--alcaldia-chat-fab-offset: 1.5rem;
	}
}

.alcaldia-chat-fab {
	width: var(--alcaldia-chat-fab-size);
	height: var(--alcaldia-chat-fab-size);
	border-radius: 50%;
	border: none;
	background: #0d9488;
	color: #fff;
	box-shadow: 0 4px 20px rgba(13, 148, 136, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.alcaldia-chat-fab:hover,
.alcaldia-chat-fab:focus-visible {
	background: #0f766e;
	transform: scale(1.05);
	outline: none;
}

.alcaldia-chat-fab:disabled {
	cursor: wait;
	transform: none;
}

.alcaldia-chat-fab-spinner {
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: alcaldia-chat-spin 0.7s linear infinite;
}

@keyframes alcaldia-chat-spin {
	to { transform: rotate(360deg); }
}

/* Desktop: panel flotante (solo ≥1024px) */
@media (min-width: 1024px) {
	.alcaldia-chat-panel {
		position: fixed;
		bottom: calc(var(--alcaldia-chat-fab-offset, 1.25rem) + env(safe-area-inset-bottom, 0px));
		right: calc(var(--alcaldia-chat-fab-offset, 1.25rem) + env(safe-area-inset-right, 0px));
		left: auto;
		top: auto;
		width: min(24rem, calc(100vw - 2rem));
		height: min(32rem, calc(100dvh - 5rem));
		max-height: calc(100dvh - 5rem);
		z-index: 1000000;
		border-radius: 0.875rem;
		overflow: hidden;
		box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);
		background: #fff;
		display: flex;
		flex-direction: column;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		font-family: var(--font-primary-regular, "Chronica Pro", system-ui, sans-serif);
		font-size: 16px;
		line-height: 1.5;
		margin: 0;
	}

	body.admin-bar .alcaldia-chat-panel {
		max-height: calc(100dvh - 5rem - 32px);
	}
}

/* Móvil / tablet: fullscreen */
@media (max-width: 1023px) {
	.alcaldia-chat-panel,
	.alcaldia-chat-panel.is-open,
	.alcaldia-chat-panel.is-mobile-layout,
	.alcaldia-chat-panel:not([hidden]) {
		position: fixed !important;
		inset: auto !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: var(--alcaldia-chat-panel-top, 0px) !important;
		width: 100% !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		height: var(--alcaldia-chat-panel-height, 100dvh) !important;
		max-height: var(--alcaldia-chat-panel-height, 100dvh) !important;
		margin: 0 !important;
		padding: 0 !important;
		padding-bottom: env(safe-area-inset-bottom, 0px) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		transform: none !important;
		z-index: 1000000;
		overflow: hidden;
		background: #fff;
		display: flex;
		flex-direction: column;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		font-family: var(--font-primary-regular, "Chronica Pro", system-ui, sans-serif);
		font-size: 16px;
		line-height: 1.5;
	}

	/* Visitante sin admin-bar: respetar notch */
	body:not(.admin-bar) .alcaldia-chat-panel:not([hidden]) {
		--alcaldia-chat-panel-top: env(safe-area-inset-top, 0px);
		--alcaldia-chat-panel-height: calc(100dvh - env(safe-area-inset-top, 0px));
	}

	/* WP admin-bar: 46px en móvil (< 783px) */
	@media (max-width: 782px) {
		body.admin-bar .alcaldia-chat-panel:not([hidden]) {
			--alcaldia-chat-panel-top: max(46px, var(--alcaldia-chat-admin-offset, 46px));
			--alcaldia-chat-panel-height: calc(100dvh - max(46px, var(--alcaldia-chat-admin-offset, 46px)));
		}
	}

	/* WP admin-bar: 32px en tablet (783px – 1023px) */
	@media (min-width: 783px) {
		body.admin-bar .alcaldia-chat-panel:not([hidden]) {
			--alcaldia-chat-panel-top: max(32px, var(--alcaldia-chat-admin-offset, 32px));
			--alcaldia-chat-panel-height: calc(100dvh - max(32px, var(--alcaldia-chat-admin-offset, 32px)));
		}
	}
}

.alcaldia-chat-panel[hidden] {
	display: none !important;
}

.alcaldia-chat-root {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	overflow: hidden;
	isolation: isolate;
}

/* Fuentes del chat = mismas del tema WP; no redefinir @font-face en el bundle */
#alcaldia-chat-root,
#alcaldia-chat-root.alcaldia-chat-embed-host {
	font-family: var(--font-primary-regular, "Chronica Pro", system-ui, sans-serif) !important;
	font-size: 16px;
	max-width: 100%;
	overflow-x: hidden;
}

#alcaldia-chat-root * {
	max-width: 100%;
}

#alcaldia-chat-root p {
	margin: 0 !important;
	padding: 0 !important;
	font-style: normal !important;
	line-height: 1.35 !important;
	white-space: normal;
}

#alcaldia-chat-root header p {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#alcaldia-chat-root aside p {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Evita que estilos globales del portal WP afecten tipografía del widget */
/* Evita que el portal WP cambie tipografía al abrir el chat */
body.alcaldia-chat-open,
body.alcaldia-chat-open *:not(#alcaldia-chat-panel):not(#alcaldia-chat-panel *) {
	font-family: inherit;
}

#alcaldia-chat-root h2 {
	font-size: inherit;
	line-height: inherit;
}

#alcaldia-chat-root p,
#alcaldia-chat-root button,
#alcaldia-chat-root textarea {
	font-size: inherit;
	line-height: inherit;
	font-style: normal !important;
}

#alcaldia-chat-root button {
	font-weight: inherit;
	text-transform: none;
}

/* #wpadminbar queda por encima del overlay (z-index 99999) y usable con el chat abierto */
@media (max-width: 1023px) {
	body.admin-bar #wpadminbar {
		z-index: 1000001;
	}
}