#wcw-widget-root {
	position: fixed;
	bottom: 24px;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#wcw-widget-root.wcw-pos-right { right: 24px; }
#wcw-widget-root.wcw-pos-left { left: 24px; }

/* ---------- Bubble button ---------- */
/* Desktop default: a pill-shaped bar with icon + label. Collapses to a
   plain 60px circle (icon only) once the panel is open, or on mobile
   where the label would take up too much of the screen edge — see the
   .wcw-open rules below and the mobile media query at the bottom of
   this file. */

#wcw-bubble-btn {
	height: 60px;
	min-width: 60px;
	padding: 0 22px 0 16px;
	border-radius: 999px;
	background: var(--wcw-background-color, #25D366);
	color: var(--wcw-foreground-color, #fff);
	border: none;
	box-shadow: 0 4px 14px rgba(0,0,0,0.25);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	position: relative;
	transition: all 0.2s ease;
	margin-left: auto;
	white-space: nowrap;
}

.wcw-pos-left #wcw-bubble-btn {
	margin-left: 0;
	margin-right: auto;
}

#wcw-bubble-btn:hover {
	transform: scale(1.03);
}

.wcw-bubble-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wcw-bubble-label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.wcw-icon-close {
	display: none;
}

#wcw-widget-root.wcw-open .wcw-icon-chat {
	display: none;
}

#wcw-widget-root.wcw-open .wcw-icon-close {
	display: flex;
}

/* Once open, the label is redundant (the panel itself is the context) —
   collapse back down to a plain circular icon button. */
#wcw-widget-root.wcw-open #wcw-bubble-btn {
	width: 60px;
	min-width: 60px;
	padding: 0;
	justify-content: center;
}

#wcw-widget-root.wcw-open .wcw-bubble-label {
	display: none;
}

/* Small dot badge on the bubble itself — hidden on desktop (the full
   sticker below covers that job there) and shown only on mobile, see
   the media query at the bottom of this file. */
.wcw-bubble-online-dot {
	display: none;
	position: absolute;
	top: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #22c55e;
	border: 2px solid #fff;
}

#wcw-widget-root.wcw-open .wcw-bubble-online-dot {
	display: none;
}

/* ---------- "We are online" sticker ---------- */
/* A persistent badge above the bubble (not a hover tooltip) — visible by
   default on desktop, hidden once the panel opens, and swapped out for
   the compact dot above on mobile. */

.wcw-online-sticker {
	position: absolute;
	bottom: 72px;
	right: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	color: #1f2937;
	padding: 8px 14px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.18);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.wcw-pos-left .wcw-online-sticker {
	right: auto;
	left: 0;
}

.wcw-online-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	flex-shrink: 0;
	animation: wcw-pulse 2s infinite;
}

@keyframes wcw-pulse {
	0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
	70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
	100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

#wcw-widget-root.wcw-open .wcw-online-sticker {
	display: none;
}

/* ---------- Docked chat panel (anchored to the bubble) ---------- */

#wcw-chat-panel {
	position: absolute;
	bottom: 76px;
	right: 0;
	width: 336px;
	max-width: calc(100vw - 32px);
	height: 460px;
	max-height: 70vh;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.22);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom right;
	transition: opacity 0.18s ease, transform 0.18s ease;
	opacity: 1;
	transform: scale(1) translateY(0);
}

.wcw-pos-left #wcw-chat-panel {
	right: auto;
	left: 0;
	transform-origin: bottom left;
}

#wcw-chat-panel.wcw-hidden {
	opacity: 0;
	transform: scale(0.92) translateY(12px);
	pointer-events: none;
	visibility: hidden;
}

/* Small tail connecting the panel to the bubble beneath it */
#wcw-chat-panel::after {
	content: "";
	position: absolute;
	bottom: -8px;
	right: 22px;
	width: 16px;
	height: 16px;
	background: #fff;
	transform: rotate(45deg);
	box-shadow: 3px 3px 6px rgba(0,0,0,0.06);
}

.wcw-pos-left #wcw-chat-panel::after {
	right: auto;
	left: 22px;
}

#wcw-chat-header {
	background: var(--wcw-background-color, #25D366);
	color: var(--wcw-foreground-color, #fff);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.wcw-chat-header-icon {
	display: flex;
	align-items: center;
}

#wcw-chat-title {
	font-size: 15px;
	font-weight: 600;
	flex: 1;
}

#wcw-chat-close {
	background: none;
	border: none;
	color: var(--wcw-foreground-color, #fff);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.9;
	padding: 2px 4px;
}

#wcw-chat-close:hover {
	opacity: 1;
}

/* ---------- Message area ---------- */

#wcw-chat-messages {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #f3f4f6;
}

/* Elegant, thin scrollbar for the message list (Firefox) */
#wcw-chat-messages {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

/* Elegant, thin scrollbar for the message list (WebKit: Chrome/Safari/Edge) */
#wcw-chat-messages::-webkit-scrollbar {
	width: 6px;
}

#wcw-chat-messages::-webkit-scrollbar-track {
	background: transparent;
}

