/* =========================================================
   NEET HUB — OBSIDIAN GOLD
   Luxury Glass UI
   Plain CSS • No frameworks • Existing JS IDs preserved
   ========================================================= */


/* =========================================================
   1. DESIGN VARIABLES
   ========================================================= */

:root {

	/* ───────────── Core Background ───────────── */

	--bg: #040404;
	--bg-soft: #090908;

	--body-gradient-1: rgba(212, 175, 55, 0.055);
	--body-gradient-2: rgba(255, 255, 255, 0.018);


	/* ───────────── Glass Surfaces ───────────── */

	--surface: rgba(17, 16, 13, 0.76);
	--surface-solid: #11100d;
	--surface-light: #1a1812;

	--glass-highlight: rgba(255, 255, 255, 0.045);
	--glass-highlight-strong: rgba(255, 255, 255, 0.075);


	/* ───────────── Borders ───────────── */

	--border: rgba(255, 215, 120, 0.085);
	--border-strong: rgba(255, 215, 120, 0.18);
	--border-bright: rgba(255, 215, 120, 0.32);


	/* ───────────── Typography ───────────── */

	--text: #fffdf5;
	--text-soft: #d0c8b3;
	--text-muted: #827b6b;

	--heading-gold: #e5c45a;


	/* ───────────── Gold System ───────────── */

	--primary: #c3a13a;
	--primary-hover: #d7bb5c;
	--primary-dark: #8f7422;

	--gold-light: #d8bd65;
	--gold-mid: #b99a35;
	--gold-dark: #80671d;

	--primary-soft: rgba(195, 161, 58, 0.075);
	--primary-glow: rgba(195, 161, 58, 0.10);


	/* ───────────── Status ───────────── */

	--success: #58d68d;
	--danger: #ff5f6d;
	--warning: #e5b93d;


	/* ───────────── Banner / Navigation ───────────── */

	--banner: rgba(6, 6, 5, 0.78);
	--banner2: rgba(1, 1, 0, 0.99);
	--shadow-banner: 0 8px 35px rgba(0, 0, 0, 0.65);


	/* ───────────── Messages ───────────── */

	--message: #14130f;
	--message-own: #30250c;

	--message-border: rgba(255, 215, 120, 0.065);


	/* ───────────── Inputs ───────────── */

	--input: rgba(255, 255, 255, 0.042);
	--input-focus: rgba(255, 255, 255, 0.065);


	/* ───────────── Shadows ───────────── */

	--shadow-sm:
		0 4px 15px rgba(0, 0, 0, 0.42);

	--shadow-md:
		0 14px 40px rgba(0, 0, 0, 0.52);

	--shadow-lg:
		0 18px 50px rgba(0, 0, 0, 0.68);


	/* ───────────── Gold Glow ───────────── */

	--glow-gold:
		0 0 18px rgba(212, 175, 55, 0.10);

	--glow-gold-strong:
		0 0 28px rgba(212, 175, 55, 0.17);


	/* ───────────── Radius ───────────── */

	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 20px;


	/* ───────────── Animation ───────────── */

	--transition: 0.20s ease;
}


/* =========================================================
   2. GLOBAL RESET
   ========================================================= */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;

	font-family:
		Inter,
		Segoe UI,
		Roboto,
		Helvetica,
		Arial,
		sans-serif;

	color: var(--text);

	background:
		radial-gradient(
			circle at 15% 0%,
			var(--body-gradient-1),
			transparent 28%
		),
		radial-gradient(
			circle at 100% 100%,
			var(--body-gradient-2),
			transparent 30%
		),
		linear-gradient(
			135deg,
			#030303,
			var(--bg),
			#080806
		);

	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}


/* Subtle luxury grain */

body::before {
	content: "";

	position: fixed;
	inset: 0;

	pointer-events: none;
	z-index: -1;

	opacity: 0.035;

	background-image:
		url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");

	mix-blend-mode: soft-light;
}


/* Make HTML hidden attribute actually work */

[hidden] {
	display: none !important;
}


/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	color: var(--text);
}

