* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: #121212;
	color: #f1f1f1;
	font-family: 'Segoe UI', sans-serif;
	display: flex;
	flex-direction: column;
	padding: 1rem;
	height: 100vh;
}

#chatbox {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bub {
	max-width: 70%;
	padding: 0.75rem;
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	word-wrap: break-word;
}

.bub-l {
	align-self: flex-start;
	border-bottom-left-radius: 0;
}

.bub-r {
	align-self: flex-end;
	border-bottom-right-radius: 0;
}

.bub-primary   { background-color: #1e88e5; color: #fff; }
.bub-secondary { background-color: #757575; color: #fff; }
.bub-danger    { background-color: #e53935; color: #fff; }
.bub-warning   { background-color: #fbc02d; color: #000; }
.bub-success   { background-color: #43a047; color: #fff; }
.bub-info      { background-color: #29b6f6; color: #000; }

.bub .tag {
	font-size: 0.75rem;
	opacity: 0.7;
}

.bub .message {
	font-size: 1rem;
	white-space: pre-wrap;
}

.message code {
    background: #2a2a2a;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
}
.message pre {
    background: #2a2a2a;
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
}

.message strong 	{ font-weight: bold }
.message em 		{ font-style: italic }
.message ul 		{ padding-left: 20px; margin: 0 }
.message ol 		{ padding-left: 20px; margin: 0 }

#statusbox {
	padding: 0.5rem 1rem;
	margin-top: 0.5rem;
	border-radius: 0.5rem;
	font-size: 0.9rem;
	text-align: center;
}

.status-idle 		{ background-color: #424242; color: #bdbdbd; }
.status-responding	{ background-color: #1565c0; color: #ffffff; }
.status-completed 	{ background-color: #2e7d32; color: #ffffff; }
.status-failed 		{ background-color: #c62828; color: #ffffff; }

#prompt {
	width: 100%;
	resize: vertical;
	min-height: 3rem;
	padding: 0.75rem;
	margin-top: 1rem;
	background-color: #1e1e1e;
	color: #f1f1f1;
	border: 1px solid #333;
	border-radius: 0.5rem;
	font-size: 1rem;
}

.controlbox {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	margin-top: 1rem;
}

.controlbox select,
.controlbox button,
.controlbox label {
	background-color: #1e1e1e;
	color: #f1f1f1;
	border: 1px solid #333;
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
	font-size: 1rem;
}

.controlbox button:hover {
	background-color: #333;
	cursor: pointer;
}

.controlbox label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.controlbox input[type="checkbox"] {
	accent-color: #1e88e5;
	transform: scale(1.2);
}

@media (max-width: 768px) {
	.bub {
		max-width: 85%;
	}
}