/*************************************************************************************/
/****************************** For the entire document ******************************/
/*************************************************************************************/
/* I have quicksand (secondary font aka reg text) in 400, 500, and 700 */
/* I have poppins (primary font aka headings text) in 600 and 500 */
body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	margin: 0;
	padding: 0;
	background-color: #333; /* Dark grey background */
	color: #fff; /* White text */
	display: flex;
	justify-content: center;
	/* Covers entire screen */
	width: 100vw;
	height: 100vh;
}

/* Chat Container Styles */
#chat-container {
	width: 100%;
	height: 100%; /* Proportion of height for entire screen */
	background-color: #444;
	border-radius: 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* For Focusing */
button:focus,
input:focus,
a:focus,
select:focus,
textarea:focus {
	outline: 2px solid #9cdf16; /* Example green color */
	outline-offset: 2px; /* Adds space between the outline and the element's border */
}
/* Error Message Styles */
.error-message {
	color: red;
	margin-bottom: 12px; /* Adjust as needed */
	text-align: center;
	display: none; /* Initially hidden */
}
/* Error Highlight Styles */
.error-highlight {
	outline: 2px solid rgba(255, 0, 0, 0.5); /* Adds a red outline */
	box-shadow: 0 0 4px rgba(255, 0, 0, 0.5); /* Adds a subtle red glow */
}
/* Hide desktop specific things */
.hidden-desktop {
	display: none !important;
}

/*************************************************************************************/
/************************* For the entire top part document *************************/
/********************** Excludes current message user is typing **********************/
/*************************************************************************************/
/* Content Area Styles */
#chat-container #top-area {
	display: flex;
	flex: 1; /* This will make top-area flexible */
	height: 87% !important;
}

/*************************************************************************************/
/******************** Top-Left Side (where messages are displayed) *******************/
/*************************************************************************************/
/* Messages Area Styles */
#chat-container #top-area #top-left-area {
	display: flex; /* this makes the messages not fixed in size? */
	flex-direction: column;
	height: 100%; /* Ensure the messages container fills the area */
	flex-grow: 2;
	overflow-y: auto;
	padding: 0px;
	background-color: #333;
	margin-right: 5px; /* Padding between messages and company details */
	width: 65%;
}

/* Scrollbar Styles */
#top-left-area::-webkit-scrollbar {
	width: 8px;
}
#top-left-area::-webkit-scrollbar-thumb {
	background: #555; /* Scrollbar thumb */
	border-radius: 4px;
}

/* Chat Header Styles */
#top-left-area #chat-header {
	box-sizing: border-box;
	display: flex;
	flex-direction: column; /* Stack items vertically */
	justify-content: center; /* Center items vertically */
	align-items: center; /* Center items horizontally */
	padding: 4px; /* Add more padding as needed */
	width: 100%; /* Ensure full width */
	text-align: center; /* Center the text if it's not in a flex container */
	z-index: 2; /* Ensure it's above the scrollable area */
	flex-shrink: 0; /* Prevents the header from shrinking */
}

/* Chat Icon Styles */
#top-left-area #chat-header #chat-icon {
	width: 10%;
}

/* Chat Title Styles */
#top-left-area #chat-header #chat-title {
	font-family: 'Popins', Arial;
	font-weight: 600;
	color: #9cdf16; /* Green text */
	font-size: 2.3em; /* Adjust the font size as needed */
	margin-top: 10px; /* Add space between the logo and the title */
	padding: 5px; /* Makes sure the title doesn't go behind the seperator */
}

/* Scrollable Messages Area Styles */
#top-left-area #scrollable-messages {
	overflow-y: auto; /* Enable vertical scrolling */
	width: 100%; /* Ensure it takes the full width */
	flex-grow: 1; /* Takes up the remaining space in the flex container */
}

/***** Styles for each message *****/
/* Message wrapper div is used for alignment */
#top-left-area #scrollable-messages .message-wrapper {
	max-width: 80%; /* Limit maximum width of messages */
}
#top-left-area #scrollable-messages .message-wrapper.user {
	margin-left: auto; /* Push user messages to the right */
	margin-right: 1.8%;
}
#top-left-area #scrollable-messages .message-wrapper.assistant {
	margin-right: auto; /* Keep assistant messages to the left */
	margin-left: 1.8%;
}
/* Message div is used for background */
#top-left-area #scrollable-messages .message {
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 10px;
	word-break: break-word; /* Ensures text breaks to prevent overflow */
	color: #fff; /* Keep text color white */
	font-size: 0.9em; /* Smaller font size for messages */
}
#top-left-area #scrollable-messages .message.user {
	background-color: #408830; /* Green (matches color of leav in logo) for user */
}
#top-left-area #scrollable-messages .message.assistant {
	background-color: #666; /* Lighter grey for default (assistant) messages */
}

/*************************************************************************************/
/********************************* Top Right Area ************************************/
/*************************************************************************************/
#chat-container #top-area #top-right-area {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border-radius: 1rem 1rem 1rem 1rem;
	background: #fff;
	align-items: center;
	text-align: center; /* center all items in child divs */
	width: 35%;
}

/* Recycle Icon Styles */
#top-right-area #recycle-icon {
	height: 40px;
	width: 40px;
}
#top-right-area #recycle-icon img {
	max-width: 100%;
	max-height: 100%; /* Ensures the image fits within the div */
}

/* For headers in travel details container */
#top-right-area #top-right-header {
	font-family: 'Poppins', arial;
	font-size: 1.6rem;
	color: #020819;
	margin: 5px;
	line-height: 1.8rem;
}

/***************** For adding-materials-container and items *****************/
/* For adding-materials-container */
#top-right-area #adding-materials-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* Currently no margin or padding */
}