h1 {
	font-family:
		"Bookman Old Style",
		Bookman,
		Georgia,
		serif;

	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.5px;
}

h2 {
	font-size: 25px;
	margin-bottom: 14px;
}

h3 {
	font-size: 17px;
	color: var(--text-soft);
	font-weight: 500;
}

p {
	color: var(--text-soft);
	line-height: 1.6;
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 20px 0;
}


/* =========================================================
   4. GENERAL BUTTONS
   ========================================================= */

button {
	position: relative;

	border-radius: var(--radius-sm);

	padding: 10px 16px;
	margin: 5px;

	background:
		linear-gradient(
			145deg,
			#1c1a14,
			#0e0e0b
		);

	color: var(--primary-hover);

	border: 1px solid rgba(212, 175, 55, 0.28);

	box-shadow:
		0 4px 14px rgba(0, 0, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.055);

	text-shadow: 0 0 10px rgba(212, 175, 55, 0.08);
	
	font-family: inherit;
	font-size: 14px;
	font-weight: 650;

	cursor: pointer;

	transition:
		transform var(--transition),
		background var(--transition),
		border-color var(--transition),
		box-shadow var(--transition),
		color var(--transition);
}


/* Fine highlight across button */

button::before {
	content: "";

	position: absolute;

	top: 1px;
	left: 10%;
	right: 10%;

	height: 1px;

	background: rgba(255, 255, 255, 0.35);

	border-radius: 50%;

	pointer-events: none;
}


button:hover {
	background:
		linear-gradient(
			145deg,
			#282417,
			#13120d
		);

	color: #f0d578;

	border-color: rgba(212, 175, 55, 0.48);

	box-shadow:
		0 7px 22px rgba(0, 0, 0, 0.45),
		0 0 15px rgba(212, 175, 55, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.07);

	transform: translateY(-1px);
}


button:active {
	transform: translateY(1px) scale(0.98);

	box-shadow:
		0 3px 10px rgba(0, 0, 0, 0.35);
}


button:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}


/* Small buttons */

button.B {
	padding: 7px 11px;
	margin: 2px;

	font-size: 13px;
	border-radius: 7px;
}


/* =========================================================
   5. INPUTS
   ========================================================= */

input {
	width: 100%;

	padding: 12px 14px;
	margin: 8px 0;

	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.025),
			rgba(0, 0, 0, 0.08)
		),
		var(--input);

	color: var(--text);

	font-family: inherit;
	font-size: 15px;

	outline: none;

	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.025);

	transition:
		border-color var(--transition),
		background var(--transition),
		box-shadow var(--transition);
}


input::placeholder {
	color: var(--text-muted);
}


input:hover {
	border-color: rgba(255, 215, 120, 0.20);
}


input:focus {
	background: var(--input-focus);

	border-color: var(--primary);

	box-shadow:
		0 0 0 3px var(--primary-soft),
		0 0 18px rgba(212, 175, 55, 0.055),
		inset 0 1px 2px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   6. LOGIN PAGE
   ========================================================= */

#loginPage {
	position: relative;

	width: min(500px, calc(100% - 30px));

	margin: 8vh auto 40px;

	padding: 38px;

	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			rgba(30, 28, 21, 0.92),
			rgba(12, 12, 10, 0.96)
		) !important;

	border: 1px solid var(--border-strong);
	border-radius: 24px;

	box-shadow:
		var(--shadow-lg),
		inset 0 1px 0 rgba(255, 255, 255, 0.055);

	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);

	animation: pageEnter 0.55s ease-out;
}


/* Gold ambient light */

#loginPage::before {
	content: "";

	position: absolute;

	width: 230px;
	height: 230px;

	top: -140px;
	right: -90px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(212, 175, 55, 0.18),
			transparent 68%
		);

	filter: blur(12px);

	pointer-events: none;
}


/* Fine glass reflection */

#loginPage::after {
	content: "";

	position: absolute;

	top: 0;
	left: 7%;
	right: 7%;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255, 225, 130, 0.35),
			transparent
		);

	pointer-events: none;
}


