/* MBBS AI Genie — modern Urdu production interface, 2026-08-24. */

:root {
	--genie-blue-950: #061b4f;
	--genie-blue-900: #07327f;
	--genie-blue-700: #075fda;
	--genie-blue-600: #0879f2;
	--genie-blue-100: #eaf4ff;
	--genie-ink: #12335d;
	--genie-muted: #67809d;
	--genie-line: #d7e5f5;
	--genie-gold: #ffc83d;
	--genie-green: #27d879;
	--genie-white: #ffffff;
}

/* ============================================================
   HOMEPAGE GENIE CTA — ICON LINK
   The homepage section owns the placement. This button only
   opens the single authoritative Genie panel.
   ============================================================ */

.mbbs-azadi-genie-launcher-wrap {
	width: min(100%, 620px);
	margin: 24px auto 14px;
	isolation: isolate;
}

.mbbs-azadi-genie-launcher {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	width: 100%;
	min-height: 82px;
	display: flex !important;
	align-items: center;
	gap: 14px;
	padding: 11px 15px !important;
	border: 1px solid rgba(255, 220, 112, .88) !important;
	border-radius: 24px !important;
	background: linear-gradient(135deg, #073ca7 0%, #075ed9 48%, #1586ed 100%) !important;
	box-shadow:
		0 16px 38px rgba(0, 34, 101, .34),
		inset 0 1px 0 rgba(255, 255, 255, .25) !important;
	color: #fff !important;
	font: inherit;
	text-align: right;
	direction: rtl;
	cursor: pointer;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mbbs-azadi-genie-launcher::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 12% 5%, rgba(255, 255, 255, .24), transparent 34%),
		linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .12) 52%, transparent 70%);
	pointer-events: none;
}

.mbbs-azadi-genie-launcher:hover {
	transform: translateY(-2px);
	border-color: #ffe083 !important;
	box-shadow:
		0 20px 46px rgba(0, 31, 96, .42),
		0 0 0 4px rgba(255, 218, 94, .12) !important;
}

.mbbs-azadi-genie-launcher:focus-visible {
	outline: 3px solid #ffd95c !important;
	outline-offset: 4px;
}

.mbbs-azadi-genie-orb {
	position: relative;
	z-index: 1;
	width: 60px;
	height: 60px;
	flex: 0 0 60px;
	display: grid;
	place-items: center;
	padding: 3px;
	border: 2px solid #ffd65e;
	border-radius: 50%;
	background: #fff;
	box-shadow:
		0 0 0 4px rgba(255, 255, 255, .15),
		0 7px 18px rgba(0, 24, 80, .32);
	overflow: hidden;
}

.mbbs-azadi-genie-orb img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	min-width: 100%;
	max-width: none !important;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}

.mbbs-azadi-genie-copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	text-align: right;
}

.mbbs-azadi-genie-copy small,
.mbbs-azadi-genie-copy strong,
.mbbs-azadi-genie-copy em {
	display: block;
	width: 100%;
	margin: 0;
	color: inherit;
}

.mbbs-azadi-genie-copy small {
	font-size: 12px;
	line-height: 1.35;
	opacity: .82;
}

.mbbs-azadi-genie-copy strong {
	font-size: 20px;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -.01em;
}

.mbbs-azadi-genie-copy em {
	font-size: 12px;
	line-height: 1.35;
	font-style: normal;
	color: #ffe37f;
}

.mbbs-azadi-genie-arrow {
	position: relative;
	z-index: 1;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #ffe37f;
	font-size: 24px;
	line-height: 1;
}

.mbbs-azadi-genie-hint {
	margin: 10px auto 0;
	padding: 0 12px;
	color: rgba(255, 255, 255, .92) !important;
	font-size: 15px;
	line-height: 1.7;
	text-align: center;
}

