/* Global Styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Base styles for desktop */
body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f5f7f9;
	color: #333;
	margin: 0;
}

#toggleModeButton {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 5px 10px;
	font-size: 1rem;
	cursor: pointer;
	background-color: #6c9cba;
	color: white;
	border: none;
	border-radius: 5px;
}

#returnHomeButton {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 5px 10px;
	font-size: 1rem;
	cursor: pointer;
	background-color: #547d96;
	color: white;
	border: none;
	border-radius: 5px;
}

/* Layout */
#container {
	display: flex;
	width: 70%;
	max-width: 1200px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	background-color: #ffffff;
}

#chat-container {
	width: 60%;
	height: 100vh;
	background-color: #e9eff2;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

/* Chat Styling */
#chatbox {
	width: 90%;
	height: 90%;
	background-color: #ffffff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

#messages {
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 10px;
	border-radius: 6px;
	background-color: #f0f4f8;
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
}

.message {
	margin: 5px 0;
	padding: 10px 14px;
	border-radius: 6px;
	max-width: 70%;
}

.user-message {
	background-color: #d8e2dc;
	align-self: flex-end;
	color: #3a3a3a;
	text-align: right;
}

.bot-message {
	background-color: #b7d4db;
	align-self: flex-start;
	color: #3a3a3a;
	text-align: left;
}

#userInput,
button,
#systemPromptInput {
	padding: 10px;
	border-radius: 6px;
	border: 1px solid #c5ccd3;
	margin-top: 10px;
	font-size: 0.95rem;
	outline: none;
}

button {
	cursor: pointer;
	background-color: #6c9cba;
	color: white;
	border: none;
	transition: background-color 0.3s ease;
}

button:hover {
	background-color: #4a6d7a;
}

#saveButton {
	margin-top: 15px;
	align-self: flex-end;
}

#systemPromptSection {
	display: flex;
	flex-direction: row;
	width: 100%;
	margin-bottom: 10px;
}

#systemPromptInput {
	flex: 1;
	margin-right: 10px;
}

/* Dark Mode */
.dark-mode {
	background-color: #2e3440;
	color: #d8dee9;
}

.dark-mode #container {
	background-color: #3b4252;
}

.dark-mode #chat-container {
	background-color: #434c5e;
}

.dark-mode #chatbox {
	background-color: #3b4252;
}

.dark-mode #messages {
	background-color: #434c5e;
}

.dark-mode .user-message {
	background-color: #4c566a;
	color: #eceff4;
}

.dark-mode .bot-message {
	background-color: #5e81ac;
	color: #eceff4;
}

.dark-mode #userInput,
.dark-mode button,
.dark-mode #systemPromptInput {
	background-color: #4c566a;
	color: #eceff4;
	border: 1px solid #5e81ac;
}

.dark-mode button {
	background-color: #81a1c1;
}

.dark-mode button:hover {
	background-color: #88c0d0;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
	#container {
		flex-direction: column;
		width: 100%;
		padding: 10px;
	}

	#chat-container {
		width: 100%;
	}
	#chatbox {
		padding: 10px;
	}

	#userInput,
	#systemPromptInput {
		width: calc(100% - 70px);
		margin-bottom: 10px;
		font-size: 1rem;
	}

	#messages {
		max-height: 400px;
		overflow-y: auto;
	}

	button {
		font-size: 1rem;
		padding: 8px;
	}
}