/* stylelint-disable custom-property-pattern */

.chat-history {
	position: relative;
}

.chat-history-button {
	display: inline-flex;
	box-shadow: none;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0.25em;
	border-radius: 999px;
	transition:
		color var(--chat--transition-duration, 0.15s) ease,
		background-color var(--chat--transition-duration, 0.15s) ease;
	color: var(--chat--header--color, inherit);

	&:disabled {
		cursor: not-allowed;
		opacity: 0.55;
	}

	&:hover:not(:disabled) {
		background-color: rgb(255 255 255 / 15%);
	}
}

.chat-history-dropdown {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 2;
	width: min(18rem, calc(var(--chat--window--width, 400px) - 2rem));
	padding: 0.75rem;
	border-radius: var(--chat--border-radius, 0.5rem);
	box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 20%);
	background: var(--chat--color-light, #fff);
	color: var(--chat--color-dark, #111);
}

.chat-history-dropdown-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.chat-history-clear-button {
	border: 0;
	background: transparent;
	color: var(--chat--color--primary, inherit);
	cursor: pointer;
	font: inherit;
	padding: 0;
}

.chat-history-dropdown-items {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.chat-history-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	border: 0;
	border-radius: var(--chat--border-radius, 0.5rem);
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0.5rem;
	text-align: left;

	&:hover {
		background: var(--chat--color-light-shade-50, rgb(0 0 0 / 6%));
	}

	span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}