/**
 * Redicom AI Assistant — Perfected Apple Pro / Leica Minimalist Industrial Stylesheet
 *
 * 100% Visual Parity with previous design:
 * - Launcher: #0F172A bubble with redicomPulseNudge (7.5s cycle), hover #E53935
 * - Window: 400px x 600px, 20px radius, soft elevation shadow
 * - Header: #0F172A with brand REDICOM in #E53935 (font-weight: 900, 18px, letter-spacing: 1.2px)
 * - Body: #F8FAFC with styled visible scrollbar
 * - Messages: Bot white cards with 1px #E2E8F0; User #0F172A dark pills with white text
 * - Input: Flush bottom, rounded pill input, circular WhatsApp #25D366 + Send #E53935 buttons
 */

/* ========================================================
   1. ROOT & LAUNCHER BUBBLE
   ======================================================== */

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

.rdc-launcher-btn {
	background: #ffffff !important;
	border: 2px solid rgba(15, 23, 42, 0.12) !important;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
	width: 58px !important;
	height: 58px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	outline: none !important;
	padding: 0 !important;
	animation: redicomPulseNudge 7.5s infinite ease-in-out !important;
}

.rdc-launcher-btn:hover {
	animation: none !important;
	transform: translateY(-2px) scale(1.08) !important;
	background: #ffffff !important;
	border-color: #e53935 !important;
	box-shadow: 0 12px 28px rgba(229, 57, 53, 0.35) !important;
}

.rdc-launcher-btn svg {
	display: none !important;
}

.rdc-launcher-btn::after {
	content: "" !important;
	display: block !important;
	width: 32px !important;
	height: 30px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	background-image: url("data:image/svg+xml,%3Csvg width='64' height='58' viewBox='0 0 64 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.8347 40.0026C14.3096 39.7532 13.6987 39.7615 13.1806 40.025L5.27225 44.0462L7.85475 35.938C8.04275 35.3476 7.92712 34.7026 7.54562 34.2145C5.06237 31.0357 3.74975 27.2876 3.74975 23.375C3.74975 13.0362 13.0015 4.625 24.3735 4.625C28.953 4.625 33.3616 6.01237 36.9377 8.51075C24.8942 9.72175 15.249 19.1285 15.249 30.875C15.249 34.5285 16.1855 38.0457 17.9511 41.197C16.8821 40.8786 15.841 40.4805 14.8347 40.0026Z' fill='%230F172A'/%3E%3Cpath d='M50.8154 47.5249C50.3047 47.2652 49.6934 47.2496 49.1612 47.5026C46.2381 48.8911 42.9397 49.625 39.6225 49.625C28.2505 49.625 18.9987 41.2137 18.9987 30.875C18.9987 20.5362 28.2505 12.125 39.6225 12.125C50.9945 12.125 60.2462 20.5362 60.2462 30.875C60.2462 34.7876 58.9336 38.5357 56.4502 41.7144C56.0689 42.2025 55.9532 42.8475 56.1411 43.4379L58.7236 51.5461L50.8154 47.5249Z' fill='%23E53935'/%3E%3C/svg%3E") !important;
}

