/* নওগাঁ সেবা — AI স্বাস্থ্য সহকারী
   থিমের সবুজ প্যালেটের সাথে ম্যাচ করানো। ডার্ক মোড সাপোর্টেড। */

:root {
	--nsai-green: #12a150;
	--nsai-green-strong: #0d8a43;
	--nsai-bg: #ffffff;
	--nsai-panel: #f6f8f7;
	--nsai-user: #12a150;
	--nsai-bot: #ffffff;
	--nsai-text: #1a2b22;
	--nsai-muted: #6b7f74;
	--nsai-border: #e3ebe6;
}
html.dark {
	--nsai-bg: #10201a;
	--nsai-panel: #0c1a15;
	--nsai-bot: #16281f;
	--nsai-text: #e8f2ec;
	--nsai-muted: #8fa89a;
	--nsai-border: #22392f;
}

/* ---------- Floating button (links to /ai/) ---------- */
.ns-ai-fab {
	position: fixed;
	right: 1rem;
	bottom: 6.25rem;
	z-index: 45;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1rem 0.7rem 0.85rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--nsai-green), var(--nsai-green-strong));
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(18, 161, 80, 0.4);
	cursor: pointer;
	transition: transform 0.18s;
	animation: nsai-pop 0.4s ease;
}
.ns-ai-fab:active { transform: scale(0.94); }
.ns-ai-fab svg { width: 1.35rem; height: 1.35rem; }
.ns-ai-fab__label { white-space: nowrap; }
@keyframes nsai-pop { from { transform: scale(0); } to { transform: scale(1); } }

@media (max-width: 380px) {
	.ns-ai-fab__label { display: none; }
	.ns-ai-fab { padding: 0.8rem; }
}

/* ---------- Dedicated AI page ---------- */
.ns-aipage { padding-bottom: 0 !important; }

.ns-aipage__hero {
	position: relative;
	margin: 0 0 0.5rem;
	padding: 2rem 1.4rem 1.6rem;
	background: linear-gradient(150deg, var(--nsai-green), var(--nsai-green-strong));
	color: #fff;
	text-align: center;
	border-radius: 0 0 26px 26px;
	box-shadow: 0 10px 30px rgba(18, 161, 80, 0.28);
}
.ns-aipage__back {
	position: absolute;
	left: 1rem; top: 1rem;
	width: 2.4rem; height: 2.4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	display: grid; place-items: center;
	color: #fff;
}
.ns-aipage__back svg { width: 1.2rem; height: 1.2rem; }
.ns-aipage__badge {
	width: 3.6rem; height: 3.6rem;
	margin: 0 auto 0.75rem;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.18);
	display: grid; place-items: center;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.ns-aipage__badge svg { width: 2rem; height: 2rem; }
.ns-aipage__hero h1 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.ns-aipage__hero p { margin: 0.4rem auto 0; font-size: 13.5px; opacity: 0.92; max-width: 22rem; line-height: 1.5; }
.ns-aipage__reset {
	margin-top: 1rem;
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.5rem 1rem;
	border: 0; border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	color: #fff; font-family: inherit; font-size: 13px; font-weight: 600;
	cursor: pointer;
}
.ns-aipage__reset svg { width: 1rem; height: 1rem; }

