*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

button {
	color: inherit;
}
select {
	color: inherit;
}

button,
[role='button'] {
	cursor: pointer;
}

code {
	font-family:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
		'Courier New', monospace;
	font-size: 1em;
}

img,
svg {
	display: block;
}

img,
video {
	max-width: 100%;
	height: auto;
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	font-family:
		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
		'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
		'Noto Color Emoji';
}

.transition-colors {
	transition-property: background-color, border-color, color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.my-6 {
	margin-bottom: 1.5rem;
	margin-top: 1.5rem;
}

.text-4xl {
	font-size: 2.25rem;
	line-height: 2.5rem;
}

.mx-2 {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.my-4 {
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.py-8 {
	padding-bottom: 2rem;
	padding-top: 2rem;
}

.bg-\[\#86efac\] {
	background-color: #86efac;
}

.text-3xl {
	font-size: 1.875rem;
	line-height: 2.25rem;
}

.py-6 {
	padding-bottom: 1.5rem;
	padding-top: 1.5rem;
}

.px-2 {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.py-1 {
	padding-bottom: 0.25rem;
	padding-top: 0.25rem;
}

.border-gray-500 {
	border-color: #6b7280;
}

.bg-white {
	background-color: #fff;
}

.flex {
	display: flex;
}

.gap-8 {
	grid-gap: 2rem;
	gap: 2rem;
}

.font-bold {
	font-weight: 700;
}

.max-w-screen-md {
	max-width: 768px;
}

.flex-col {
	flex-direction: column;
}

.items-center {
	align-items: center;
}

.justify-center {
	justify-content: center;
}

.border-2 {
	border-width: 2px;
}

.rounded {
	border-radius: 0.25rem;
}

.hover\:bg-gray-200:hover {
	background-color: #e5e7eb;
}

.tabular-nums {
	font-variant-numeric: tabular-nums;
}

/* * { min-width: 0; min-height: 0; } */

body {
	min-height: 100vh;
}

@media (prefers-color-scheme: dark) {
	body {
		background: #1d2021;
		color: #ebdbb2;
	}

	button {
		background-color: #282828;
	}
}

.chat-ui {
	--defensive-pill: #ddddff;
	--offensive-pill: #fed5d5;
	--entity: #ffa;

	--history-background: #f8fafb;

	--bubble-bg: #fefefe;
	--answer-bubble-bg: #fefee8;
}

@media (prefers-color-scheme: dark) {
	.chat-ui {
		--defensive-pill: #679c69;
		--offensive-pill: #d55c00;
		--entity: #438487;

		--history-background: #282828;

		--bubble-bg: #3a3634;
		--answer-bubble-bg: #655b53;
	}
}

.chat-ui {
	min-width: 200px;
	max-width: 600px;

	margin: 0 auto;

	display: flex;
	flex-direction: column;
	max-height: 100%;
	min-height: 0;

	.session-header {
		display: flex;
		height: 2.5em;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		padding: 0 5px;
	}

	.history-wrapper {
		padding: 10px 10px;
		background: var(--history-background);

		min-height: 0;
		overflow-y: scroll;

		display: flex;
		flex-direction: column-reverse;
		flex-grow: 1;

		.history {
			.bubble {
				width: 100%;
				display: flex;
				padding: 5px 10px;

				&.answer {
					flex-direction: row-reverse;
				}

				gap: 10px;

				img.profile {
					display: inline-block;
					width: 2em;
					height: 2em;
					border-radius: 1em;
					background: var(--answer-bubble-bg);
					box-shadow: 2px 2px 12px 4px rgba(0, 0, 0, 0.16);
				}

				.content {
					background: var(--bubble-bg);
					min-width: 300px;

					display: inline;
					height: fit-content;
					padding: 5px 15px;
					border-radius: 1em;
					box-shadow: 2px 2px 12px 4px rgba(0, 0, 0, 0.16);
					word-break: break-word;

					img {
						max-width: 300px;
						border-radius: 10px;
					}

					pre {
						border: 1px solid;
						padding: 0.5em;
						background: rgba(10, 10, 10, 0.1);
						border-radius: 0.3em;
						overflow-x: auto;
						/*display: inline-block;*/
					}
					code {
						border: 0.3px solid;
						background: rgba(10, 10, 10, 0.1);
						border-radius: 0.3em;
						display: inline-block;
					}

					> section, > ol {
						margin: 0.3em 0;
						&:first-child {
							margin-top: 0;
						}
						.calls {
							margin: 5px 0;
						}
					}

					footer {
						display: flex;
						justify-content: space-between;
						gap: 2em;
						/*margin-left: -10px;*/
						/*margin-top: 5px;*/
						margin-right: -5px;

						&.with-emotions {
							margin-left: -10px;
						}
					}

					> .calls {
						margin: 0 -10px;
					}
				}

				&.answer {
					.content {
						background: var(--answer-bubble-bg);
					}
				}
			}
		}
	}

	.answer {
		header {
			display: flex;
			justify-content: start;
		}
	}
}

.button-tabs {
	--active-tab: #fedc2f;
	--inactive-tab: #f4f4f4;
}

@media (prefers-color-scheme: dark) {
	.button-tabs {
		--active-tab: #979614;
		--inactive-tab: #3a3634;
	}
}

.button-tabs {
	margin: 10px 0;

	select {
		border: none;
		height: 2em;
		background: var(--inactive-tab);
		border-radius: 0.3em;
	}

	button {
		padding: 0 10px;
		border: none;
		height: 2em;
		min-width: 150px;
		font-weight: 300;
		background: var(--inactive-tab);
		box-sizing: border-box;
		/* border-radius: 0.3em; */

		&.active {
			background: var(--active-tab);
			font-weight: 600;
		}

		&:last-child {
			border-radius: 0 0.3em 0.3em 0;
		}

		&:first-child {
			border-radius: 0.3em 0 0 0.3em;
		}

		&:first-child:last-child {
			border-radius: 0.3em;
		}

		&.small {
			min-width: 1em !important;
		}
	}

	aside {
		margin-left: auto;
	}
}

.timestamp {
	color: #bbb;
}

.pill-box {
	display: flex;
	gap: 0.5em;
}

.pill {
	background: red;
	border-radius: 1em;
	padding: 0 0.5em;
}

.entity {
	&:before {
		content: '#';
	}

	background: var(--entity);
	border-radius: 1em;
	padding: 0 0.5em;
}

.pending {
	opacity: 0.8;
}

.suggestion {
	--background: #e9f5fe;
}

@media (prefers-color-scheme: dark) {
	.suggestion {
		--background: #438487;
	}
}

.suggestion {
	background: var(--background);
	margin: 10px 0;
	padding: 0.5em;
	display: flex;
	flex-direction: row;
	border-radius: 5px;

	aside {
		flex-shrink: 0;

		button {
			background: none;
			border: none;
		}

		&.role {
			padding-right: 0.5em;
			font-weight: 600;
		}
	}
}

.message-input {
	border: 1px solid #ddd;
	padding: 5px 10px;
	border-radius: 5px;
	margin: 10px 0;

	word-break: break-all;

	img {
		max-width: 300px;
		border-radius: 10px;
	}
}

a {
	color: #2a73b5;
}

@media (prefers-color-scheme: dark) {
	a {
		color: #d4c4a0;
	}
}

[contenteditable='true']:empty:before {
	content: attr(aria-placeholder);
	pointer-events: none;
	display: block;
	color: #bbb;
}

.columns {
	display: flex;
	flex-direction: row;
	min-height: 100%;

	.column {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	.delimiter {
		height: 100%;
		width: 5px;

		background: red;
	}
}

.spinner.typing {
	.dot {
		animation: typingAnimation 1.8s infinite ease-in-out;
		background-color: #6cad96;
		border-radius: 50%;
		margin-right: 4px;
		vertical-align: middle;
		display: inline-block;
		height: 4px;
		width: 4px;

		&:nth-child(1) {
			animation-delay: 200ms;
		}

		&:nth-child(2) {
			animation-delay: 300ms;
		}

		&:nth-child(3) {
			animation-delay: 400ms;
		}

		&:last-child {
			margin-right: 0;
		}
	}
}

@keyframes typingAnimation {
	0% {
		transform: translateY(0px);
		background-color: #6cad96;
	}

	28% {
		transform: translateY(-4px);
		background-color: #9ecab9;
	}

	44% {
		transform: translateY(0px);
		background-color: #b5d9cb;
	}
}

.spinner.waiting {
	vertical-align: middle;

	.waiting-wrapped,
	.waiting-wrapped:before {
		display: inline-block;
		width: 1em;
		height: 1em;
		align-self: center;
		transform-origin: 50%;
		border: 2px solid transparent;
		border-color: #74a8d0 #74a8d0 transparent transparent;
		border-radius: 50%;
		content: '';
		animation: linear waitingAnimation 900ms infinite;
		position: relative;
		vertical-align: inherit;
		line-height: inherit;
	}

	.waiting-wrapped {}

	.waiting-wrapped:before {
		border-color: #74a8d0 #74a8d0 transparent transparent;
		position: absolute;
		left: -2px;
		top: -2px;
		border-style: solid;
	}
}

@keyframes waitingAnimation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.broken-link {
	text-decoration: underline;
	text-decoration-color: #d55c00;
}

.unspoken {
	opacity: 0.6;
}

.calls {
	--computing: #ddddff;
	--waiting: #ddddff;
	--done: #ddddff;
	--failed: #ddddff;
}

@media (prefers-color-scheme: dark) {
	.calls {
		--computing: #ddddff;
		--waiting: #ddddff;
		--done: #679c69;
		--failed: #d55c00;
	}
}

.audio-render {
	display: flex;
	& > button {
		background: none;
		border: none;
		align-self: center;
		padding-left: 0;
		margin-left: -3px;
	}
}

.calls {
	.calls-list {
		display: flex;
		flex-direction: row;
		list-style: none;
		padding: 0;

		text-wrap: nowrap;
		overflow-x: auto;

		li {
			padding: 0 1em;
			border: 1px solid;
			margin-right: 5px;
			border-radius: 10px;
			cursor: pointer;

			a {
				text-decoration: none;
			}
		}
	}

	.call-body {
		border: solid 1px;
		margin: 5px 0;
		border-radius: 0.3em;
		padding: 5px;
		background: rgba(10, 10, 10, 0.1);
	}

	.call-data {
		display: none;
	}

	.call-data:target {
		display: block;
	}

	.emoji-icon {
		display: inline-block;
		font-size: 1em;
		height: 1.5em;
		width: 1.5em;
		border-radius: 50%;
		text-align: center;

		&.waiting {
			background: var(--waiting);
		}

		&.computing {
			background: var(--computing);
		}

		&.done {
			background: var(--done);
		}

		&.failed {
			background: var(--failed);
		}
	}
	.brand-icon {
		display: inline;
		max-height: 1em;
		max-width: 1em;
		vertical-align: -0.12em;
		max-width: 1em;
	}
}