.field_row {
	font-size: small;
	background-color: gainsboro;
	border-bottom-left-radius: 3px;
	border-top-left-radius: 3px;
	margin-top: 3px;
	margin-bottom: 3px;
	padding: 2px;
	padding-left: 7px;
}
.text_row {
	font-size: small;
	background-color: whitesmoke;
	border-bottom-right-radius: 3px;
	border-top-right-radius: 3px;
	margin-top: 3px;
	margin-bottom: 3px;
	padding: 2px;
	padding-left: 5px;
}

/*.menu_list {
	border-radius: 50px !important;
}*/

.top-menu-bar {
	position: sticky; /* scroll पर भी top पर टिका रहे */
	top: 0; /* AppBar के नीचे direct चिपके */
	z-index: 1100; /* बाकी content से ऊपर रहे */
	background-color: white; /* पीछे से opaque रहे */
}


/* ==== WhatsApp theme ==== */

/* panel background */
.wa-bg {
	background-image: url("/images/chatbg.jpg");
	background-repeat: repeat; /* WhatsApp tile pattern */
	background-size: 400px auto; /* tile size; tweak if needed */
	background-attachment: fixed; /* subtle parallax feel */
}

/* root fills viewport area; adjust if needed */
.chat-root {
	display: flex;
	flex-direction: column;
	/* try modern dvh to handle mobile soft keyboard; fallback to 86vh if not supported */
	height: 86vh;
	min-height: 200px;
}

	/* the MudStack inside should stretch as well */
	.chat-root > .mud-stack {
		display: flex;
		flex-direction: column;
		min-height: 0; /* allow inner flex child to shrink */
		height: 100%;
	}

.chat-container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-height: 0;
}

.chat-scroll {
	flex-grow: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 8px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch; /* smooth on iOS */
}

	/* bottom marker gap to avoid input overlay */
	.chat-scroll > div:last-child {
		margin-bottom: 4px;
	}

.chat-input {
	margin-top: auto;
	padding: 6px;
	background: white;
	position: sticky;
	bottom: 0;
	z-index: 100;
	box-shadow: 0 -1px 4px rgba(0,0,0,0.04);
}

.input-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.chat-textbox {
	flex: 1;
	padding: 10px 12px;
	border-radius: 18px;
	border: 1px solid #e6e6e6;
	outline: none;
	font-size: 0.95rem;
	min-height: 40px;
}

	.chat-textbox:focus {
		box-shadow: 0 0 0 3px rgba(100,150,250,0.06);
		border-color: #9bb8ff;
	}

.send-btn {
	padding: 8px 12px;
	border-radius: 14px;
	border: none;
	background: #0b8a0b;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	min-width: 64px;
}

	.send-btn:active {
		transform: translateY(1px);
	}

	/* bubbles (your existing theme) */
.bubble {
	max-width: 78%;
	border-radius: 14px;
	padding: .55rem .65rem .4rem;
	box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

	.bubble.mine {
		background: #DCF8C6;
		color: #111;
	}

	.bubble.theirs {
		background: #fff;
		color: #111;
		border: 1px solid #eee;
	}

	.bubble.typing {
		background: #fff;
		color: #111;
	}

.bubble-meta {
	display: flex;
	gap: .35rem;
	justify-content: flex-end;
	align-items: center;
	margin-top: .15rem;
	opacity: .75;
	font-size: .75rem;
}

.divider-row {
	display: flex;
	justify-content: center;
	margin: .5rem 0 .75rem;
}

.typing-dots span {
	animation: blink 1.4s infinite;
	padding: 0 .06rem;
}

	.typing-dots span:nth-child(2) {
		animation-delay: .2s;
	}

	.typing-dots span:nth-child(3) {
		animation-delay: .4s;
	}

@keyframes blink {
	0% {
		opacity: .2
	}

	20% {
		opacity: 1
	}

	100% {
		opacity: .2
	}
}

@media (max-width:600px) {
	.bubble {
		max-width: 88%;
	}
}

@supports (height: 100dvh) {
	.chat-root {
		height: 100dvh;
	}
}