/**
 * AI-Prompter front-end styles.
 *
 * Minimal classes for the [output_ai_prompter] icon row. Sizing approximates
 * the Docebo "Ask AI" footer block (icons roughly 40px tall in a horizontal
 * row, wrapping on small screens). Adjust the height and gap values to taste.
 */

.aip-outer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
}

.aip-wrapper {
	display: inline-flex;
}

.aip-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.aip-icon {
	display: block;
	width: 40px;
	height: 40px;
}

footer .aip-gpt .aip-icon, 
footer .aip-perplexity .aip-icon, 
footer .aip-grok .aip-icon { filter: invert(0.5);} 

/* Admin: provider icon shown inside each settings field <label>. This class
   only appears on the settings page (where this stylesheet is also enqueued),
   never on the front end. */
.aip-label-icon {
	width: auto;
	height: 20px;
	vertical-align: middle;
	margin-right: 8px;
}

/* Mobile: tighten spacing and shrink icons slightly, mirroring Docebo. */
@media ( max-width: 600px ) {
	.aip-outer {
		gap: 12px;
	}

	.aip-icon {
		height: 32px;
	}
}