/* AI Reparatie-assistent - huisstijl: primary #0e5aa4, donker #0a3f74.
   V2: leesbaarheid gaat boven subtiliteit (feedback na browsertest) - grotere tekst,
   meer contrast, bredere desktop-drawer, geen piepkleine labels.
   2026-08-14: contrast-hardening (Kees meldde zwarte tekst op blauw ergens in de widget,
   niet reproduceerbaar via statische CSS-analyse - het thema/WoodMart-CSS injecteert geen
   aantoonbare conflicterende regel, maar zonder browser kan een cascade-conflict niet 100%
   uitgesloten worden). Elke tekst-op-gekleurde-achtergrond-combinatie hieronder krijgt daarom
   een EXPLICIETE, !important-beschermde kleur i.p.v. te vertrouwen op inheritance vanaf een
   ouder-element - garandeert correct contrast ongeacht een eventuele thema-cascade-conflict. */

#gsm-ai-assistant-root {
	--gsm-ai-primary: var(--wd-primary-color, #0e5aa4);
	--gsm-ai-primary-dark: #0a3f74;
	--gsm-ai-bg: #ffffff;
	--gsm-ai-border: #dde4ee;
	--gsm-ai-text: #14283d;
	--gsm-ai-text-muted: #48566b;
	--gsm-ai-radius: 16px;
	position: fixed;
	z-index: 99990;
	right: 20px;
	bottom: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#gsm-ai-assistant-root.gsm-ai-hidden { display: none; }
#gsm-ai-assistant-root * { box-sizing: border-box; }

.gsm-ai-fab {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(135deg, var(--gsm-ai-primary), var(--gsm-ai-primary-dark));
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 14px 20px 14px 16px;
	box-shadow: 0 6px 22px rgba(10, 63, 116, 0.32);
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	transition: transform .15s ease, box-shadow .15s ease;
}
.gsm-ai-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(10, 63, 116, 0.38); }
.gsm-ai-fab-icon { display: inline-flex; color: #fff !important; }
.gsm-ai-fab-label { color: #fff !important; }
.gsm-ai-fab[aria-expanded="true"] { display: none; }

.gsm-ai-panel {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 440px;
	max-width: calc(100vw - 32px);
	height: min(660px, calc(100vh - 100px));
	background: var(--gsm-ai-bg);
	border-radius: var(--gsm-ai-radius);
	box-shadow: 0 16px 48px rgba(10, 63, 116, 0.26);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--gsm-ai-border);
}
.gsm-ai-panel[hidden] { display: none; }

.gsm-ai-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	background: linear-gradient(135deg, var(--gsm-ai-primary), var(--gsm-ai-primary-dark));
	color: #fff;
	flex-shrink: 0;
}
.gsm-ai-panel-header h2 { margin: 0; font-size: 18px; font-weight: 700; color: #fff !important; }

.gsm-ai-transparency-label {
	margin: 0;
	padding: 8px 18px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--gsm-ai-text-muted);
	background: #eef2f9;
	border-bottom: 1px solid var(--gsm-ai-border);
	flex-shrink: 0;
}
.gsm-ai-close {
	background: rgba(255,255,255,.18);
	border: none;
	color: #fff !important;
	width: 32px; height: 32px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}
.gsm-ai-close:hover { background: rgba(255,255,255,.3); }

.gsm-ai-messages {
	flex: 1;
	overflow-y: auto;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: #f4f7fb;
}

.gsm-ai-msg { max-width: 92%; font-size: 15.5px; line-height: 1.55; }
/* Expliciete kleur op de <p> zelf (niet alleen op de container) - de tekst zit altijd in een
   <p>, en een eventuele thema-regel die rechtstreeks op <p> target wint anders van inheritance. */
.gsm-ai-msg p { margin: 0; color: inherit !important; }
.gsm-ai-msg-bot {
	align-self: flex-start;
	background: #ffffff !important;
	border: 1px solid var(--gsm-ai-border);
	color: var(--gsm-ai-text) !important;
	padding: 12px 15px;
	border-radius: 14px 14px 14px 3px;
	box-shadow: 0 1px 3px rgba(20, 40, 61, 0.06);
}
.gsm-ai-msg-user {
	align-self: flex-end;
	background: var(--gsm-ai-primary) !important;
	color: #ffffff !important;
	padding: 12px 15px;
	border-radius: 14px 14px 3px 14px;
	font-weight: 500;
}
.gsm-ai-msg-typing { align-self: flex-start; color: var(--gsm-ai-text-muted) !important; font-size: 14.5px; font-style: italic; }

