/* ============================================================
   Arie — chat-assistent (port van de livecom-rebuild chat-CSS,
   aangepast op de creatief-verslag design-tokens).
   ============================================================ */

.cv-sr-only {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* de chatkaart */
.cv-arie {
	display: flex; flex-direction: column;
	background: #fff; border-radius: 20px; overflow: hidden;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.cv-arie-head {
	display: flex; align-items: center; gap: 0.75rem;
	padding: 0.9rem 1.1rem; border-bottom: 1px solid #eee; background: #fff;
}

.cv-arie-head-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1 1 auto; min-width: 0; }
.cv-arie-head-text strong { font-size: 0.95rem; color: var(--color-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-arie-status { font-size: 0.78rem; color: #16a34a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-arie-status::before {
	content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: #16a34a; margin-right: 5px; vertical-align: middle;
}

/* Arie — gezicht van de AI (mannetje in oranje rondje) */
.cv-arie-avatar {
	flex: 0 0 auto;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--color-primary);
	display: inline-flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.cv-arie-avatar img {
	height: 32px; width: auto; display: block;
	filter: brightness(0) invert(1);
}

.cv-arie-close {
	display: inline-flex; flex: 0 0 auto; margin-left: 0.4rem;
	width: 30px; height: 30px; border: none; border-radius: 50%;
	background: #f0f0f3; color: #555; cursor: pointer; align-items: center; justify-content: center;
}
.cv-arie-close:hover { background: #e3e3e8; }

.cv-arie-log {
	flex: 1 1 auto; min-height: 0; overflow-y: auto;
	padding: 1.1rem; display: flex; flex-direction: column; gap: 0.6rem;
	background: #f7f8fa;
}

.cv-arie-msg {
	max-width: 85%; padding: 0.65rem 0.9rem; border-radius: 16px;
	font-size: 0.95rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
}
.cv-arie-msg.is-bot {
	align-self: flex-start; background: #fff; color: #2c2c34;
	border: 1px solid #ececec; border-bottom-left-radius: 5px;
}
.cv-arie-msg.is-user {
	align-self: flex-end; background: var(--color-primary); color: #fff;
	border-bottom-right-radius: 5px;
}
.cv-arie-msg.is-typing { display: inline-flex; gap: 4px; align-items: center; }
.cv-arie-msg.is-typing span {
	width: 7px; height: 7px; border-radius: 50%; background: #c2c6cf;
	animation: cv-arie-typing 1s infinite ease-in-out;
}
.cv-arie-msg.is-typing span:nth-child(2) { animation-delay: 0.15s; }
.cv-arie-msg.is-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cv-arie-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* snelkeuze-chips */
.cv-arie-chips {
	display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1rem 1.1rem 0.9rem;
	background: #fff;
}
.cv-arie-chips[hidden] { display: none; }
.cv-arie-chips button {
	border: 1px solid #e0e0e0; background: #fff; color: var(--color-dark);
	font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: 999px;
	cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.cv-arie-chips button:hover { border-color: var(--color-primary); background: #fff6ef; color: var(--color-primary-dark); }

/* actieknoppen (terugbellen / mail / primair) */
.cv-arie-actions { padding: 0.85rem 1.1rem; background: #fff; border-top: 1px solid #eee; }
.cv-arie-actions[hidden] { display: none; }
.cv-arie-actions-label {
	display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
	color: #6b6f76; margin-bottom: 0.5rem;
}
.cv-arie-actions-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cv-arie-actions-row button {
	flex: 1 1 auto; border: 1px solid #ffd2ad; background: #fff6ef; color: var(--color-primary-dark);
	font-size: 0.85rem; font-weight: 700; padding: 0.55rem 0.85rem; border-radius: 12px; cursor: pointer;
	transition: background 0.2s, border-color 0.2s, transform 0.2s;
	white-space: nowrap;
}
.cv-arie-actions-row button:hover {
	background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: translateY(-1px);
}
.cv-arie-action-primary {
	display: block; width: 100%; margin-top: 0.5rem;
	border: none; background: var(--color-primary); color: #fff;
	font-size: 0.92rem; font-weight: 700; padding: 0.7rem 1rem; border-radius: 12px;
	cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.cv-arie-action-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); }

/* invoerveld */
.cv-arie-form {
	display: flex; gap: 0.5rem; padding: 0.9rem 1.1rem 1.2rem; background: #fff; border-top: 1px solid #eee;
}
.cv-arie-form input {
	flex: 1; border: 1px solid #dcdee3; border-radius: 999px; padding: 0.7rem 1.1rem;
	font-size: 0.95rem; font-family: inherit; color: var(--color-dark); outline: none;
	transition: border-color 0.2s;
}
.cv-arie-form input:focus { border-color: var(--color-primary); }
.cv-arie-form button {
	flex: 0 0 auto; width: 44px; height: 44px; border: none; border-radius: 50%;
	background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; transition: transform 0.2s;
}
.cv-arie-form button:hover { transform: scale(1.06); }

/* vaste secties niet laten krimpen; alleen de log scrollt → invoerveld
   wordt nooit afgeknipt als de actieknoppen verschijnen */
.cv-arie-head,
.cv-arie-chips,
.cv-arie-actions,
.cv-arie-form { flex-shrink: 0; }

/* standalone: verborgen tot 'ie zwevend wordt geopend */
.cv-arie--standalone { display: none; }
.cv-arie--standalone.is-floating { display: flex; }

/* zwevend chatvenster */
.cv-arie.is-floating {
	position: fixed; right: 20px; bottom: 20px;
	width: min(380px, calc(100vw - 32px));
	height: auto; max-height: min(560px, 80vh);
	z-index: 9999; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
	animation: cv-arie-pop 0.18s ease-out;
}
@keyframes cv-arie-pop { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* in het zwevende venster moet de log een minimumhoogte hebben */
.cv-arie.is-floating .cv-arie-log { min-height: 220px; }

/* launcher-pill */
.cv-arie-launcher {
	position: fixed; right: 20px; bottom: 20px; z-index: 9998;
	display: inline-flex; align-items: center; gap: 0.8rem;
	background: var(--color-dark); color: #fff; border: none; border-radius: 999px;
	padding: 0.7rem 1.55rem 0.7rem 0.7rem; cursor: pointer;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
	animation: cv-arie-launcher-in 0.25s ease-out;
	transition: transform 0.2s, box-shadow 0.2s;
	font-family: inherit;
}
.cv-arie-launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42); }
.cv-arie-launcher[hidden] { display: none; }
@keyframes cv-arie-launcher-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

.cv-arie-launcher-ic {
	display: inline-flex; align-items: center; justify-content: center;
	width: 50px; height: 50px; border-radius: 50%;
	background: var(--color-primary); color: #fff; flex: 0 0 auto;
}
.cv-arie-launcher-ic img { width: auto; height: 36px; display: block; filter: brightness(0) invert(1); }

.cv-arie-launcher-body { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.cv-arie-launcher-body strong { font-size: 1.06rem; font-weight: 700; }
.cv-arie-launcher-status { font-size: 0.8rem; color: #b9f5cd; display: inline-flex; align-items: center; }
.cv-arie-launcher-status::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; margin-right: 5px;
	animation: cv-arie-pulse 1.8s infinite;
}
@keyframes cv-arie-pulse {
	0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
	70% { box-shadow: 0 0 0 7px rgba(46, 204, 113, 0); }
	100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

@media (max-width: 600px) {
	.cv-arie-launcher { bottom: 12px; right: 12px; }
	.cv-arie.is-floating { bottom: 12px; right: 12px; left: 12px; width: auto; max-height: 78vh; }
	.cv-arie-launcher-body strong { font-size: 0.9rem; }
}