/*
 * AI labelling (ieq/contao-foundation) - official "AI" label icon.
 *
 * Shows the official AI label (black disc, white "AI") on every <figure>
 * carrying the data-ai-generated attribute.
 *
 * The icon is embedded as a data URI (the encoded official
 * ai-label-black.svg), so the front end contains no asset URLs that would
 * reveal the bundle. The SVG source files for all variants are kept in the
 * package under resources/ai-labels/; a different variant can be
 * selected via contao_foundation.ai_marker.badge.icon or per page layout.
 *
 * Themes can still override the custom properties per selector, e.g. to use
 * a project-specific icon from the file manager:
 *
 *   figure[data-ai-generated='true'] {
 *       --ai-badge-icon: url('files/theme/img/mein-ki-icon.svg');
 *       --ai-badge-inset: auto 4px 4px auto;   (bottom-right)
 *       --ai-badge-size: 48px;
 *   }
 *
 * Note: the SVGs contain the official clear space around the disc, so the
 * visible icon is roughly 64% of the badge size. CSS comments do not nest,
 * so never put comment syntax inside this header.
 *
 * The default values below must stay in sync with src/AiImages/AiBadgeStyle.php.
 *
 * The machine-readable data attributes (data-ai-generated, data-ai-label,
 * data-ai-tool) are rendered independently of this stylesheet.
 */

:root {
    --ai-badge-icon: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iQ2FscXVlXzEiIGRhdGEtbmFtZT0iQ2FscXVlIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU2Ni45MyA1NjYuOTMiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yNzIuMDMsMTAwLjcyYzEwMC45MiwwLDE4Mi43NCw4MS44MiwxODIuNzQsMTgyLjc1cy04MS44MiwxODIuNzQtMTgyLjc0LDE4Mi43NC0xODIuNzUtODEuODItMTgyLjc1LTE4Mi43NCw4MS44Mi0xODIuNzUsMTgyLjc1LTE4Mi43NSIvPgogIDxnPgogICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTcwLjc5LDM1My43NGMtMS4wOCwwLTIuMDUtLjQzLTIuOTItMS4zMS0uODgtLjg3LTEuMzEtMS44NC0xLjMxLTIuOTIsMC0uNjcuMDctMS4yNy4yLTEuODFsNDcuMzQtMTI5LjMyYy40LTEuNDgsMS4yNC0yLjc5LDIuNTItMy45MywxLjI3LTEuMTQsMy4wNS0xLjcxLDUuMzQtMS43MWgyOS44MWMyLjI4LDAsNC4wNi41Nyw1LjM0LDEuNzEsMS4yNywxLjE0LDIuMTEsMi40NSwyLjUyLDMuOTNsNDcuMTQsMTI5LjMyYy4yNy41NC40LDEuMTQuNCwxLjgxLDAsMS4wOC0uNDQsMi4wNS0xLjMxLDIuOTJzLTEuOTEsMS4zMS0zLjEyLDEuMzFoLTI0Ljc4Yy0yLjAxLDAtMy41Mi0uNS00LjUzLTEuNTEtMS4wMS0xLjAxLTEuNjUtMS45MS0xLjkxLTIuNzJsLTcuODYtMjAuNTVoLTUzLjc4bC03LjY1LDIwLjU1Yy0uMjcuODEtLjg4LDEuNzEtMS44MSwyLjcyLS45NCwxLjAxLTIuNTUsMS41MS00LjgzLDEuNTFoLTI0Ljc4Wk0yMTguMTMsMjk5Ljk2aDM3LjQ3bC0xOC45My01My4xOC0xOC41Myw1My4xOFoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTMyOC4xMSwzNTMuNzRjLTEuNDgsMC0yLjY5LS40Ny0zLjYzLTEuNDEtLjk0LS45NC0xLjQxLTIuMTUtMS40MS0zLjYzdi0xMzAuOTNjMC0xLjQ4LjQ3LTIuNjgsMS40MS0zLjYzczIuMTUtMS40MSwzLjYzLTEuNDFoMjYuOTljMS40OCwwLDIuNjguNDcsMy42MywxLjQxLjk0Ljk0LDEuNDEsMi4xNSwxLjQxLDMuNjN2MTMwLjkzYzAsMS40OC0uNDcsMi42OS0xLjQxLDMuNjMtLjk0Ljk0LTIuMTUsMS40MS0zLjYzLDEuNDFoLTI2Ljk5WiIvPgogIDwvZz4KPC9zdmc+");
    --ai-badge-size: 60px;
    --ai-badge-inset: auto auto 4px 4px; /* top | right | bottom | left */
}

figure[data-ai-generated='true'] {
    position: relative;
}

figure[data-ai-generated='true']::after {
    content: '';
    position: absolute;
    inset: var(--ai-badge-inset);
    z-index: 2;
    width: var(--ai-badge-size);
    height: var(--ai-badge-size);
    background: var(--ai-badge-icon) no-repeat center / contain;
    pointer-events: none;
}

/* Standalone badge, e.g. rendered by the ai_badge insert tag. The span is
   empty (accessible name via aria-label), so without this stylesheet
   nothing visible is rendered. */
.ai-badge {
    display: inline-block;
    width: var(--ai-badge-size);
    height: var(--ai-badge-size);
    background: var(--ai-badge-icon) no-repeat center / contain;
    vertical-align: middle;
}