:root {
	--autofill-bg: #f8f9fa;
	--autofill-text: #202124;
	--autofill-hover-bg: #e0e0e0;
	--autofill-hover-text: #202124;
}
/* General styles  <meta name="author" content="Amit Gambhir, LogicSense Ltd."> */
body {
	font-family: "Avenir Next", sans-serif;
	/* -webkit-user-select: none; / Safari /        
  -moz-user-select: none; / Firefox /
  -ms-user-select: none; / IE 10+ /
  user-select: none; / Standard syntax / */
}
/* Add this to your CSS file */
.message-separator {
	display: inline-block;
	text-align: center;
	background-color: #eeeae3; /* Light beige background color */
	border-radius: 15px; /* Rounded corners */
	padding: 5px 10px; /* Padding inside the rectangle */
	color: #888; /* Grey text color */
	font-style: italic;
	margin: 10px auto; /* Center the separator and add space above and below */
}
/* Chatbot container styles */
#chatbot {
	width: calc(80vw - 10px); /* Adjusted width considering possible scrollbar */
	height: calc(
		100vh - 10px
	); /* Adjusted height considering possible scrollbar */
	margin: 0 auto;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 10px; /* Rounded corners */
	display: flex; /* Use flexbox */
	flex-direction: column; /* Arrange children vertically */
}

/* Chat window styles */
#chat-window {
	flex-grow: 1; /* Allow the chat window to grow to fill available space */
	position: relative; /* Make the logo container position relative */
	overflow-y: auto; /*Enable vertical scrolling */
	/*  border: 1px solid #009898;*/
	margin-top: 28px;
	margin-bottom: 10px;
	box-sizing: border-box;
	border-radius: 10px;
	/*  background-color: white;*/
	text-align: center; /* Center inline-block elements within the chat window */
}
#chat-window::-webkit-scrollbar {
	display: none; /* For Chrome, Safari, and Opera */
}

/* Logo container styles */
#logo-container {
	position: fixed; /* Position the logo container relative to the chat window */
	top: 50%; /* Align the top of the logo container to the middle of the chat window */
	left: 50%; /* Align the left of the logo container to the middle of the chat window */
	transform: translate(-50%, -50%); /* Center the logo container */
	text-align: center;
	z-index: -1;
}

/* Logo image styles */
#logo {
	width: 80px; /* Set logo width */
}

/* Welcome message styles */
#welcome-message {
	font-size: 16px;
	margin-top: 10px;
	color: #009898;
	font-style: italic;
}

/* Hint message styles */
#hint-message {
	font-size: 2rem;
	margin-top: 10px;
	color: #595959; /* Hint text color */
	/*font-style: italic;*/
}
@keyframes textShine {
	0% {
		background-position: -100% 0;
	}
	50% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

.hello {
	font-weight: 600;
	background-image: linear-gradient(
		to right,
		rgba(0, 152, 152, 1) 0%,
		rgba(60, 255, 82, 1) 33%,
		rgba(113, 130, 255, 1) 66%,
		rgba(0, 152, 152, 1) 100%
	);
	background-size: 300% 100%; /* Increased size for smoother transition */
	background-position: -100% 0; /* Start from left */
	-webkit-background-clip: text;
	color: transparent;
	animation: textShine 5s ease infinite;
}

/* User input container styles large display*/
#user-input-container {
	position: fixed; /* Change from relative to fixed */
	top: 0; /* Stick to the top of the window */
	left: 0; /* Align to the left edge */
	right: 0; /* Align to the right edge */
	width: 75%; /* to Ensure it spans the full width set it to 100% */
	display: flex;
	justify-content: center; /* Center the content horizontally */
	/*background-color: white;  Add a background color to avoid content overlap */
	z-index: 1000; /* Ensure it stays on top of other elements */
	padding: 10px; /* Add padding for better touch interaction */
	box-sizing: border-box; /* Ensure padding is included in the width */
	margin: 0 auto; /* Center the container itself */
	/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  Optional: Add a shadow for better visibility */
	align-items: center;
}
/* Wrap input + microphone together */
.input-wrapper {
	display: flex;
	align-items: center;
	position: relative;
	flex-grow: 1; /* Let it expand */
}
/* User input field styles */
#user-input {
	flex-grow: 1;
	min-height: 41px;
	border-radius: 5px;
	padding-left: 12px;
	padding-right: 40px; /* space for mic */
	border: 1px solid #595959;
}

#user-input:focus {
	border-color: #009898;
	outline: none; /* remove default outline */
}
.toggle {
	position: relative;
	display: inline-block;
	width: 32px; /* Adjust the width of the container to match the icon size */
	height: 32px; /* Adjust the height of the container to match the icon size */
}

.toggle input {
	display: none;
}