#wcw-chat-messages::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.22);
	border-radius: 10px;
}

#wcw-chat-messages::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.35);
}

.wcw-msg {
	max-width: 82%;
	padding: 9px 13px;
	font-size: 13.5px;
	line-height: 1.45;
	border-radius: 14px;
	word-wrap: break-word;
}

.wcw-msg.bot {
	align-self: flex-start;
	background: #fff;
	color: #1f2937;
	border-bottom-left-radius: 4px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.wcw-msg.user {
	align-self: flex-end;
	background: var(--wcw-background-color, #25D366);
	color: var(--wcw-foreground-color, #fff);
	border-bottom-right-radius: 4px;
}

.wcw-msg.error {
	align-self: flex-start;
	background: #fef2f2;
	color: #b91c1c;
	border-bottom-left-radius: 4px;
}

/* Typing indicator */
.wcw-typing {
	align-self: flex-start;
	background: #fff;
	border-radius: 14px;
	border-bottom-left-radius: 4px;
	padding: 11px 15px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.06);
	display: flex;
	gap: 4px;
}

.wcw-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #9ca3af;
	animation: wcw-bounce 1.2s infinite ease-in-out;
}

.wcw-typing span:nth-child(2) { animation-delay: 0.15s; }
.wcw-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes wcw-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* WhatsApp continue button, shown as a card inside the message stream */
.wcw-whatsapp-cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #25D366;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 2px;
}

.wcw-whatsapp-cta:hover {
	filter: brightness(0.96);
}

/* Department choice buttons, shown inline in the message stream in place
   of the text input row for that one step */
.wcw-department-buttons {
	align-self: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 100%;
}

.wcw-department-btn {
	background: #fff;
	color: var(--wcw-background-color, #25D366);
	border: 1.5px solid var(--wcw-background-color, #25D366);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.wcw-department-btn:hover {
	background: var(--wcw-background-color, #25D366);
	color: var(--wcw-foreground-color, #fff);
}

.wcw-retry-btn {
	align-self: flex-start;
	background: #fff;
	color: #374151;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Input row ---------- */

#wcw-chat-form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid #e5e7eb;
	background: #fff;
	flex-shrink: 0;
}

#wcw-chat-form.wcw-hidden {
	display: none;
}

.wcw-chat-input-wrap {
	flex: 1;
	min-width: 0;
}

.wcw-chat-input-wrap input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d1d5db;
	border-radius: 20px;
	padding: 9px 14px;
	font-size: 13.5px;
}

.wcw-chat-input-wrap input:focus {
	outline: none;
	border-color: var(--wcw-background-color, #25D366);
}

.wcw-chat-input-wrap input:disabled {
	background: #f3f4f6;
	color: #9ca3af;
	cursor: not-allowed;
}

.iti { width: 100%; }

/* intl-tel-input's country dropdown is appended to <body> (see
   dropdownContainer in widget.js) to escape the panel's overflow:hidden.
   Our widget root sits at a very high z-index, so make sure the dropdown
   always renders above it. */
.iti--container {
	z-index: 1000000 !important;
}

/* The scrollable country list inside that dropdown. Without
   overscroll-behavior, scrolling to the top/bottom of this list hands
   the scroll off to the page underneath instead of stopping — this
   contains it to the list itself. Also gives it the same thin,
   understated scrollbar as the chat window instead of the browser's
   default one.

   The widget sits near the bottom of the screen, so the dropdown's own
   height-calculation can still end up taller than the space actually
   left on screen, pushing its last items past the edge. Capping the
   height here — with !important, since intl-tel-input sets its own
   inline max-height — guarantees the whole list stays fully on screen
   and simply scrolls for anything beyond that, on any window size. */
.iti__country-list {
	max-height: min(240px, 40vh) !important;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.iti__country-list::-webkit-scrollbar {
	width: 6px;
}

.iti__country-list::-webkit-scrollbar-track {
	background: transparent;
}

.iti__country-list::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.22);
	border-radius: 10px;
}

.iti__country-list::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.35);
}

#wcw-chat-send {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wcw-background-color, #25D366);
	color: var(--wcw-foreground-color, #fff);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

#wcw-chat-send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (max-width: 420px) {
	#wcw-chat-panel {
		width: calc(100vw - 24px);
		right: -12px;
		height: 66vh;
	}
	.wcw-pos-left #wcw-chat-panel {
		left: -12px;
	}

	/* The pill bar's text label takes up too much of the screen edge on
	   phones — collapse to a plain icon-only circle, same treatment as
	   when the panel is open on any screen size. */
	#wcw-bubble-btn {
		width: 60px;
		min-width: 60px;
		padding: 0;
		justify-content: center;
	}

	.wcw-bubble-label {
		display: none;
	}

	/* Swap the full floating sticker for a compact dot on the bubble
	   itself — the wording doesn't fit comfortably at this width, but a
	   dot still conveys "online" without crowding the screen edge. */
	.wcw-online-sticker {
		display: none;
	}

	.wcw-bubble-online-dot {
		display: block;
	}
}