/* Chat bubble styles */

:root {
	--primary: #2bcbba;
	--secondary: #e9ecef;
	--primary-bg: #ffffff75;
	--secondary-bg: #f8f9fa;
	--user-bubble-bg: #dcf8c6;
	--chatbot-bubble-bg: #eee;
	--border-color: #ccc;
	--quick-answer-chip-bg: #e2f3f8;
	--quick-answer-chip-selected-bg: #cce5ff;
	--input-field-placeholder-color: #999;

	--dimen-1: 4px;
	--dimen-2: 5px;
	--dimen-3: 6px;
	--dimen-4: 8px;
	--dimen-5: 10px;
	--dimen-6: 12px;
	--dimen-7: 20px;
	--dimen-8: 40px;
	--dimen-9: 48px;
	--dimen-10: 50px;
	--dimen-11: 70;

	--border-radius-1: 10px;
	--border-radius-2: 20px;
	--border-radius-3: 50%;
}

.message {
	display: flex;
	margin-bottom: var(--dimen-5);
}

.user-message {
	justify-content: flex-end;
}

.chatbot-message {
	justify-content: flex-start;
}

.user-message .avatar {
	margin-right: 0; /* Remove right margin */
	margin-left: var(--dimen-5); /* Add left margin */
	order: 2; /* Place avatar after message content */
}

.user-message .message-content {
	order: 1; /* Place message content before avatar */
}

.message-content {
	padding: var(--dimen-5);
	border-radius: var(--border-radius-1);
	max-width: var(--dimen-11)%;
	word-break: break-word; /* Allow long words to break */
}

.user-message .message-content {
	background-color: var(--user-bubble-bg); /* Light green for user */
}

.chatbot-message .message-content {
	background-color: var(--chatbot-bubble-bg); /* White for chatbot */
}

.avatar {
	width: var(--dimen-8);
	height: var(--dimen-8);
	border-radius: var(--border-radius-3);
	margin-right: var(--dimen-5); /* For user messages */
	margin-left: var(--dimen-5); /* For chatbot messages */
	border: 2px solid white;
}

.typing-indicator {
	display: none; /* Initially hidden */
	margin-left: var(--dimen-5);
	color: black;
	width: var(--dimen-8); /* Adjust width as needed */
	height: var(--dimen-5); /* Adjust height as needed */
	overflow: hidden; /* Hide pencil outside of the container */
}

.typing-indicator.active {
	display: inline;
}

.typing-indicator .pencil-text {
	margin-left: 45px;
	margin-top: -25px;
}

.typing-indicator .pencil {
	/* New class for the pencil */
	width: var(--dimen-7); /* Adjust pencil width as needed */
	height: var(--dimen-5); /* Adjust pencil height as needed */
	position: relative;
	animation: typingPencilAnimation 2s infinite linear;
}

@keyframes typingPencilAnimation {
	0% {
	left: 0px; /* Start off-screen to the left */
	}
	100% {
	left: var(--dimen-5); /* Move to off-screen to the right */
	}
}

body,
html,
.chat-container {
	margin: 0;
	background-color: var(--primary-bg);
}
.bg-primary {
	background-color: var(--primary-bg) !important;
}
.bg-secondary {
	background-color: var(--secondary-bg) !important;
}
.navbar {
	position: sticky;
	top: 0;
	z-index: 100;
}
.chat-container {
	display: flex;
	height: calc(100% - 85px);
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	color: var(--primary);
	background-color: var(--secondary);
}
.nav.nav-pills li.nav-item a.nav-link,
.btn.btn-link {
	color: var(--primary);
	
}
#chat-content {
	background-color: var(--primary-bg);
	/* height: calc(100% - 50px); */
	overflow-y: auto;
	/*-ms-overflow-style: none;
	scrollbar-width: none;*/
	max-width: 100vw;
	border-top-left-radius: var(--dimen-4);
	border-top-right-radius: var(--dimen-4);
	/* min-height: calc(100vh - 174px); */
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: #888 #f1f1f1; /* Firefox: Thumb color, Track color */
	scroll-margin: var(--dimen-5);
}

.chat-sidebar {
	width: 40%;
	background-color: var(--secondary-bg);
	padding: var(--dimen-7);
	border-right: 1px solid #dee2e6;
	/*height: 100%;*/
	overflow-y: auto;
	flex: 0.3;
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: #888 #f1f1f1; /* Firefox: Thumb color, Track color */
	scroll-margin: var(--dimen-5);
}

.chat-area {
	flex: 0.7;
	padding: 0px var(--dimen-7);
	/*max-height: calc(100vh - 100px);*/
}

/* Optional: Initially hide the settings block */
.chat-sidebar::-webkit-scrollbar {
	/* WebKit browsers (Chrome, Safari, Edge) */
	width: var(--dimen-4); /* Adjust scrollbar width */
}

.chat-sidebar::-webkit-scrollbar-track {
	background: #f1f1f1; /* Track color */
	margin: var(--dimen-5);
}

.chat-sidebar::-webkit-scrollbar-thumb {
	background-color: #888; /* Thumb color */
	border-radius: var(--dimen-1); /* Rounded corners for the thumb */
}