.autofill.button-style {
	display: inline-block;
	padding: 10px 20px;
	margin: 5px;
	border: 1px solid var(--autofill-border, #dadce0);
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-color: var(--autofill-bg, #f8f9fa);
	color: var(--autofill-text, #202124);
	-webkit-text-fill-color: var(--autofill-text, #202124); /* match text color */
	transition:
		background-color 0.3s,
		color 0.3s;
	font-size: 15px; /* or 18px, or any size you prefer */
}

.autofill.button-style:hover {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	background-color: var(--autofill-hover-bg, #f8f9fa);
	color: var(--autofill-hover-text, #202124);
	-webkit-text-fill-color: var(--autofill-hover-text, #202124);
}

.button-style {
	padding: 10px 15px;
	border: 2px solid var(--brand-color);
	border-radius: 10px;
	background-color: var(--button-bg);
	color: var(--button-text);
	cursor: pointer;
	font-size: 14px;
}
.button-style.visited {
	background-color: white !important;
	color: #595959 !important;
	border: 2px solid #dadce0 !important;
	position: relative;
	padding-left: 30px; /* Increased padding to make more space for the tick mark */
}

.button-style.visited::before {
	content: "✓";
	color: #595959;
	position: absolute;
	left: 10px; /* Position of the tick mark */
	font-size: 16px; /* Size of the tick mark */
	margin-right: 10px; /* Increased space after the tick mark */
}

/* When the microphone is in listening state (active) */
.microphone-icon.listening {
	color: #4caf50; /* Green for listening */
}

/* When the microphone is turned on (active recording state) */
.microphone-icon.on {
	color: #2196f3; /* Blue for on state */
}

/* When the microphone is clicked and in listening state, change icon */
.microphone-icon.listening {
	color: #4caf50; /* Green for listening */
}

/* When the microphone is active (on) */
.microphone-icon.on {
	color: #2196f3; /* Blue for on state */
}

/* Placeholder styles for user input */
#user-input::placeholder {
	white-space: pre-wrap; /* Allow text to wrap */
}

/* Send button styles */
/* Send button with fixed width */
#send-button {
	background-color: #0662cf;
	border: none;
	min-height: 45px;
	min-width: 70px;
	padding: 0 15px;
	margin-left: 10px;
	color: white;
	cursor: pointer;
	border-radius: 10px;
	flex-shrink: 0;
	/* text-transform: uppercase; */

	/* Reset iOS Safari native styling */
	-webkit-appearance: none;
	appearance: none;

	/* Prevent iOS gradient line */
	background-image: none !important;
	box-shadow: none !important;

	/* Smooth text */
	-webkit-font-smoothing: antialiased;
	-webkit-text-fill-color: white; /* Ensures clean rendering on iOS */
}
/* Send button hover effect */
#send-button:hover {
	background-color: #06629b; /* Darker color on hover */
}
#send-button:disabled {
	background-color: #cccccc;
	color: #666;
	cursor: not-allowed;

	/* Prevent Safari from drawing that grey line */
	-webkit-appearance: none;
	appearance: none;
	background-image: none !important;
	box-shadow: none !important;
	border: none !important;
}

/* Default state for Font Awesome microphone icon */
/* Microphone always stays inside input wrapper */
/* Shared base */
.microphone-icon {
	font-size: 20px;
	color: #009898;
	cursor: pointer;
}

/* Input mic (inside input field) */
.input-mic {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

/* Hint mic (inline in text) */
.hint-mic {
	position: static; /* stays in text flow */
	transform: none;
	font-size: 1em; /* matches text size */
	vertical-align: middle;
	cursor: default; /* not clickable */
}

/* Conversation list item styles */

#conversation {
	padding-left: 10px; /* Adjust left padding */
	padding-right: 10px; /* Adjust right padding */
	max-width: 100%;
	box-sizing: border-box;
}

#conversation li {
	list-style: none;
	margin-bottom: 10px;
	padding: 0 10px; /* Add horizontal padding */
	/* display: flex; Use Flexbox for alignment */
	justify-content: left; /* Default alignment to the left */
	font-size: 16px; /* or 18px, or any size you prefer */
}

/* User query text styles */
#conversation li.user {
	color: #333;
	background-color: #f0f0f0; /* Light grey background for user messages */
	justify-content: center; /* Align user messages to the center horizontally */
	align-items: center; /* Align text to the center vertically */
	border-radius: 5px; /* Rounded corners for user messages */
	text-align: center; /* Center text horizontally */
	min-height: 30px; /* Minimum height for consistency */
	display: flex; /* Use Flexbox for alignment */
	padding: 5px; /* Adjust padding as needed */
}

/* Bot response text styles */
#conversation li.bot {
	color: #007777;
	/* background-color: #007777; Light grey background for bot messages */
	border-radius: 5px; /* Optional: rounded corners for bot messages */
	text-align: left;
	min-height: 50px; /* Minimum height for consistency */
}

