/* open-chat/frontend/chatbot-styles.css
 * Open Chat 2.2 — redesigned quiet premium UI, RTL, no audio UX
 */




.aimc-container {
	--aimc-primary: #2563eb;
	--aimc-secondary: #7c3aed;
	--aimc-accent: #22d3ee;
	--aimc-surface: rgba(255, 255, 255, 0.86);
	--aimc-surface-strong: #ffffff;
	--aimc-glass: rgba(255, 255, 255, 0.72);
	--aimc-page: #f5f7fb;
	--aimc-text: #111827;
	--aimc-muted: #64748b;
	--aimc-border: rgba(148, 163, 184, 0.28);
	--aimc-user-bg: linear-gradient(135deg, var(--aimc-primary), var(--aimc-secondary));
	--aimc-user-text: #ffffff;
	--aimc-bot-bg: rgba(248, 250, 252, 0.94);
	--aimc-bot-text: #182032;
	--aimc-input-bg: rgba(255, 255, 255, 0.88);
	--aimc-radius: 22px;
	--aimc-font: 'Vazir', 'Vazirmatn', Tahoma, sans-serif;
	--aimc-shadow: 0 30px 80px rgba(15, 23, 42, 0.22), 0 10px 30px rgba(37, 99, 235, 0.12);
	--aimc-ring: 0 0 0 4px color-mix(in srgb, var(--aimc-primary) 18%, transparent);
	--aimc-header-bg: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--aimc-accent) 42%, transparent), transparent 32%), linear-gradient(135deg, var(--aimc-secondary), var(--aimc-primary));

	direction: rtl;
	text-align: right;
	font-family: var(--aimc-font);
	box-sizing: border-box;
}
.aimc-container *,
.aimc-container *::before,
.aimc-container *::after {
	box-sizing: border-box;
}