@media (max-width: 640px) {
	.mbbs-azadi-genie-launcher-wrap {
		margin: 18px auto 12px;
	}

	.mbbs-azadi-genie-launcher {
		min-height: 72px;
		gap: 10px;
		padding: 9px 10px !important;
		border-radius: 20px !important;
	}

	.mbbs-azadi-genie-orb {
		width: 52px;
		height: 52px;
		flex-basis: 52px;
	}

	.mbbs-azadi-genie-copy small {
		font-size: 10px;
	}

	.mbbs-azadi-genie-copy strong {
		font-size: 16px;
	}

	.mbbs-azadi-genie-copy em {
		font-size: 10px;
	}

	.mbbs-azadi-genie-arrow {
		width: 32px;
		height: 32px;
		flex-basis: 32px;
		font-size: 20px;
	}

	.mbbs-azadi-genie-hint {
		font-size: 13px;
	}
}

.mbbs-genie,
.mbbs-genie * {
	box-sizing: border-box;
}

.mbbs-genie {
	position: fixed;
	left: 24px;
	right: auto;
	bottom: calc(28px + env(safe-area-inset-bottom, 0px));
	z-index: 2147483000;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	pointer-events: none;
}

/* Launcher */

.mbbs-genie-character {
	position: absolute;
	left: 0;
	bottom: 0;
	min-width: 256px;
	min-height: 76px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 20px 8px 8px;
	border: 1px solid rgba(255, 214, 80, .8);
	border-radius: 999px;
	background:
		radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .22), transparent 33%),
		linear-gradient(115deg, #0849a6 0%, #076ee6 64%, #08429b 100%);
	box-shadow: 0 18px 42px rgba(4, 44, 114, .3), 0 0 0 5px rgba(42, 156, 255, .08);
	color: #fff;
	cursor: pointer;
	pointer-events: auto;
	transform-origin: left bottom;
	animation: genieLauncherFloat 4.6s ease-in-out infinite;
	transition: opacity .24s ease, transform .24s ease, box-shadow .24s ease;
}

.mbbs-genie-character:hover {
	transform: translateY(-3px) scale(1.015);
	box-shadow: 0 22px 50px rgba(4, 44, 114, .38), 0 0 32px rgba(53, 190, 255, .28);
}

.mbbs-genie[data-state="open"] .mbbs-genie-character {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(12px) scale(.92);
}

.mbbs-genie-avatar {
	position: relative;
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
	display: grid;
	place-items: center;
	border: 2px solid rgba(255, 220, 98, .95);
	border-radius: 50%;
	background: radial-gradient(circle at 40% 25%, #edfaff, #40a8ff 48%, #0752c1 100%);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 8px 20px rgba(0, 31, 92, .26);
	overflow: hidden;
}

.mbbs-genie-character-image {
	position: relative;
	z-index: 2;
	width: 68px;
	height: 72px;
	display: block;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 7px 8px rgba(0, 29, 90, .2));
	transform-origin: 50% 82%;
	animation: genieCharacterIdle 4s ease-in-out infinite;
}

.mbbs-genie-smoke,
.mbbs-genie-glow {
	position: absolute;
	pointer-events: none;
}

.mbbs-genie-smoke {
	left: 50%;
	bottom: -8px;
	width: 66px;
	height: 30px;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(115, 228, 255, .52), rgba(64, 142, 255, .08) 68%, transparent 72%);
	filter: blur(4px);
	transform: translateX(-50%);
}

.mbbs-genie-glow {
	inset: -11px;
	border-radius: inherit;
	background: radial-gradient(circle at 22% 50%, rgba(100, 222, 255, .19), transparent 37%);
}

.mbbs-genie-mini-copy {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	white-space: nowrap;
}

