/* Wachend AI Chat Widget — matches site palette: #2f6df6 / #1db3c8 / dark #0a1220 */

#wachend-chat-root {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99999;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- Toggle button ---- */
#wc-toggle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient( 135deg, #2f6df6, #1db3c8 );
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba( 47, 109, 246, 0.45 );
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	padding: 0;
}

#wc-toggle:hover {
	transform: scale( 1.08 );
	box-shadow: 0 6px 28px rgba( 47, 109, 246, 0.55 );
}

#wc-toggle svg {
	width: 22px;
	height: 22px;
	position: absolute;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

#wc-toggle .wc-icon-chat  { opacity: 1; transform: scale(1); }
#wc-toggle .wc-icon-close { opacity: 0; transform: scale(0.6); }

#wc-toggle.is-open .wc-icon-chat  { opacity: 0; transform: scale(0.6); }
#wc-toggle.is-open .wc-icon-close { opacity: 1; transform: scale(1); }

/* ---- Chat window ---- */
#wc-window {
	position: absolute;
	bottom: 68px;
	right: 0;
	width: 360px;
	max-height: 540px;
	background: #0a1220;
	border: 1px solid rgba( 47, 109, 246, 0.28 );
	border-radius: 16px;
	box-shadow:
		0 20px 60px rgba( 0, 0, 0, 0.5 ),
		0 0 0 1px rgba( 255, 255, 255, 0.04 );
	flex-direction: column;
	overflow: hidden;
	display: none;
	animation: wc-slide-up 0.22s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

@keyframes wc-slide-up {
	from { opacity: 0; transform: translateY( 14px ) scale( 0.97 ); }
	to   { opacity: 1; transform: translateY( 0 )   scale( 1 ); }
}

/* ---- Header ---- */
#wc-header {
	background: linear-gradient( 135deg, #0d1e3a 0%, #112240 100% );
	padding: 13px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba( 47, 109, 246, 0.2 );
	flex-shrink: 0;
}

#wc-header-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

#wc-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient( 135deg, #2f6df6, #1db3c8 );
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	flex-shrink: 0;
}

#wc-title {
	color: #eef4ff;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
}

#wc-subtitle {
	color: #1db3c8;
	font-size: 11px;
	margin-top: 2px;
	opacity: 0.9;
}

#wc-close {
	background: none;
	border: none;
	color: #556680;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 4px 6px;
	border-radius: 4px;
	transition: color 0.15s, background 0.15s;
}

#wc-close:hover {
	color: #eef4ff;
	background: rgba( 255, 255, 255, 0.06 );
}

/* ---- Message list ---- */
#wc-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 280px;
	scrollbar-width: thin;
	scrollbar-color: rgba( 47, 109, 246, 0.3 ) transparent;
}

#wc-messages::-webkit-scrollbar       { width: 4px; }
#wc-messages::-webkit-scrollbar-track { background: transparent; }
#wc-messages::-webkit-scrollbar-thumb { background: rgba( 47, 109, 246, 0.3 ); border-radius: 2px; }

/* ---- Messages ---- */
.wc-msg {
	display: flex;
	max-width: 84%;
	animation: wc-msg-in 0.18s ease;
}

@keyframes wc-msg-in {
	from { opacity: 0; transform: translateY( 6px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

.wc-msg-user { align-self: flex-end; }
.wc-msg-bot  { align-self: flex-start; }

.wc-bubble {
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 13.5px;
	line-height: 1.55;
	word-break: break-word;
}

.wc-msg-user .wc-bubble {
	background: linear-gradient( 135deg, #2f6df6, #1a55d4 );
	color: #fff;
	border-bottom-right-radius: 4px;
}

.wc-msg-bot .wc-bubble {
	background: rgba( 255, 255, 255, 0.07 );
	color: #d8e2f0;
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-bottom-left-radius: 4px;
}

/* ---- Typing indicator ---- */
.wc-typing .wc-bubble {
	padding: 12px 16px;
	display: flex;
	gap: 5px;
	align-items: center;
}

.wc-typing span {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #1db3c8;
	animation: wc-bounce 1.2s infinite ease-in-out;
}

.wc-typing span:nth-child(2) { animation-delay: 0.18s; }
.wc-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes wc-bounce {
	0%, 80%, 100% { transform: translateY( 0 );    opacity: 0.45; }
	40%           { transform: translateY( -5px );  opacity: 1; }
}

/* ---- Input area ---- */
#wc-input-area {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid rgba( 255, 255, 255, 0.06 );
	background: rgba( 255, 255, 255, 0.025 );
	flex-shrink: 0;
}

#wc-input {
	flex: 1;
	background: rgba( 255, 255, 255, 0.07 );
	border: 1px solid rgba( 47, 109, 246, 0.28 );
	border-radius: 22px;
	padding: 9px 16px;
	color: #eef4ff;
	font-size: 13.5px;
	font-family: inherit;
	outline: none;
	transition: border-color 0.15s;
	min-width: 0;
}

#wc-input::placeholder { color: #3a5070; }
#wc-input:focus        { border-color: #2f6df6; }
#wc-input:disabled     { opacity: 0.5; }

#wc-send {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient( 135deg, #2f6df6, #1db3c8 );
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
	transition: transform 0.15s, opacity 0.15s;
}

#wc-send:hover    { transform: scale( 1.1 ); }
#wc-send:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

#wc-send svg {
	width: 15px;
	height: 15px;
}

/* ---- Responsive ---- */
@media ( max-width: 420px ) {
	#wachend-chat-root { right: 12px; bottom: 12px; }

	#wc-window {
		width: calc( 100vw - 24px );
		right: -4px;
		bottom: 64px;
	}
}