.aimc-container[data-aimc-theme="amethyst"] { --aimc-primary: #8b5cf6; --aimc-secondary: #4c1d95; --aimc-accent: #f0abfc; }
.aimc-container[data-aimc-theme="emerald"] { --aimc-primary: #10b981; --aimc-secondary: #065f46; --aimc-accent: #6ee7b7; }
.aimc-container[data-aimc-theme="ember"] { --aimc-primary: #f97316; --aimc-secondary: #991b1b; --aimc-accent: #fdba74; }
.aimc-container[data-aimc-theme="blossom"] { --aimc-primary: #ec4899; --aimc-secondary: #9d174d; --aimc-accent: #f9a8d4; }
.aimc-container[data-aimc-theme="galaxy"] { --aimc-primary: #6366f1; --aimc-secondary: #0f172a; --aimc-accent: #22d3ee; }
.aimc-container[data-aimc-theme="frost"] { --aimc-primary: #0ea5e9; --aimc-secondary: #155e75; --aimc-accent: #bae6fd; }
.aimc-container[data-aimc-theme="royal-gold"] { --aimc-primary: #d97706; --aimc-secondary: #422006; --aimc-accent: #fde68a; }
.aimc-container[data-aimc-theme="graphite"] { --aimc-primary: #334155; --aimc-secondary: #020617; --aimc-accent: #cbd5e1; }
.aimc-container[data-aimc-theme="turquoise"] { --aimc-primary: #14b8a6; --aimc-secondary: #164e63; --aimc-accent: #99f6e4; }
.aimc-container[data-aimc-theme="neon"] { --aimc-primary: #a855f7; --aimc-secondary: #111827; --aimc-accent: #22c55e; }
.aimc-container[data-aimc-theme="coral"] { --aimc-primary: #fb7185; --aimc-secondary: #7f1d1d; --aimc-accent: #fed7aa; }

.aimc-container[data-aimc-mode="dark"] {
	--aimc-surface: rgba(15, 23, 42, 0.86);
	--aimc-surface-strong: #0b1120;
	--aimc-glass: rgba(15, 23, 42, 0.76);
	--aimc-page: #020617;
	--aimc-text: #f8fafc;
	--aimc-muted: #94a3b8;
	--aimc-border: rgba(148, 163, 184, 0.22);
	--aimc-bot-bg: rgba(30, 41, 59, 0.78);
	--aimc-bot-text: #e5eefb;
	--aimc-input-bg: rgba(15, 23, 42, 0.74);
	--aimc-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 12px 34px rgba(37, 99, 235, 0.18);
}

.aimc-floating {
	position: fixed;
	z-index: 99990;
}
.aimc-pos-bottom-right { inset-block-end: 24px; inset-inline-end: 24px; }
.aimc-pos-bottom-left { inset-block-end: 24px; inset-inline-start: 24px; }
.aimc-pos-top-right { inset-block-start: 24px; inset-inline-end: 24px; }
.aimc-pos-top-left { inset-block-start: 24px; inset-inline-start: 24px; }

.aimc-launcher {
	position: relative;
	width: 68px;
	height: 68px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 24px;
	cursor: pointer;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--aimc-launcher-color, var(--aimc-user-bg)) !important;
	box-shadow: 0 22px 50px color-mix(in srgb, var(--aimc-primary) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.4);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-radius 0.22s ease;
	isolation: isolate;
}
.aimc-launcher::before {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 28px;
	background: color-mix(in srgb, var(--aimc-primary) 16%, transparent);
	z-index: -1;
	animation: aimc-pulse 2.8s ease-in-out infinite;
}
.aimc-launcher:hover {
	transform: translateY(-4px) scale(1.02);
	border-radius: 28px;
	box-shadow: 0 28px 60px color-mix(in srgb, var(--aimc-primary) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.aimc-launcher:focus-visible { outline: none; box-shadow: var(--aimc-ring), 0 22px 50px color-mix(in srgb, var(--aimc-primary) 32%, transparent); }
.aimc-launcher-emoji { font-size: 30px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.24)); }
.aimc-btn-img,
.aimc-logo-image { width: 34px; height: 34px; border-radius: 16px; object-fit: contain; }
.aimc-btn-img-wrap,
.aimc-avatar-icon { display: inline-flex; align-items: center; justify-content: center; }
.aimc-floating.aimc-open .aimc-launcher,
.aimc-floating.aimc-open .aimc-launcher-label { display: none; }

.aimc-launcher-label {
	position: absolute;
	inset-inline-end: 78px;
	inset-block-start: 11px;
	white-space: nowrap;
	padding: 11px 14px;
	border-radius: 16px;
	background: var(--aimc-glass);
	backdrop-filter: blur(16px);
	border: 1px solid var(--aimc-border);
	box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14);
	font-size: 13px;
	font-weight: 700;
	color: var(--aimc-text);
}
.aimc-pos-bottom-left .aimc-launcher-label,
.aimc-pos-top-left .aimc-launcher-label { inset-inline-end: auto; inset-inline-start: 78px; }

.aimc-window {
	width: 410px;
	max-width: calc(100vw - 32px);
	height: 635px;
	max-height: calc(100vh - 54px);
	background:
		radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--aimc-primary) 9%, transparent), transparent 33%),
		linear-gradient(180deg, var(--aimc-surface), var(--aimc-surface-strong));
	color: var(--aimc-text);
	border: 1px solid var(--aimc-border);
	border-radius: 30px;
	box-shadow: var(--aimc-shadow);
	display: none;
	flex-direction: column;
	overflow: hidden;
	backdrop-filter: blur(22px);
}
.aimc-floating .aimc-window { position: absolute; inset-block-end: 0; }
.aimc-pos-bottom-right .aimc-window,
.aimc-pos-top-right .aimc-window { inset-inline-end: 0; }
.aimc-pos-bottom-left .aimc-window,
.aimc-pos-top-left .aimc-window { inset-inline-start: 0; }
.aimc-pos-top-right .aimc-window,
.aimc-pos-top-left .aimc-window { inset-block-start: 82px; inset-block-end: auto; }
.aimc-floating.aimc-open .aimc-window { display: flex; animation: aimc-rise 0.28s cubic-bezier(.2,.9,.2,1); }
.aimc-inline .aimc-window { display: flex; position: relative; height: 640px; width: min(100%, 820px); max-width: 100%; margin: 0 auto; }

.aimc-header {
	position: relative;
	padding: 18px 18px 16px;
	background: var(--aimc-header-bg);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: none;
	isolation: isolate;
}
.aimc-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 72%);
	z-index: -1;
}
.aimc-header-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.aimc-avatar {
	width: 46px;
	height: 46px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.18);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 12px 30px rgba(0, 0, 0, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	flex: none;
}
.aimc-avatar .aimc-logo-image { width: 28px; height: 28px; border-radius: 12px; }
.aimc-launcher .aimc-logo-image { width: 36px; height: 36px; border-radius: 14px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18)); }
.aimc-header-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aimc-header-name { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aimc-header-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; opacity: 0.92; }
.aimc-status-dot { width: 8px; height: 8px; border-radius: 999px; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.22); }
.aimc-header-actions { display: flex; gap: 7px; flex: none; }
.aimc-icon-btn {
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.14);
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.16s ease, background 0.16s ease;
}
.aimc-icon-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.26); }
.aimc-ico { font-size: 15px; line-height: 1; }
.aimc-ico-close { font-size: 17px; font-weight: 800; }

