/**
 * SparkNet AI Chatbot — floating widget styles.
 * Uses CSS custom properties (set inline per-site by PHP) so admins can
 * customize colors/size/radius without editing this file.
 */

#sparknet-chat-root {
	--sparknet-primary: #6C5CE7;
	--sparknet-bg: #ffffff;
	--sparknet-radius: 16px;
	--sparknet-width: 380px;
	--sparknet-height: 560px;
	--sparknet-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--sparknet-text: #1f2430;
	--sparknet-text-muted: #6b7280;
	--sparknet-border: rgba(255, 255, 255, 0.35);
	--sparknet-glass: rgba(255, 255, 255, 0.65);
	position: fixed;
	bottom: 24px;
	z-index: 999999;
	font-family: var(--sparknet-font);
	font-size: 14px;
	line-height: 1.45;
}

#sparknet-chat-root.sparknet-position-bottom-right { right: 24px; }
#sparknet-chat-root.sparknet-position-bottom-left { left: 24px; }

#sparknet-chat-root.sparknet-dark {
	--sparknet-bg: #14151f;
	--sparknet-text: #eef0f6;
	--sparknet-text-muted: #9aa1b5;
	--sparknet-border: rgba(255, 255, 255, 0.08);
	--sparknet-glass: rgba(24, 26, 38, 0.7);
}

.sparknet-launcher {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sparknet-primary), color-mix(in srgb, var(--sparknet-primary) 60%, #ffffff 40%));
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sparknet-launcher:hover { transform: scale(1.06); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); }
.sparknet-launcher:active { transform: scale(0.96); }

.sparknet-launcher svg { width: 26px; height: 26px; fill: #fff; }

.sparknet-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: #ff5c5c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px var(--sparknet-bg);
	animation: sparknet-pop 0.25s ease;
}

@keyframes sparknet-pop {
	from { transform: scale(0); }
	to { transform: scale(1); }
}

.sparknet-panel {
	position: absolute;
	bottom: 76px;
	width: var(--sparknet-width);
	height: var(--sparknet-height);
	max-height: 80vh;
	max-width: calc(100vw - 32px);
	border-radius: var(--sparknet-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--sparknet-glass);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid var(--sparknet-border);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.1);
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

#sparknet-chat-root.sparknet-position-bottom-right .sparknet-panel { right: 0; }
#sparknet-chat-root.sparknet-position-bottom-left .sparknet-panel { left: 0; }

#sparknet-chat-root.sparknet-open .sparknet-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

#sparknet-chat-root.sparknet-open .sparknet-launcher .sparknet-icon-chat { display: none; }
#sparknet-chat-root:not(.sparknet-open) .sparknet-launcher .sparknet-icon-close { display: none; }

.sparknet-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--sparknet-primary), color-mix(in srgb, var(--sparknet-primary) 55%, #ffffff 45%));
	color: #fff;
	flex-shrink: 0;
}

.sparknet-header-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.sparknet-header-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sparknet-header-text { flex: 1; min-width: 0; }
.sparknet-header-title { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sparknet-header-status { font-size: 11.5px; opacity: 0.85; display: flex; align-items: center; gap: 5px; }
.sparknet-header-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; display: inline-block; }

.sparknet-header-actions { display: flex; gap: 4px; }
.sparknet-icon-btn {
	background: rgba(255, 255, 255, 0.18);
	border: none;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: background 0.15s ease;
}
.sparknet-icon-btn:hover { background: rgba(255, 255, 255, 0.3); }
.sparknet-icon-btn svg { width: 15px; height: 15px; fill: currentColor; }

.sparknet-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-behavior: smooth;
}

.sparknet-messages::-webkit-scrollbar { width: 6px; }
.sparknet-messages::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 999px; }

.sparknet-row { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; animation: sparknet-fade-up 0.2s ease; }
.sparknet-row.sparknet-from-user { align-self: flex-end; flex-direction: row-reverse; }
.sparknet-row.sparknet-from-assistant { align-self: flex-start; }

