.sitiosi-vendedor-widget {
	--sv-primary: #2563EB;
	--sv-primary-dark: #1D4ED8;
	--sv-navy: #172554;
	--sv-bg: #F8FAFC;
	--sv-white: #FFFFFF;
	--sv-ink: #0F172A;
	--sv-muted: #64748B;
	--sv-border: #E2E8F0;
	--sv-input-border: #CBD5E1;
	--sv-chip-border: #BFDBFE;
	--sv-chip-hover-bg: #EFF6FF;

	/* Variables exclusivas del cupon (ver seccion "TICKET DE CUPON" mas abajo) -
	   se mantienen deliberadamente separadas del resto del rediseño. */
	--sv-mustard: #D4A017;
	--sv-ticket-green-dark: #234F38;

	/* Tipografia: heredamos la del sitio en vez de cargar fuentes propias.
	   El mono queda fijo (JetBrains Mono) solo para el codigo del cupon,
	   que se mantiene sin cambios en esta pasada. */
	--sv-font-body: inherit;
	--sv-font-display: inherit;
	--sv-font-mono: 'JetBrains Mono', ui-monospace, monospace;

	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999999;
	font-family: var(--sv-font-body);
}

.sitiosi-vendedor-widget * {
	box-sizing: border-box;
}

.sitiosi-vendedor-widget button:focus-visible,
.sitiosi-vendedor-widget a:focus-visible,
.sitiosi-vendedor-widget textarea:focus-visible {
	outline: 2px solid var(--sv-primary);
	outline-offset: 2px;
}

/* ===== LAUNCHER ===== */

.sitiosi-vendedor-widget .sv-launcher {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--sv-primary);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.22);
	transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
	animation: sv-pulse 3s ease-in-out infinite;
}

.sitiosi-vendedor-widget .sv-launcher:hover {
	background: var(--sv-primary-dark);
	transform: scale(1.05);
}

.sitiosi-vendedor-widget .sv-launcher svg {
	width: 26px;
	height: 26px;
	fill: var(--sv-white);
}

@keyframes sv-pulse {
	0%, 100% { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.22), 0 0 0 0 rgba(37, 99, 235, 0.35); }
	50% { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.22), 0 0 0 8px rgba(37, 99, 235, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.sitiosi-vendedor-widget .sv-launcher {
		animation: none;
	}
}

/* Con el chat abierto, el launcher se retira - el cierre lo maneja el boton
   del header, evitamos tener dos controles flotantes superpuestos. */
.sitiosi-vendedor-widget.is-open .sv-launcher {
	animation: none;
	opacity: 0;
	transform: scale(0.85);
	pointer-events: none;
}

/* ===== PANEL ===== */

.sitiosi-vendedor-widget .sv-panel {
	position: absolute;
	right: 0;
	bottom: 76px;
	width: 360px;
	max-width: calc(100vw - 32px);
	height: 520px;
	max-height: calc(100vh - 120px);
	max-height: calc(100dvh - 120px); /* dvh tiene en cuenta la barra de direcciones movil, vh no */
	background: var(--sv-white);
	border-radius: 20px;
	border: 1px solid var(--sv-border);
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.sitiosi-vendedor-widget.is-open .sv-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* ===== HEADER ===== */

.sitiosi-vendedor-widget .sv-header {
	background: var(--sv-navy);
	color: var(--sv-white);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.sitiosi-vendedor-widget .sv-header-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sv-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sv-font-display);
	font-weight: 600;
	font-size: 14px;
	flex-shrink: 0;
}

.sitiosi-vendedor-widget .sv-header-text {
	flex: 1;
	min-width: 0;
}

.sitiosi-vendedor-widget .sv-header-title {
	font-family: var(--sv-font-display);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	margin: 0;
}

.sitiosi-vendedor-widget .sv-header-subtitle {
	font-size: 12px;
	color: rgba(219, 234, 254, 0.75);
	margin: 2px 0 0;
}

.sitiosi-vendedor-widget .sv-close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	padding: 0;
	min-width: 40px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 8px;
	transition: color 0.15s ease, background 0.15s ease;
}

.sitiosi-vendedor-widget .sv-close:hover {
	color: var(--sv-white);
	background: rgba(255, 255, 255, 0.08);
}