/* full-height chat area on the page */
.ns-ai-page {
	display: flex;
	flex-direction: column;
	min-height: 55vh;
}
.ns-ai-page .ns-ai-body {
	flex: 1;
	padding: 1rem 1.15rem 9.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.ns-ai-page .ns-ai-foot {
	position: sticky;
	bottom: 6.5rem;
	margin: 0 0.6rem;
	border-radius: 18px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* ---------- Chat bubbles ---------- */
.ns-ai-msg { display: flex; flex-direction: column; max-width: 88%; }
.ns-ai-msg--user { align-self: flex-end; align-items: flex-end; }
.ns-ai-msg--assistant { align-self: flex-start; align-items: flex-start; }
.ns-ai-bubble {
	padding: 0.7rem 0.95rem;
	border-radius: 18px;
	font-size: 14.5px;
	line-height: 1.55;
	word-wrap: break-word;
	font-family: var(--font-bangla, inherit);
}
.ns-ai-msg--user .ns-ai-bubble {
	background: var(--nsai-user); color: #fff; border-bottom-right-radius: 5px;
}
.ns-ai-msg--assistant .ns-ai-bubble {
	background: var(--nsai-bot); color: var(--nsai-text);
	border: 1px solid var(--nsai-border); border-bottom-left-radius: 5px;
}

/* typing */
.ns-ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ns-ai-typing span {
	width: 7px; height: 7px; border-radius: 50%; background: var(--nsai-muted);
	animation: nsai-bounce 1.2s infinite;
}
.ns-ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ns-ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes nsai-bounce { 0%,60%,100%{transform:translateY(0);opacity:.5;} 30%{transform:translateY(-5px);opacity:1;} }

/* ---------- Doctor cards ---------- */
.ns-ai-cards { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; width: 100%; }
.ns-ai-doc {
	display: block;
	background: var(--nsai-bg);
	border: 1px solid var(--nsai-border);
	border-radius: 16px;
	padding: 0.8rem;
	text-decoration: none;
	color: var(--nsai-text);
	transition: transform 0.15s, box-shadow 0.15s;
}
.ns-ai-doc:active { transform: scale(0.98); }
.ns-ai-doc:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); }
.ns-ai-doc__top { display: flex; gap: 0.7rem; align-items: center; }
.ns-ai-doc__top img, .ns-ai-doc__ph {
	width: 3.2rem; height: 3.2rem; border-radius: 13px; object-fit: cover; flex-shrink: 0;
}
.ns-ai-doc__ph {
	background: linear-gradient(135deg, var(--nsai-green), var(--nsai-green-strong));
	color: #fff; display: grid; place-items: center; font-size: 1.4rem; font-weight: 700;
}
.ns-ai-doc__id { min-width: 0; }
.ns-ai-doc__id strong { display: block; font-size: 14.5px; }
.ns-ai-doc__spec {
	display: block; font-size: 12px; color: var(--nsai-green-strong); font-weight: 500;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ns-ai-doc__rate { display: block; font-size: 12px; color: #f59e0b; margin-top: 1px; }
.ns-ai-doc__meta {
	display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin-top: 0.55rem;
	font-size: 11.5px; color: var(--nsai-muted);
}
.ns-ai-doc__cta {
	display: block; margin-top: 0.6rem; padding-top: 0.55rem;
	border-top: 1px dashed var(--nsai-border);
	font-size: 12.5px; font-weight: 600; color: var(--nsai-green-strong);
}

/* ---------- Input ---------- */
.ns-ai-foot {
	display: flex; gap: 0.5rem; align-items: flex-end;
	padding: 0.7rem; border: 1px solid var(--nsai-border); background: var(--nsai-bg);
	border-radius: 18px;
}
.ns-ai-input {
	flex: 1; resize: none; border: 1px solid var(--nsai-border); border-radius: 14px;
	padding: 0.65rem 0.85rem; font-family: inherit; font-size: 14.5px; line-height: 1.4;
	background: var(--nsai-panel); color: var(--nsai-text); max-height: 120px; outline: none;
}
.ns-ai-input:focus { border-color: var(--nsai-green); }
.ns-ai-send {
	width: 2.7rem; height: 2.7rem; border: 0; border-radius: 50%; flex-shrink: 0;
	background: linear-gradient(135deg, var(--nsai-green), var(--nsai-green-strong));
	color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform 0.15s;
}
.ns-ai-send:active { transform: scale(0.9); }
.ns-ai-send:disabled { opacity: 0.5; cursor: default; }
.ns-ai-send svg { width: 1.2rem; height: 1.2rem; }