/* Bot card displays, chosen by the card kind in client/bot/displays.js. */
.bot-card.reveal:has(.goals) {
	width: auto;
	max-width: 40em;
}
.bot-card {
	.goals {
		list-style: none;
		margin: 0.3em 0 0;
		padding: 0;
	}
	.goals li {
		border: 1px solid rgba(128, 128, 128, 0.4);
		border-radius: 0.3em;
		cursor: pointer;
		height: 1.4em;
		line-height: 1.4em;
		margin-top: 0.3em;
		overflow: hidden;
		padding: 0 0.4em;
		text-overflow: ellipsis;
		white-space: nowrap;

		&.open {
			height: auto;
			white-space: normal;
		}
	}
}

.bot-card .dialogue {
	display: block;
	margin-top: 0.3em;
	width: 360px;
	max-width: 100%;
	aspect-ratio: 1;
	/* in graph units, so it scales with the view */
	font-size: 10px;

	.edge path {
		fill: none;
		stroke: rgba(128, 128, 128, 0.6);
		stroke-width: 1.5;
	}
	.edge.taken path {
		stroke: #4a8;
		stroke-width: 2.5;
	}
	.edge.last path {
		stroke: #2c6;
		stroke-width: 3;
	}
	text {
		fill: currentColor;
		text-anchor: middle;
		dominant-baseline: middle;
	}
	.edge.taken text {
		font-weight: bold;
	}
	.node circle {
		fill: rgba(128, 128, 128, 0.8);
	}
	.node.current circle {
		fill: #2c6;
	}
}