.rdc-launcher-btn.rdc-hidden {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Attention Pulse Nudge Animation (Light Theme with Crimson Glow) */
@keyframes redicomPulseNudge {
	0%, 75%, 100% {
		transform: scale(1) rotate(0deg);
		box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
	}
	78% {
		transform: scale(1.12) rotate(-8deg);
		box-shadow: 0 12px 28px rgba(229, 57, 53, 0.4), 0 0 0 4px rgba(229, 57, 53, 0.2);
	}
	82% {
		transform: scale(1.15) rotate(8deg);
		box-shadow: 0 14px 32px rgba(229, 57, 53, 0.5), 0 0 0 8px rgba(229, 57, 53, 0.12);
	}
	86% {
		transform: scale(1.12) rotate(-5deg);
		box-shadow: 0 12px 28px rgba(229, 57, 53, 0.35), 0 0 0 4px rgba(229, 57, 53, 0.08);
	}
	90% {
		transform: scale(1.06) rotate(3deg);
		box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
	}
	94% {
		transform: scale(1.02) rotate(0deg);
	}
}

/* ========================================================
   2. WINDOW CONTAINER
   ======================================================== */

.rdc-chat-window {
	position: fixed;
	bottom: 24px;
	right: 24px;
	display: flex !important;
	flex-direction: column !important;
	width: 400px !important;
	max-width: calc(100vw - 30px) !important;
	height: 600px !important;
	max-height: calc(100vh - 90px) !important;
	border-radius: 20px !important;
	box-shadow: 0 24px 50px -10px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
	border: 1px solid #e2e8f0 !important;
	background: #ffffff !important;
	overflow: hidden !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	z-index: 999999;
	transform-origin: bottom right;
	transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
}

.rdc-chat-window.rdc-closed {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: scale(0.92) translateY(16px) !important;
}

/* ========================================================
   3. HEADER WITH BRAND REDICOM IN RED
   ======================================================== */

.rdc-header {
	flex: 0 0 54px !important;
	height: 54px !important;
	background: #0f172a !important;
	color: #ffffff !important;
	padding: 0 18px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	box-sizing: border-box !important;
}

.rdc-brand {
	display: flex !important;
	align-items: center !important;
}

.rdc-brand-logo {
	font-size: 18px !important;
	font-weight: 900 !important;
	letter-spacing: 1.2px !important;
	color: #e53935 !important; /* REDICOM BRAND RED */
	text-transform: uppercase !important;
	line-height: 1 !important;
}

.rdc-brand-tag,
.rdc-legal-strip {
	display: none !important;
}

.rdc-close-btn {
	color: #ffffff !important;
	opacity: 0.85 !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	padding: 6px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: color 0.15s, opacity 0.15s !important;
	outline: none !important;
}

.rdc-close-btn:hover {
	opacity: 1 !important;
	color: #e53935 !important;
}

/* ========================================================
   4. CONVERSATION BODY & SCROLLBAR
   ======================================================== */

.rdc-conversation {
	flex: 1 1 auto !important;
	height: auto !important;
	min-height: 0 !important;
	background: #f8fafc !important;
	padding: 16px 16px 12px 16px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;

	/* Visible Scrollbar on Firefox & WebKit */
	scrollbar-width: thin !important;
	scrollbar-color: #94a3b8 #f1f5f9 !important;
}

.rdc-conversation::-webkit-scrollbar {
	width: 7px !important;
	display: block !important;
}
.rdc-conversation::-webkit-scrollbar-track {
	background: #f1f5f9 !important;
	border-radius: 4px !important;
}
.rdc-conversation::-webkit-scrollbar-thumb {
	background: #94a3b8 !important;
	border-radius: 4px !important;
}
.rdc-conversation::-webkit-scrollbar-thumb:hover {
	background: #64748b !important;
}

/* Messages */
.rdc-message {
	max-width: 86% !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
	word-break: break-word !important;
	animation: rdcFadeIn 0.2s ease-out !important;
}

@keyframes rdcFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Bot Message Bubble */
.rdc-message-bot {
	align-self: flex-start !important;
	background: #ffffff !important;
	color: #0f172a !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 14px 14px 14px 4px !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
	padding: 12px 14px !important;
}

.rdc-message-bot strong,
.rdc-message-bot b {
	color: #000000 !important;
	font-weight: 800 !important;
}

.rdc-message-bot a {
	color: #0284c7 !important;
	text-decoration: underline !important;
	font-weight: 600 !important;
}

.rdc-message-bot img {
	max-width: 100% !important;
	border-radius: 8px !important;
	margin-top: 8px !important;
	display: block !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* User Message Bubble */
.rdc-message-user {
	align-self: flex-end !important;
	background: #0f172a !important;
	color: #ffffff !important;
	border-radius: 14px 14px 4px 14px !important;
	padding: 10px 14px !important;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15) !important;
}

/* Typing Indicator */
.rdc-typing-indicator {
	align-self: flex-start !important;
	padding: 10px 14px !important;
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 14px 14px 14px 4px !important;
	display: flex !important;
	gap: 5px !important;
	align-items: center !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.rdc-typing-dot {
	width: 6px !important;
	height: 6px !important;
	background: #94a3b8 !important;
	border-radius: 50% !important;
	animation: rdcDotBounce 1.2s infinite ease-in-out !important;
}
.rdc-typing-dot:nth-child(2) { animation-delay: 0.2s !important; }
.rdc-typing-dot:nth-child(3) { animation-delay: 0.4s !important; }

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

/* ========================================================
   5. INPUT AREA: DOCKED FLUSH AT BOTTOM
   ======================================================== */

.rdc-input-bar {
	flex: 0 0 auto !important;
	margin: 0 !important;
	background: #ffffff !important;
	border-top: 1px solid #e2e8f0 !important;
	border-radius: 0 !important;
	padding: 10px 14px 12px 14px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03) !important;
}

.rdc-textarea {
	order: 2 !important;
	flex: 1 1 auto !important;
	background: #ffffff !important;
	color: #0f172a !important;
	border: 1.5px solid #e53935 !important; /* RED ACCENT PILL */
	border-radius: 22px !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	line-height: 1.4 !important;
	padding: 8px 16px !important;
	height: 40px !important;
	min-height: 40px !important;
	max-height: 85px !important;
	resize: none !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	outline: none !important;
	transition: background 0.15s, box-shadow 0.15s !important;
}

.rdc-textarea::placeholder {
	color: #94a3b8 !important;
	opacity: 1 !important;
}

.rdc-textarea:focus {
	background: #ffffff !important;
	box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.2) !important;
}

/* WhatsApp Quick Button (Positioned at left of textarea) */
.rdc-wa-btn {
	order: 1 !important;
	flex: 0 0 38px !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	max-width: 38px !important;
	max-height: 38px !important;
	background: #25d366 !important;
	border-radius: 50% !important;
	border: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: transform 0.2s ease, background 0.2s ease !important;
	padding: 0 !important;
	margin: 0 !important;
	text-decoration: none !important;
	outline: none !important;
	box-shadow: 0 2px 6px rgba(37, 211, 102, 0.35) !important;
}

.rdc-wa-btn:hover {
	background: #20ba5a !important;
	transform: scale(1.08) !important;
	box-shadow: 0 4px 10px rgba(37, 211, 102, 0.5) !important;
}

.rdc-wa-btn svg {
	fill: #ffffff !important;
	width: 20px !important;
	height: 20px !important;
}

/* Send Button (Positioned at right of textarea, same height as WhatsApp) */
.rdc-send-btn {
	order: 3 !important;
	flex: 0 0 38px !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	max-width: 38px !important;
	max-height: 38px !important;
	background: #e53935 !important;
	border-radius: 50% !important;
	border: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: transform 0.2s ease, background 0.2s ease !important;
	padding: 0 !important;
	outline: none !important;
}

.rdc-send-btn:hover {
	background: #c62828 !important;
	transform: scale(1.08) !important;
}

.rdc-send-btn:disabled {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

.rdc-send-btn svg {
	fill: #ffffff !important;
	width: 17px !important;
	height: 17px !important;
}