/* ============================================================
   dk-ai.css — zone 4 van /digitale-klantenservice/.
   1-op-1 uit de Claude Design-export van 01-09-2026
   (upgrade-klantenservice.css blok "ZONE 4 — AI-CHATBOT", plus de
   .chat-mock-basis uit het designsysteem-blok van diezelfde export).
   Gedeelde dk-basis: widgets/shared/bconnect-dk.css.

   HERNOEMD T.O.V. DE BRON
   -----------------------
   De bron gebruikt de kale classes .chat-mock, .avatar, .who,
   .status en .bubble uit het designsysteem. Dat component bestaat
   niet in dit thema (de hero heeft .hv-win/.hhv-chat, iets anders),
   dus het is hier gekopieerd — maar onder .dk-chat-*. Kale namen
   als .avatar of .bubble los in een thema zetten botst met de
   eerste de beste andere widget. Ook de keyframes zijn hernoemd:
   chatFloat -> dkChatFloat, bubbleIn -> dkBubbleIn, pulse -> dkPulse.

   De tokens --chat-avatar en --chat-bot-bg bestaan niet in
   tokens.css en staan daarom hier. --c-success bestaat wel.
   ============================================================ */

.dk-ai-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 40px;
	align-items: center;
	margin-top: clamp(34px, 4vw, 52px);
}
.dk-ai-blocks { display: flex; flex-direction: column; gap: 16px; max-width: 680px; width: 100%; }
.dk-ai-card {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid rgba(20, 20, 100, .08);
	border-radius: 16px;
	box-shadow: 0 6px 18px rgba(20, 20, 100, .05);
	transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.dk-ai-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 20, 100, .1); }
.dk-ai-card h3 { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 16.5px; line-height: 1.25; color: var(--c-navy); margin: 0 0 6px; }
.dk-ai-card p { font-size: 14px; line-height: 1.5; color: var(--c-text-muted); margin: 0; }

/* ============================================================
   CHATVENSTER — kopie van .chat-mock, hernoemd naar .dk-chat-*
   ============================================================ */

.dk-chat-wrap { width: 100%; min-width: 0; }
.dk-chat {
	/* Lokale tokens: deze twee bestaan niet in tokens.css. De avatar
	   wordt per instantie overschreven met een inline --dk-chat-avatar. */
	--dk-chat-bot-bg: #ECEDFB;
	--dk-chat-avatar: #DDE1F2;

	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--c-white);
	border-radius: 26px;
	box-shadow:
		0 40px 80px -20px rgba(20, 20, 100, .35),
		0 16px 30px -16px rgba(170, 2, 142, .16),
		0 0 0 1px rgba(20, 20, 100, .06);
	overflow: hidden;
	max-width: 400px;
	margin-left: 0;
	animation: dkChatFloat 6s ease-in-out infinite;
}
@keyframes dkChatFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes dkBubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dkPulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(57, 181, 74, .18); }
	50%      { box-shadow: 0 0 0 6px rgba(57, 181, 74, .05); }
}

/* ---- titelbalk ---------------------------------------------- */
.dk-chat-head { background: var(--c-navy); color: #fff; padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.dk-chat-controls { display: flex; align-items: center; justify-content: space-between; }
.dk-chat-controls .dk-cc-left,
.dk-chat-controls .dk-cc-right { display: flex; align-items: center; gap: 16px; }
.dk-chat-controls span > svg { width: 18px; height: 18px; display: block; color: rgba(255, 255, 255, .92); }
.dk-chat-ident { display: flex; align-items: center; gap: 11px; }
.dk-chat-ident .dk-chat-avatar {
	width: 42px;
	height: 42px;
	border-radius: 999px;
	flex: none;
	display: block;
	background: var(--dk-chat-avatar);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}
.dk-chat-who { font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: -.01em; line-height: 1.1; }
.dk-chat-status { font-size: 13px; font-weight: 500; opacity: .95; display: inline-flex; align-items: center; gap: 8px; margin-top: 3px; }
.dk-chat-status::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--c-success);
	box-shadow: 0 0 0 3px rgba(57, 181, 74, .25);
	animation: dkPulse 2.4s var(--ease) infinite;
}