/* Chatbot response styles */
img.response-image {
	max-width: 400px; /* Set maximum width of images to 400 pixels */
	width: 100%; /* Set width to 100% to ensure responsiveness */
	border-radius: 10px; /* Rounded corners */
}
.response-image {
	width: 200px;
	transition: transform 0.3s ease;
	/*cursor: pointer;*/
}
.large-image {
	width: 500px;
	height: auto;
}

.option-box {
	display: inline-block;
	border: 1px solid #009898;
	padding: 10px;
	margin: 5px 5px;
	border-radius: 5px;
	background-color: #f9f9f9;
	cursor: pointer; /* Make the options look clickable */
}

.option-box.correct {
	border-color: green;
	color: green;
}

.option-box.incorrect {
	border-color: red;
	color: red;
}

/*dividing line separate above navigation button in content */
hr {
	border: none; /* Remove default border */
	border-top: 2px dashed #dadce0; /* Dashed line with desired color */
	background-size: 6px 2px; /* Adjust size for dash pattern */
	height: 2px; /* Height of the dashed line */
	margin: 20px 0; /* Optional: Add spacing above and below */
	position: relative;
}
/* Apply styles to the table */
/* Make table responsive */
.table-wrapper {
	border-radius: 15px;
	border: 1px solid #ddd;
	overflow-x: auto; /* 👈 allow horizontal scroll */
	-webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
	max-width: 100%; /* keep inside screen */
}

/* Style table */
.table-wrapper table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	min-width: 500px; /* 👈 ensures columns don’t squish too much on small screens */
}

th,
td {
	padding: 8px;
	border: 1px solid #ddd;
	text-align: left;
}

th {
	background-color: #f2f2f2;
}

tr:last-child td {
	border-bottom: none;
}

tr:first-child th:first-child {
	border-top-left-radius: 10px;
}

tr:first-child th:last-child {
	border-top-right-radius: 10px;
}

tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}

tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}
#conversation table {
	width: 100%; /* Ensure the table fits within the container */
	table-layout: fixed; /* Prevent table from expanding beyond container width */
	border-collapse: collapse; /* Optional, for cleaner table design */
}

/* Optional: Prevent long text from causing overflow */
#conversation table td,
#conversation table th {
	word-wrap: break-word; /* Allow long words to break to next line */
	overflow-wrap: break-word; /* Ensure long content like URLs doesn't cause overflow */
}

/* Media Query for smaller screens */
@media screen and (max-width: 300px) {
	#chatbot {
		width: calc(
			100vw - 20px
		); /* Full width on smaller screens, considering padding */
	}
	#user-input-container {
		padding: 5px; /* Reduce padding on smaller screens */
		width: 100%; /* Full width on smaller screens */
	}

	#user-input {
		padding-left: 10px;
		padding-right: 30px; /* Adjust padding for smaller screens */
	}

	#chatbot {
		width: 95%; /* Adjusted width for mobile */
		padding: 5px;
	}

	#logo {
		width: 50px; /* Adjusted width for mobile */
	}

	#user-input {
		width: calc(100% - 100px); /* Adjusted width for mobile */
		margin-bottom: 10px;
		min-height: 50px;
		padding: 5px;
		border-radius: 10px; /* Rounded corners */
	}

	#send-button {
		padding: 4px 5px; /* Adjusted padding for mobile */
	}
}
/* Class for scaling the image on hover */
.clickable-image {
	transition: transform 0.3s ease-in-out;
	cursor: pointer;
}

/* Apply scaling when hovering */
.clickable-image:hover {
	transform: scale(1.9);
	align-items: center;
	justify-content: center;
}

@media (max-width: 768px) {
	#chatbot {
		width: calc(
			100vw - 20px
		); /* Full width on smaller screens, considering padding */
	}
	#conversation {
		padding-left: 15px; /* Adjust left padding for small screens */
		padding-right: 15px; /* Adjust right padding for small screens */
	}
	#conversation table {
		width: 100%; /* Ensure table adjusts properly on smaller screens */
	}
	#user-input-container {
		padding: 5px; /* Reduce padding on smaller screens */
		width: 100%; /* Full width on smaller screens */
	}

	#user-input {
		padding-left: 10px;
		padding-right: 30px; /* Adjust padding for smaller screens */
	}
	#send-button {
		padding: 8px 16px; /* Adjust padding for smaller screens */
	}
	div[style*="display: flex"] {
		flex-direction: column;
	}
}
@media (max-width: 600px) {
	#chatbot {
		width: calc(
			100vw - 20px
		); /* Full width on smaller screens, considering padding */
	}
	#conversation {
		padding-left: 10px;
		padding-right: 10px;
		overflow-x: auto; /* Allow horizontal scroll */
	}
	#conversation li {
		font-size: 12px; /* 16 for desktop */
	}
	#conversation table {
		width: 100%;
		min-width: 600px; /* Ensure the table is wide enough, but doesn't overflow */
		table-layout: auto; /* Allows the table to dynamically adjust based on content */
	}
	#user-input-container {
		padding: 5px; /* Reduce padding on smaller screens */
		width: 100%; /* Full width on smaller screens */
	}

	#user-input {
		padding-left: 10px;
		padding-right: 30px; /* Adjust padding for smaller screens */
	}
	#send-button {
		padding: 8px 16px; /* Adjust padding for smaller screens */
	}
	.response-image {
		width: 100%;
	}
	.response-image + div {
		flex: 100%;
		padding-right: 0;
	}
	.autofill.button-style {
		font-size: 12px; /* or 18px, or any size you prefer */
	}
}