@keyframes sparknet-fade-up {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.sparknet-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	overflow: hidden;
}

.sparknet-row.sparknet-from-assistant .sparknet-avatar { background: var(--sparknet-primary); }
.sparknet-row.sparknet-from-user .sparknet-avatar { background: #9aa1b5; }
.sparknet-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sparknet-bubble {
	padding: 10px 13px;
	border-radius: 14px;
	background: var(--sparknet-bg);
	color: var(--sparknet-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	word-wrap: break-word;
	white-space: pre-wrap;
}

.sparknet-row.sparknet-from-user .sparknet-bubble {
	background: var(--sparknet-primary);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.sparknet-row.sparknet-from-assistant .sparknet-bubble { border-bottom-left-radius: 4px; }

.sparknet-sources {
	margin-top: 6px;
	font-size: 11.5px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.sparknet-sources a {
	color: var(--sparknet-primary);
	text-decoration: none;
	background: color-mix(in srgb, var(--sparknet-primary) 12%, transparent);
	padding: 3px 8px;
	border-radius: 999px;
}
.sparknet-sources a:hover { text-decoration: underline; }

.sparknet-timestamp { font-size: 10.5px; color: var(--sparknet-text-muted); margin-top: 3px; }

.sparknet-feedback { display: flex; gap: 6px; margin-top: 6px; }
.sparknet-feedback button {
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.5;
	padding: 2px;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.sparknet-feedback button:hover { opacity: 1; transform: scale(1.15); }
.sparknet-feedback button.sparknet-active { opacity: 1; }
.sparknet-feedback svg { width: 13px; height: 13px; fill: var(--sparknet-text-muted); }

.sparknet-typing {
	display: inline-flex;
	gap: 4px;
	padding: 12px 14px;
	background: var(--sparknet-bg);
	border-radius: 14px;
	border-bottom-left-radius: 4px;
}
.sparknet-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sparknet-text-muted);
	animation: sparknet-bounce 1.2s infinite;
}
.sparknet-typing span:nth-child(2) { animation-delay: 0.15s; }
.sparknet-typing span:nth-child(3) { animation-delay: 0.3s; }

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

.sparknet-lead-form {
	padding: 14px 16px;
	border-top: 1px solid var(--sparknet-border);
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--sparknet-bg);
}
.sparknet-lead-form input {
	padding: 9px 11px;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	font-size: 13px;
	font-family: inherit;
	background: transparent;
	color: var(--sparknet-text);
}
.sparknet-lead-form button {
	padding: 9px;
	border-radius: 10px;
	border: none;
	background: var(--sparknet-primary);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	font-size: 13px;
}

.sparknet-input-bar {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--sparknet-border);
	background: var(--sparknet-bg);
	flex-shrink: 0;
}

.sparknet-input-bar textarea {
	flex: 1;
	resize: none;
	border: none;
	outline: none;
	background: transparent;
	color: var(--sparknet-text);
	font-family: inherit;
	font-size: 13.5px;
	max-height: 90px;
	padding: 8px 10px;
	border-radius: 10px;
}
.sparknet-input-bar textarea::placeholder { color: var(--sparknet-text-muted); }

.sparknet-send-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: var(--sparknet-primary);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.sparknet-send-btn:disabled { opacity: 0.4; cursor: default; }
.sparknet-send-btn:not(:disabled):hover { transform: scale(1.08); }
.sparknet-send-btn svg { width: 15px; height: 15px; fill: currentColor; margin-left: -1px; }

.sparknet-footer {
	text-align: center;
	font-size: 10.5px;
	color: var(--sparknet-text-muted);
	padding: 6px 0 10px;
	background: var(--sparknet-bg);
}
.sparknet-footer a { color: inherit; text-decoration: none; opacity: 0.8; }

@media (max-width: 480px) {
	#sparknet-chat-root { bottom: 16px; right: 16px !important; left: 16px !important; }
	.sparknet-panel { width: 100% !important; max-width: 100%; height: 74vh; bottom: 78px; }
}