/**
 * Public chatbot widget styles.
 *
 * @package SoftRanges\AIChatbot
 */

#softranges-ai-chatbot-root {
	position: fixed;
	z-index: 999999;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sr-ai-bottom-right { right: 20px; bottom: 20px; }
.sr-ai-bottom-left { left: 20px; bottom: 20px; }

.sr-ai-toggle {
	width: 60px;
	height: 60px;
	border: 0;
	border-radius: 999px;
	color: var(--sr-ai-text, #fff);
	background: linear-gradient(135deg, var(--sr-ai-primary, #2563eb), var(--sr-ai-accent, #14b8a6));
	box-shadow: 0 18px 40px rgba(15, 23, 42, .24);
	cursor: pointer;
	font-size: 26px;
}

.sr-ai-window {
	position: absolute;
	right: 0;
	bottom: 76px;
	width: min(380px, calc(100vw - 32px));
	height: min(620px, calc(100vh - 110px));
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 18px;
	box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
	overflow: hidden;
	display: none;
	flex-direction: column;
}

.sr-ai-bottom-left .sr-ai-window { left: 0; right: auto; }
.sr-ai-open .sr-ai-window { display: flex; }

.sr-ai-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	color: var(--sr-ai-text, #fff);
	background: linear-gradient(135deg, var(--sr-ai-primary, #2563eb), var(--sr-ai-accent, #14b8a6));
}

.sr-ai-brand { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.sr-ai-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.22); }
.sr-ai-close { border: 0; background: transparent; color: inherit; font-size: 22px; cursor: pointer; }

.sr-ai-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	background: #f8fafc;
}

.sr-ai-message {
	max-width: 84%;
	margin: 0 0 10px;
	padding: 11px 13px;
	border-radius: 14px;
	line-height: 1.45;
	font-size: 14px;
	white-space: pre-wrap;
}

.sr-ai-message-user { margin-left: auto; color: #fff; background: var(--sr-ai-primary, #2563eb); border-bottom-right-radius: 4px; }
.sr-ai-message-ai, .sr-ai-message-admin { color: #111827; background: #fff; border: 1px solid #e5e7eb; border-bottom-left-radius: 4px; }

.sr-ai-prompts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; background: #f8fafc; }
.sr-ai-prompt { border: 1px solid #dbe3ef; background: #fff; border-radius: 999px; padding: 7px 10px; font-size: 12px; cursor: pointer; }

.sr-ai-lead {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid #e5e7eb;
}
.sr-ai-lead input { min-width: 0; border: 1px solid #d1d5db; border-radius: 9px; padding: 8px; font-size: 13px; }
.sr-ai-lead button { grid-column: span 2; border: 0; border-radius: 10px; padding: 9px; color: #fff; background: var(--sr-ai-primary, #2563eb); cursor: pointer; }

.sr-ai-composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e5e7eb; background: #fff; }
.sr-ai-composer textarea { flex: 1; resize: none; border: 1px solid #d1d5db; border-radius: 12px; padding: 10px; max-height: 90px; font: inherit; }
.sr-ai-send { border: 0; border-radius: 12px; padding: 0 14px; color: #fff; background: var(--sr-ai-primary, #2563eb); cursor: pointer; }

.sr-ai-typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: #94a3b8; animation: srAiPulse 1s infinite ease-in-out; }
.sr-ai-typing span:nth-child(2) { animation-delay: .15s; }
.sr-ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes srAiPulse { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

@media (max-width: 480px) {
	#softranges-ai-chatbot-root { right: 12px; left: 12px; bottom: 12px; }
	.sr-ai-window { right: 0; left: 0; width: auto; height: min(640px, calc(100vh - 92px)); }
}