.mbbs-genie-mini-copy strong {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.mbbs-genie-mini-copy small {
	margin-top: 4px;
	font-family: "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.45;
	color: #dceeff;
	direction: rtl;
}

.mbbs-genie-notice {
	position: absolute;
	top: -5px;
	right: 8px;
	width: 23px;
	height: 23px;
	display: grid;
	place-items: center;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #ef3340;
	color: #fff;
	font-size: 10px;
	font-weight: 900;
}

/* Panel */

.mbbs-genie-panel {
	position: absolute;
	left: 0;
	bottom: 0;
	width: min(560px, calc(100vw - 48px));
	max-height: min(780px, calc(100dvh - 56px));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(111, 175, 239, .48);
	border-radius: 28px;
	background: #f7fbff;
	box-shadow: 0 32px 90px rgba(3, 33, 87, .34), 0 0 0 6px rgba(21, 119, 237, .07);
	color: var(--genie-ink);
	pointer-events: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(22px) scale(.965);
	transform-origin: bottom left;
	transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
}

.mbbs-genie[data-state="open"] .mbbs-genie-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.mbbs-genie-header {
	min-height: 72px;
	flex: 0 0 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 14px;
	background:
		radial-gradient(circle at 88% 0%, rgba(255, 255, 255, .17), transparent 35%),
		linear-gradient(112deg, #073b96, #076ee7 67%, #0a55c0);
	color: #fff;
	direction: ltr;
}

.mbbs-genie-brand {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.mbbs-genie-brand-avatar {
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	display: grid;
	place-items: center;
	overflow: hidden;
	border: 2px solid rgba(255, 225, 118, .92);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 16px rgba(2, 37, 98, .23);
}

.mbbs-genie-brand-avatar img {
	width: 54px;
	height: 54px;
	object-fit: cover;
}

.mbbs-genie-brand strong {
	display: block;
	font-size: 17px;
	font-weight: 850;
	line-height: 1.15;
}

.mbbs-genie-brand small {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 5px;
	font-family: "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
	font-size: 11px;
	line-height: 1.25;
	color: #dcedff;
	direction: rtl;
}

.mbbs-genie-brand small span {
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-radius: 50%;
	background: var(--genie-green);
	box-shadow: 0 0 0 4px rgba(39, 216, 121, .13), 0 0 12px rgba(39, 216, 121, .72);
}

.mbbs-genie-controls {
	display: flex;
	align-items: center;
	gap: 7px;
}

.mbbs-genie-controls button {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	background: rgba(0, 39, 111, .26);
	color: #fff;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.mbbs-genie-controls button:hover {
	background: rgba(255, 255, 255, .18);
	transform: translateY(-1px);
}

/* Scrollable content */

.mbbs-genie-conversation {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px;
	background:
		radial-gradient(circle at 8% 12%, rgba(69, 193, 255, .12), transparent 28%),
		linear-gradient(180deg, #fbfdff, #f1f7ff);
	-webkit-overflow-scrolling: touch;
}

.mbbs-genie-intro {
	min-height: 242px;
	display: grid;
	grid-template-columns: 42% 58%;
	align-items: center;
	gap: 0;
}

.mbbs-genie-intro-character {
	height: 238px;
	display: grid;
	place-items: end center;
	filter: drop-shadow(0 16px 21px rgba(7, 76, 160, .2));
}

.mbbs-genie-intro-character img {
	width: 218px;
	height: 254px;
	object-fit: contain;
	object-position: center bottom;
	transform-origin: 50% 82%;
	animation: genieWelcome 1s cubic-bezier(.2, .8, .25, 1) both;
}

.mbbs-genie-message {
	position: relative;
	padding: 17px 18px;
	border-radius: 23px 23px 23px 7px;
	font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 2;
	direction: rtl;
	text-align: right;
}

.mbbs-genie-message::before {
	content: "";
	position: absolute;
	left: -15px;
	top: 44%;
	border-width: 10px 16px 10px 0;
	border-style: solid;
	border-color: transparent #075acb transparent transparent;
}

.mbbs-genie-message-ai {
	background: linear-gradient(145deg, #0873ef, #0744aa);
	color: #fff;
	box-shadow: 0 16px 32px rgba(6, 80, 180, .22);
}

.mbbs-genie-message strong {
	display: block;
	margin-bottom: 3px;
	color: var(--genie-gold);
	font-size: 20px;
	line-height: 1.65;
}

.mbbs-genie-message p {
	margin: 3px 0;
}

.mbbs-genie-quick {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 8px;
	direction: rtl;
}

.mbbs-genie-quick button {
	min-height: 47px;
	padding: 8px 13px;
	border: 1px solid var(--genie-line);
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 5px 16px rgba(8, 63, 132, .07);
	color: #174878;
	font-family: "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
	font-size: 12.5px;
	font-weight: 750;
	line-height: 1.65;
	text-align: right;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.mbbs-genie-quick button:hover,
.mbbs-genie-quick button:focus-visible {
	border-color: #1b7cf0;
	box-shadow: 0 8px 20px rgba(8, 96, 210, .13);
	color: #0758be;
	transform: translateY(-1px);
}

/* Conversation mode */

.mbbs-genie.has-conversation .mbbs-genie-intro {
	display: none;
}

.mbbs-genie.has-conversation .mbbs-genie-quick {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 6px;
	scrollbar-width: none;
}

.mbbs-genie.has-conversation .mbbs-genie-quick::-webkit-scrollbar {
	display: none;
}

.mbbs-genie.has-conversation .mbbs-genie-quick button {
	min-height: 36px;
	flex: 0 0 auto;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	white-space: nowrap;
}

.mbbs-genie-messages {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 6px;
	direction: ltr;
}

.mbbs-genie.has-conversation .mbbs-genie-messages {
	min-height: 210px;
}

.mbbs-genie-message-row {
	display: flex;
	align-items: flex-end;
	gap: 7px;
	width: 100%;
	animation: genieMessageIn .24s ease both;
}

.mbbs-genie-message-row.is-user {
	justify-content: flex-end;
}

.mbbs-genie-message-row.is-assistant {
	justify-content: flex-start;
}

.mbbs-genie-chat-avatar {
	width: 31px;
	height: 31px;
	flex: 0 0 31px;
	display: grid;
	place-items: center;
	overflow: hidden;
	border: 1px solid #cbdced;
	border-radius: 50%;
	background: #fff;
	color: #456a8e;
	font-family: "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
	font-size: 9px;
	font-weight: 850;
	line-height: 1;
}

.mbbs-genie-message-row.is-assistant .mbbs-genie-chat-avatar {
	border-color: #92c8f8;
	background: #e8f5ff;
}

.mbbs-genie-chat-avatar img {
	width: 33px;
	height: 33px;
	object-fit: cover;
}

.mbbs-genie-user-message,
.mbbs-genie-preview-answer {
	max-width: 82%;
	padding: 10px 13px;
	border-radius: 15px;
	box-shadow: 0 4px 13px rgba(4, 48, 103, .08);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.mbbs-genie-user-message {
	border-bottom-right-radius: 5px;
	background: linear-gradient(140deg, #0877ef, #0756c9);
	color: #fff;
}

.mbbs-genie-preview-answer {
	border-bottom-left-radius: 5px;
	background: #fff;
	color: #183f69;
}

.mbbs-genie-user-message[dir="rtl"],
.mbbs-genie-preview-answer[dir="rtl"] {
	direction: rtl;
	text-align: right;
	font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
	font-size: 14px;
	line-height: 2;
}

.mbbs-genie-user-message[dir="ltr"],
.mbbs-genie-preview-answer[dir="ltr"] {
	direction: ltr;
	text-align: left;
}

.mbbs-genie-preview-answer p {
	margin: 0 0 7px;
}

.mbbs-genie-preview-answer p:last-child {
	margin-bottom: 0;
}

.mbbs-genie-preview-answer ul {
	margin: 2px 0 7px;
	padding-inline-start: 19px;
}

.mbbs-genie-preview-answer[dir="rtl"] ul {
	padding-inline: 0 19px;
}

.mbbs-genie-preview-answer li {
	margin: 2px 0;
}

.mbbs-genie-answer-chunk {
	opacity: 0;
	transform: translateY(5px);
	animation: genieChunkIn .26s ease forwards;
}

.mbbs-genie-thinking {
	min-width: 58px;
	min-height: 39px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.mbbs-genie-thinking .mbbs-genie-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #0871dc;
	animation: genieTyping 1s ease-in-out infinite;
}

.mbbs-genie-thinking .mbbs-genie-dot:nth-child(2) { animation-delay: .14s; }
.mbbs-genie-thinking .mbbs-genie-dot:nth-child(3) { animation-delay: .28s; }

.mbbs-genie.is-thinking .mbbs-genie-send,
.mbbs-genie.is-thinking .mbbs-genie-mic {
	opacity: .5;
	pointer-events: none;
}

.mbbs-genie.is-thinking .mbbs-genie-brand-avatar img,
.mbbs-genie.is-thinking .mbbs-genie-intro-character img {
	animation: genieThinking 1.45s ease-in-out infinite;
}

.mbbs-genie.is-speaking .mbbs-genie-brand-avatar,
.mbbs-genie.is-speaking .mbbs-genie-chat-avatar {
	box-shadow: 0 0 0 4px rgba(25, 175, 255, .15), 0 0 24px rgba(25, 175, 255, .45);
}

.mbbs-genie.is-speaking .mbbs-genie-brand-avatar img,
.mbbs-genie.is-speaking .mbbs-genie-intro-character img {
	animation: genieSpeaking .9s ease-in-out infinite;
}

/* Smart actions */

.mbbs-genie-smart-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 7px;
	margin-top: 3px;
	direction: rtl;
}

.mbbs-genie-smart-action {
	min-height: 39px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 13px;
	border-radius: 12px;
	font-family: "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1.55;
	text-decoration: none !important;
	transition: transform .18s ease, box-shadow .18s ease;
}

.mbbs-genie-smart-action:hover { transform: translateY(-1px); }

.mbbs-genie-smart-action.is-primary {
	background: linear-gradient(135deg, #087bf3, #0751be);
	box-shadow: 0 7px 18px rgba(8, 98, 205, .21);
	color: #fff;
}

.mbbs-genie-smart-action.is-secondary {
	background: linear-gradient(135deg, #ffe16f, #ffc431);
	box-shadow: 0 7px 18px rgba(255, 195, 45, .2);
	color: #163f6d;
}

/* Listening and voice transport */

.mbbs-genie-listening {
	min-height: 34px;
	flex: 0 0 auto;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 5px 13px;
	border-top: 1px solid var(--genie-line);
	background: #eef8ff;
	color: #0870cf;
	font-family: "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
	font-size: 11px;
	direction: rtl;
}

.mbbs-genie.is-listening .mbbs-genie-listening { display: flex; }

.mbbs-genie-wave {
	height: 20px;
	display: flex;
	align-items: center;
	gap: 2px;
}

.mbbs-genie-wave i {
	width: 2px;
	height: 6px;
	border-radius: 2px;
	background: #079be9;
	animation: genieWave .78s ease-in-out infinite alternate;
}

.mbbs-genie-wave i:nth-child(2n) { animation-delay: .14s; }
.mbbs-genie-wave i:nth-child(3n) { animation-delay: .28s; }

.mbbs-genie-voice-controls {
	min-height: 44px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 6px 12px;
	border-top: 1px solid var(--genie-line);
	background: #f8fbff;
	direction: ltr;
}

.mbbs-genie-voice-controls button {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 1px solid #bcd5ee;
	border-radius: 50%;
	background: #fff;
	color: #0758b7;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, transform .18s ease, opacity .18s ease;
}

.mbbs-genie-voice-controls button:hover:not(:disabled) {
	border-color: #0877e8;
	background: #edf6ff;
	transform: translateY(-1px);
}

.mbbs-genie-voice-controls button:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.mbbs-genie[data-voice-state="playing"] #mbbsGeniePause,
.mbbs-genie[data-voice-state="paused"] #mbbsGenieResume {
	border-color: #0877e8;
	background: #0873e6;
	box-shadow: 0 0 17px rgba(8, 115, 230, .25);
	color: #fff;
}

/* Composer */

.mbbs-genie-composer {
	min-height: 66px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 12px;
	border-top: 1px solid var(--genie-line);
	background: #fff;
	direction: ltr;
}

.mbbs-genie-composer textarea {
	min-width: 0;
	min-height: 45px;
	max-height: 100px;
	flex: 1;
	resize: none;
	border: 1px solid #d6e4f2;
	border-radius: 16px;
	outline: 0;
	background: #f7faff;
	color: #17385e;
	padding: 9px 13px;
	font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.85;
	direction: rtl;
	text-align: right;
}

.mbbs-genie-composer textarea:focus {
	border-color: #4c9df0;
	box-shadow: 0 0 0 3px rgba(29, 127, 231, .1);
}

.mbbs-genie-composer textarea::placeholder { color: #8aa0b7; }

.mbbs-genie-mic,
.mbbs-genie-send {
	width: 45px;
	height: 45px;
	flex: 0 0 45px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.mbbs-genie-mic {
	background: linear-gradient(145deg, #ffe174, #ffc633);
	box-shadow: 0 7px 18px rgba(255, 193, 38, .21);
	color: #153e70;
}

.mbbs-genie-send {
	background: linear-gradient(145deg, #0986f9, #0759cf);
	box-shadow: 0 8px 20px rgba(8, 103, 215, .24);
	color: #fff;
}

.mbbs-genie.is-listening .mbbs-genie-mic { animation: genieMicPulse 1s ease-in-out infinite; }

.mbbs-genie-footer {
	min-height: 27px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 3px 14px 7px;
	background: #fff;
	color: #7890a8;
	font-family: "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
	font-size: 9.5px;
	line-height: 1.3;
	direction: rtl;
}

.mbbs-genie-voice-status {
	color: #15955b;
	white-space: nowrap;
}

/* The WhatsApp feature remains available when Genie is closed. */

body.mbbs-genie-open .wHelp-multi {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Focus and animation */

.mbbs-genie button:focus-visible,
.mbbs-genie a:focus-visible {
	outline: 3px solid rgba(255, 199, 52, .94);
	outline-offset: 2px;
}

@keyframes genieLauncherFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

@keyframes genieCharacterIdle {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	50% { transform: translateY(-3px) rotate(1deg); }
}

@keyframes genieWelcome {
	from { opacity: 0; transform: translate(-20px, 20px) scale(.88); }
	to { opacity: 1; transform: translate(0, 0) scale(1); }
}

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

@keyframes genieChunkIn { to { opacity: 1; transform: translateY(0); } }

@keyframes genieTyping {
	0%, 80%, 100% { opacity: .38; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}

@keyframes genieThinking {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	50% { transform: translateY(-3px) rotate(1deg); }
}

@keyframes genieSpeaking {
	0%, 100% { transform: translateY(0) rotate(-1.5deg) scale(1); }
	50% { transform: translateY(-3px) rotate(1.5deg) scale(1.025); }
}

@keyframes genieWave {
	from { height: 5px; }
	to { height: 20px; }
}

@keyframes genieMicPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 197, 43, .42); }
	50% { box-shadow: 0 0 0 10px rgba(255, 197, 43, 0); }
}

/* Responsive */

@media (max-width: 700px) {
	.mbbs-genie {
		left: 8px;
		right: 8px;
		bottom: calc(8px + env(safe-area-inset-bottom, 0px));
	}

	.mbbs-genie-character {
		left: 0;
		min-width: 224px;
		min-height: 64px;
		padding: 6px 15px 6px 6px;
		gap: 9px;
	}

	.mbbs-genie-avatar { width: 52px; height: 52px; flex-basis: 52px; }
	.mbbs-genie-character-image { width: 57px; height: 59px; }
	.mbbs-genie-mini-copy strong { font-size: 14px; }
	.mbbs-genie-mini-copy small { font-size: 10.5px; }

	.mbbs-genie-panel {
		position: fixed;
		left: 7px;
		right: 7px;
		bottom: calc(7px + env(safe-area-inset-bottom, 0px));
		width: auto;
		max-height: calc(100dvh - 14px - env(safe-area-inset-bottom, 0px));
		border-radius: 22px;
		transform-origin: bottom center;
	}

	.mbbs-genie-header {
		min-height: 62px;
		flex-basis: 62px;
		padding: 7px 9px;
		gap: 7px;
	}

	.mbbs-genie-brand { gap: 7px; }
	.mbbs-genie-brand-avatar { width: 45px; height: 45px; flex-basis: 45px; }
	.mbbs-genie-brand-avatar img { width: 47px; height: 47px; }
	.mbbs-genie-brand strong { font-size: 14px; }
	.mbbs-genie-brand small { margin-top: 3px; font-size: 9.5px; }

	.mbbs-genie-controls { gap: 4px; }
	.mbbs-genie-controls button { width: 32px; height: 32px; font-size: 16px; }

	.mbbs-genie-conversation { padding: 9px; }

	.mbbs-genie-intro {
		min-height: 165px;
		grid-template-columns: 33% 67%;
	}

	.mbbs-genie-intro-character { height: 160px; }
	.mbbs-genie-intro-character img { width: 124px; height: 177px; }

	.mbbs-genie-message {
		padding: 10px 11px;
		border-radius: 16px 16px 16px 5px;
		font-size: 11.2px;
		line-height: 1.82;
	}

	.mbbs-genie-message::before {
		left: -9px;
		border-width: 7px 10px 7px 0;
	}

	.mbbs-genie-message strong { font-size: 14px; line-height: 1.55; }

	.mbbs-genie-quick {
		grid-template-columns: 1fr;
		gap: 5px;
		margin-top: 5px;
	}

	.mbbs-genie-quick button {
		min-height: 38px;
		padding: 5px 10px;
		border-radius: 12px;
		font-size: 11px;
		line-height: 1.55;
	}

	.mbbs-genie.has-conversation .mbbs-genie-messages { min-height: 200px; }
	.mbbs-genie.has-conversation .mbbs-genie-quick button { min-height: 33px; font-size: 9.5px; }

	.mbbs-genie-chat-avatar { width: 27px; height: 27px; flex-basis: 27px; font-size: 8px; }
	.mbbs-genie-chat-avatar img { width: 29px; height: 29px; }

	.mbbs-genie-user-message,
	.mbbs-genie-preview-answer {
		max-width: 84%;
		padding: 8px 10px;
		font-size: 11.5px;
	}

	.mbbs-genie-user-message[dir="rtl"],
	.mbbs-genie-preview-answer[dir="rtl"] {
		font-size: 12.5px;
		line-height: 1.9;
	}

	.mbbs-genie-voice-controls { min-height: 41px; padding: 4px 10px; gap: 7px; }
	.mbbs-genie-voice-controls button { width: 31px; height: 31px; }

	.mbbs-genie-composer { min-height: 61px; padding: 7px 9px; gap: 6px; }
	.mbbs-genie-composer textarea { min-height: 43px; padding: 8px 10px; font-size: 12.5px; }
	.mbbs-genie-mic,
	.mbbs-genie-send { width: 42px; height: 42px; flex-basis: 42px; font-size: 17px; }

	.mbbs-genie-footer { min-height: 24px; padding: 2px 10px 6px; font-size: 8.4px; }
}

@media (max-width: 370px) {
	.mbbs-genie-panel { left: 4px; right: 4px; bottom: 4px; max-height: calc(100dvh - 8px); }
	.mbbs-genie-header { padding-inline: 7px; }
	.mbbs-genie-brand strong { font-size: 13px; }
	.mbbs-genie-brand small { font-size: 8.5px; }
	.mbbs-genie-controls button { width: 30px; height: 30px; }
	.mbbs-genie-intro { grid-template-columns: 30% 70%; }
	.mbbs-genie-intro-character img { width: 108px; }
	.mbbs-genie-message { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.mbbs-genie *,
	.mbbs-genie *::before,
	.mbbs-genie *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.mbbs-genie-answer-chunk {
		opacity: 1;
		transform: none;
	}
}