/* =========================================
   SIMPLE LIVE CHAT - Widget Design
   Yahan colors/fonts change karke apna design bana sakte ho
   ========================================= */

:root {
	--slc-primary: #4f46e5;      /* Main brand color - ise change karo apne brand color se */
	--slc-primary-dark: #4338ca;
	--slc-bg: #ffffff;
	--slc-text: #1f2937;
	--slc-bubble-visitor: #4f46e5;
	--slc-bubble-admin: #f1f5f9;
	--slc-radius: 16px;
	--slc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#slc-widget {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999999;
	font-family: var(--slc-font);
}

/* Bubble button - perfect round circle */
#slc-widget #slc-bubble {
	box-sizing: border-box !important;
	width: 60px !important;
	height: 60px !important;
	min-width: 60px !important;
	min-height: 60px !important;
	max-width: 60px !important;
	max-height: 60px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: var(--slc-primary);
	color: #fff;
	border: none !important;
	box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
	transition: transform 0.2s ease, background 0.2s ease;
	position: relative;
}

/* Greeting bubble - "Chat with us" jo site khulte hi dikhta hai */
#slc-greeting-bubble {
	display: none;
	align-items: center;
	gap: 8px;
	position: absolute;
	bottom: 14px;
	right: 72px;
	white-space: nowrap;
	background: #fff;
	color: var(--slc-text);
	padding: 10px 14px;
	border-radius: 24px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
	font-size: 13.5px;
	font-weight: 500;
	animation: slc-pop-in 0.3s ease;
}
#slc-greeting-bubble.slc-show {
	display: flex;
}
#slc-greeting-close {
	box-sizing: border-box;
	background: #f1f5f9;
	border: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	border-radius: 50%;
	color: #6b7280;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	flex-shrink: 0;
}
@keyframes slc-pop-in {
	from { opacity: 0; transform: translateY(6px) scale(0.95); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
#slc-bubble:hover {
	transform: scale(1.06);
	background: var(--slc-primary-dark);
}
#slc-unread-dot {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
	background: #ef4444;
	border-radius: 50%;
	border: 2px solid #fff;
}

/* ===== HOME SCREEN (Tidio-style greeting) ===== */
#slc-home-screen {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#slc-home-header {
	background: var(--slc-primary);
	color: #fff;
	padding: 24px 20px 28px 20px;
	position: relative;
}
#slc-widget #slc-home-close {
	box-sizing: border-box !important;
	position: absolute !important;
	top: 12px !important;
	right: 14px !important;
	background: rgba(255,255,255,0.15) !important;
	border: none !important;
	color: #fff !important;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	min-height: 26px !important;
	max-width: 26px !important;
	max-height: 26px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	font-size: 15px !important;
	cursor: pointer !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}
#slc-home-header h2 {
	margin: 0 0 8px 0;
	font-size: 22px;
}
#slc-home-header p {
	margin: 0;
	font-size: 14px;
	opacity: 0.9;
	line-height: 1.4;
}
#slc-home-body {
	flex: 1;
	padding: 0 16px;
	margin-top: -18px;
}
#slc-widget #slc-home-chat-card {
	box-sizing: border-box !important;
	width: 100% !important;
	background: #fff !important;
	border: 1px solid #eef0f3 !important;
	border-radius: 12px !important;
	box-shadow: 0 6px 20px rgba(0,0,0,0.08);
	padding: 30px 14px !important;   
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	cursor: pointer;
	text-align: left !important;
	font-family: var(--slc-font);
}

.slc-home-chat-card-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}
.slc-home-chat-card-text strong {
	font-size: 14px;
	color: var(--slc-text);
	white-space: normal;
	word-wrap: break-word;
}
.slc-home-chat-card-text span {
	font-size: 12px;
	color: #9ca3af;
	white-space: normal;
	word-wrap: break-word;
	line-height: 1.35;
}
#slc-home-chat-card svg {
	color: var(--slc-primary);
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}
#slc-home-tabs {
	display: flex;
	border-top: 1px solid #eef0f3;
	background: #fff;
}
.slc-tab {
	flex: 1;
	background: none;
	border: none;
	padding: 10px 0 12px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	color: #9ca3af;
	cursor: pointer;
	font-family: var(--slc-font);
	font-size: 11px;
}
.slc-tab.slc-tab-active {
	color: var(--slc-primary);
}

/* Chat screen back button */
#slc-widget #slc-chat-back {
	box-sizing: border-box !important;
	background: rgba(255,255,255,0.15) !important;
	border: none !important;
	color: #fff !important;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	min-height: 26px !important;
	max-width: 26px !important;
	max-height: 26px !important;
	padding: 0 !important;
	margin: 0 4px 0 0 !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	font-size: 15px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

/* ===== Chat window - Chat screen mode ===== */
#slc-chat-screen {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#slc-chat-window {
	display: none;
	flex-direction: column;
	position: absolute;
	bottom: 76px;
	right: 0;
	width: 340px;
	height: 460px;
	background: var(--slc-bg);
	border-radius: var(--slc-radius);
	box-shadow: 0 12px 40px rgba(0,0,0,0.18);
	overflow: hidden;
}
#slc-widget.slc-open #slc-chat-window {
	display: flex;
}

