/* ============================================================
   MBBS AI GENIE — FINAL CONSOLIDATED PRODUCTION CSS
   Replaces: genie-live-20260821.css (in mbbs-ai-genie/)
   AND replaces the second design layer previously injected by
   zz-mbbs-ai-genie-reference-design.php (genie-v18-global-chat.css).
   That loader must be disabled — see DEPLOYMENT.md.

   Matches the EXACT markup rendered by mbbs-ai-genie.php::render().
   No IDs, classes, or data attributes were changed.
   ============================================================ */

:root{
	--mbbs-genie-blue:#0d55da;
	--mbbs-genie-blue2:#081f59;
	--mbbs-genie-gold:#ffd75c;
	--mbbs-genie-cyan:#38d9ff;
	--mbbs-genie-white:#ffffff;
	--mbbs-genie-green:#20e979;

	--mbbs-genie-left-desktop:32px;
	--mbbs-genie-bottom-desktop:118px;
	--mbbs-genie-left-mobile:12px;
	--mbbs-genie-bottom-mobile:88px;
}

/* ============================================================
   ROOT + LAUNCHER
   Single position system. Left-docked, no !important battles,
   nothing else on this page redefines these rules.
   ============================================================ */

.mbbs-genie{
	position:fixed;
	left:var(--mbbs-genie-left-desktop);
	right:auto;
	bottom:calc(var(--mbbs-genie-bottom-desktop) + env(safe-area-inset-bottom,0px));
	z-index:999998;
	font-family:Inter, Arial, sans-serif;
	pointer-events:none;
}

.mbbs-genie-character{
	position:absolute;
	left:0;
	right:auto;
	bottom:0;
	display:flex;
	align-items:center;
	gap:9px;
	min-width:92px;
	min-height:78px;
	padding:8px 12px 8px 7px;
	border:1px solid rgba(255,215,92,.58);
	border-radius:999px;
	background:linear-gradient(145deg, rgba(6,36,96,.55), rgba(4,90,134,.28));
	backdrop-filter:blur(16px) saturate(145%);
	-webkit-backdrop-filter:blur(16px) saturate(145%);
	box-shadow:0 15px 50px rgba(0,0,0,.24), 0 0 28px rgba(37,196,255,.18);
	color:#fff;
	cursor:pointer;
	pointer-events:auto;
	opacity:.68;
	transform-origin:left bottom;
	animation:mbbsGenieFloat 4.2s ease-in-out infinite;
	transition:opacity .28s ease, transform .28s ease, box-shadow .28s ease;
}

.mbbs-genie-character:hover,
.mbbs-genie[data-state="open"] .mbbs-genie-character{
	opacity:1;
	transform:translate3d(0,-3px,0) scale(1.02);
	box-shadow:0 18px 55px rgba(0,0,0,.30), 0 0 36px rgba(48,206,255,.38), 0 0 0 1px rgba(255,215,92,.25);
}