#loginPage h1 {
	position: relative;

	margin-bottom: 5px;

	font-size: 40px;

	background:
		linear-gradient(
			105deg,
			#fffdf3 15%,
			var(--gold-light) 48%,
			#b88e24 75%,
			#fff1a9 100%
		);

	background-clip: text;
	-webkit-background-clip: text;

	color: transparent;

	filter:
		drop-shadow(0 4px 12px rgba(212, 175, 55, 0.12));
}


#loginPage h2 {
	position: relative;

	margin-top: 0;

	color: var(--text-soft);
}


#loginPage h3 {
	font-family: monospace;

	font-size: 12px;

	color: var(--text-muted);
}


#loginPage button {
	min-width: 105px;
}


#loginButton {
	animation: popIn 0.5s ease;
}


/* =========================================================
   7. APPLICATION PAGES
   ========================================================= */

.pageStyleB {
	display: none;

	width: min(1100px, calc(100% - 30px));
	max-height: 500px;

	margin: 110px auto 30px;
	margin-left: max(60px, auto);
	margin-right: auto;

	padding: 28px;

	position: relative;
	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.035),
			transparent 34%
		),
		linear-gradient(
			325deg,
			rgba(212, 175, 55, 0.025),
			transparent 40%
		),
		var(--surface);

	border: 1px solid var(--border);

	border-radius: var(--radius-lg);

	box-shadow:
		var(--shadow-md),
		inset 0 1px 0 var(--glass-highlight);

	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);

	animation: pageEnter 0.35s ease-out;
}


/* Thin golden upper reflection */

.pageStyleB::before {
	content: "";

	position: absolute;

	top: 0;
	left: 8%;
	right: 8%;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(212, 175, 55, 0.25),
			transparent
		);

	pointer-events: none;
}


/* =========================================================
   8. CHAT PAGE
   ========================================================= */

#chatPage {
	position: relative;

	padding-top: 5px;
	padding-bottom: 120px;
}


/* Logged-in line */

#chatPage > p:first-child {
	display: flex;

	align-items: center;
	flex-wrap: wrap;
	gap: 5px;

	margin-bottom: 10px;
}


#currentUser {
	color: var(--primary-hover);
}


/* =========================================================
   9. ONLINE STATUS
   ========================================================= */

#onlineHasher {
	display: inline-block;

	margin-right: 8px;

	color: var(--text-soft);

	font-size: 13px;
}


.onlineDot {
	display: inline-block;

	width: 9px;
	height: 9px;

	border-radius: 50%;

	background: var(--success);

	box-shadow:
		0 0 0 3px rgba(74, 222, 128, 0.10),
		0 0 12px rgba(74, 222, 128, 0.38);

	animation: pulse 1.8s ease-in-out infinite;
}


/* =========================================================
   10. MESSAGE AREA
   ========================================================= */

#messages {
	height: min(58vh, 650px);

	overflow-y: auto;

	padding: 14px;

	margin-bottom: 15px;

	border: 1px solid var(--border);

	border-radius: var(--radius-md);

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.018),
			rgba(0, 0, 0, 0.15)
		),
		rgba(4, 4, 3, 0.32);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.025),
		inset 0 0 30px rgba(0, 0, 0, 0.16);

	scroll-behavior: smooth;

	overscroll-behavior: contain;
}


/* Custom scrollbar */

#messages::-webkit-scrollbar {
	width: 9px;
}


#messages::-webkit-scrollbar-track {
	background: transparent;
}


#messages::-webkit-scrollbar-thumb {
	background:
		linear-gradient(
			180deg,
			rgba(212, 175, 55, 0.20),
			rgba(255, 255, 255, 0.10)
		);

	border-radius: 20px;
}


#messages::-webkit-scrollbar-thumb:hover {
	background:
		linear-gradient(
			180deg,
			rgba(212, 175, 55, 0.35),
			rgba(255, 255, 255, 0.15)
		);
}


/* Firefox */

#messages {
	scrollbar-width: thin;

	scrollbar-color:
		rgba(212, 175, 55, 0.25)
		transparent;
}


