/* Image annotation container */
.annotated-image-container {
	position: relative;
	margin: 1.5em 0;
	width: 100%;
	height: auto;
	display: block;
}

.annotated-image {
	width: 100%;
	height: auto;
	display: block;
}

/* Annotation markers */
.annotation-marker {
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: rgba(100, 100, 100, 0.7);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease;
	z-index: 5;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transform: translate(-50%, -50%);
	/* Center the marker on its position */
	/* Absolute positions set inline with style attribute */
}

.annotation-marker:hover {
	transform: translate(-50%, -50%) scale(1.1);
	background-color: rgba(100, 100, 100, 0.9);
}

.annotation-marker.active {
	background-color: var(--md-accent-fg-color, var(--md-primary-fg-color));
	transform: translate(-50%, -50%) scale(1.1);
}

/* Special marker styles */
.annotation-marker.plus {
	background-color: var(--md-accent-fg-color, var(--md-primary-fg-color));
}

.annotation-marker.plus::after {
	content: "+";
}

.annotation-marker.x::after {
	content: "×";
}

/* Annotation tooltips */
.annotation-tooltip {
	position: absolute;
	background-color: white;
	border-left: 4px solid var(--md-accent-fg-color, var(--md-primary-fg-color));
	padding: 12px 15px;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	/* Stronger shadow for visibility */
	max-width: 300px;
	z-index: 100;
	/* Higher z-index to ensure it's above other elements */
	display: none;
	font-size: 14px;
	pointer-events: auto;
	/* Ensure the tooltip can receive pointer events */
}

.annotation-tooltip.visible {
	display: block;
}

.annotation-tooltip-title {
	font-weight: bold;
	margin-bottom: 5px;
	color: var(--md-primary-fg-color, #16293F);
}

.annotation-tooltip-content {
	margin: 0;
	color: #444;
}

/* Dark mode support */
[data-md-color-scheme="slate"] .annotation-tooltip {
	background-color: #2e303e;
	border-left: 4px solid var(--md-accent-fg-color, var(--md-primary-fg-color));
}

[data-md-color-scheme="slate"] .annotation-tooltip-title {
	color: white;
}

[data-md-color-scheme="slate"] .annotation-tooltip-content {
	color: #ddd;
}

/* Dark mode support */
[data-md-color-scheme="slate"] .annotation-tooltip {
	background-color: #2e303e;
	border-left: 4px solid var(--md-accent-fg-color, var(--md-primary-fg-color));
}

[data-md-color-scheme="slate"] .annotation-tooltip-title {
	color: white;
}

[data-md-color-scheme="slate"] .annotation-tooltip-content {
	color: #ddd;
}

.annotation-marker.question-mark::after {
	content: "?";
}

.annotation-marker.number::after {
	content: attr(data-number);
}

.annotation-marker.info {
	background-color: #3498db;
}


@media (max-width: 768px) {
	.annotation-marker {
		width: 20px;
		height: 20px;
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.annotation-marker {
		width: 16px;
		height: 16px;
		font-size: 10px;
	}
}

.tooltip-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	pointer-events: none;
}

/* Base styles for annotation markers */
.annotation-marker.x {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: rgba(128, 128, 128, 0.8);
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.3s ease, background-color 0.3s ease;
}

/* X shape using ::before and ::after for the two lines */
.annotation-marker.x::before,
.annotation-marker.x::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 2px;
	background-color: white;
	transition: transform 0.3s ease;
}

.annotation-marker.x::before {
	transform: rotate(45deg);
}

.annotation-marker.x::after {
	transform: rotate(-45deg);
}

/* Transform X to + and change color when active or hovering */
.annotation-marker.x.rotate-plus {
	background-color: var(--md-primary-fg-color);
	/* Change to 1A293E when active */
}

.annotation-marker.x.rotate-plus::before {
	transform: rotate(0deg);
	/* Rotate to horizontal line */
}

.annotation-marker.x.rotate-plus::after {
	transform: rotate(90deg);
	/* Rotate to vertical line */
}

