: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;
}

/* 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 {
	background-color: #009898;
	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: #007272; /* Darker color on hover */
}
#send-button:disabled {
	background-color: #ccc;
	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;
}
/* 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 */
}

#conversation li.user {
	position: relative;
	justify-content: center;
	padding: 8px 72px 8px 12px;
}

#conversation li.user .message-text {
	text-align: center;
	flex: 1;
}

#conversation li.user .message-time {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 11px;
	color: #777;
	white-space: nowrap;
}

#conversation li.bot .message-time {
	text-align: right;
	font-size: 11px;
	color: #999;
	margin-top: 4px;
}

/* Bot response text styles */
#conversation li.bot {
	color: #007777;
	/* background-color: #f0f0f0; 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 */
}