/* Medora AI — floating chat widget. Mobile-first, direction-agnostic
   (RTL/LTR), premium SaaS-grade UI, fully themeable via --swc-bg / --swc-accent
   (printed inline by SWC_Widget). Touch targets >= 44px, no layout shift. */

.swc-root {
	--swc-bg: #0f1f3d;
	--swc-accent: #c8a04e;
	--swc-ink: #16233f;
	--swc-radius: 20px;
	--swc-shadow: 0 24px 60px rgba(15, 31, 61, 0.35);
	position: fixed;
	inset-inline-end: max(18px, env(safe-area-inset-right));
	inset-block-end: max(18px, env(safe-area-inset-bottom));
	z-index: 999999;
	font-family: Vazirmatn, "Vazir", Tahoma, system-ui, sans-serif;
	-webkit-tap-highlight-color: transparent;
}

/* ---------- launcher ---------- */
.swc-launcher {
	position: relative;
	width: 62px;
	height: 62px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	background: linear-gradient(135deg, var(--swc-bg), #22468a);
	box-shadow: 0 12px 30px rgba(15, 31, 61, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.swc-launcher:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 40px rgba(15, 31, 61, 0.6); }
.swc-launcher:active { transform: scale(0.97); }
.swc-launcher-icon { position: relative; z-index: 1; }
.swc-launcher-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.swc-launcher-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--swc-accent);
	opacity: 0.55;
	animation: swc-pulse 2.2s ease-out infinite;
}
@keyframes swc-pulse {
	0%   { transform: scale(1); opacity: 0.5; }
	70%  { transform: scale(1.55); opacity: 0; }
	100% { opacity: 0; }
}
.swc-open .swc-launcher-pulse { display: none; }

/* ---------- panel ---------- */
.swc-panel {
	position: absolute;
	inset-block-end: 78px;
	inset-inline-end: 0;
	width: 380px;
	max-width: calc(100vw - 24px);
	height: 560px;
	max-height: calc(100vh - 120px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--swc-radius);
	background: #fff;
	border: 1px solid rgba(15, 31, 61, 0.1);
	box-shadow: var(--swc-shadow);
	animation: swc-pop 0.2s ease;
}
.swc-panel[hidden] { display: none !important; }
@keyframes swc-pop {
	from { opacity: 0; transform: translateY(14px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- header ---------- */
.swc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	color: #fff;
	background: linear-gradient(135deg, var(--swc-bg), #22468a);
	flex: 0 0 auto;
}
.swc-header-id { display: flex; align-items: center; gap: 10px; }
.swc-header-avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.15);
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff;
}
.swc-header-text { display: flex; flex-direction: column; line-height: 1.3; }
.swc-title { font-weight: 800; font-size: 15px; }
.swc-status { font-size: 11.5px; opacity: 0.85; display: inline-flex; align-items: center; gap: 5px; }
.swc-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.25); }
.swc-close {
	width: 34px; height: 34px;
	background: rgba(255, 255, 255, 0.12);
	border: none; border-radius: 10px;
	color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.15s ease;
}
.swc-close:hover { background: rgba(255, 255, 255, 0.24); }