/* =========================================================
   11. MESSAGE BUBBLES
   ========================================================= */

.message,
.messageCompressed {
	position: relative;

	padding: 11px 13px;

	margin-top: 7px;
	margin-bottom: 7px;

	border: 1px solid var(--message-border);

	border-radius: 12px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.022),
			transparent 45%
		),
		var(--message);

	color: var(--text);

	box-shadow:
		0 3px 12px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);

	overflow-wrap: anywhere;

	animation: messageIn 0.25s ease-out;
}


/* Sender name */

.message b,
.messageCompressed b {
	display: block;

	margin-bottom: 3px;

	color: var(--primary-hover);

	font-size: 13px;
}


/* =========================================================
   12. REPLY BAR
   ========================================================= */

#replyingBar {
	margin-bottom: 8px;

	padding: 9px 12px;

	border-left: 3px solid var(--primary);

	border-radius: 7px;

	background:
		linear-gradient(
			90deg,
			var(--primary-soft),
			rgba(212, 175, 55, 0.025)
		);

	color: var(--text-soft);

	font-size: 13px;

	box-shadow:
		inset 0 0 15px rgba(212, 175, 55, 0.025);
}


/* =========================================================
   13. SCROLL-TO-BOTTOM BUTTON
   ========================================================= */

.fixedButton {
	width: 45px;
	height: 45px;

	padding: 0;
	margin: 0;

	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	background:
		linear-gradient(
			145deg,
			var(--gold-light),
			var(--gold-mid),
			var(--gold-dark)
		);

	color: #0a0905;

	border: 1px solid var(--border-bright);

	box-shadow:
		0 8px 25px rgba(0, 0, 0, 0.45),
		0 0 18px rgba(212, 175, 55, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);

	font-size: 18px;
}


.fixedButton:hover {
	background:
		linear-gradient(
			145deg,
			#ffe48f,
			#e1bc4c,
			#aa831f
		);

	box-shadow:
		0 12px 30px rgba(0, 0, 0, 0.50),
		0 0 24px rgba(212, 175, 55, 0.16);
}


/* =========================================================
   14. BANNERS
   ========================================================= */

.banner {
	position: fixed;

	z-index: 999;

	left: 0;
	right: 0;
	top: 0;
	
	padding: 8px 12px;
	min-height: 50px;
	
	background: var(--banner);
	border: 1px solid var(--border);
	
	box-shadow: var(--shadow-banner);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	
	font-size: 16px;
	display: none;
}


/* Bottom banner */

.banner.B {
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	height: auto;
	min-height: 62px;

	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 7px;
	padding: 9px 12px;

	border-radius: 0;
	box-sizing: border-box;
}


/* Top banner */

.banner.T {
	top: 0;
	bottom: auto;
}


/* Left banner */

.banner.L {
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
	
	background: var(--banner2);
	border-radius: 0;
	box-sizing: border-box;
	
	min-width: 50px;
	display: flex;
	flex-direction: column;
}


/* Right banner */

.banner.R {
	top: 0;
	bottom: 0;

	left: auto;
	right: 0;
}


/* =========================================================
   15. MESSAGE INPUT
   ========================================================= */

.banner.B {
	flex-wrap: nowrap;
	width: 100%;
}

.banner.B #messageInput {
	flex: 1 1 auto;

	width: 75%;
	min-width: 0px;

	height: 42px;
	margin: 0;
	padding: 0 13px;

	border-radius: 10px;
	font-size: 14px;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.045),
			rgba(0, 0, 0, 0.12)
		);
}


/* Send / Call */

.banner.B button {
	flex: 0 0 auto;
	height: 42px;
	margin: 0;
	padding: 0 16px;

	white-space: nowrap;

	display: inline-flex;

	align-items: center;
	justify-content: center;
}


/* =========================================================
   16. ICON BUTTONS
   ========================================================= */

