html {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	font-family: 'Arial', sans-serif; 
	margin: 0;
	padding: 0;
	min-height: 100vh;
	padding-top: 10px; 
	background-color: #f0f0f0;
	background-image: url('../images/background.jpg');
    background-size: cover;
    background-attachment: fixed;
}


.container {
	max-width: 800px;
	margin: auto;
	margin-bottom: 0;
	min-height: 100vh; /* Prevents content from overflowing */
	background: rgba(255, 255, 255, 0.98);
	padding: 20px; 
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

h1 {
	color: #d35400;
	font-size: 2em;
	text-align: center;
	margin-bottom: 20px;
}

textarea {
	max-width: 96%;
	min-width: 96%;
	max-height: 400px; 
	min-height: 200px; 
	height: auto; 
	padding: 10px; 
	border: 2px solid #d35400; 
	border-radius: 5px; 
	resize: vertical; 
}

button { 
	padding: 10px 15px; 
	background: #d35400; 
	color: white; 
	border: none; 
	border-radius: 5px; 
	cursor: pointer; 
	font-weight: bold; 
	margin: 5px; 
}

.button-group { 
	text-align: center; 
	margin: 10px 0; 
}

#response, #history { 
	margin-top: 20px; 
	padding: 10px; 
	border: 1px solid #d35400; 
	border-radius: 5px; 
	background: #fff; 
	min-height: 50px;
	line-height: 1.6; /* Better readability */
    white-space: pre-line; /* Respects formatting */
}

.chat-entry {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #d35400;
    line-height: 1.6; /* Makes text easier to read */
    white-space: pre-line; /* Respects line breaks and spaces */
}

.user { 
	font-weight: bold; 
	color: #d35400; 
}

.bot { 
	font-style: italic; 
	color: #2980b9; 
}

.error { 
	color: #e74c3c; 
	font-weight: bold; 
}

.hidden { 
	display: none; 
}