.aimc-leadgate {
	padding: 18px;
	border-bottom: 1px solid var(--aimc-border);
	background: linear-gradient(180deg, color-mix(in srgb, var(--aimc-primary) 6%, var(--aimc-surface)), var(--aimc-surface));
}
.aimc-leadgate-card {
	padding: 16px;
	border: 1px solid color-mix(in srgb, var(--aimc-primary) 18%, var(--aimc-border));
	border-radius: 22px;
	background: var(--aimc-glass);
	backdrop-filter: blur(14px);
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}
.aimc-leadgate-title {
	font-size: 15px;
	font-weight: 800;
	color: var(--aimc-text);
	margin-bottom: 8px;
}
.aimc-leadgate-desc {
	font-size: 13px;
	line-height: 1.9;
	color: var(--aimc-muted);
	margin-bottom: 12px;
}
.aimc-leadgate-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
.aimc-lead-input {
	width: 100%;
	border: 1px solid var(--aimc-border);
	border-radius: 16px;
	padding: 12px 14px;
	background: var(--aimc-input-bg);
	color: var(--aimc-text);
	font-family: var(--aimc-font);
	font-size: 14px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.aimc-lead-input:focus {
	border-color: color-mix(in srgb, var(--aimc-primary) 58%, var(--aimc-border));
	box-shadow: var(--aimc-ring);
}
.aimc-leadgate-submit {
	margin-top: 12px;
	width: 100%;
	border: none;
	border-radius: 16px;
	padding: 13px 16px;
	background: var(--aimc-user-bg);
	color: #fff;
	font-family: var(--aimc-font);
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 12px 24px color-mix(in srgb, var(--aimc-primary) 24%, transparent);
}
.aimc-leadgate-error {
	margin-top: 10px;
	font-size: 12px;
	color: #ef4444;
}
.aimc-lead-locked .aimc-messages {
	opacity: .72;
}

.aimc-messages {
	position: relative;
	flex: 1;
	overflow-y: auto;
	padding: 18px 18px 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-behavior: smooth;
	background: linear-gradient(180deg, color-mix(in srgb, var(--aimc-page) 66%, transparent), transparent);
}
.aimc-messages::-webkit-scrollbar { width: 8px; }
.aimc-messages::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--aimc-primary) 25%, var(--aimc-border)); border-radius: 99px; }
.aimc-msg { display: flex; max-width: 86%; animation: aimc-message-in 0.22s ease both; }
.aimc-msg-bot { align-self: flex-start; }
.aimc-msg-user { align-self: flex-end; }
.aimc-bubble {
	position: relative;
	padding: 12px 15px;
	border-radius: 20px;
	font-size: 14px;
	line-height: 1.9;
	word-wrap: break-word;
	white-space: pre-wrap;
}
.aimc-msg-bot .aimc-bubble {
	background: var(--aimc-bot-bg);
	color: var(--aimc-bot-text);
	border: 1px solid var(--aimc-border);
	border-end-start-radius: 8px;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
.aimc-msg-user .aimc-bubble {
	background: var(--aimc-user-bg);
	color: var(--aimc-user-text);
	border-end-end-radius: 8px;
	box-shadow: 0 14px 30px color-mix(in srgb, var(--aimc-primary) 24%, transparent);
}
.aimc-container[data-bubble="sharp"] .aimc-bubble { border-radius: 10px; }
.aimc-container[data-bubble="bordered"] .aimc-bubble { background: transparent; border: 1.5px solid color-mix(in srgb, var(--aimc-primary) 30%, var(--aimc-border)); color: var(--aimc-text); }

.aimc-welcome .aimc-bubble { border: 1px solid color-mix(in srgb, var(--aimc-primary) 20%, var(--aimc-border)); background: linear-gradient(180deg, color-mix(in srgb, var(--aimc-primary) 7%, var(--aimc-bot-bg)), var(--aimc-bot-bg)); }
.aimc-rating { display: inline-flex; align-self: flex-start; gap: 7px; margin: -6px 4px 2px; }
.aimc-rating button {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid var(--aimc-border);
	background: var(--aimc-glass);
	cursor: pointer;
	font-size: 14px;
	transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.aimc-rating button:hover,
.aimc-rating button.rated { transform: translateY(-1px); border-color: color-mix(in srgb, var(--aimc-primary) 48%, var(--aimc-border)); background: color-mix(in srgb, var(--aimc-primary) 10%, var(--aimc-glass)); }

.aimc-typing {
	align-self: flex-start;
	margin: 0 18px 12px;
	padding: 9px 12px;
	border-radius: 999px;
	background: var(--aimc-bot-bg);
	border: 1px solid var(--aimc-border);
}
.aimc-typing span {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-inline: 2px;
	border-radius: 50%;
	background: var(--aimc-muted);
	animation: aimc-dot 1.15s ease-in-out infinite;
}
.aimc-typing span:nth-child(2) { animation-delay: .14s; }
.aimc-typing span:nth-child(3) { animation-delay: .28s; }

.aimc-input-area {
	position: relative;
	padding: 14px;
	border-top: 1px solid var(--aimc-border);
	background: linear-gradient(180deg, var(--aimc-glass), var(--aimc-surface));
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex: none;
}
.aimc-input {
	min-height: 48px;
	max-height: 138px;
	flex: 1;
	resize: none;
	outline: none;
	border: 1px solid var(--aimc-border);
	border-radius: 18px;
	padding: 13px 14px;
	background: var(--aimc-input-bg);
	color: var(--aimc-text);
	font-family: var(--aimc-font);
	font-size: 14px;
	line-height: 1.7;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.aimc-input:focus { border-color: color-mix(in srgb, var(--aimc-primary) 58%, var(--aimc-border)); box-shadow: var(--aimc-ring); background: var(--aimc-surface-strong); }
.aimc-input::placeholder { color: color-mix(in srgb, var(--aimc-muted) 74%, transparent); }
.aimc-send-btn {
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 18px;
	background: var(--aimc-user-bg);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 14px 26px color-mix(in srgb, var(--aimc-primary) 24%, transparent);
	transition: transform .16s ease, filter .16s ease;
	flex: none;
}
.aimc-send-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.aimc-send-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.aimc-ico-send { transform: scaleX(-1); font-size: 18px; }
.aimc-branding {
	padding: 8px 14px 12px;
	text-align: center;
	font-size: 11px;
	color: var(--aimc-muted);
	background: var(--aimc-surface);
}
.aimc-error {
	align-self: stretch;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid rgba(239, 68, 68, .22);
	background: rgba(254, 226, 226, .78);
	color: #b91c1c;
	font-size: 13px;
}
.aimc-container[data-aimc-mode="dark"] .aimc-error { background: rgba(127, 29, 29, .35); color: #fecaca; }

@keyframes aimc-rise { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes aimc-message-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aimc-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes aimc-pulse { 0%, 100% { transform: scale(.98); opacity: .74; } 50% { transform: scale(1.08); opacity: .28; } }

@media (max-width: 520px) {
	.aimc-pos-bottom-right,
	.aimc-pos-bottom-left {
		inset-inline: 14px;
		inset-block-end: 14px;
		inset-block-start: auto;
	}
	.aimc-pos-top-right,
	.aimc-pos-top-left {
		inset-inline: 14px;
		inset-block-start: 14px;
		inset-block-end: auto;
	}
	.aimc-window {
		width: calc(100vw - 28px);
		height: min(650px, calc(100vh - 28px));
		border-radius: 26px;
	}
	.aimc-pos-bottom-right.aimc-floating .aimc-window,
	.aimc-pos-bottom-left.aimc-floating .aimc-window {
		inset-inline: 0 !important;
		inset-block-end: 0 !important;
		inset-block-start: auto !important;
	}
	.aimc-pos-top-right.aimc-floating .aimc-window,
	.aimc-pos-top-left.aimc-floating .aimc-window {
		inset-inline: 0 !important;
		inset-block-start: 0 !important;
		inset-block-end: auto !important;
	}
	.aimc-launcher { width: 62px; height: 62px; border-radius: 22px; }
	.aimc-launcher-label { display: none; }
	.aimc-header { padding: 16px; }
	.aimc-msg { max-width: 92%; }
}

.aimc-iconified,
.aimc-inline-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.aimc-inline-icon svg {
	width: 1em;
	height: 1em;
	display: block;
}
.aimc-launcher-emoji .aimc-inline-icon,
.aimc-avatar .aimc-inline-icon {
	font-size: 28px;
}
.aimc-ico .aimc-inline-icon {
	font-size: 16px;
}
.aimc-rating .aimc-inline-icon {
	font-size: 15px;
}
.aimc-header {
	color: var(--aimc-header-text, #fff);
}
.aimc-input {
	color: var(--aimc-input-text, var(--aimc-text));
}
.aimc-input::placeholder {
	color: color-mix(in srgb, var(--aimc-input-text, var(--aimc-muted)) 55%, transparent);
}
.aimc-suggestions {
	display: grid;
	gap: 10px;
	margin: 4px 0 12px;
}
.aimc-suggestions-title {
	font-size: 12px;
	font-weight: 800;
	color: var(--aimc-muted);
	padding: 0 4px;
}
.aimc-suggestion-card {
	display: grid;
	gap: 4px;
	padding: 12px 14px;
	border: 1px solid var(--aimc-border);
	border-radius: 16px;
	background: var(--aimc-bot-bg);
	color: inherit;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(15,23,42,.05);
}
.aimc-suggestion-card:hover {
	border-color: color-mix(in srgb, var(--aimc-primary) 40%, var(--aimc-border));
	transform: translateY(-1px);
}
.aimc-suggestion-name {
	font-size: 13px;
	font-weight: 800;
}
.aimc-suggestion-meta {
	font-size: 12px;
	color: var(--aimc-muted);
}
.aimc-suggestion-cta {
	font-size: 12px;
	font-weight: 800;
	color: var(--aimc-primary);
}
.aimc-bubble a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.aimc-launcher-emoji .aimc-inline-icon svg,
.aimc-avatar .aimc-inline-icon svg { width: 1.1em; height: 1.1em; stroke-width: 2.1; }
.aimc-icon-btn .aimc-inline-icon svg,
.aimc-send-btn .aimc-inline-icon svg,
.aimc-rating .aimc-inline-icon svg { stroke-width: 2.15; }