/* Add hover state for non-touch devices */
@media (hover: hover) {
	.annotation-marker.x:hover {
		background-color: var(--md-primary-fg-color);
	}

	.annotation-marker.x:hover::before {
		transform: rotate(0deg);
	}

	.annotation-marker.x:hover::after {
		transform: rotate(90deg);
	}
}

/* Add pulsing animation keyframes */
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(252, 118, 76, 0.4);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(252, 118, 76, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(252, 118, 76, 0);
	}
}

/* Add pulsing effect to annotation markers that aren't active or hovered */
.annotation-marker {
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: rgba(100, 100, 100, 0.7);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease;
	z-index: 5;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transform: translate(-50%, -50%);
	/* Center the marker on its position */
	/* Add pulsing animation */
	animation: pulse 2s infinite;
}

/* Stop animation when hovered or active */
.annotation-marker:hover,
.annotation-marker.active {
	animation: none;
	transform: translate(-50%, -50%) scale(1.1);
}

.annotation-marker:hover {
	background-color: rgba(252, 118, 76, 0.9);
}

.annotation-marker.active {
	background-color: var(--md-accent-fg-color, var(--md-primary-fg-color));
	transform: translate(-50%, -50%) scale(1.1) rotate(45deg);
}

/* Add instruction text styles */
.annotation-instruction {
	display: block;
	text-align: center;
	font-size: 0.85rem;
	color: #666;
	margin-top: 10px;
	font-style: italic;
}

/* Dark mode support for instruction text */
[data-md-color-scheme="slate"] .annotation-instruction {
	color: #aaa;
}

/* Update the X marker to have a smooth rotation effect */
.annotation-marker.x::before,
.annotation-marker.x::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 2px;
	background-color: white;
	transition: transform 0.3s ease;
}

.annotation-marker.x::before {
	transform: rotate(45deg);
}

.annotation-marker.x::after {
	transform: rotate(-45deg);
}

.annotation-marker.x:hover::before,
.annotation-marker.x.active::before {
	transform: rotate(0deg);
}

.annotation-marker.x:hover::after,
.annotation-marker.x.active::after {
	transform: rotate(90deg);
}

/* Ensure the pulsing effect works well with all marker types */
.annotation-marker.plus,
.annotation-marker.info,
.annotation-marker.question-mark,
.annotation-marker.number {
	animation: pulse 2s infinite;
}

.annotation-marker.plus:hover,
.annotation-marker.info:hover,
.annotation-marker.question-mark:hover,
.annotation-marker.number:hover,
.annotation-marker.plus.active,
.annotation-marker.info.active,
.annotation-marker.question-mark.active,
.annotation-marker.number.active {
	animation: none;
}

/* Make tooltip transitions smoother */
.annotation-tooltip {
	position: absolute;
	background-color: white;
	border-left: 4px solid var(--md-accent-fg-color, var(--md-primary-fg-color));
	padding: 12px 15px;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	max-width: 300px;
	z-index: 100;
	font-size: 14px;
	pointer-events: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.annotation-tooltip.visible {
	opacity: 1;
	visibility: visible;
	display: block;
}

/* Base tooltip styles - hidden by default */
.annotation-tooltip {
	position: absolute;
	background-color: white;
	border-left: 4px solid var(--md-accent-fg-color, var(--md-primary-fg-color));
	padding: 12px 15px;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	max-width: 300px;
	z-index: 100;
	font-size: 14px;
	pointer-events: auto;
	display: none;
	/* Hidden by default */
}

/* Visible tooltip class */
.annotation-tooltip.visible {
	display: block;
}

/* Make sure markers have proper hover effects */
.annotation-marker:hover {
	transform: translate(-50%, -50%) scale(1.1);
	background-color: rgba(252, 118, 76, 0.9);
}

.annotation-marker.active {
	background-color: var(--md-accent-fg-color, var(--md-primary-fg-color));
	transform: translate(-50%, -50%) scale(1.1);
}

/* Transform X to + and change color when active or hovering */
.annotation-marker.x.rotate-plus {
	background-color: var(--md-primary-fg-color);
}

.annotation-marker.x.rotate-plus::before {
	transform: rotate(0deg);
}

.annotation-marker.x.rotate-plus::after {
	transform: rotate(90deg);
}