@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

/* Canvas & Global Reset */
html, body, #rl-app, #rl-content {
	font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	background: #2b3a4a url("https://images.unsplash.com/photo-1534088568595-a066f410bcda?q=80&w=2560&auto=format&fit=crop") no-repeat center center fixed !important;
	background-size: cover !important;
	color: #1f1f1f !important;
}

/* Clear outer layout boxes */
#rl-left, #rl-center, #rl-right, #rl-top, .b-toolbar, .b-folders, .b-header, .b-content {
	background: transparent !important;
	border: none !important;
}

/* -------------------------------------------------------
   1. LEFT SIDEBAR & COMPOSE BUTTON (PERFECTED)
   ------------------------------------------------------- */
#rl-left {
	width: 256px !important;
	background: rgba(0, 0, 0, 0.15) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border-radius: 0 20px 20px 0 !important;
	padding: 12px 10px 12px 0 !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Floating White Compose Button */
#rl-left .buttonCompose, .buttonCompose {
	background: #ffffff !important;
	color: #1f1f1f !important;
	font-family: 'Google Sans', Roboto, sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	border-radius: 16px !important;
	padding: 14px 20px !important;
	margin: 8px 16px 16px 16px !important;
	width: calc(100% - 32px) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.25), 0 6px 20px rgba(0,0,0,0.18) !important;
	border: none !important;
	cursor: pointer !important;
	text-shadow: none !important;
	box-sizing: border-box !important;
}

#rl-left .buttonCompose:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 10px 28px rgba(0,0,0,0.22) !important;
	background: #f8fafc !important;
}

#rl-left .buttonCompose .buttonComposeText, .buttonComposeText {
	display: inline-block !important;
	color: #1f1f1f !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}

/* Hide awkward floating contacts capsule */
#rl-left .buttonContacts {
	display: none !important;
}

/* Sidebar Folder Items */
#rl-left .b-folders {
	flex: 1 1 auto !important;
	background: transparent !important;
}

#rl-left .b-folders .e-item, #rl-left .folderItem, #rl-left li a {
	border-radius: 0 24px 24px 0 !important;
	margin: 3px 0 !important;
	padding: 10px 16px 10px 24px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	transition: all 0.15s ease !important;
	background: transparent !important;
}

#rl-left .b-folders .e-item .e-title, #rl-left .b-folders .e-item span, #rl-left .b-folders .e-item i {
	color: #ffffff !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
	font-weight: 600 !important;
}

#rl-left .b-folders .e-item:hover {
	background: rgba(255, 255, 255, 0.22) !important;
	color: #ffffff !important;
}

#rl-left .b-folders .e-item.selected, #rl-left .folderItem.selected {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(10px) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

#rl-left .b-folders .e-item.selected .e-title, #rl-left .b-folders .e-item.selected span, #rl-left .b-folders .e-item.selected i {
	color: #041e49 !important;
	text-shadow: none !important;
	font-weight: 700 !important;
}

/* Sidebar Bottom Footer (Clean Rounded Toolbar) */
#rl-left .b-footer, #rl-left .b-footer .btn-group {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	padding: 8px 16px !important;
	background: transparent !important;
}

#rl-left .b-footer .btn, #rl-left .b-footer button {
	background: rgba(255, 255, 255, 0.2) !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: 8px !important;
	color: #ffffff !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

#rl-left .b-footer .btn:hover {
	background: rgba(255, 255, 255, 0.4) !important;
}

/* -------------------------------------------------------
   2. FROSTED GLASS CARDS (MESSAGE LIST & PREVIEW PANE)
   ------------------------------------------------------- */
#rl-center, #rl-right, .b-message-list, .b-message-view {
	background: rgba(255, 255, 255, 0.88) !important;
	backdrop-filter: blur(28px) !important;
	-webkit-backdrop-filter: blur(28px) !important;
	border-radius: 18px !important;
	border: 1px solid rgba(255, 255, 255, 0.75) !important;
	margin: 6px 8px 16px 0 !important;
	overflow: hidden !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

/* Top search box in message list */
.search-input-wrp, input[type="search"], .search-input {
	background: rgba(255, 255, 255, 0.5) !important;
	backdrop-filter: blur(16px) !important;
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	border-radius: 9999px !important;
	color: #1f1f1f !important;
	font-family: 'Google Sans', Roboto, sans-serif !important;
	font-size: 14px !important;
	padding: 10px 20px !important;
	margin: 6px 10px !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

/* Message Rows inside List */
.messageListItem, .b-message-list .e-item {
	background: rgba(255, 255, 255, 0.65) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
	padding: 12px 18px !important;
	font-size: 14px !important;
	color: #3c4043 !important;
	transition: background 0.15s, box-shadow 0.15s !important;
}

.messageListItem:hover, .b-message-list .e-item:hover {
	background: #ffffff !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.messageListItem.unseen, .b-message-list .e-item.unseen {
	background: #ffffff !important;
	font-weight: 700 !important;
	color: #1f1f1f !important;
}

.messageListItem.selected, .b-message-list .e-item.selected {
	background: #c2e7ff !important;
	border-left: 4px solid #0b57d0 !important;
}