.banner.B .icon-btn,
.banner.B .file-btn {
	width: 42px;
	height: 42px;

	padding: 0;
	margin: 0;

	flex: 0 0 42px;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	border: 1px solid var(--border-strong);
	border-radius: 10px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.055),
			rgba(0, 0, 0, 0.12)
		);

	color: var(--text);

	font-size: 18px;

	cursor: pointer;

	user-select: none;

	transition:
		transform var(--transition),
		background var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
}


.banner.B .icon-btn:hover,
.banner.B .file-btn:hover {
	transform: translateY(-1px);

	background:
		linear-gradient(
			145deg,
			rgba(212, 175, 55, 0.18),
			rgba(212, 175, 55, 0.06)
		);

	border-color: var(--border-bright);

	box-shadow: var(--glow-gold);
}


.banner.B .icon-btn:active,
.banner.B .file-btn:active {
	transform: scale(0.95);
}


/* =========================================================
   17. TOP NAVIGATION
   ========================================================= */

#bannerTop {
	display: flex;

	align-items: center;

	gap: 5px;

	flex-wrap: wrap;

	padding: 8px 12px;
}


#roomTitle {
	flex: 1;

	min-width: 150px;

	font-family:
		"Bookman Old Style",
		Bookman,
		Georgia,
		serif;

	font-size: 21px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	color: var(--text);

	margin: 0;

	padding: 3px 5px;
}


/* =========================================================
   18. PRIVATE ROOMS
   ========================================================= */

#rooms {
	display: grid;

	grid-template-columns:
		repeat(auto-fill, minmax(230px, 1fr));

	gap: 12px;
}


#rooms > * {
	min-width: 0;
}


/* =========================================================
   19. ADMIN PANEL
   ========================================================= */

#adminPanel {
	width: 100%;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.025),
			rgba(0, 0, 0, 0.08)
		);

	border: 1px solid var(--border);

	border-radius: var(--radius-md);

	padding: 22px;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


#adminPanel button {
	margin: 5px 3px;
}


/* Account / history / logs */

#accounts,
#lastSeens,
#history,
#logDiv {
	margin-top: 20px;

	padding: 15px;

	border: 1px solid var(--border);

	border-radius: var(--radius-md);

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.018),
			rgba(0, 0, 0, 0.12)
		);

	overflow-x: auto;
}


/* =========================================================
   20. QUERY / POPUP
   ========================================================= */

.superTop {
	position: fixed;

	z-index: 9999;

	top: 50%;
	left: 50%;

	width: min(500px, calc(100% - 30px));

	max-height: 80vh;

	overflow-y: auto;

	transform: translate(-50%, -50%);

	padding: 30px;

	margin: 0;

	background:
		linear-gradient(
			145deg,
			rgba(31, 29, 21, 0.98),
			rgba(10, 10, 8, 0.985)
		);

	border: 1px solid var(--border-strong);

	border-radius: var(--radius-lg);

	box-shadow:
		var(--shadow-lg),
		0 0 40px rgba(212, 175, 55, 0.035);

	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);

	animation: popupIn 0.25s ease-out;
}


#queryPage {
	width: min(500px, calc(100% - 30px));
}


#queryPage::before {
	content: "";

	position: absolute;

	inset: 0;

	border-radius: inherit;

	pointer-events: none;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.055);
}


#query_q {
	color: var(--text) !important;

	font-size: 16px;

	font-weight: 600;

	line-height: 1.5;
}


#query_i,
#query_p {
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.025),
			rgba(0, 0, 0, 0.20)
		);
}


#queryPage input {
	margin: 8px 0;
}


#queryPage button {
	margin-top: 8px;
	min-width: 80px;
}


/* =========================================================
   21. EMERGENCY BUBBLE
   ========================================================= */

#emergencyBubble {
	position: fixed;

	right: 20px;
	bottom: 75px;

	z-index: 9999;

	width: 55px;
	height: 55px;

	margin: 0;
	padding: 0;

	display: flex;

	align-items: center;
	justify-content: center;

	border: 1px solid var(--border-strong);

	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#211d12,
			#0d0c09
		);

	color: var(--primary-hover);

	font-size: 19px;

	cursor: grab;

	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.50),
		0 0 18px rgba(212, 175, 55, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);

	user-select: none;

	touch-action: none;

	transition:
		transform var(--transition),
		box-shadow var(--transition),
		background var(--transition);
}


