/* ==========================================================================
   Ichor GEO Companion — widget styles
   Theme-agnostic by default: colors/fonts inherit from the host theme
   unless a site owner overrides them in Settings → Ichor GEO Companion.
   ========================================================================== */

.igc-widget {
	/* Fallback values — overridden per-site via inline custom properties. */
	--igc-accent: #2f8f7e;
	--igc-radius: 14px;
	--igc-text: inherit;
	--igc-bg: transparent;
	--igc-border: #e2e2e2;

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 24px 0;
	color: var(--igc-text);
	font-size: clamp(13px, 2.6vw, 15px);
	line-height: 1.4;
}

.igc-widget * {
	box-sizing: border-box;
}

.igc-widget a {
	color: inherit;
}

/* Font source ------------------------------------------------------------ */
.igc-font-inherit {
	font-family: inherit;
}

.igc-font-system {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Style mode: minimal (blend) vs card (self-contained) ------------------- */
.igc-style-minimal {
	--igc-bg: transparent;
	padding: 0;
}

.igc-style-card {
	--igc-bg: #fff;
	background: var(--igc-bg);
	border: 1px solid var(--igc-border);
	border-radius: var(--igc-radius);
	padding: clamp(14px, 3vw, 20px);
}

/* Rows --------------------------------------------------------------------*/
.igc-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 12px;
}

.igc-row-llms {
	justify-content: space-between;
}

.igc-style-minimal .igc-row-llms {
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--igc-border);
}

.igc-style-card .igc-row-llms {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--igc-border);
}

.igc-heading {
	font-weight: 700;
	color: var(--igc-text);
	flex: 1 1 auto;
	min-width: 0;
}

.igc-llm-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* LLM buttons — min 44px touch target on every viewport ------------------ */
.igc-llm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border: 1px solid var(--igc-border);
	background: color-mix(in srgb, var(--igc-text) 4%, transparent);
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease;
	/* Normalizes appearance whether this renders as <a> or, in obfuscate
	   mode, a real <button> (used there so no href ever exists in the DOM
	   for a crawler to find). Harmless no-ops on an <a>. */
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	margin: 0;
	padding: 0;
}

.igc-shape-rounded .igc-llm-btn {
	border-radius: 10px;
}

.igc-shape-circle .igc-llm-btn {
	border-radius: 50%;
}

.igc-shape-square .igc-llm-btn {
	border-radius: 0;
}

.igc-llm-btn:hover,
.igc-llm-btn:focus-visible {
	transform: translateY(-1px);
	border-color: var(--igc-accent);
}

.igc-llm-btn .dashicons {
	color: var(--igc-text);
	width: 26px;
	height: 26px;
	font-size: 26px;
}

.igc-llm-icon {
	width: 26px;
	height: 26px;
	display: block;
}

/* Preferred source row ----------------------------------------------------*/
/* CSS Grid rather than flexbox here deliberately — grid rows are always
   sized to their content, so there's no equivalent of the flex-basis/
   column-direction interaction that caused the mobile gap before. Desktop
   is one row (icon | label | button); mobile redefines the same areas into
   two rows (icon+label | button) with zero extra logic needed. */
.igc-row-preferred {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "icon label btn";
	align-items: center;
	column-gap: 12px;
	row-gap: 10px;
	background: color-mix(in srgb, var(--igc-accent) 8%, transparent);
	border-radius: calc(var(--igc-radius) * 0.6);
	padding: 10px 14px;
}

.igc-style-minimal .igc-row-preferred {
	border-radius: 10px;
}

.igc-google-icon {
	grid-area: icon;
	width: 26px;
	height: 26px;
	display: block;
}

.igc-preferred-label {
	grid-area: label;
	min-width: 0;
	color: var(--igc-text);
}

.igc-preferred-btn {
	grid-area: btn;
	background: var(--igc-accent);
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9em;
	padding: 10px 16px;
	white-space: nowrap;
	transition: opacity 0.15s ease;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	cursor: pointer;
	margin: 0;
}

.igc-shape-rounded .igc-preferred-btn,
.igc-shape-square .igc-preferred-btn {
	border-radius: calc(var(--igc-radius) * 0.5);
}

.igc-shape-circle .igc-preferred-btn {
	border-radius: 999px;
}

.igc-preferred-btn:hover,
.igc-preferred-btn:focus-visible {
	opacity: 0.88;
}

/* ==========================================================================
   Responsive — mobile-first breakpoints
   ========================================================================== */

/* Tablets and small laptops */
@media (max-width: 600px) {
	.igc-row-llms {
		gap: 10px 8px;
	}
}

/* Phones: stack heading above buttons, stack preferred-source row */
@media (max-width: 480px) {
	.igc-row-llms {
		flex-direction: column;
		align-items: flex-start;
	}

	.igc-llm-buttons {
		width: 100%;
	}

	.igc-row-preferred {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"icon label"
			"btn  btn";
	}

	.igc-preferred-btn {
		width: 100%;
		text-align: center;
	}
}

/* Very narrow viewports (small phones, embedded/iframe contexts) */
@media (max-width: 340px) {
	.igc-llm-btn {
		width: 40px;
		height: 40px;
	}
}

/* ==========================================================================
   Admin settings screen (not part of the front-end widget footprint)
   ========================================================================== */
.igc-settings-wrap .igc-llm-table {
	margin-bottom: 6px;
}

.igc-settings-wrap .igc-llm-table input[type="text"] {
	width: 100%;
}

.igc-admin-preview {
	max-width: 640px;
	margin-top: 10px;
}

.igc-color-field {
	width: 100px !important;
}