#send-button {
	width: var(--dimen-9);
	margin: 0px;
}
.chip,
.topic-chip,
.final-topic-chip {
	padding: var(--dimen-2) var(--dimen-5);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-2);
	cursor: pointer;
}

.topic-chip.selected,
.final-topic-chip.selected {
	background-color: var(--secondary); /* Light gray for selected chips */
}

.loading-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--dimen-10); /* Adjust height as needed */
}

.loading-indicator .fa-spinner {
	font-size: 1.5em;
	margin-right: var(--dimen-2);
}

.grammar-topic-chip {
	padding: var(--dimen-2) var(--dimen-5);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-2);
	cursor: pointer;
	background-color: var(--primary-bg); /* Light gray background */
}

.grammar-topic-chip.selected {
	background-color: var(--secondary); /* Darker gray for selected chip */
}

.input-container {
	/* display: flex; */
	align-items: center;
	padding: var(--dimen-5);
	background: white;
	border-bottom-left-radius: var(--dimen-4);
	border-bottom-right-radius: var(--dimen-4);
}
.dropdown-toggle::after {
	display: none;
	
}
.input-field {
	flex-grow: 1;
	padding: var(--dimen-5);
	border: none;
	border-radius: var(--border-radius-2);
	background-color: var(--secondary-bg); /* Light gray background */
	min-height: var(--dimen-8); /* Set a minimum height */
	overflow-y: auto; /* Allow scrolling if text exceeds height */
	resize: none; /* Prevent resizing */
}
#user-input {
	width: calc(100% - 65px);
}
#user-input:empty::before {
	content: attr(placeholder);
	color: var(--input-field-placeholder-color); /* Light gray placeholder text */
}

.send-button {
	margin-left: var(--dimen-5);
	opacity: 0.5; /* Make button semi-transparent when disabled */
	pointer-events: none; /* Disable clicks when disabled */
}

.send-button:enabled {
	opacity: 1;
	pointer-events: auto;
}

.message-content > p {
	margin-top: 0;
	margin-bottom: 0.3rem;
}

/* Mobile-friendly layout */
@media (max-width: 576px) {
		.chat-container {
		flex-direction: column; /* Stack sidebar on top of chat area */
		height: unset;
	}

	.chat-sidebar {
		position: fixed;
		top: var(--dimen-1);
		left: -12px;
		width: calc(100% - var(--dimen-6));
		height: calc(100% - var(--dimen-4));
		padding: var(--dimen-7);
		border-right: none;
		transform: translateX(-100%);
		transition: transform 0.3s ease-in-out;
		z-index: 10;
		height: 100%;
	}

	.input-container {
		position: fixed;
		bottom: 0px;
		width: 100%;
		margin: 0px;
		z-index: 9;
		background: white;
	}

	.chat-sidebar.active {
		transform: translateX(0); /* Show sidebar when active */
	}

	.chat-area {
		flex: 1;
		padding: 0px;
		padding-bottom: 76px;
	}

	.typing-indicator {
		color: white;
	}

	#chat-content {
		padding-bottom: 64px !important;
		background: unset;
		border: unset !important;
	}

	.burger-menu {
		display: block;
		position: sticky;
		top: var(--dimen-5);
		left: var(--dimen-5);
		z-index: 90;
		width: min-content !important;
	}
}

/* Hide burger menu on larger screens */
@media (min-width: 769px) {
	.burger-menu {
		display: none;
	}
}

#quick-answers {
	background: white;
}

.quick-answer-chip {
	padding: var(--dimen-2) var(--dimen-5);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-2);
	cursor: pointer;
	background-color: var(--quick-answer-chip-bg); /* Light blue background */
}

.quick-answer-chip.selected {
	background-color: var(--quick-answer-chip-selected-bg); /* Darker blue for selected chip */
}
.container h1 {
	font-weight: 700;
	margin-bottom: 2rem;
}

/* Settings Block */
#settings-block label {
	font-weight: 500;
}

#settings-block .btn-group label {
	margin: 0px;
	margin-bottom: var(--dimen-2);
}

#grammar-topic-chips,
#topic-chips,
#final-topics {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dimen-2);
}

/* Chat Bubbles */
.chat-bubble {
	margin-bottom: var(--dimen-5);
	padding: var(--dimen-5);
	border-radius: var(--border-radius-1);
	max-width: 80%;
	word-break: break-word;
}

.user .chat-bubble {
	background-color: #007bff;
	color: #fff;
	align-self: flex-end;
}

.chatbot .chat-bubble {
	background-color: #f0f2f5;
	color: #343a40;
	align-self: flex-start;
}

/* Hide elements by default */
.hidden {
	display: none;
}

/* Style the card */
.card {
	border: 4px solid var(--primary);
	padding: 20px;
	margin-bottom: 10px;
	text-align: center;
	display: flex;
	flex-direction: column;
	text-align: left;
	border-radius: 0px;
	/* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); */
}