#emergencyBubble:hover {
	transform: scale(1.05);

	box-shadow:
		0 14px 35px rgba(0, 0, 0, 0.55),
		0 0 25px rgba(212, 175, 55, 0.12);
}


#emergencyBubble:active {
	cursor: grabbing;

	transform: scale(0.95);
}


/* =========================================================
   22. PASSWORD MASK
   ========================================================= */

.mask-password {
	-webkit-text-security: disc;
	text-security: disc;
}


/* =========================================================
   23. NOTIFICATIONS
   ========================================================= */

.notification {
	padding: 12px 15px;

	border: 1px solid var(--border-strong);

	border-radius: 10px;

	background:
		linear-gradient(
			145deg,
			rgba(30, 28, 20, 0.96),
			rgba(12, 12, 10, 0.96)
		);

	color: var(--text);

	box-shadow:
		var(--shadow-md),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);

	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);

	animation: notificationIn 0.4s ease-out;
}


/* =========================================================
   24. REPLY PREVIEW INSIDE MESSAGE
   ========================================================= */

.replyPreview {
	padding: 7px 10px;

	margin-bottom: 6px;

	border-left: 3px solid var(--primary);

	border-radius: 7px;

	background:
		linear-gradient(
			90deg,
			var(--primary-soft),
			rgba(212, 175, 55, 0.02)
		);

	color: var(--text-soft);

	font-size: 12px;

	line-height: 1.4;

	overflow: hidden;

	text-overflow: ellipsis;

	white-space: nowrap;

	box-shadow:
		inset 0 0 12px rgba(212, 175, 55, 0.025);
}


.replyPreview b {
	display: inline;

	margin: 0;

	color: var(--primary-hover);

	font-size: 13px;

	font-weight: 700;
}


/* =========================================================
   25. CONTEXT MENU
   ========================================================= */

.contextMenu {
	position: fixed;

	z-index: 10000;

	display: flex;

	flex-direction: column;

	min-width: 175px;

	padding: 6px;

	background:
		linear-gradient(
			145deg,
			rgba(30, 28, 21, 0.97),
			rgba(10, 10, 8, 0.98)
		);

	border: 1px solid var(--border-strong);

	border-radius: 12px;

	box-shadow:
		var(--shadow-lg),
		0 0 22px rgba(212, 175, 55, 0.035);

	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);

	animation: menuIn 0.15s ease-out;
}


.contextMenu button {
	width: 100%;

	margin: 2px 0;

	padding: 9px 12px;

	border: 1px solid transparent;

	border-radius: 7px;

	background: transparent;

	box-shadow: none;

	text-align: left;

	color: var(--text-soft);

	font-size: 13px;

	font-weight: 500;
}


.contextMenu button::before {
	display: none;
}


.contextMenu button:hover {
	background:
		linear-gradient(
			90deg,
			var(--primary-soft),
			transparent
		);

	border-color: rgba(212, 175, 55, 0.13);

	color: var(--text);

	transform: none;

	box-shadow: none;
}


.contextMenu button:active {
	background:
		rgba(212, 175, 55, 0.15);

	transform: scale(0.98);
}


/* =========================================================
   26. CALL / ADMIN / OTHER PAGES
   ========================================================= */

#roomsPage,
#adminPage,
#callPage {
	padding-top: 75px;
}


/* =========================================================
   27. ANIMATIONS
   ========================================================= */

@keyframes pageEnter {

	from {
		opacity: 0;

		transform:
			translateY(12px)
			scale(0.985);
	}

	to {
		opacity: 1;

		transform:
			translateY(0)
			scale(1);
	}
}


@keyframes popupIn {

	from {
		opacity: 0;

		transform:
			translate(-50%, -47%)
			scale(0.96);
	}

	to {
		opacity: 1;

		transform:
			translate(-50%, -50%)
			scale(1);
	}
}


