:root {
	--digivio-blue: #0b1f4d;
	--digivio-blue-soft: #173a7a;
	--digivio-yellow: #ffe37a;
	--digivio-yellow-soft: #fff7d6;
	--digivio-border: rgba(11, 31, 77, .14);
	--digivio-shadow: 0 1rem 2.5rem rgba(11, 31, 77, .12);
}

html {
	line-height: 1.5;
}

body {
	margin: 0;
	background:
		radial-gradient(circle at top left, rgba(255, 227, 122, .55), transparent 24rem),
		linear-gradient(180deg, var(--digivio-yellow-soft), #ffffff 38rem);
	color: #132033;
}

a {
	color: var(--digivio-blue-soft);
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: 1rem;
	z-index: 2000;
	padding: .75rem 1rem;
	background: var(--digivio-yellow);
	color: var(--digivio-blue);
	border-radius: .75rem;
}

.digivio-navbar {
	background: var(--digivio-blue);
}

.digivio-navbar .navbar-brand,
.digivio-navbar .nav-link {
	color: #ffffff;
}

.digivio-navbar .nav-link:hover,
.digivio-navbar .nav-link:focus {
	color: var(--digivio-yellow);
}

.digivio-navbar .navbar-toggler {
	border-color: rgba(255, 255, 255, .55);
}

.digivio-navbar .navbar-toggler-icon {
	filter: invert(1);
}

.digivio-brand-icon {
	box-shadow: 0 .3rem .9rem rgba(0, 0, 0, .25);
}

.digivio-page {
	max-width: 1480px;
}

.digivio-kicker {
	letter-spacing: .08em;
	color: var(--digivio-blue-soft);
}

.digivio-card {
	border: 1px solid var(--digivio-border);
	border-radius: 1.25rem;
	box-shadow: var(--digivio-shadow);
}

.digivio-sidebar-card {
	top: 1rem;
}

.btn-digivio-primary,
input[type="submit"] {
	--bs-btn-bg: var(--digivio-blue);
	--bs-btn-border-color: var(--digivio-blue);
	--bs-btn-color: #ffffff;
	--bs-btn-hover-bg: var(--digivio-blue-soft);
	--bs-btn-hover-border-color: var(--digivio-blue-soft);
	--bs-btn-hover-color: #ffffff;
}

.button {
	display: inline-block;
	padding: .55rem .85rem;
	border: 1px solid var(--digivio-blue);
	border-radius: .6rem;
	background: var(--digivio-blue);
	color: #ffffff;
	text-decoration: none;
}

.button:hover,
.button:focus {
	background: var(--digivio-blue-soft);
	color: #ffffff;
}

.button.danger {
	background: #7f1d1d;
	border-color: #7f1d1d;
}

.messages {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.message {
	border: 1px solid var(--digivio-border);
	border-radius: 1.25rem;
	padding: 1rem;
	background: #ffffff;
	box-shadow: 0 .75rem 1.8rem rgba(11, 31, 77, .08);
}

.message-user {
	background: #fff9df;
	border-color: rgba(255, 195, 0, .5);
}

.message-assistant {
	background: #f7faff;
	border-color: rgba(23, 58, 122, .25);
}

.message-label {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin-bottom: .75rem;
	color: var(--digivio-blue);
}

.message-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--digivio-yellow);
	color: var(--digivio-blue);
}

.message-content {
	white-space: pre-wrap;
}

.attachment-help {
	border: 1px solid rgba(11, 31, 77, .12);
	border-radius: 1rem;
	background: var(--digivio-yellow-soft);
	padding: 1rem;
	margin-bottom: 1rem;
}

input,
select,
textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: .65rem .75rem;
	margin-bottom: .85rem;
	border: 1px solid #8a96aa;
	border-radius: .7rem;
	font: inherit;
}

input:focus,
select:focus,
textarea:focus {
	outline: .2rem solid rgba(255, 227, 122, .7);
	border-color: var(--digivio-blue);
}

input[type="submit"] {
	width: auto;
	border-radius: .75rem;
	font-weight: 700;
}

textarea {
	min-height: 11rem;
}

label {
	display: block;
	font-weight: 700;
	margin-bottom: .25rem;
}

.status-text {
	padding: .75rem;
	border: 1px solid var(--digivio-border);
	border-radius: .75rem;
	background: #ffffff;
}

pre {
	background: #0b1f4d;
	color: #fff7d6;
	border-radius: 1rem;
	padding: 1rem;
	overflow-x: auto;
}

code {
	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.narrow {
	max-width: 54rem;
	margin: 0 auto;
}

.digivio-details summary {
	cursor: pointer;
	color: var(--digivio-blue);
}

@media (max-width: 760px) {
	.digivio-page {
		padding-left: .75rem;
		padding-right: .75rem;
	}

	.digivio-card .card-body {
		padding: 1rem !important;
	}
}