/* ---- gesprek ------------------------------------------------ */
.dk-chat-body { background: var(--c-white); padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.dk-chat-row { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; animation: dkBubbleIn .45s var(--ease) both; }
.dk-chat-row.is-bot { align-self: flex-start; }
.dk-chat-row.is-user { align-self: flex-end; flex-direction: row-reverse; }
.dk-chat-row .dk-chat-avatar {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	flex: none;
	display: block;
	background: var(--dk-chat-avatar);
	align-self: flex-start;
	margin-top: 2px;
}
.dk-chat-row:nth-child(1) { animation-delay: 0s; }
.dk-chat-row:nth-child(2) { animation-delay: .12s; }
.dk-chat-row:nth-child(3) { animation-delay: .24s; }
.dk-chat-row:nth-child(4) { animation-delay: .36s; }
.dk-chat-row:nth-child(5) { animation-delay: .48s; }
.dk-chat-row:nth-child(6) { animation-delay: .60s; }
.dk-chat-col { display: flex; flex-direction: column; min-width: 0; }
.dk-chat-row.is-user .dk-chat-col { align-items: flex-end; }
.dk-chat-bubble { padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.4; max-width: 100%; }
.dk-chat-bubble.is-bot { background: var(--dk-chat-bot-bg); color: var(--c-navy); border-bottom-left-radius: 6px; }
.dk-chat-bubble.is-user { background: var(--c-navy); color: #fff; border-bottom-right-radius: 6px; }
.dk-chat-time { font-size: 11.5px; color: var(--c-text-soft); margin-top: 5px; padding: 0 4px; }

.dk-chat-done {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-navy);
	background: rgba(57, 181, 74, .1);
	border: 1px solid rgba(57, 181, 74, .24);
	border-radius: 12px;
	padding: 10px 12px;
	align-self: stretch;
}
.dk-chat-done-ic { width: 20px; height: 20px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--c-success); color: #fff; }
.dk-chat-done-ic svg { width: 12px; height: 12px; }

/* ---- composer (decoratief) ---------------------------------- */
.dk-chat-foot { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--c-white); }
.dk-chat-pill { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--c-navy); border-radius: 999px; padding: 9px 14px; }
.dk-chat-pill-text { flex: 1; min-width: 0; font-size: 14px; color: var(--c-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-chat-pill-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.dk-chat-pill-actions svg { width: 19px; height: 19px; display: block; color: var(--c-navy); }
.dk-chat-powered { text-align: center; font-size: 12px; color: var(--c-text-soft); font-weight: 500; }
.dk-chat-powered b { color: var(--c-text-muted); font-weight: 700; }

/* ---- rustige beweging --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.dk-chat { animation: none !important; }
	.dk-chat-row { animation: none !important; opacity: 1; }
	.dk-chat-status::before { animation: none !important; }
}

/* ---- responsive --------------------------------------------- */
@media (max-width: 1080px) {
	.dk-ai-grid { display: grid; grid-template-columns: 1fr; justify-items: center; }
	.dk-chat { margin: 0 auto; }
	.dk-ai-blocks { width: 100%; }
}

/* ===== HARDENING — gradient/kleur tegen theme-resets ===== */
.elementor-widget-bconnect_dk_ai .accent {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	display: inline-block;
}
.elementor-widget-bconnect_dk_ai .dk-tile {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_dk_ai .dk-tile.bc-ic-img { background: none !important; }
/* De chatbel mag NIET de merkgradient krijgen: hij is navy tegen wit. */
.elementor-widget-bconnect_dk_ai .dk-chat-bubble.is-user { background: var(--c-navy) !important; color: #fff !important; }
.elementor-widget-bconnect_dk_ai .dk-chat-head { background: var(--c-navy) !important; color: #fff !important; }
.elementor-widget-bconnect_dk_ai .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_dk_ai .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}