@keyframes popIn {

	from {
		opacity: 0;

		transform: scale(0.8);
	}

	to {
		opacity: 1;

		transform: scale(1);
	}
}


@keyframes messageIn {

	from {
		opacity: 0;

		transform: translateY(8px);
	}

	to {
		opacity: 1;

		transform: translateY(0);
	}
}


@keyframes notificationIn {

	from {
		opacity: 0;

		transform: translateX(100%);
	}

	to {
		opacity: 1;

		transform: translateX(0);
	}
}


@keyframes pulse {

	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.35);
		opacity: 0.65;
	}
}


@keyframes menuIn {

	from {
		opacity: 0;

		transform:
			scale(0.96)
			translateY(-3px);
	}

	to {
		opacity: 1;

		transform:
			scale(1)
			translateY(0);
	}
}


@keyframes spin {

	to {
		transform: rotate(360deg);
	}
}


/* =========================================================
   28. MOBILE RESPONSIVENESS
   ========================================================= */

@media (max-width: 700px) {

	body {
		font-size: 14px;
	}


	#loginPage {
		width: calc(100% - 20px);

		margin-top: 25px;

		padding: 28px 20px;

		border-radius: 18px;
	}


	#loginPage h1 {
		font-size: 34px;
	}


	.pageStyleB {
		width: calc(100% - 14px);

		margin: 85px auto 14px;

		padding: 18px;

		border-radius: 15px;
	}


	#messages {
		height: 55vh;

		padding: 9px;
	}


	.message,
	.messageCompressed {
		padding: 9px 11px;

		border-radius: 10px;
	}


	/* Bottom composer */

	.banner.B {
		gap: 5px;

		padding: 7px;

		min-height: 58px;
	}


	.banner.B #messageInput {
		height: 40px;

		padding: 0 10px;

		font-size: 14px;
	}


	.banner.B button {
		height: 40px;

		padding: 0 10px;

		font-size: 13px;
	}


	.banner.B .icon-btn,
	.banner.B .file-btn {
		width: 40px;
		height: 40px;

		flex-basis: 40px;
	}


	#chatPage {
		padding-bottom: 90px;
	}


	#roomsPage,
	#adminPage,
	#callPage {
		padding-top: 75px;
	}


	#emergencyBubble {
		right: 12px;
		bottom: 68px;

		width: 48px;
		height: 48px;
	}


	#roomTitle {
		font-size: 18px;
	}


	#rooms {
		grid-template-columns: 1fr;
	}
}


/* =========================================================
   29. VERY SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

	#loginPage {
		padding: 24px 16px;
	}


	.pageStyleB {
		padding: 14px;
	}


	#messages {
		height: 53vh;
	}
}


/* =========================================================
   30. REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;

		animation-iteration-count: 1 !important;

		scroll-behavior: auto !important;

		transition-duration: 0.01ms !important;
	}
}

button,
label {
	-webkit-tap-highlight-color: rgba(212, 175, 55, 0.10);
	-webkit-touch-callout: none;
	user-select: none;
}

@media (max-width: 700px) {

	body::before {
		display: none;
	}

	.pageStyleB,
	.banner {
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.message,
	.messageCompressed {
		animation: none;
	}

	.notification,
	.contextMenu {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

.fixedButton::before {
	display: none;
}


.emoji {
  font-family: "Noto Color Emoji", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* =========================================================
   31. CHAT PAGE FIT-TO-SCREEN OVERRIDES
   (placed last so they win over the earlier #messages /
   #chatPage / .pageStyleB rules)

   Goal: whole chat page fits in one screen, so the online dot
   stays visible, and there is little empty space under the
   "Private Chats" button.

   If the messages box ends up too tall/short on your device,
   change only the "325px" (desktop) / "298px" (mobile) numbers:
   bigger number = shorter messages box.
   ========================================================= */

/* The generic .pageStyleB max-height (500px) + overflow:hidden
   was clipping/limiting the chat page; let it size naturally. */
