#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 ---------- */

#wcw-bubble-btn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--wcw-bubble-color, #25D366);
	color: #fff;
	border: none;
	box-shadow: 0 4px 14px rgba(0,0,0,0.25);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: transform 0.15s ease;
	margin-left: auto;
}

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

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

#wcw-bubble-btn:hover .wcw-bubble-tooltip {
	opacity: 1;
	transform: translateY(0);
}

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

.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;
}

.wcw-bubble-tooltip {
	position: absolute;
	bottom: 72px;
	right: 0;
	background: #1f2937;
	color: #fff;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 13px;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(4px);
	transition: all 0.15s ease;
	pointer-events: none;
}

.wcw-pos-left .wcw-bubble-tooltip {
	right: auto;
	left: 0;
}

#wcw-widget-root.wcw-open .wcw-bubble-tooltip {
	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-bubble-color, #25D366);
	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: #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-bubble-color, #25D366);
	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);
}

.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-bubble-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-bubble-color, #25D366);
	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;
	}
}