.iframe-button {
	margin: 10px;
	padding: 10px 15px;
	border: 2px solid #1267a4;
	border-radius: 10px;
	background-color: #1267a4;
	color: white;
	cursor: pointer;
	outline: none;
	font-size: 16px;
	font-family: "Avenir Next", sans-serif;
}
.toggle-button {
	padding: 10px 15px;
	border-radius: 10px;
	background-color: #1267a4;
	color: white;
	cursor: pointer;
	outline: none;
	font-size: 16px;
	font-family: "Avenir Next", sans-serif;
}

.button-style:hover {
	background-color: var(--button-hover);
	color: white;
}

/* Define styles for the survey button */
.survey-button {
	background-color: #007777; /* Green */
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 8px;
}

/* Lightbox styles */
#lightbox {
	display: none;
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.8);
}

.lightbox-content {
	position: relative;
	top: 50%; /* Set top to 50% of the viewport height */
	transform: translateY(
		-50%
	); /* Shift the lightbox up by half its own height */
	margin: auto;
	padding: 10px;
	width: 95%; /* Fill 90% of the browser width */
}
.rounded-img {
	width: 100%;
	border-radius: 15px; /* Rounded corners for images */
}

.close {
	position: absolute;
	top: 15px;
	right: 25px;
	color: #595959;
	font-size: 16px;
	cursor: pointer;
	background: none; /* Removes the background fill */
	border: none; /* Removes the border */
}

.slide {
	display: none;
}

.slide img {
	width: 100%;
	height: auto; /* Maintain aspect ratio */
	max-height: 90vh; /* Ensure the image does not exceed the viewport height */
}

.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

/* Button styles */
.toggle-button {
	background-color: #009898; /* Button fill color */
	color: white;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
}

.bot-response-text {
	margin-bottom: 6px;
}

.bot-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 8px;
	opacity: 0.65;
	transition: opacity 0.2s ease;
}

#conversation li.bot:hover .bot-actions {
	opacity: 1;
}

.feedback-ask {
	font-size: 12px;
	color: #888;
	margin-right: 2px;
}

.bot-action-btn,
.feedback-save-btn {
	border: 1px solid #dadce0;
	background: #fff;
	color: #595959;
	border-radius: 999px;
	min-width: 28px;
	min-height: 28px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 13px;
	text-decoration: none;
	line-height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bot-action-btn:hover,
.feedback-save-btn:hover {
	border-color: #009898;
	color: #009898;
	background: #f7ffff;
}

.bot-action-status {
	font-size: 12px;
	color: #009898;
	margin-left: 4px;
}

.feedback-panel {
	width: 100%;
	margin-top: 8px;
	padding: 8px;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	background: #fafafa;
}

.feedback-panel-title {
	font-size: 13px;
	color: #595959;
	margin-bottom: 6px;
}

.feedback-reason-text {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #dadce0;
	border-radius: 8px;
	padding: 8px;
	resize: vertical;
	font-family: inherit;
}

.feedback-save-btn {
	margin-top: 6px;
	border-radius: 8px;
}

.hidden {
	display: none !important;
}

.bot-action-btn i {
	font-size: 14px;
	pointer-events: none;
}

.share-whatsapp i {
	color: #25d366;
}

.share-email i {
	color: #666;
}

.share-copy i,
.share-native i {
	color: #009898;
}
.feedback-ask-row {
	width: 100%;
	margin-bottom: 6px;
}
.feedback-up.liked {
	background: #e8fff1;
	border-color: #25d366;
}

#user-input-container {
	display: flex;
	align-items: center;
	gap: 10px;
}

#clear-chat-button {
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 18px;
	background: rgba(0, 152, 152, 0.12);
	color: #008c8c;
	cursor: pointer;
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

#clear-chat-button:hover {
	background: rgba(0, 152, 152, 0.22);
}

.message-time {
	font-size: 11px;
	opacity: 0.6;
	margin-top: 4px;
	text-align: right;
}