.card-header {
	background-color: var(--primary-bg); /* Light background for the header */
	border-bottom: 2px solid var(--primary); /* Remove header border */
	margin: 0px var(--dimen-7); /* Add some padding */
	padding-bottom: var(--dimen-10);
	color: var(--primary);
	font-size: 56px;
	font-weight: 700;
	line-height: 45px;
	text-align: center;
}

.card-body {
	padding: 30px; /* Add more padding to the body */
	max-height: calc(100vh - 60px);
}

/* Style form elements */
.form-control {
	border-radius: var(--dimen-1); /* Rounded input fields */
	border: 1px solid var(--border-color); /* Light border color */
	padding: var(--dimen-1) var(--dimen-2); /* Adjust padding for better appearance */
}

.form-control:focus {
	border-color: var(--border-color); /* Blue border on focus */
	box-shadow: 0 0 0 0.2rem var(--primary); /* Blue outline on focus */
}

/* Style buttons */
.btn {
	border-radius: var(--dimen-1); /* Rounded buttons */
	padding: var(--dimen-2) var(--dimen-4);
	width: calc(100% - var(--dimen-4));
	margin: var(--dimen-2) ;
}
.btn-primary:disabled {
	background-color: var(--secondary);
	border-color: var(--secondary);
	/* color: var(--primary); */
}

.btn-primary:disabled {
	background-color: var(--secondary);
	border-color: var(--secondary);
	/* color: var(--primary); */
}
.btn-primary {
	background-color: var(--primary); /* Blue primary button */
	border-color: var(--primary);
}
.btn-primary:hover:enabled {
	background-color: var(--primary-bg); /* Blue primary button */
	border-color: var(--primary);
	color: var(--primary);
}
.btn-secondary {
	background-color: white; /* Gray secondary button */
	border-color: var(--primary);
	color: var(--primary);
}

.btn-secondary:hover:enabled {
	background-color: white; /* Gray secondary button */
	color: var(--primary);
	border-color: var(--primary);
}
.btn-group-toggle .btn {
	margin: 0px;
}
.plan-card {
	border: 4px solid var(--primary);
	padding: 20px;
	margin-bottom: 10px;
	text-align: center;
	display: flex;
	flex-direction: column;
	text-align: left;
}
@media screen and (max-width: 768px) {
	.plan-card {
		width: 100%;
	}
}
.plan-card .plan-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	align-self: stretch;
	flex-wrap: nowrap;
	flex-shrink: 0;
	position: relative;
	gap: 32px;
}
.plan-card .plan-header .text {
	display: flex;
	min-height: 64px;
	flex-direction: column;
	align-items: flex-start;
	flex-wrap: nowrap;
	flex-shrink: 0;
	position: relative;

}

.plan-card .price {
	flex-shrink: 0;
	flex-basis: auto;
	position: relative;
	color: var(--primary);
	font-size: 56px;
	font-weight: 700;
	line-height: 45px;
	text-align: right;
	white-space: nowrap;
}
.plan-card .price-period {
	flex-shrink: 0;
	flex-basis: auto;
	position: relative;
	color: var(--primary);
	font-size: 24px;
	font-weight: 700;
	line-height: 17px;
	text-align: right;
	white-space: nowrap;
}
.plan-card .plan-header .title {
	flex-shrink: 0;
	flex-basis: auto;
	position: relative;
	color: var(--primary);
	font-size: 24px;
	font-weight: 700;
	line-height: 33.6px;
	text-align: left;
	white-space: nowrap;
}
.plan-card .divider {
	border: 1px solid var(--primary);
	margin: 16px 0px;
}
.plan-card ul li i {
	color: var(--primary);
	width: 25px;
}

#verification-card {
	max-width: 400px;
	margin: 100px auto;
	padding: 20px;
	border: 1px solid #ccc;
	border-radius: 5px;
}
#verification-message {
	margin-top: 20px;
	padding: 10px;
	border-radius: 5px;
}
.success {
	background-color: #d4edda;
	border-color: #c3e6cb;
	color: #155724;
}
.error {
	background-color: #f8d7da;
	border-color: #f5c6cb;
	color: #721c24;
}

/* Styles for chat cards */
.chat-card {
	border: 1px solid #ccc;
	padding: 15px;
	margin-bottom: 10px;
	border-radius: 5px;
	cursor: pointer;
}
.chat-card:hover {
	background-color: #f5f5f5;
}
.chat-card h5 {
	margin-bottom: 10px;
}
.chat-card .chip {
	font-size: 14px;
	margin-right: 5px;
	margin-bottom: 5px;
}

/* Styles for the new chat sidebar */
.new-chat-sidebar {
	position: fixed;
	top: 0;
	right: 0;
	width: 40vw;
	height: 100%;
	background-color: #fff;
	box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
	z-index: 100; /* Ensure it's on top */
	transform: translateX(100%); /* Initially hidden */
	transition: transform 0.3s ease-in-out;
}
.new-chat-sidebar.active {
	transform: translateX(0); /* Slide in from the right */
}
@media (max-width: 576px) {
	.new-chat-sidebar {
		width: 100%; /* Full width on mobile */
	}
}