/* ==========================================================================
   chatwolk-2.css (2/2) — kanalen, chatscherm, invoer, acties, mobiel.
   ========================================================================== */

/* ---------- Kanalen onderin het startscherm ---------- */
.kwdv-chatwolk .cw-kanalen { flex-shrink: 0; border-top: 1px solid var(--cw-grijs-border); background: var(--cw-wit); padding: 6px 8px; }
.kwdv-chatwolk .cw-kanaal {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	color: var(--cw-zwart);
	text-decoration: none;
	transition: background var(--cw-overgang);
}
.kwdv-chatwolk .cw-kanaal:hover { background: var(--cw-grijs-licht); color: var(--cw-zwart); }
.kwdv-chatwolk .cw-kanaal__icoon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--cw-grijs-licht); color: var(--cw-zwart); }
.kwdv-chatwolk .cw-kanaal--whatsapp .cw-kanaal__icoon { background: rgba(37, 211, 102, .16); color: #128C4A; }
.kwdv-chatwolk .cw-kanaal--email .cw-kanaal__icoon { background: var(--cw-accent-licht); color: var(--cw-accent-donker); }
.kwdv-chatwolk .cw-kanaal--telefoon .cw-kanaal__icoon { background: rgba(14, 20, 32, .08); color: var(--cw-zwart); }
.kwdv-chatwolk .cw-kanaal__label { flex: 1; font-size: 14px; font-weight: 600; }
.kwdv-chatwolk .cw-kanaal__pijl { color: var(--cw-grijs); flex-shrink: 0; display: grid; }

/* ---------- Chatscherm: kop ---------- */
.kwdv-chatwolk .cw-chat__kop {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: linear-gradient(135deg, var(--cw-accent) 0%, var(--cw-accent-donker) 100%);
	color: var(--cw-op-accent);
	flex-shrink: 0;
}
.kwdv-chatwolk .cw-chat__terug,
.kwdv-chatwolk .cw-chat__icoonknop {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	color: var(--cw-op-accent);
	display: grid;
	place-items: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--cw-overgang);
}
.kwdv-chatwolk .cw-chat__terug:hover,
.kwdv-chatwolk .cw-chat__icoonknop:hover,
.kwdv-chatwolk .cw-chat__terug:focus-visible,
.kwdv-chatwolk .cw-chat__icoonknop:focus-visible { background: rgba(255, 255, 255, .32); }
.kwdv-chatwolk .cw-chat__vergroot span { grid-area: 1 / 1; display: grid; place-items: center; }
.kwdv-chatwolk .cw-chat__vergroot .cw-vergroot-in { display: none; }
.kwdv-chatwolk .cw-panel--groot .cw-vergroot-uit { display: none; }
.kwdv-chatwolk .cw-panel--groot .cw-vergroot-in { display: grid; }
.kwdv-chatwolk .cw-chat__avatar { flex-shrink: 0; display: grid; }
.kwdv-chatwolk .cw-chat__avatar-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cw-wit); }
.kwdv-chatwolk .cw-chat__avatar-fallback {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .22);
	color: #ffffff;
	font-weight: 800;
	font-size: 18px;
	text-transform: uppercase;
}
.kwdv-chatwolk .cw-chat__titels { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kwdv-chatwolk .cw-chat__titel { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kwdv-chatwolk .cw-chat__sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: .88; }
.kwdv-chatwolk .cw-chat__stip { width: 7px; height: 7px; border-radius: 50%; background: var(--cw-groen); flex: none; }

/* ---------- Berichten ---------- */
.kwdv-chatwolk .cw-berichten {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 18px 16px;
	background: var(--cw-grijs-licht);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.kwdv-chatwolk .cw-bericht {
	max-width: 82%;
	padding: 11px 14px;
	font-size: 14px;
	line-height: 1.45;
	border-radius: 16px;
	overflow-wrap: anywhere;
	animation: cw-bubble .22s ease;
}
@keyframes cw-bubble { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.kwdv-chatwolk .cw-bericht--bot { align-self: flex-start; background: var(--cw-wit); color: var(--cw-zwart); border: 1px solid var(--cw-grijs-border); border-bottom-left-radius: 5px; }
.kwdv-chatwolk .cw-bericht--user { align-self: flex-end; background: var(--cw-accent); color: var(--cw-op-accent); border-bottom-right-radius: 5px; }
.kwdv-chatwolk .cw-bericht__tijd { display: block; margin-top: 4px; font-size: 11px; opacity: .65; }

/* ---------- Invoer ---------- */
.kwdv-chatwolk .cw-invoer { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--cw-wit); border-top: 1px solid var(--cw-grijs-border); }
.kwdv-chatwolk .cw-invoer__veld {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 16px;
	font-family: inherit;
	font-size: 16px; /* voorkomt inzoomen op iOS */
	color: var(--cw-zwart);
	background: var(--cw-grijs-licht);
	border: 1px solid var(--cw-grijs-border);
	border-radius: 999px;
	outline: none;
	transition: border-color var(--cw-overgang), box-shadow var(--cw-overgang);
}
.kwdv-chatwolk .cw-invoer__veld:focus { border-color: var(--cw-accent-donker); box-shadow: 0 0 0 3px var(--cw-accent-licht); }
.kwdv-chatwolk .cw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.kwdv-chatwolk .cw-invoer__verstuur {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--cw-accent);
	color: var(--cw-op-accent);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background var(--cw-overgang);
}
.kwdv-chatwolk .cw-invoer__verstuur:hover { background: var(--cw-accent-donker); }
.kwdv-chatwolk .cw-invoer__verstuur:disabled { opacity: .5; cursor: default; }
.kwdv-chatwolk .cw-invoer__verstuur[hidden] { display: none; }

/* ---------- Keuze E-mail / WhatsApp ---------- */
.kwdv-chatwolk .cw-acties { flex-shrink: 0; display: flex; gap: 8px; padding: 0 12px 12px; background: var(--cw-wit); }
.kwdv-chatwolk .cw-acties[hidden] { display: none; }
.kwdv-chatwolk .cw-actie {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	border: 0;
	border-radius: 12px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: filter var(--cw-overgang);
}
.kwdv-chatwolk .cw-actie[hidden] { display: none; }
.kwdv-chatwolk .cw-actie:hover { filter: brightness(1.08); }
.kwdv-chatwolk .cw-actie--email { background: var(--cw-zwart); color: var(--cw-wit); }
.kwdv-chatwolk .cw-actie--whatsapp { background: var(--cw-wa); color: #ffffff; }
.kwdv-chatwolk .cw-actie--whatsapp:hover { color: #ffffff; }
.kwdv-chatwolk .cw-actie--verzend { background: var(--cw-accent); color: var(--cw-op-accent); }
.kwdv-chatwolk .cw-actie:disabled { opacity: .6; cursor: default; }

.kwdv-chatwolk .cw-home__body::-webkit-scrollbar,
.kwdv-chatwolk .cw-berichten::-webkit-scrollbar { width: 8px; }
.kwdv-chatwolk .cw-home__body::-webkit-scrollbar-thumb,
.kwdv-chatwolk .cw-berichten::-webkit-scrollbar-thumb { background: rgba(14, 20, 32, .18); border-radius: 8px; }

/* Offline-status */
.kwdv-chatwolk .cw-stip--offline { background: var(--cw-rood) !important; }
.kwdv-chatwolk .cw-actief__stip.cw-stip--offline { box-shadow: 0 0 0 3px rgba(229, 72, 77, .25); }

/* ---------- Mobiel ---------- */
@media (max-width: 600px) {
	.kwdv-chatwolk .cw-launcher { right: 16px; bottom: 16px; width: 56px; height: 56px; }
	.kwdv-chatwolk .cw-dismiss { right: 16px; bottom: 80px; }
	.kwdv-chatwolk .cw-launcher__label { display: none; }
	.kwdv-chatwolk .cw-chat__vergroot { display: none; }
	.kwdv-chatwolk .cw-panel {
		right: 0;
		bottom: 0;
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: calc(100dvh - var(--cw-boven));
		border-radius: 0;
	}
}
@media (min-width: 1025px) { .kwdv-chatwolk[data-verberg~="desktop"] { display: none !important; } }
@media (min-width: 601px) and (max-width: 1024px) { .kwdv-chatwolk[data-verberg~="tablet"] { display: none !important; } }
@media (max-width: 600px) { .kwdv-chatwolk[data-verberg~="mobiel"] { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
	.kwdv-chatwolk *, .kwdv-chatwolk *::before, .kwdv-chatwolk *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media print { .kwdv-chatwolk { display: none !important; } }