*{box-sizing:border-box;}

/* Theme variables: dark defaults, light overrides below */
:root{
	--bg-grad-1: #071331; /* deep navy */
	--bg-grad-2: #0b2740; /* bluish */
	--surface: rgba(255,255,255,0.04);
	--card-bg: #07192a; /* dark card */
	--text-on-surface: #e6f0f6; /* light text */
	--muted: rgba(230,240,247,0.7);
	--accent: #06b6d4; /* cyan accent */
	--tab1-accent: #06b6d4; /* teal */
	--tab2-accent: #f59e0b; /* amber */
	--muted-accent: rgba(6,182,212,0.12);
	--btn-text: #ffffff;
}

body{
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	background: linear-gradient(135deg,var(--bg-grad-1),var(--bg-grad-2));
	color:var(--text-on-surface);
	font-family: 'Segoe UI', sans-serif;
}

.container{
	width: min(980px, 96%);
	max-height: 92vh;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	backdrop-filter: blur(12px);
	padding:18px;
	border-radius:14px;
	box-shadow:0 8px 30px rgba(2,6,23,0.12);
	display:flex;
	flex-direction:column;
}

h1{
	text-align:center;
	margin-bottom:12px;
}

.topControls{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	margin-bottom:12px;
}

.topControls .leftControls{
	display:flex;
	gap:8px;
}

#themeToggle{
	background:transparent;
	border:1px solid rgba(255,255,255,0.14);
	padding:8px 10px;
	border-radius:10px;
	cursor:pointer;
	color:var(--text-on-surface);
}

.tabs{
	display:flex;
	gap:10px;
	margin-bottom:12px;
}

.tab{
	flex:1;
	padding:10px;
	border:none;
	border-radius:8px;
	cursor:pointer;
	background:transparent;
	color:var(--muted);
	border:1px solid transparent;
}

.tab.active{
	background: linear-gradient(180deg,var(--muted-accent), rgba(0,0,0,0.02));
	color:var(--btn-text);
	font-weight:700;
	border-color: rgba(255,255,255,0.06);
	box-shadow: 0 6px 16px rgba(6,182,212,0.06);
	transform: translateY(-2px);
}

/* Per-tab active accents */
.tabs .tab:nth-child(1).active{
	background: linear-gradient(180deg, var(--tab1-accent), rgba(255,255,255,0.03));
	box-shadow: 0 6px 18px rgba(6,182,212,0.06);
}
.tabs .tab:nth-child(2).active{
	background: linear-gradient(180deg, var(--tab2-accent), rgba(255,255,255,0.03));
	box-shadow: 0 6px 18px rgba(245,158,11,0.06);
}

/* Stronger focus and hover states for accessibility */
.tab:focus,
.tab:hover{
	outline: none;
	box-shadow: 0 6px 16px rgba(6,182,212,0.06);
	transform: translateY(-1px);
}

.tabContent{display:none;}
.tabContent.active{display:block;}

/* Chat */
.chatbox{
	flex:1 1 auto;
	min-height: 340px;
	max-height: calc(92vh - 240px);
	display:flex;
	flex-direction:column;
	align-items:stretch;
	overflow-y:auto;
	background: var(--card-bg);
	border-radius:10px;
	padding:18px;
	color: var(--text-on-surface);
	margin-bottom:12px;
	box-shadow: inset 0 1px 4px rgba(0,0,0,0.18);
}

.message{
	margin:12px 0;
	padding:14px;
	border-radius:12px;
	max-width:82%;
	position:relative;
	box-shadow: 0 4px 12px rgba(2,6,23,0.12);
	word-break: break-word;
	overflow-wrap: anywhere;
}

.user{
	background:var(--accent);
	color:var(--btn-text);
	margin-left:auto;
	box-shadow: none;
}

.bot{
	background: rgba(255,255,255,0.03);
	color: var(--text-on-surface);
	box-shadow: none;
}

.message .ts{
	display:block;
	font-size:11px;
	opacity:0.74;
	margin-top:8px;
}

.message .content{font-weight:600; color:var(--text-on-surface)}

.message .content{ white-space: pre-wrap; }

.inputArea{
	display:flex;
	gap:10px;
	margin-top:8px;
}

input{
	flex:1;
	padding:12px;
	border-radius:8px;
	border:none;
	outline:none;
}

button{
	padding:10px 14px;
	border:none;
	border-radius:10px;
	background:var(--accent);
	color:var(--btn-text);
	cursor:pointer;
	box-shadow: none;
	transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease;
}

button:hover{opacity:0.95; transform: translateY(-2px); filter: brightness(0.98);} 

/* BMI */
.bmiBox{
	background:var(--card-bg);
	color:var(--text-on-surface);
	padding:20px;
	border-radius:10px;
	text-align:center;
}

.bmiBox input{width:100%; margin:10px 0}

#bmiResult{margin-top:10px;font-weight:bold}

/* Responsive tweaks */
@media (max-width:600px){
	.container{ padding:12px; }
	.chatbox{ min-height: 50vh; }
	#themeToggle{ padding:6px 8px; }
}

/* Light theme overrides */
/* Light theme overrides (high-contrast, distinct from dark) */
body[data-theme="light"]{
	--bg-grad-1: #f8fbff; /* airy pale blue */
	--bg-grad-2: #ffffff; /* clean white */
	--surface: rgba(6,22,38,0.02);
	--card-bg: #ffffff; /* white cards */
	--text-on-surface: #071433; /* deep navy text */
	--muted: rgba(7,20,51,0.65);
	--accent: #1e3a8a; /* strong indigo for clear contrast */
	--muted-accent: rgba(30,58,138,0.08);
	--btn-text: #ffffff;
	background: linear-gradient(135deg,var(--bg-grad-1),var(--bg-grad-2));
	color:var(--text-on-surface);
}

/* Light theme specific element tweaks */
body[data-theme="light"] .container{ box-shadow: 0 10px 30px rgba(10,15,30,0.06); }
body[data-theme="light"] .tab{ color: var(--muted); border:1px solid rgba(10,20,40,0.02); }
body[data-theme="light"] .tab.active{ background: var(--accent); color: var(--btn-text); box-shadow: 0 8px 20px rgba(30,58,138,0.12); }
body[data-theme="light"] .chatbox{ color: var(--text-on-surface); background: #ffffff; }
body[data-theme="light"] .bot{ background:#f3f6fb; color: var(--text-on-surface); }
body[data-theme="light"] .user{ background: var(--accent); color: var(--btn-text); }

/* Adjust button styles in light theme for visibility */
body[data-theme="light"] button{ box-shadow: 0 6px 18px rgba(30,58,138,0.08); }