/* WhatsApp widget. Ported from the Drupal whatsapp_chat module. */
.wac-widget {
	--wac-color: #25D366;
	--wac-header: #128C7E;
	--wac-surface: #EEF5F1;
	--wac-card: #ffffff;
	--wac-ink: #111827;
	--wac-muted: #8a8a8a;
	--wac-border: rgba(0, 0, 0, .08);
	position: fixed;
	bottom: 20px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wac-bottom-right { right: 35px; align-items: flex-end; }
.wac-bottom-left { left: 35px; align-items: flex-start; }

.wac-launcher {
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: var(--wac-color);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease;
}
.wac-launcher:hover { transform: scale(1.05); }
.wac-launcher svg { width: 30px; height: 30px; }

.wac-panel {
	width: 360px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
	margin-bottom: 16px;
	animation: wac-in .18s ease;
}
@keyframes wac-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Header (shared teal for both views). */
.wac-head { position: relative; color: #fff; padding: 18px 46px 18px 20px; background: var(--wac-header); }
.wac-close { position: absolute; top: 14px; right: 14px; background: none; border: 0; color: #fff; cursor: pointer; padding: 4px; display: flex; opacity: .85; transition: opacity .15s ease; }
.wac-close:hover { opacity: 1; }
.wac-close svg { width: 22px; height: 22px; }
.wac-close svg path { stroke: currentColor; stroke-width: 0.9; stroke-linejoin: round; }
.wac-head-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; }
.wac-head-title svg { width: 26px; height: 26px; }
.wac-head-sub { margin-top: 8px; font-size: 14px; line-height: 1.4; opacity: .95; }

/* Agent selector. */
.wac-list { padding: 14px 14px 12px; background: var(--wac-surface); max-height: 60vh; overflow-y: auto; }
.wac-reply { color: #6b7280; font-size: 13px; margin: 2px 4px 12px; }
.wac-card {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--wac-card);
	border: 0.5px solid var(--wac-border);
	border-radius: 14px;
	padding: 12px 14px;
	margin-bottom: 10px;
	cursor: pointer;
	text-align: left;
	transition: border-color .15s ease;
}
.wac-card:hover { border-color: rgba(0, 0, 0, .22); }
.wac-av-wrap { position: relative; flex: 0 0 auto; }
.wac-card-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.wac-dot { position: absolute; bottom: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; }
.wac-dot-online { background: #22c55e; }
.wac-dot-offline { background: #f59e0b; }
.wac-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wac-card-role { font-size: 12px; color: var(--wac-muted); }
.wac-card-name { font-size: 16px; font-weight: 700; color: var(--wac-ink); }
.wac-card-go { color: #c2c2c2; display: flex; flex: 0 0 auto; }
.wac-card-go svg { width: 22px; height: 22px; }
.wac-list-footer { text-align: center; font-size: 12px; color: #4a5f59; padding: 8px 4px 2px; margin: 0; }

/* Chat bubble view. */
.wac-head-chat { display: flex; align-items: center; gap: 12px; }
.wac-back { background: none; border: 0; color: #fff; cursor: pointer; padding: 0; display: flex; }
.wac-back svg { width: 24px; height: 24px; }
.wac-chat-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.wac-chat-meta { display: flex; flex-direction: column; }
.wac-chat-name { font-size: 16px; font-weight: 700; }
.wac-chat-status { font-size: 13px; opacity: .9; }
.wac-chat-body { padding: 22px 18px; min-height: 120px; background: var(--wac-surface); }
.wac-bubble { background: var(--wac-card); border: 0.5px solid var(--wac-border); border-radius: 2px 12px 12px 12px; padding: 10px 14px; max-width: 82%; }
.wac-bubble p { margin: 0; font-size: 15px; color: var(--wac-ink); line-height: 1.4; }
.wac-bubble p + p { margin-top: 2px; }

.wac-compose { display: flex; align-items: center; gap: 10px; padding: 12px; background: #f0f0f0; }
.wac-input { flex: 1; border: 0; border-radius: 24px; padding: 12px 16px; font-size: 14px; outline: none; }
.wac-send { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--wac-color); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.wac-send svg { width: 22px; height: 22px; }

.wac-initials { display: flex; align-items: center; justify-content: center; background: var(--wac-color); color: #fff; font-weight: 700; }

.wac-branding { text-align: center; font-size: 12px; color: #9aa0a6; padding: 9px 10px; background: #fff; border-top: 0.5px solid var(--wac-border); }
.wac-branding-link { color: var(--wac-color); text-decoration: none; font-weight: 500; }
.wac-branding-link:hover { text-decoration: underline; }