/* For the line breaks */
#top-right-area .line-break {
	width: 95%; /* Adjust the width as necessary */
	height: 1px; /* Adjust the thickness of the line as necessary */
	background-color: #e0dce4; /* Adjust the color as necessary */
	margin-top: 10px;
	margin-bottom: 15px;
}

/* Submit button */
#top-right-area #submit-button {
	margin-top: auto; /* Pushes this button to the bottom of the container */
	width: 100%; /* Match the width of input containers */
	padding: 10px; /* Same padding as input fields for consistent height */
	border-radius: 0.6rem; /* Match the border radius of input containers */
	border: none; /* No border for the button */
	background-color: #9cdf16; /* Green background color */
	color: white; /* White text color */
	font-size: 1rem; /* Match the font size of input text */
	cursor: pointer; /* Change cursor to pointer on hover */
	align-self: flex-end;
}
#top-right-area #submit-button:hover {
	background-color: #bae95c; /* Slightly lighter green on hover */
}
#top-right-area #submit-button:disabled,
#top-right-area #submit-button:disabled:hover {
	background-color: #ccc; /* Or any other color you use for disabled state */
	color: #666;
	cursor: not-allowed;
}

/*************************************************************************************/
/*********************************** Bottom Area *************************************/
/*************************************************************************************/

/* Message Form Styles/Bottom Area Styles */
#chat-container #bottom-area {
	box-sizing: border-box;
	position: fixed; /* Fixed positioning relative to the viewport */
	bottom: 0; /* Align to the bottom of the viewport */
	left: 0; /* Align to the left of the viewport */
	display: flex;
	align-items: center;
	background-color: #444;
	padding: 10px; /* Increased padding to 10px, adjust if needed */
	width: 100%;
	height: 13%;
}

/* Message Input Styles */
#bottom-area #message-input {
	box-sizing: border-box;
	flex-grow: 1;
	margin: 0px;
	border-radius: 5px;
	border: none;
	padding: 10px;
	background-color: #333; /* Dark grey background */
	color: #fff; /* White text */
	resize: none; /* Prevent manual resize */
	height: 90%;
	font-size: 1em; /* Bigger text in textarea */
	overflow-y: auto; /* Allows scrolling inside the textarea if text exceeds the height */
}
#message-input:focus {
	border: 2px solid #9cdf16; /* Change the border color to green and set its width */
	outline: none; /* Optional: Removes the default focus outline */
}

/* Word Count Styles */
#word-count {
	color: #aaa; /* Light grey for word count */
	margin: 0 10px; /* Added margin for spacing */
	align-self: center;
}

/* File Upload Styles */
#upload-file {
	opacity: 0;
	position: absolute;
	z-index: -1;
}
#upload-label {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	color: white;
	width: 2.5rem; /* Square dimension */
	height: 2.5rem; /* Square dimension */
	text-align: center;
	font-family: 'Poppins', sans-serif; /* Consistent font family */
	font-size: 0.85rem; /* Match size of other form elements */
	border-radius: 5px;
	cursor: pointer;
	margin-left: 5px; /* Space before the send button */
	line-height: 20px; /* Adjust based on your design */
}
#upload-label i {
	color: #333; /* Icon color */
	font-size: 16px; /* Icon size */
}

/* Send Button Styles */
#bottom-area #send-button {
	background-color: #9cdf16; /* Green button */
	font-weight: 5000;
	color: #444;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	margin-left: 10px;
}
#bottom-area #send-button:hover {
	background-color: #bae95c;
}
#send-button:disabled,
#send-button:disabled:hover {
	background-color: #ccc; /* Or any other color you use for disabled state */
	color: #666;
	cursor: not-allowed;
}

/************* MOBILE *************/
@media (max-width: 768px) {
	/* Apply changes only within the #top-area */

	#chat-container {
		height: 100%;
		display: flex;
		flex-direction: column; /* Stack children vertically on mobile */
	}
	#top-area {
		display: flex;
		flex-direction: column; /* Stack children vertically on mobile */
		height: 80%;
	}

	#chat-header {
		padding-top: 0px;
		margin-bottom: 3px;
	}

	#chat-icon {
		width: 50px;
		margin-top: 10px;
	}

	#chat-title {
		margin-top: 0px;
		padding: 0px;
	}

	.two-column-layout {
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(2, 1fr); /* Create two columns */
		gap: 0px 12%; /* Space between grid items */
		padding: 0px;
		width: 85% !important; /* the important is neccesary for soe reason */
	}

	/* Place the travel details container first */
	#top-right-area {
		box-sizing: border-box;
		order: 1; /* Use order to make it appear on top */
		width: 100%; /* Ensures full width but may need adjustment for padding */
		padding: 0 10px; /* Adds padding to the sides. Adjust the value as needed */
		padding-top: 0px;
		max-width: none;
	}

	#travel-type {
		margin-bottom: 5px;
	}

	.emissions-info {
		font-size: 0.7rem;
		padding-top: 0px;
	}

	/* Ensure messages appear after the travel details */
	#top-left-area {
		padding-top: 10px;
		order: 2; /* This will place it below the travel details on mobile */
		width: 100%; /* Make it full width on smaller screens */
	}

	.message {
		padding: 8px;
	}

	/* Ensure the message form stays at the bottom without changing its order */
	#bottom-area {
		order: 3; /* Explicitly keep the message form at the bottom */
		padding-right: 12px;
		width: 100%; /* Adjust if necessary to ensure full width on mobile */
		box-sizing: border-box; /* Ensures padding is included in the width */
		height: 10%;
		position: relative;
	}

	.hidden-mobile {
		display: none !important;
	}
	.hidden-desktop {
		display: inline-block !important;
	}
}