/* ============================================================
   ac-conversational.css — sectie 3 van /ai-chatbot/.
   Bouwt op widgets/shared/bconnect-ac.css (handle `bconnect-ac`).
   Bron: upgrade-aichatbot.css, "SECTIE 3 — CONVERSATIONAL AI".
   ============================================================ */

.ac-conv-grid { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }

/* Gridkinderen zonder eigen regels in de bron; expliciet gemaakt zodat ze
   niet van een Elementor-kolom een display of width erven. */
.ac-conv-text { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
.ac-conv-visual { display: block; width: 100%; min-width: 0; box-sizing: border-box; }

.ac-conv-compare { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: 1fr 1fr; gap: 16px; }
.ac-cmp { box-sizing: border-box; background: #fff; border: 1px solid rgba(20, 20, 100, .08); border-radius: 16px; padding: 18px 18px 20px; box-shadow: 0 6px 18px rgba(20, 20, 100, .05); }
.ac-cmp.is-good { border-color: rgba(35, 1, 251, .2); box-shadow: 0 14px 36px rgba(35, 1, 251, .1); }
.ac-cmp-label { font-family: var(--font-head); font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-soft); display: block; margin-bottom: 14px; }
.ac-cmp.is-good .ac-cmp-label { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ac-cmp-menu { display: flex; flex-direction: column; gap: 8px; }
.ac-cmp-opt { font-size: 13.5px; color: var(--c-navy); background: #F4F5FA; border: 1px solid rgba(20, 20, 100, .08); border-radius: 10px; padding: 9px 12px; }
.ac-cmp-note { font-size: 12.5px; line-height: 1.45; color: var(--c-text-muted); margin: 14px 0 0; }
.ac-cmp-chat { display: flex; flex-direction: column; gap: 10px; }
.ac-cmp-bub { font-size: 13.5px; line-height: 1.45; border-radius: 14px; padding: 10px 13px; max-width: 92%; }
.ac-cmp-bub.is-you { align-self: flex-end; background: var(--brand-gradient); color: #fff; }
.ac-cmp-bub.is-bot { align-self: flex-start; background: #F4F5FA; color: var(--c-navy); border: 1px solid rgba(20, 20, 100, .07); }

@media (max-width: 980px) {
	.ac-conv-grid { grid-template-columns: 1fr; gap: 32px; }
	.ac-conv-visual { order: -1; }
}
@media (max-width: 700px) {
	.ac-conv-compare { grid-template-columns: 1fr; }
}

/* ============================================================
   HARDENING

   Deze widget heeft geen <img>: de vergelijking is opgebouwde markup en
   het vinkje is een inline SVG. `.elementor img` raakt hier dus niets.
   Wel expliciet: het vinkje in `.ac-check` op display:block, zodat de
   grid-centrering niet van een geërfde inline-baseline afhangt.
   ============================================================ */
.elementor-widget-bconnect_ac_conversational .ac-check svg { display: block; box-sizing: border-box; width: 13px; height: 13px; }