/* ---------- body / messages ---------- */
.swc-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.swc-messages {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scroll-behavior: smooth;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #f6f8fc;
}
.swc-msg {
	max-width: 84%;
	padding: 11px 14px;
	border-radius: 16px;
	font-size: 14.5px;
	line-height: 1.75;
	white-space: pre-wrap;
	word-break: break-word;
}
.swc-msg-bot {
	align-self: flex-start;
	background: #fff;
	color: var(--swc-ink);
	border: 1px solid rgba(15, 31, 61, 0.08);
	border-end-start-radius: 5px;
	box-shadow: 0 1px 2px rgba(15,31,61,.04);
}
.swc-msg-user {
	align-self: flex-end;
	color: #fff;
	background: linear-gradient(135deg, var(--swc-bg), #22468a);
	border-end-end-radius: 5px;
}
.swc-typing { display: inline-flex; gap: 4px; align-items: center; }
.swc-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--swc-accent); animation: swc-bounce 1s infinite ease-in-out; }
.swc-typing span:nth-child(2) { animation-delay: 0.15s; }
.swc-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes swc-bounce { 0%,80%,100% { transform: scale(0.5); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }

/* ---------- lead capture ---------- */
.swc-lead {
	position: absolute;
	inset: 0;
	background: #f6f8fc;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	overflow-y: auto;
}
.swc-lead-card { width: 100%; max-width: 320px; text-align: center; }
.swc-lead-badge {
	width: 62px; height: 62px; margin: 0 auto 12px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	background: linear-gradient(135deg, var(--swc-bg), #22468a);
	box-shadow: 0 8px 20px rgba(15,31,61,.25);
}
.swc-lead-title { font-size: 18px; font-weight: 800; color: var(--swc-ink); margin: 0 0 6px; }
.swc-lead-sub { font-size: 13px; line-height: 1.7; color: #5a6a86; margin: 0 0 16px; }
.swc-lead-label { display: block; text-align: start; font-size: 12.5px; font-weight: 700; color: var(--swc-ink); margin: 10px 2px 5px; }
.swc-lead-name, .swc-lead-phone {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	border: 1.5px solid rgba(15, 31, 61, 0.15);
	border-radius: 12px;
	padding: 0 14px;
	/* 16px prevents iOS Safari auto-zoom/shift on focus. */
	font-size: 16px;
	font-family: inherit;
	background: #fff;
	outline: none;
	transition: border-color 0.15s ease;
}
.swc-lead-name:focus, .swc-lead-phone:focus { border-color: var(--swc-accent); }
.swc-lead-error { color: #d63638; font-size: 12.5px; margin: 10px 0 0; }
.swc-lead-start {
	width: 100%;
	min-height: 50px;
	margin-top: 16px;
	border: none; border-radius: 12px;
	cursor: pointer;
	font-family: inherit; font-size: 15.5px; font-weight: 800;
	color: var(--swc-ink);
	background: var(--swc-accent);
	box-shadow: 0 8px 18px rgba(200,160,78,.35);
	transition: transform 0.15s ease, filter 0.15s ease;
}
.swc-lead-start:hover { transform: translateY(-1px); filter: brightness(1.05); }
.swc-lead-skip { margin-top: 10px; background: none; border: none; color: #8090a8; cursor: pointer; font-family: inherit; font-size: 12.5px; }
.swc-root.swc-lead-active .swc-form,
.swc-root.swc-lead-active .swc-quick { display: none; }

/* ---------- CTA card + channels ---------- */
.swc-cta-card {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border-radius: 16px;
	background: linear-gradient(160deg, #fff, #f3f6fd);
	border: 1px solid rgba(200, 160, 78, 0.4);
	box-shadow: 0 6px 18px rgba(15,31,61,.08);
}
.swc-cta-head { text-align: center; }
.swc-cta-title { font-size: 15.5px; font-weight: 800; color: var(--swc-ink); }
.swc-cta-text { font-size: 12.5px; line-height: 1.7; color: #5a6a86; margin-top: 4px; }
.swc-channel-row { display: flex; flex-wrap: wrap; gap: 8px; }
.swc-cta-btn {
	flex: 1 1 auto;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--swc-ink);
	background: #eef1f7;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.swc-cta-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.swc-cta-primary {
	color: var(--swc-ink);
	background: var(--swc-accent);
	box-shadow: 0 8px 18px rgba(200,160,78,.35);
	font-size: 15px;
	min-height: 50px;
}
.swc-cta-whatsapp { background: #25d366; color: #fff; }
.swc-cta-call { background: var(--swc-bg); color: #fff; }
.swc-cta-bale { background: #1e6ff0; color: #fff; }
.swc-cta-emoji { font-size: 15px; }

/* ---------- quick replies ---------- */
.swc-quick { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px 4px; flex: 0 0 auto; }
.swc-quick-reply {
	min-height: 36px;
	border: 1.5px solid var(--swc-accent);
	background: transparent;
	color: var(--swc-bg);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s ease, color 0.15s ease;
}
.swc-quick-reply:hover { background: var(--swc-accent); color: #fff; }

/* ---------- input row ---------- */
.swc-form {
	display: flex;
	gap: 10px;
	padding: 12px;
	padding-block-end: max(12px, env(safe-area-inset-bottom));
	border-top: 1px solid rgba(15, 31, 61, 0.08);
	background: #fff;
	flex: 0 0 auto;
}
.swc-input {
	flex: 1;
	min-height: 48px;
	border: 1.5px solid rgba(15, 31, 61, 0.15);
	border-radius: 14px;
	padding: 0 14px;
	/* 16px prevents iOS Safari from auto-zooming (and shifting the page) on focus. */
	font-size: 16px;
	font-family: inherit;
	outline: none;
	background: #f6f8fc;
	transition: border-color 0.15s ease;
}
.swc-input:focus { border-color: var(--swc-accent); background: #fff; }
.swc-send {
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	border: none;
	cursor: pointer;
	border-radius: 14px;
	color: var(--swc-ink);
	background: var(--swc-accent);
	box-shadow: 0 6px 16px rgba(200, 160, 78, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.swc-send:hover { transform: translateY(-1px); filter: brightness(1.06); }
.swc-send:active { transform: scale(0.95); }
.swc-root[dir="rtl"] .swc-send svg { transform: scaleX(-1); }

.swc-footer { text-align: center; font-size: 10.5px; color: rgba(15, 31, 61, 0.45); padding: 6px; background: #fff; flex: 0 0 auto; }

/* ---------- mobile: full-screen, keyboard-safe ---------- */
@media (max-width: 480px) {
	.swc-root { inset-inline-end: 14px; inset-block-end: 14px; }
	.swc-panel {
		/* Pinned to the TOP only (not bottom) so the JS can size the panel to
		   the visual viewport when the keyboard opens — pinning bottom would
		   override the height and hide the input behind the keyboard. */
		position: fixed;
		top: 0;
		inset-inline: 0;
		bottom: auto;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-width: 100vw;
		max-height: none;
		border-radius: 0;
		transform-origin: top center;
		will-change: height, transform;
		animation: swc-slide 0.22s ease;
	}
	@keyframes swc-slide {
		from { opacity: 0; transform: translateY(24px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	.swc-msg { max-width: 88%; font-size: 15px; }
}

/* Page lock behind the full-screen mobile panel: stops the underlying document
   from scrolling or jumping when the message input receives focus (iOS Safari). */
body.swc-body-lock {
	position: fixed;
	inset-inline: 0;
	width: 100%;
	overflow: hidden;
}