.mbbs-genie-avatar{
	position:relative;
	width:60px;
	height:60px;
	flex:0 0 60px;
	display:grid;
	place-items:center;
	border-radius:50%;
	overflow:visible;
	background:radial-gradient(circle at 35% 30%, #37dfff, #0f6ee9 48%, #09296c 100%);
	border:2px solid rgba(255,219,103,.88);
	box-shadow:0 0 0 4px rgba(22,172,255,.13), 0 0 25px rgba(31,192,255,.38);
}

.mbbs-genie-character-image{
	position:relative;
	z-index:2;
	display:block;
	width:67px;
	height:78px;
	object-fit:contain;
	transform-origin:50% 90%;
	filter:drop-shadow(0 10px 14px rgba(0,0,0,.25)) drop-shadow(0 0 12px rgba(53,211,255,.35));
	animation:mbbsGenieCharacterIdle 4.8s ease-in-out infinite;
}

.mbbs-genie-smoke{
	position:absolute;
	z-index:1;
	left:50%;
	bottom:-11px;
	width:78px;
	height:42px;
	transform:translateX(-50%);
	border-radius:50%;
	background:radial-gradient(ellipse at center, rgba(63,215,255,.50) 0%, rgba(32,135,255,.19) 43%, rgba(32,135,255,0) 72%);
	filter:blur(5px);
	animation:mbbsGenieSmoke 3.3s ease-in-out infinite;
}

.mbbs-genie-glow{
	position:absolute;
	inset:-16px;
	border-radius:999px;
	background:radial-gradient(circle, rgba(30,196,255,.20), transparent 70%);
	pointer-events:none;
}

.mbbs-genie-mini-copy{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	white-space:nowrap;
}
.mbbs-genie-mini-copy strong{ font-size:13px; }
.mbbs-genie-mini-copy small{ font-size:10px; opacity:.75; margin-top:2px; }

.mbbs-genie-notice{
	position:absolute;
	top:-5px;
	right:3px;
	width:22px;
	height:22px;
	display:grid;
	place-items:center;
	border-radius:50%;
	background:#ed2939;
	color:#fff;
	font-weight:800;
	font-size:11px;
	box-shadow:0 4px 15px rgba(237,41,57,.38);
}

/* ============================================================
   ENTRY / FLIGHT ANIMATION
   Triggered once per session by JS adding .is-flight-entering
   ============================================================ */

.mbbs-genie.is-flight-entering .mbbs-genie-character{
	animation:mbbsGenieButterflyDock 2.2s cubic-bezier(.18,.72,.22,1) both;
}
.mbbs-genie.is-flight-entering .mbbs-genie-character-image{
	animation:mbbsGenieFlightBody 2.2s ease-in-out both;
}
.mbbs-genie.is-flight-entering .mbbs-genie-smoke{
	animation:mbbsGenieFlightMagic 2.3s ease-out both;
}

/* ============================================================
   PANEL
   Flex column with the conversation area as the ONLY element
   that grows/shrinks. Header, listening bar, composer, and
   footer are fixed height. This is what stops content getting
   clipped on short mobile viewports.
   ============================================================ */

.mbbs-genie-panel{
	position:absolute;
	left:0;
	right:auto;
	bottom:88px;
	width:min(440px, calc(100vw - 30px));
	max-height:min(690px, calc(100dvh - 120px));
	display:flex;
	flex-direction:column;
	overflow:hidden;
	border:1px solid rgba(92,202,255,.38);
	border-radius:28px;
	background:linear-gradient(145deg, rgba(3,24,66,.94), rgba(6,43,102,.90) 48%, rgba(4,25,66,.95));
	backdrop-filter:blur(24px) saturate(150%);
	-webkit-backdrop-filter:blur(24px) saturate(150%);
	box-shadow:0 28px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(29,150,255,.08);
	color:#fff;
	pointer-events:auto;
	opacity:0;
	visibility:hidden;
	transform:translate3d(0,22px,0) scale(.96);
	transform-origin:bottom left;
	transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}

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

.mbbs-genie-header{
	flex:none;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:14px 16px;
	border-bottom:1px solid rgba(255,255,255,.10);
	background:rgba(0,22,65,.32);
}

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

.mbbs-genie-brand-avatar{
	width:43px;
	height:43px;
	flex:none;
	display:grid;
	place-items:center;
	border-radius:50%;
	background:#0c65da;
	border:1px solid rgba(255,215,92,.75);
	font-size:25px;
	overflow:hidden;
}
.mbbs-genie-brand-avatar img{
	width:37px;
	height:42px;
	object-fit:contain;
}

.mbbs-genie-brand strong{ display:block; font-size:16px; }
.mbbs-genie-brand small{
	display:flex; align-items:center; gap:6px;
	margin-top:3px; font-size:10px; opacity:.78;
}
.mbbs-genie-brand small span{
	width:7px; height:7px; border-radius:50%;
	background:var(--mbbs-genie-green);
	box-shadow:0 0 10px rgba(32,233,121,.7);
}

.mbbs-genie-controls{ display:flex; gap:6px; flex:none; }
.mbbs-genie-controls button{
	width:37px; height:37px;
	display:grid; place-items:center;
	border:1px solid rgba(255,255,255,.12);
	border-radius:50%;
	background:rgba(12,64,140,.48);
	color:#fff;
	cursor:pointer;
	font-size:18px;
	transition:background .18s ease;
}
.mbbs-genie-controls button:hover{ background:rgba(20,94,190,.6); }
.mbbs-genie-controls button:focus-visible{
	outline:2px solid var(--mbbs-genie-gold);
	outline-offset:2px;
}

/* -- the scrolling area: THE fix for mobile clipping -- */

.mbbs-genie-conversation{
	flex:1 1 auto;
	min-height:0;
	overflow-y:auto;
	padding:15px;
	-webkit-overflow-scrolling:touch;
}

.mbbs-genie-intro{
	display:grid;
	grid-template-columns:78px minmax(0,1fr);
	gap:10px;
	align-items:end;
}
.mbbs-genie-intro-character{
	font-size:67px;
	text-align:center;
	filter:drop-shadow(0 10px 15px rgba(0,0,0,.30));
	animation:mbbsGenieIntro 1s cubic-bezier(.2,.85,.3,1) both;
}
.mbbs-genie-intro-character img{
	width:92px;
	height:118px;
	object-fit:contain;
	filter:drop-shadow(0 12px 20px rgba(0,0,0,.28)) drop-shadow(0 0 18px rgba(50,210,255,.30));
}

/* -- messages: RTL is the default, LTR is the exception --
   JS applies dir="rtl"/"ltr" per-message based on detected
   script; these rules just make each direction look correct. */

.mbbs-genie-message{
	border-radius:20px 20px 20px 6px;
	padding:13px 15px;
	font-size:13px;
	line-height:1.8;
}
.mbbs-genie-message[dir="rtl"]{ text-align:right; font-family:"Noto Nastaliq Urdu","Noto Sans Arabic",Inter,Arial,sans-serif; }
.mbbs-genie-message[dir="ltr"]{ text-align:left; }

.mbbs-genie-message-ai{
	background:linear-gradient(145deg, rgba(255,255,255,.95), rgba(232,246,255,.91));
	color:#102851;
	box-shadow:0 10px 30px rgba(0,0,0,.17);
}
.mbbs-genie-message strong{ font-size:15px; }
.mbbs-genie-message p{ margin:4px 0; }

.mbbs-genie-quick{
	display:grid;
	grid-template-columns:repeat(2, minmax(0,1fr));
	gap:7px;
	margin-top:14px;
	direction:rtl;
}
.mbbs-genie-quick button{
	min-height:42px;
	padding:8px 10px;
	border:1px solid rgba(74,192,255,.52);
	border-radius:12px;
	background:rgba(7,57,127,.48);
	color:#fff;
	font-size:11px;
	text-align:right;
	cursor:pointer;
	transition:background .2s ease, transform .2s ease;
}
.mbbs-genie-quick button:hover{ background:rgba(15,94,198,.72); transform:translateY(-1px); }
.mbbs-genie-quick button:focus-visible{ outline:2px solid var(--mbbs-genie-gold); outline-offset:2px; }

.mbbs-genie-messages{
	display:flex;
	flex-direction:column;
	gap:9px;
	margin-top:13px;
}

.mbbs-genie-user-message{
	align-self:flex-end;
	max-width:85%;
	padding:10px 12px;
	border-radius:15px 15px 4px 15px;
	background:linear-gradient(135deg, #178ef4, #3ba4ff);
	color:#fff;
	font-size:12px;
	line-height:1.7;
}
.mbbs-genie-user-message[dir="rtl"]{ text-align:right; border-radius:15px 15px 15px 4px; align-self:flex-end; }

.mbbs-genie-preview-answer{
	align-self:flex-start;
	max-width:90%;
	padding:11px 13px;
	border-radius:15px 15px 15px 4px;
	background:rgba(255,255,255,.92);
	color:#102851;
	font-size:12px;
	line-height:1.75;
}
.mbbs-genie-preview-answer[dir="rtl"]{ text-align:right; border-radius:15px 15px 4px 15px; }

.mbbs-genie-thinking{ opacity:.74; font-style:italic; }
.mbbs-genie-thinking .mbbs-genie-dot{
	display:inline-block;
	width:5px; height:5px;
	margin-inline-end:3px;
	border-radius:50%;
	background:#0d55da;
	animation:mbbsGenieDot 1.1s ease-in-out infinite;
}
.mbbs-genie-thinking .mbbs-genie-dot:nth-child(2){ animation-delay:.15s; }
.mbbs-genie-thinking .mbbs-genie-dot:nth-child(3){ animation-delay:.3s; }

.mbbs-genie.is-thinking .mbbs-genie-send,
.mbbs-genie.is-thinking .mbbs-genie-mic{ opacity:.45; pointer-events:none; }
.mbbs-genie.is-thinking .mbbs-genie-character-image,
.mbbs-genie.is-thinking .mbbs-genie-brand-avatar img,
.mbbs-genie.is-thinking .mbbs-genie-intro-character img{
	animation:mbbsGenieThinking 1.4s ease-in-out infinite !important;
}

/* -- SPEAKING state: new. Drives the header avatar + intro
   character (the ones actually visible while chatting), not
   just the launcher, so the "talking" feel is visible where
   the user is looking. -- */

.mbbs-genie.is-speaking .mbbs-genie-character-image,
.mbbs-genie.is-speaking .mbbs-genie-brand-avatar img,
.mbbs-genie.is-speaking .mbbs-genie-intro-character img{
	animation:mbbsGenieSpeaking 0.9s ease-in-out infinite !important;
}
.mbbs-genie.is-speaking .mbbs-genie-avatar,
.mbbs-genie.is-speaking .mbbs-genie-brand-avatar{
	box-shadow:0 0 0 4px rgba(56,217,255,.18), 0 0 28px rgba(56,217,255,.55);
}
.mbbs-genie.is-speaking .mbbs-genie-brand small span{
	animation:mbbsGenieDot 0.9s ease-in-out infinite;
}

/* -- smart action buttons (rendered by JS after each answer) -- */

.mbbs-genie-smart-actions{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:10px;
	direction:rtl;
}
.mbbs-genie-smart-action{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:40px;
	padding:9px 14px;
	border-radius:12px;
	font-size:11px;
	line-height:1.2;
	font-weight:750;
	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, #19a7ff, #1165e7);
	color:#fff;
	box-shadow:0 8px 22px rgba(22,121,235,.24);
}
.mbbs-genie-smart-action.is-secondary{
	background:linear-gradient(135deg, #ffe174, #ffc52f);
	color:#153867;
	box-shadow:0 8px 22px rgba(255,198,49,.20);
}

/* -- listening indicator -- */

.mbbs-genie-listening{
	flex:none;
	display:none;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:8px 15px;
	color:#86eaff;
	font-size:11px;
}
.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:#42dfff;
	animation:mbbsGenieWave .8s ease-in-out infinite alternate;
}
.mbbs-genie-wave i:nth-child(2n){ animation-delay:.15s; }
.mbbs-genie-wave i:nth-child(3n){ animation-delay:.3s; }

/* -- OpenAI voice transport: restores the existing controls without
   introducing a second design or speech engine. -- */

.mbbs-genie-voice-controls{
	flex:none;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	padding:5px 12px 8px;
}
.mbbs-genie-voice-controls button{
	width:32px;
	height:32px;
	display:grid;
	place-items:center;
	border:1px solid rgba(95,188,255,.32);
	border-radius:50%;
	background:rgba(8,49,108,.72);
	color:#fff;
	font-size:14px;
	cursor:pointer;
	transition:background .18s ease, opacity .18s ease, transform .18s ease;
}
.mbbs-genie-voice-controls button:hover:not(:disabled){
	background:rgba(20,94,190,.86);
	transform:translateY(-1px);
}
.mbbs-genie-voice-controls button:focus-visible{
	outline:2px solid var(--mbbs-genie-gold);
	outline-offset:2px;
}
.mbbs-genie-voice-controls button:disabled{
	opacity:.34;
	cursor:not-allowed;
}
.mbbs-genie[data-voice-state="playing"] #mbbsGeniePause,
.mbbs-genie[data-voice-state="paused"] #mbbsGenieResume{
	background:linear-gradient(145deg, #16a1ff, #1266ed);
	box-shadow:0 0 16px rgba(56,217,255,.35);
}

/* -- composer: RTL is the default here, this is the fix for
   the "typing looks LTR" complaint -- */

.mbbs-genie-composer{
	flex:none;
	display:flex;
	align-items:center;
	gap:7px;
	margin:auto 12px 10px;
	padding:7px;
	border:1px solid rgba(95,188,255,.28);
	border-radius:18px;
	background:rgba(8,32,76,.64);
}
.mbbs-genie-composer textarea{
	flex:1;
	min-height:40px;
	max-height:100px;
	resize:none;
	border:0;
	outline:0;
	background:transparent;
	color:#fff;
	font-size:13px;
	line-height:1.7;
	padding:9px 7px;
	direction:rtl;
	text-align:right;
	font-family:"Noto Nastaliq Urdu","Noto Sans Arabic",Inter,Arial,sans-serif;
}
.mbbs-genie-composer textarea::placeholder{ color:rgba(255,255,255,.52); }
.mbbs-genie-composer textarea:focus-visible{ outline:none; }

.mbbs-genie-mic,
.mbbs-genie-send{
	width:43px; height:43px; flex:0 0 43px;
	display:grid; place-items:center;
	border:0; border-radius:50%;
	cursor:pointer;
}
.mbbs-genie-mic{
	background:linear-gradient(145deg, #ffe171, #ffc933);
	color:#0c3477;
	box-shadow:0 0 20px rgba(255,210,68,.28);
}
.mbbs-genie-send{
	background:linear-gradient(145deg, #16a1ff, #1266ed);
	color:#fff;
	font-size:19px;
}
.mbbs-genie-mic:focus-visible,
.mbbs-genie-send:focus-visible{ outline:2px solid var(--mbbs-genie-gold); outline-offset:2px; }
.mbbs-genie.is-listening .mbbs-genie-mic{ animation:mbbsGenieMicPulse 1s ease-in-out infinite; }

.mbbs-genie-footer{
	flex:none;
	display:flex;
	justify-content:space-between;
	gap:10px;
	padding:0 16px 12px;
	font-size:8px;
	color:rgba(255,255,255,.50);
}
.mbbs-genie-voice-status{ color:#66ef9c; }

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes mbbsGenieFloat{
	0%,100%{ transform:translate3d(0,0,0); }
	50%{ transform:translate3d(0,-8px,0); }
}
@keyframes mbbsGenieCharacterIdle{
	0%,100%{ transform:translate3d(0,0,0) rotate(-1deg); }
	50%{ transform:translate3d(0,-7px,0) rotate(1deg); }
}
@keyframes mbbsGenieSmoke{
	0%,100%{ opacity:.48; transform:translateX(-50%) scale(.90); }
	50%{ opacity:.78; transform:translateX(-50%) scale(1.12); }
}
@keyframes mbbsGenieIntro{
	0%{ opacity:0; transform:translate3d(45px,45px,0) scale(.6); }
	70%{ opacity:1; transform:translate3d(-5px,-3px,0) scale(1.05); }
	100%{ transform:translate3d(0,0,0) scale(1); }
}
@keyframes mbbsGenieWave{ from{ height:5px; } to{ height:20px; } }
@keyframes mbbsGenieMicPulse{
	0%,100%{ box-shadow:0 0 0 0 rgba(255,211,69,.40); }
	50%{ box-shadow:0 0 0 10px rgba(255,211,69,0); }
}
@keyframes mbbsGenieThinking{
	0%,100%{ transform:translate3d(0,0,0) rotate(-2deg); }
	50%{ transform:translate3d(0,-5px,0) rotate(2deg); }
}
@keyframes mbbsGenieSpeaking{
	0%,100%{ transform:translate3d(0,0,0) rotate(-2.5deg) scale(1); }
	50%{ transform:translate3d(0,-4px,0) rotate(2.5deg) scale(1.03); }
}
@keyframes mbbsGenieDot{
	0%,80%,100%{ opacity:.3; transform:scale(.85); }
	40%{ opacity:1; transform:scale(1); }
}
@keyframes mbbsGenieButterflyDock{
	0%{ opacity:0; transform:translate3d(-180px,70px,0) scale(.42) rotate(-15deg); }
	20%{ opacity:.85; transform:translate3d(48px,-95px,0) scale(.72) rotate(12deg); }
	40%{ opacity:1; transform:translate3d(120px,-48px,0) scale(.88) rotate(-9deg); }
	58%{ transform:translate3d(60px,-115px,0) scale(.96) rotate(7deg); }
	74%{ transform:translate3d(24px,-38px,0) scale(1.04) rotate(-4deg); }
	88%{ transform:translate3d(7px,-10px,0) scale(.98) rotate(2deg); }
	100%{ opacity:.68; transform:translate3d(0,0,0) scale(1) rotate(0); }
}
@keyframes mbbsGenieFlightBody{
	0%{ transform:translateY(0) rotate(-5deg); }
	18%{ transform:translateY(-9px) rotate(5deg); }
	36%{ transform:translateY(5px) rotate(-4deg); }
	54%{ transform:translateY(-8px) rotate(4deg); }
	72%{ transform:translateY(4px) rotate(-2deg); }
	100%{ transform:translateY(0) rotate(0); }
}
@keyframes mbbsGenieFlightMagic{
	0%{ opacity:0; transform:translateX(-50%) scale(.2); }
	28%{ opacity:.92; transform:translateX(-50%) scale(1.55); }
	60%{ opacity:.65; transform:translateX(-50%) scale(.9); }
	100%{ opacity:.5; transform:translateX(-50%) scale(1); }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:640px){

	.mbbs-genie{
		left:var(--mbbs-genie-left-mobile);
		bottom:calc(var(--mbbs-genie-bottom-mobile) + env(safe-area-inset-bottom,0px));
	}

	.mbbs-genie-character{ min-width:72px; padding:6px; }
	.mbbs-genie-avatar{ width:53px; height:53px; flex-basis:53px; }
	.mbbs-genie-character-image{ width:57px; height:68px; }
	.mbbs-genie-mini-copy{ display:none; }

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

	.mbbs-genie-intro{ grid-template-columns:58px minmax(0,1fr); }
	.mbbs-genie-intro-character{ font-size:52px; }
	.mbbs-genie-intro-character img{ width:62px; height:88px; }
	.mbbs-genie-quick{ grid-template-columns:1fr 1fr; }
}

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