.gsm-ai-quick-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; }
.gsm-ai-chip {
	background: #ffffff !important;
	border: 1.5px solid var(--gsm-ai-primary);
	color: var(--gsm-ai-primary) !important;
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.gsm-ai-chip:hover { background: var(--gsm-ai-primary) !important; color: #fff !important; }

.gsm-ai-input-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border-top: 1px solid var(--gsm-ai-border);
	flex-shrink: 0;
	background: #fff;
}
.gsm-ai-input-row input {
	flex: 1;
	border: 1.5px solid var(--gsm-ai-border);
	border-radius: 999px;
	padding: 12px 16px;
	font-size: 15.5px;
	color: var(--gsm-ai-text) !important;
	background: #ffffff !important;
	outline: none;
}
.gsm-ai-input-row input:focus { border-color: var(--gsm-ai-primary); }
.gsm-ai-send {
	background: var(--gsm-ai-primary) !important;
	color: #fff !important;
	border: none;
	width: 44px; height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}
.gsm-ai-send:hover { background: var(--gsm-ai-primary-dark) !important; }

.gsm-ai-disclaimer {
	font-size: 11.5px;
	color: #7a8aa0;
	text-align: center;
	margin: 0;
	padding: 7px 12px 11px;
	background: #fff;
}

/* Productkaarten in de chat - ruimer, niet proppen */
.gsm-ai-product-card {
	display: flex;
	gap: 12px;
	background: #ffffff;
	border: 1px solid var(--gsm-ai-border);
	border-radius: 12px;
	padding: 12px;
	align-items: center;
	text-decoration: none;
	color: var(--gsm-ai-text);
	margin-top: 8px;
}
.gsm-ai-product-card img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #f4f7fb; }
.gsm-ai-product-card-info { flex: 1; min-width: 0; }
.gsm-ai-product-card-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; line-height: 1.35; color: var(--gsm-ai-text); }
.gsm-ai-product-card-price { font-size: 15px; font-weight: 700; color: var(--gsm-ai-primary); }
.gsm-ai-product-card-stock { font-size: 12.5px; display: block; margin-top: 2px; }
.gsm-ai-product-card-stock.in-stock { color: #187a41; font-weight: 600; }
.gsm-ai-product-card-stock.out-stock { color: #b5342a; font-weight: 600; }
.gsm-ai-product-card-cta {
	font-size: 12.5px;
	font-weight: 700;
	color: #fff !important;
	background: var(--gsm-ai-primary) !important;
	border-radius: 999px;
	padding: 7px 13px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Reparatie-info blok */
.gsm-ai-repair-info {
	background: #ffffff;
	border: 1px solid var(--gsm-ai-border);
	border-radius: 12px;
	padding: 13px 15px;
	font-size: 14.5px;
	line-height: 1.5;
	margin-top: 8px;
	color: var(--gsm-ai-text);
}
.gsm-ai-repair-difficulty {
	display: inline-block;
	font-weight: 700;
	border-radius: 999px;
	padding: 5px 13px;
	font-size: 13px;
	margin-bottom: 8px;
}
.gsm-ai-repair-difficulty.EASY { background: #e1f5e8; color: #146c37; }
.gsm-ai-repair-difficulty.MEDIUM { background: #fef0d9; color: #935608; }
.gsm-ai-repair-difficulty.HARD { background: #fbe0dc; color: #a52a1f; }
.gsm-ai-repair-difficulty.SPECIALIST { background: #e8dcf9; color: #5b2c9e; }

/* Cart/checkout "Controleer mijn bestelling" (Fase 8) */
.gsm-ai-cart-check-banner {
	background: #ffffff;
	border: 1px solid #dde4ee;
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 20px;
}
.gsm-ai-cart-check-banner p { margin: 0 0 10px; font-size: 14.5px; color: #14283d; }
.gsm-ai-cart-check-btn {
	background: linear-gradient(135deg, var(--wd-primary-color, #0e5aa4), #0a3f74);
	color: #fff !important;
	border: none;
	border-radius: 999px;
	padding: 11px 20px;
	font-weight: 700;
	font-size: 14.5px;
	cursor: pointer;
}
.gsm-ai-cart-check-btn:hover { opacity: .92; }
.gsm-ai-cart-check-result {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	padding: 11px 13px;
	border-radius: 10px;
	background: #f4f7fb;
	border: 1px solid #dde4ee;
	color: #14283d;
}

/* Reparatie-service box op productpagina (Fase 6) */
.gsm-ai-repair-service-box {
	border: 1px solid #dde4ee;
	border-radius: 14px;
	padding: 16px 18px;
	margin: 20px 0;
	background: #f9fafc;
}
.gsm-ai-repair-service-box h4 { margin: 0 0 10px; font-size: 16px; color: #14283d; }
.gsm-ai-repair-explanation { font-size: 13.5px; color: #48566b; line-height: 1.5; margin: 0 0 12px; }
.gsm-ai-repair-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.gsm-ai-repair-option {
	display: flex; justify-content: space-between; align-items: center;
	background: #fff; border: 1px solid #dde4ee; border-radius: 10px;
	padding: 10px 14px; font-size: 14px; color: #14283d;
}
.gsm-ai-repair-option-selected { border-color: var(--wd-primary-color, #0e5aa4); border-width: 1.5px; }
.gsm-ai-repair-price { font-weight: 700; color: var(--wd-primary-color, #0e5aa4); }
.gsm-ai-repair-price-quote { font-style: italic; color: #7a8aa0; font-size: 13px; }
.gsm-ai-repair-note, .gsm-ai-repair-estimate-note { font-size: 12px; color: #7a8aa0; margin: 6px 0 0; }

/* Mobiel: fullscreen bottom sheet i.p.v. floating panel, leesbaar */
@media (max-width: 600px) {
	#gsm-ai-assistant-root { right: 14px; bottom: 14px; }
	.gsm-ai-panel {
		right: 0; left: 0; bottom: 0;
		width: 100%; max-width: 100%;
		height: 90vh;
		border-radius: 18px 18px 0 0;
	}
	.gsm-ai-fab-label { display: none; }
	.gsm-ai-fab { padding: 15px; }
	.gsm-ai-msg { font-size: 16px; }
	.gsm-ai-panel-header h2 { font-size: 17px; }
	.gsm-ai-input-row input { font-size: 16px; } /* voorkomt iOS auto-zoom bij focus */
	/* Opdracht-aanvulling §2 - producttekst mag niet afgekapt worden, prijs/voorraad los
	   leesbaar, knoppen niet uit de kaart laten lopen, en de vaste invoerbalk (buiten de
	   scrollbare .gsm-ai-messages, zie hierboven) mag nooit content bedekken. */
	.gsm-ai-product-card { flex-wrap: wrap; }
	.gsm-ai-product-card-info { min-width: 100%; order: 2; }
	.gsm-ai-product-card-title { white-space: normal; overflow-wrap: break-word; }
	.gsm-ai-product-card-cta { order: 3; margin-top: 8px; }
	.gsm-ai-messages { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
	.gsm-ai-input-row { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Opdracht-aanvulling §3 - "Zelf repareren" / "Liever laten repareren?"-blokken */
.gsm-ai-self-repair-block, .gsm-ai-service-offer-block {
	background: #ffffff;
	border: 1px solid var(--gsm-ai-border);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.55;
	margin-top: 8px;
	color: var(--gsm-ai-text);
}
.gsm-ai-self-repair-block h4, .gsm-ai-service-offer-block h4 { margin: 0 0 8px; font-size: 15px; color: #14283d; }
.gsm-ai-self-repair-block p, .gsm-ai-service-offer-block p { margin: 6px 0; }
.gsm-ai-self-repair-warning {
	background: #fef0d9; color: #935608; border-radius: 8px; padding: 8px 10px; font-weight: 600;
}
.gsm-ai-self-repair-warranty { font-size: 12.5px; color: #7a8aa0; }
.gsm-ai-price-breakdown { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.gsm-ai-price-breakdown td { padding: 5px 0; }
.gsm-ai-price-breakdown td:last-child { text-align: right; font-weight: 600; }
.gsm-ai-price-breakdown tr.gsm-ai-price-total td {
	border-top: 1.5px solid var(--gsm-ai-border); padding-top: 8px; font-weight: 700; font-size: 15px; color: var(--gsm-ai-primary);
}
.gsm-ai-service-equipment, .gsm-ai-service-specialist { font-size: 12.5px; color: #48566b; }
.gsm-ai-service-cta {
	display: inline-block; margin-top: 10px;
	background: var(--gsm-ai-primary) !important; color: #fff !important;
	border-radius: 999px; padding: 11px 20px; font-weight: 700; font-size: 14.5px;
	text-decoration: none; text-align: center;
}
.gsm-ai-service-cta:hover { background: var(--gsm-ai-primary-dark) !important; }