/* ===== MENSAJES ===== */

.sitiosi-vendedor-widget .sv-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	background: var(--sv-bg);
	scrollbar-width: thin;
	scrollbar-color: var(--sv-border) transparent;
}

.sitiosi-vendedor-widget .sv-messages::-webkit-scrollbar {
	width: 6px;
}

.sitiosi-vendedor-widget .sv-messages::-webkit-scrollbar-track {
	background: transparent;
}

.sitiosi-vendedor-widget .sv-messages::-webkit-scrollbar-thumb {
	background: var(--sv-border);
	border-radius: 999px;
}

.sitiosi-vendedor-widget .sv-msg {
	flex-shrink: 0;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.sitiosi-vendedor-widget .sv-msg-bot {
	align-self: flex-start;
	max-width: 86%;
	background: var(--sv-white);
	border: 1px solid var(--sv-border);
	color: var(--sv-ink) !important; /* blindaje: algunos temas pisan el color del texto por especificidad global */
	border-bottom-left-radius: 4px;
}

.sitiosi-vendedor-widget .sv-msg-user {
	align-self: flex-end;
	max-width: 80%;
	background: var(--sv-primary);
	color: var(--sv-white) !important; /* mismo blindaje que sv-msg-bot */
	border-bottom-right-radius: 4px;
}

.sitiosi-vendedor-widget .sv-msg-bot a.sv-link,
.sitiosi-vendedor-widget .sv-msg-user a.sv-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-all;
}

.sitiosi-vendedor-widget .sv-msg-bot a.sv-link {
	color: var(--sv-primary);
	font-weight: 500;
}

/* ===== BOTON COMERCIAL (agregar al carrito, etc) ===== */

.sitiosi-vendedor-widget a.sv-btn {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 6px;
	margin: 10px 0 4px;
	padding: 10px 18px;
	background: var(--sv-primary);
	color: var(--sv-white);
	font-family: var(--sv-font-body);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	border-radius: 9px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
	transition: background 0.15s ease, transform 0.1s ease;
}

.sitiosi-vendedor-widget a.sv-btn:hover {
	background: var(--sv-primary-dark);
	transform: translateY(-1px);
}

.sitiosi-vendedor-widget a.sv-btn::before {
	content: '🛒';
	font-size: 14px;
}

/* ===== CURSOR DE ESCRITURA ===== */

.sitiosi-vendedor-widget .sv-cursor {
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 1px;
	background: currentColor;
	vertical-align: text-bottom;
	animation: sv-blink 0.9s step-start infinite;
}

@keyframes sv-blink {
	50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sitiosi-vendedor-widget .sv-cursor {
		animation: none;
	}
}

/* ===== INDICADOR "ESCRIBIENDO" ===== */

.sitiosi-vendedor-widget .sv-typing {
	align-self: flex-start;
	flex-shrink: 0;
	display: flex;
	gap: 4px;
	padding: 11px 13px;
	background: var(--sv-white);
	border: 1px solid var(--sv-border);
	border-radius: 14px;
	border-bottom-left-radius: 4px;
}

.sitiosi-vendedor-widget .sv-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sv-muted);
	animation: sv-typing-bounce 1.2s infinite ease-in-out;
}

.sitiosi-vendedor-widget .sv-typing span:nth-child(2) { animation-delay: 0.15s; }
.sitiosi-vendedor-widget .sv-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes sv-typing-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.sitiosi-vendedor-widget .sv-typing span {
		animation: none;
	}
}

/* ===== TICKET DE CUPON =====
   Congelado a proposito en esta pasada de rediseño (decision explicita:
   "manten el ticket perforado"). Los colores internos (label, meta, texto
   "Valido por") estan hardcodeados en vez de usar las variables globales
   nuevas, para que ningun cambio de paleta futuro lo pueda correr por
   accidente. Solo --sv-mustard (exclusiva del ticket) y --sv-bg (que el
   notch necesita igualar SIEMPRE al fondo real de los mensajes para
   "desaparecer" contra el) siguen usando variables. */

.sitiosi-vendedor-widget .sv-ticket {
	align-self: flex-start;
	flex-shrink: 0;
	max-width: 84%;
	background: var(--sv-white);
	border: 1px dashed var(--sv-mustard);
	border-radius: 10px;
	padding: 12px 14px;
	position: relative;
	overflow: hidden;
}

