/**
 * AI provenance badge.
 *
 * The collapsed state always shows a short token ("KI") so the disclosure is
 * present at first exposure as required by Art. 50(5) KI-VO. Hovering or tapping
 * the badge expands it to the full wording.
 *
 * Both labels are absolutely positioned and cross-fade in place, so the expanded
 * state reads "KI-generiert" rather than repeating the short token. That leaves
 * the badge's own width as the single animated layout property.
 */

.ai-prov-anchor {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.ai-prov-badge {
	position: absolute;
	right: .5em;
	bottom: .5em;
	z-index: 5;

	box-sizing: border-box;
	width: 2em;
	height: 2em;
	overflow: hidden;

	border-radius: 999px;
	background: rgba(0, 0, 0, .5);
	color: #fff;

	/* Every dimension is em-based, so font-size alone scales the whole badge. */
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	white-space: nowrap;

	cursor: pointer;
	user-select: none;

	backdrop-filter: blur(2px);
	transition: width .25s ease, background-color .15s ease;
}

/*
 * --ai-prov-width is measured per badge in JS and matches the expanded content
 * exactly. Animating towards a larger ceiling would finish the visible motion
 * early and leave the rest of the duration idle, which reads as a stutter.
 *
 * Expands only from the badge itself, never from hovering the image.
 */
.ai-prov-badge:hover,
.ai-prov-badge.is-open {
	width: var(--ai-prov-width, 9em);
}

.ai-prov-badge__short,
.ai-prov-badge__long {
	position: absolute;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: opacity .2s ease;
}

.ai-prov-badge__long {
	padding: 0 .8em;
	opacity: 0;
}

.ai-prov-badge:hover .ai-prov-badge__short,
.ai-prov-badge.is-open .ai-prov-badge__short {
	opacity: 0;
}

.ai-prov-badge:hover .ai-prov-badge__long,
.ai-prov-badge.is-open .ai-prov-badge__long {
	opacity: 1;
}

/*
 * Transient state used only while JS measures the expanded width: the long label
 * goes back into flow so the badge can report its natural content width.
 */
.ai-prov-badge.is-measuring {
	width: max-content;
	transition: none;
}

.ai-prov-badge.is-measuring .ai-prov-badge__short {
	display: none;
}

.ai-prov-badge.is-measuring .ai-prov-badge__long {
	position: static;
}

/*
 * Not shrunk further on small screens: Art. 50(5) requires the disclosure to stay
 * clearly perceivable, and the EU guidance asks for a "clearly visible size".
 */
@media (max-width: 480px) {
	.ai-prov-badge {
		right: .35em;
		bottom: .35em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ai-prov-badge,
	.ai-prov-badge__short,
	.ai-prov-badge__long {
		transition: none;
	}
}