#slc-chat-header {
	background: var(--slc-primary);
	color: #fff;
	padding: 14px 18px;
	display: flex;
	align-items: center;
}
#slc-chat-header-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 15px;
}
#slc-status-dot {
	width: 8px;
	height: 8px;
	background: #22c55e;
	border-radius: 50%;
	display: inline-block;
}

/* Pre-chat form (naam/email) */
#slc-pre-chat-form {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#slc-pre-chat-form p {
	margin: 0 0 4px 0;
	font-size: 13px;
	color: #6b7280;
}
#slc-pre-chat-form input {
	padding: 10px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 14px;
	font-family: var(--slc-font);
	outline: none;
}
#slc-pre-chat-form input:focus {
	border-color: var(--slc-primary);
}
#slc-start-chat-btn {
	background: var(--slc-primary);
	color: #fff;
	border: none;
	padding: 10px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	font-size: 14px;
}
#slc-start-chat-btn:hover {
	background: var(--slc-primary-dark);
}

/* Messages area */
#slc-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #f9fafb;
}
.slc-msg {
	max-width: 78%;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.4;
	word-wrap: break-word;
}
.slc-msg-visitor {
	align-self: flex-end;
	background: var(--slc-bubble-visitor);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.slc-msg-admin {
	align-self: flex-start;
	background: var(--slc-bubble-admin);
	color: var(--slc-text);
	border-bottom-left-radius: 4px;
}
.slc-msg-time {
	font-size: 10px;
	opacity: 0.6;
	margin-top: 3px;
	display: block;
}

/* Input form */
#slc-input-form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid #eef0f3;
	background: #fff;
}
#slc-message-input {
	flex: 1;
	border: 1px solid #e5e7eb;
	border-radius: 20px;
	padding: 10px 14px;
	font-size: 13.5px;
	outline: none;
	font-family: var(--slc-font);
}
#slc-message-input:focus {
	border-color: var(--slc-primary);
}
#slc-widget #slc-send-btn {
	box-sizing: border-box !important;
	background: var(--slc-primary);
	color: #fff;
	border: none !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	max-width: 38px !important;
	max-height: 38px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	flex-shrink: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
}
#slc-send-btn:hover {
	background: var(--slc-primary-dark);
}

/* ===========================================
   MOBILE RESPONSIVE - phone screens ke liye
   =========================================== */
@media (max-width: 480px) {
	#slc-widget {
		bottom: 16px;
		right: 16px;
	}

	/* Bubble thoda chhota aur safe margin ke saath */
	#slc-bubble {
		width: 56px;
		height: 56px;
		min-width: 56px;
		min-height: 56px;
		max-width: 56px;
		max-height: 56px;
	}

	/* Chat window - poori screen cover kare, app jaisa feel */
	#slc-chat-window {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	/* Greeting bubble mobile pe overflow na kare */
	#slc-greeting-bubble {
		right: 0;
		bottom: 66px;
		max-width: calc(100vw - 90px);
		white-space: normal;
	}

	/* Home screen header thoda compact */
	#slc-home-header {
		padding: 20px 18px 24px 18px;
	}
	#slc-home-header h2 {
		font-size: 20px;
	}

	/* Chat header mein safe-area (notch wale phones ke liye) */
	#slc-chat-header {
		padding-top: max(14px, env(safe-area-inset-top));
	}

	/* Inputs 16px se chhote na ho - warna iOS Safari zoom-in kar deta hai */
	#slc-message-input,
	#slc-name-input,
	#slc-email-input,
	#slc-admin-message-input {
		font-size: 16px !important;
	}

	/* Input form ke neeche safe-area (home indicator wale phones) */
	#slc-input-form {
		padding-bottom: max(12px, env(safe-area-inset-bottom));
	}

	/* Messages area mein thoda zyada padding taaki text na chipke */
	#slc-messages {
		padding: 14px 12px;
	}
	.slc-msg {
		max-width: 85%;
		font-size: 14px;
	}
}

/* Chhote phones (iPhone SE jaise) ke liye aur bhi tight */
@media (max-width: 360px) {
	#slc-home-header h2 {
		font-size: 18px;
	}
	#slc-home-header p {
		font-size: 13px;
	}
}

/* ===== Typing indicator (WhatsApp jaisa 3-dot animation) ===== */
.slc-typing {
	display: flex !important;
	align-items: center;
	gap: 4px;
	padding: 12px 14px !important;
}
.slc-typing span {
	width: 6px;
	height: 6px;
	background: currentColor;
	border-radius: 50%;
	opacity: 0.4;
	animation: slc-typing-bounce 1.2s infinite ease-in-out;
}
.slc-typing span:nth-child(1) { animation-delay: 0s; }
.slc-typing span:nth-child(2) { animation-delay: 0.2s; }
.slc-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes slc-typing-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* ===== "Waiting for a reply..." text ===== */
.slc-waiting-text {
	align-self: flex-start;
	font-size: 11.5px;
	color: #9ca3af;
	font-style: italic;
	padding: 2px 6px;
	margin-top: -4px;
}