.sitiosi-vendedor-widget .sv-ticket::before,
.sitiosi-vendedor-widget .sv-ticket::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 14px;
	background: var(--sv-bg);
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
}

.sitiosi-vendedor-widget .sv-ticket::before { left: -7px; }
.sitiosi-vendedor-widget .sv-ticket::after { right: -7px; }

.sitiosi-vendedor-widget .sv-ticket-label {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6B7280;
	margin: 0 0 4px;
	white-space: normal;
	overflow: visible;
	max-height: none;
}

.sitiosi-vendedor-widget .sv-ticket-code {
	display: block;
	font-family: var(--sv-font-mono);
	font-size: 18px;
	font-weight: 700;
	color: #161F2B;
	letter-spacing: 0.03em;
	margin: 0 0 6px;
	white-space: normal;
	overflow: visible;
	max-height: none;
}

.sitiosi-vendedor-widget .sv-ticket-meta {
	display: block;
	font-size: 11.5px;
	color: #6B7280;
	border-top: 1px dashed #E4E0D6;
	padding-top: 6px;
	margin: 0;
	white-space: normal;
	overflow: visible;
	max-height: none;
}

.sitiosi-vendedor-widget .sv-ticket-meta strong {
	color: var(--sv-ticket-green-dark);
}

/* ===== ERROR ===== */

.sitiosi-vendedor-widget .sv-error {
	align-self: center;
	flex-shrink: 0;
	font-size: 12px;
	color: var(--sv-muted);
	text-align: center;
	padding: 6px 10px;
}

/* ===== PREGUNTAS SUGERIDAS ===== */

.sitiosi-vendedor-widget .sv-suggestions {
	flex-shrink: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 10px 12px;
	background: var(--sv-bg);
}

.sitiosi-vendedor-widget .sv-suggestions:empty {
	padding: 0;
	background: transparent;
}

.sitiosi-vendedor-widget .sv-suggestion-chip {
	font-family: var(--sv-font-body);
	font-size: 13px;
	color: var(--sv-navy);
	background: var(--sv-white);
	border: 1px solid var(--sv-chip-border);
	border-radius: 999px;
	padding: 7px 12px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.sitiosi-vendedor-widget .sv-suggestion-chip:hover {
	background: var(--sv-chip-hover-bg);
	border-color: var(--sv-primary);
}

.sitiosi-vendedor-widget .sv-suggestion-chip:active {
	background: var(--sv-chip-hover-bg);
	transform: scale(0.98);
}

/* ===== COMPOSER / INPUT ===== */

.sitiosi-vendedor-widget .sv-input-row {
	flex-shrink: 0;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid var(--sv-border);
	background: var(--sv-white);
}

.sitiosi-vendedor-widget .sv-input {
	flex: 1;
	resize: none;
	border: 1px solid var(--sv-input-border);
	border-radius: 10px;
	padding: 8px 12px;
	font-family: var(--sv-font-body);
	font-size: 16px; /* iOS Safari hace zoom automatico en el input si el font-size es menor a 16px */
	line-height: 1.4;
	max-height: 90px;
	color: var(--sv-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sitiosi-vendedor-widget .sv-input::placeholder {
	color: var(--sv-muted);
}

.sitiosi-vendedor-widget .sv-input:focus {
	outline: none;
	border-color: var(--sv-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.sitiosi-vendedor-widget .sv-send {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: none;
	background: var(--sv-primary);
	color: var(--sv-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s ease;
}

.sitiosi-vendedor-widget .sv-send:hover {
	background: var(--sv-primary-dark);
}

.sitiosi-vendedor-widget .sv-send:disabled {
	background: var(--sv-border);
	cursor: default;
}

.sitiosi-vendedor-widget .sv-send svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

@media (max-width: 480px) {
	.sitiosi-vendedor-widget {
		right: 16px;
		bottom: 16px;
	}

	.sitiosi-vendedor-widget .sv-panel {
		width: calc(100vw - 24px);
		height: calc(100vh - 110px);
		height: calc(100dvh - 110px);
		bottom: 72px;
	}
}