#chatPage {
	max-height: none;

	/* only enough room to clear the fixed bottom composer bar */
	padding-bottom: 70px;
	margin-bottom: 0;
}

/* tighter dividers inside the chat page */
#chatPage hr {
	margin: 8px 0;
}

#messages {
	margin-bottom: 8px;

	height: max(220px, min(calc(100vh - 325px), 650px));

	height: max(220px, min(calc(100dvh - 325px), 650px));
}

@media (max-width: 700px) {

	#chatPage {
		padding-bottom: 68px;
	}

	#messages {
		height: max(200px, calc(100vh - 298px));
		height: max(200px, calc(100dvh - 298px));
	}
}

/* =========================================================
   32. ADMIN PAGE: NO HEIGHT LIMIT
   The shared .pageStyleB max-height (500px) was cutting off the
   admin buttons, so the admin page and the sub-pages inside it
   (panel, accounts, last seens, history, log) can grow freely.
   ========================================================= */

#adminPage,
#adminPage .pageStyleB {
	max-height: none;
	overflow: visible;
}

#roomsPage,
#roomsPage .pageStyleB {
	max-height: none;
	overflow: visible;
}

/* ==========================================================
   33. Left Banner (collapsible sidebar)
   ----------------------------------------------------------
   - JS (showDiv) sets inline "display:block" on #controlBanner,
     so the stacking is done by the inner .sideItems flex column,
     not by the banner itself. Buttons can never share a line.
   - .collapsed  = icons only
   - no .collapsed = icon + text ("Settings", "Private")
   ========================================================== */

#controlBanner {
	display: none;                       /* JS switches it on after login */
	z-index: 1000;

	top: var(--topbar-h, 64px);          /* sits under the top banner (set by JS) */
	bottom: auto;
	left: 0;
	right: auto;

	width: 170px;
	min-width: 0;
	min-height: 0;
	padding: 8px 6px;

	overflow: hidden;
	background: var(--banner2);
	border-left: none;
	border-radius: 0 14px 14px 0;

	transition: width 0.22s ease;
}

#controlBanner.collapsed {
	width: 54px;
}

/* Arrow button (top) */

#controlBanner .sideToggle {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 34px;
	margin: 0 0 8px 0;
	padding: 0;

	font-size: 15px;
	line-height: 1;
}

#controlBanner .sideToggle::before {
	display: none;
}

#controlBanner .sideToggle {
	transition: transform var(--transition), background var(--transition);
}

/* arrow points right when collapsed, left when expanded */
#controlBanner:not(.collapsed) .sideToggle {
	justify-content: flex-end;
	padding-right: 14px;
	transform: scaleX(-1);
}

#controlBanner:not(.collapsed) .sideToggle:hover {
	transform: scaleX(-1) translateY(-1px);
}

/* Items: always one per line */

#controlBanner .sideItems {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

#controlBanner .sideItem {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	width: 100%;
	margin: 0;
	padding: 9px 8px;

	overflow: hidden;
	white-space: nowrap;
	text-align: left;
}

#controlBanner .sideItem::before {
	display: none;
}

#controlBanner .sideIcon {
	flex: 0 0 24px;
	width: 24px;
	text-align: center;
	font-size: 17px;
	line-height: 1;
}

#controlBanner .sideLabel {
	max-width: 110px;
	margin-left: 10px;
	opacity: 1;
	overflow: hidden;
	transition: opacity 0.18s ease, max-width 0.22s ease, margin 0.22s ease;
}

#controlBanner.collapsed .sideLabel {
	max-width: 0;
	margin-left: 0;
	opacity: 0;
}

/* Keep page content clear of the collapsed bar while it is visible */

body.sidebarOn #appWorking {
	padding-left: 58px;
	transition: padding-left 0.22s ease;
}

/* Desktop/tablet: when the bar is expanded, push the page over with it.
   (Phones keep the overlay drawer, there is no room to push.)
   To go back to overlay-only, delete this block. */
@media (min-width: 701px) {
	body.sidebarOn.sidebarOpen #appWorking {
		padding-left: 174px;
	}
}