/* Global Reset and Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Login Screen Styles */
.login-container {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--secondary-bg);
}

.logo {
	width: 200px;
	height: auto;
	animation: pulse 2s infinite;
}

/* Modern Login Styles */
.modern-login-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
	padding: 20px;
}

.modern-login-box {
	background: var(--secondary-bg);
	padding: 2.5rem;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 400px;
	backdrop-filter: blur(10px);
}

.modern-login-box h1 {
	color: var(--text-primary);
	font-size: 28px;
	text-align: center;
	margin-bottom: 2rem;
	line-height: 1.3;
}

.modern-login-form {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.modern-input-group {
	position: relative;
}

.modern-input-group input {
	width: 100%;
	padding: 15px 15px 15px 45px;
	border: 1px solid var(--border-color);
	border-radius: 12px;
	background: var(--input-bg);
	color: var(--text-primary);
	font-size: 15px;
	transition: all 0.3s ease;
}

.modern-input-group i {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-secondary);
}

.modern-input-group input:focus {
	border-color: var(--hpds-green);
	box-shadow: 0 0 0 2px rgba(141, 198, 63, 0.2);
	outline: none;
}

.login-button {
	background: var(--hpds-green);
	color: white;
	padding: 15px;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
}

.login-button:hover {
	background: #7ab52f;
}

.error-message {
	background: rgba(231, 76, 60, 0.1);
	border-left: 4px solid #e74c3c;
	color: #e74c3c;
	padding: 12px;
	border-radius: 4px;
	font-size: 14px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.error-message i {
	font-size: 16px;
}

.login-box {
	background: var(--primary-bg);
	padding: 40px;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 400px;
	text-align: center;
}

.login-box h1 {
	color: var(--text-primary);
	font-size: 24px;
	margin-bottom: 10px;
}

.login-box p {
	color: var(--text-secondary);
	margin-bottom: 30px;
	font-size: 14px;
}

.login-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.input-group {
	position: relative;
	width: 100%;
}

.input-group i {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-secondary);
}

.input-group input {
	width: 100%;
	padding: 15px 15px 15px 45px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background: var(--input-bg);
	color: var(--text-primary);
	font-size: 14px;
	outline: none;
	transition: border-color 0.3s ease;
}

.input-group input:focus {
	border-color: var(--hpds-green);
}

.login-form button {
	background: var(--hpds-green);
	color: white;
	border: none;
	padding: 15px;
	border-radius: 8px;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background-color 0.3s ease;
}

.login-form button:hover {
	background: #7ab52f;
}

.error-message {
	background: #ffebee;
	color: #c62828;
	padding: 12px;
	border-radius: 8px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

.error-message i {
	color: #c62828;
}

/* Dark theme adjustments */
[data-theme="dark"] .login-box {
	background: var(--secondary-bg);
}

[data-theme="dark"] .input-group input {
	background: var(--input-bg);
	color: var(--text-primary);
}

[data-theme="dark"] .error-message {
	background: rgba(198, 40, 40, 0.1);
}

/* Root Variables - Light Theme */
:root {
	--sidebar-width: 30%;
	--min-sidebar-width: 300px;
	--header-height: 60px;
	--chat-input-height: 62px;
	--hpds-gray: #464942;
	--hpds-green: #8DC63F;
	--primary-bg: #ffffff;
	--secondary-bg: #f0f2f5;
	--chat-bg: #efeae2;
	--text-primary: #111b21;
	--text-secondary: #667781;
	--border-color: #e9edef;
	--message-out: #d9fdd3;
	--message-in: #ffffff;
	--input-bg: #ffffff;
}

/* Dark Theme Variables */
[data-theme="dark"] {
	--primary-bg: #111b21;
	--secondary-bg: #202c33;
	--chat-bg: #0b141a;
	--text-primary: #ffffff;
	--text-secondary: #aebac1;
	--border-color: #374045;
	--message-out: #005c4b;
	--message-in: #202c33;
	--chat-item-bg: #111b21;
	--chat-item-hover: #202c33;
	--name-color: #ffffff;
	--message-text: #e9edef;
	--input-bg: #2a3942;
}

/* Base Layout */
html,
body {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

body {
	display: flex;
	background: var(--secondary-bg);
}

/* Theme Toggle Button */
.theme-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1000;
	background: var(--secondary-bg);
	padding: 10px;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	color: var(--text-secondary);
}

/* Dashboard Return Button */
.dashboard-return {
	position: fixed;
	top: 20px;
	right: 80px;
	z-index: 1000;
	background: var(--secondary-bg);
	padding: 10px;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.dashboard-return a {
	color: var(--text-secondary);
	text-decoration: none;
}

.dashboard-return:hover {
	background: var(--hpds-green);
}

.dashboard-return:hover a {
	color: white;
}

/* Main Container */
.chat-container {
	display: flex;
	width: 100%;
	height: 100vh;
	background: var(--primary-bg);
	overflow: hidden;
}

/* Glassmorphic UI Styles */
.glassmorphic-body {
	min-height: 100vh;
	background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.app-container {
	display: flex;
	gap: 20px;
	max-width: 1200px;
	width: 100%;
}

.screen {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	padding: 20px;
	flex: 1;
	min-height: 600px;
	box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

/* User Profile Styles */
.user-profile {
	text-align: center;
	color: white;
}

.avatar-container {
	width: 120px;
	height: 120px;
	margin: 0 auto 20px;
	position: relative;
}

.avatar {
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Call Actions */
.call-actions {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-top: 40px;
}

.call-actions button {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.decline-call {
	background: #ff4757;
}

.accept-call {
	background: #2ed573;
}

/* Chat Messages */
.chat-messages {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.message-bubble {
	background: rgba(255, 255, 255, 0.2);
	padding: 12px 20px;
	border-radius: 20px;
	max-width: 80%;
	color: white;
}

/* Credit Card */
.credit-card {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 15px;
	padding: 20px;
	color: white;
	margin-top: 20px;
}

.card-number {
	font-size: 24px;
	letter-spacing: 2px;
	margin-bottom: 20px;
}

.card-name {
	font-size: 16px;
	text-transform: uppercase;
}

/* Profile Screen */
.profile-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: white;
	margin-bottom: 20px;
}

.more-options {
	background: none;
	border: none;
	color: white;
	font-size: 24px;
	cursor: pointer;
}

/* Animations */
@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}

	100% {
		transform: scale(1);
	}
}

/* Responsive Design */
@media (max-width: 768px) {
	.app-container {
		flex-direction: column;
	}

	.screen {
		min-height: 400px;
	}
}

/* Sidebar Styles */
.sidebar {
	width: var(--sidebar-width);
	min-width: var(--min-sidebar-width);
	height: 100%;
	background: var(--primary-bg);
	border-right: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
}

.header {
	padding: 10px 16px;
	background: var(--secondary-bg);
	color: var(--text-primary);
}

.user-profile {
	display: flex;
	align-items: center;
	width: 100%;
}

.profile-info {
	display: flex;
	align-items: center;
	width: 100%;
}

/* Profile Row Layout */
.profile-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.profile-row .avatar {
	flex-shrink: 0;
}

.dashboard-link {
	color: rgb(128, 128, 128);
	text-decoration: none;
	padding: 5px 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

.dashboard-link:hover {
	background: rgba(255, 255, 255, 0.2);
}

.user-name {
	color: rgb(128, 128, 128);
	font-weight: 500;
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.user-actions {
	display: flex;
	gap: 20px;
	color: #54656f;
}

.user-actions i {
	cursor: pointer;
}

/* Search Styles */
.search-container {
	padding: 8px 12px;
}

.search-box {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	background: var(--input-bg);
	border-radius: 8px;
}

[data-theme="dark"] .header:not(.hpds-gradient) {
	background-color: var(--secondary-bg);
}

[data-theme="dark"] .search-box {
	background: var(--input-bg);
}

[data-theme="dark"] .search-box input {
	color: var(--name-color);
}

[data-theme="dark"] .message-input {
	color: var(--name-color);
}

[data-theme="dark"] .search-box input::placeholder {
	color: var(--text-secondary);
}

.search-box i {
	color: #54656f;
	margin-right: 30px;
}

.search-box input {
	border: none;
	background: none;
	outline: none;
	font-size: 15px;
	width: 100%;
	color: var(--text-primary);
}

.search-box input::placeholder {
	color: var(--text-secondary);
}

[data-theme="dark"] .user-actions i,
[data-theme="dark"] .search-box i,
[data-theme="dark"] .message-input-container i {
	color: var(--text-secondary);
}

/* Chat List Styles */
.chat-list {
	height: calc(100% - var(--header-height) - 49px);
	overflow-y: auto;
}

.chat-item {
	display: flex;
	padding: 12px 16px;
	cursor: pointer;
	border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .chat-item {
	background-color: var(--chat-item-bg);
	border-bottom-color: var(--border-color);
}

[data-theme="dark"] .chat-item:hover {
	background-color: var(--chat-item-hover);
}

[data-theme="dark"] .chat-item h4 {
	color: var(--name-color);
	font-weight: 500;
}

[data-theme="dark"] .chat-info {
	background-color: transparent;
}

[data-theme="dark"] .chat-header {
	background-color: transparent;
}

[data-theme="dark"] .last-message,
[data-theme="dark"] .time {
	color: var(--text-secondary);
}

.chat-item:hover {
	background: var(--secondary-bg);
}

.chat-info {
	margin-left: 15px;
	flex: 1;
}

.chat-item h4 {
	color: var(--text-primary);
}

.last-message,
.time {
	color: var(--text-secondary);
}

.chat-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 3px;
}

.time {
	font-size: 12px;
	color: #667781;
}

.last-message {
	color: #667781;
	font-size: 14px;
}

/* Main Chat Area Styles */
.chat-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--chat-bg);
	position: relative;
	overflow: hidden;
}

.send-btn {
	background: none;
	border: none;
	color: #128C7E;
	cursor: pointer;
	padding: 0 10px;
}

.send-btn:hover {
	color: #075E54;
}

.message.sent {
	background: var(--message-out);
	color: var(--text-primary);
}

.message.received {
	background: var(--message-in);
	color: var(--text-primary);
}

[data-theme="dark"] .message.sent {
	background: var(--message-out);
	color: #e9edef;
}

[data-theme="dark"] .message.received {
	background: var(--message-in);
	color: #e9edef;
}

/* Add these styles for file messages */
.file-message {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px;
}

.file-message i {
	font-size: 1.5em;
	color: var(--text-secondary);
}

.file-message span {
	word-break: break-all;
}

/* Update message styles to handle files */
.message img {
	max-width: 200px;
	border-radius: 5px;
}

.message.sent img {
	border-radius: 5px;
}

/* Welcome Screen Styles */
.welcome-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	background: var(--secondary-bg);
	padding: 20px;
}

[data-theme="dark"] .welcome-screen {
	background: var(--secondary-bg);
}

[data-theme="dark"] .welcome-screen h1 {
	color: #ffffff;
}

[data-theme="dark"] .welcome-screen p {
	color: var(--text-secondary);
}

.welcome-screen img {
	width: 250px;
	margin-bottom: 20px;
}

.welcome-screen h1 {
	color: #41525d;
	margin-bottom: 10px;
}

.welcome-screen p {
	color: #667781;
}

.active-chat {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.chat-header {
	padding: 10px 16px;
	background: #f0f2f5;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
}

.chat-contact-info {
	display: flex;
	align-items: center;
}

.contact-details {
	margin-left: 15px;
}

.contact-name {
	color: var(--text-primary);
	font-weight: 500;
}

.contact-status {
	font-size: 13px;
	color: #667781;
}

[data-theme="dark"] .contact-name {
	color: var(--name-color);
	font-weight: 500;
}

[data-theme="dark"] .contact-status {
	color: #8696a0;
}

.messages-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 20px;
	overflow-y: auto;
	position: relative;
	background: linear-gradient(rgba(239, 234, 226, 0.95), rgba(239, 234, 226, 0.95));
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

[data-theme="dark"] .messages-container {
	background: linear-gradient(rgba(11, 20, 26, 0.95), rgba(11, 20, 26, 0.95));
}

/* Custom scrollbar styling */
.messages-container::-webkit-scrollbar {
	width: 6px;
}

.messages-container::-webkit-scrollbar-track {
	background: transparent;
}

.messages-container::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 3px;
}

.messages-container::before {
	content: "";
	/*position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200"><text x="50%" y="50%" font-family="Arial" font-size="72" font-weight="bold" fill="rgba(0, 150, 136, 0.07)" text-anchor="middle" dominant-baseline="middle">HPDS</text></svg>');
	background-repeat: repeat;
	background-size: 400px 200px;
	transform: rotate(-45deg);
	pointer-events: none;
	z-index: 0;
	opacity: 1; */
}

.message-input-container {
	padding: 10px 16px;
	background: var(--secondary-bg);
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

#message-input {
	background: var(--primary-bg);
	color: var(--text-primary);
}

.message-input-container i {
	color: #54656f;
	cursor: pointer;
	font-size: 1.3em;
}

#message-input {
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	border: none;
	border-radius: 8px;
	outline: none;
	font-size: 15px;
	background: var(--input-bg);
	color: var(--text-primary);
}

[data-theme="dark"] #message-input {
	background: var(--input-bg);
	color: #ffffff;
}

[data-theme="dark"] #message-input::placeholder {
	color: var(--text-secondary);
}

#message-input::placeholder {
	color: var(--text-secondary);
}

/* Message Loading States */
.loading,
.error,
.no-messages {
	text-align: center;
	padding: 20px;
	color: var(--text-secondary);
	font-style: italic;
}

.error {
	color: #e74c3c;
}

/* Message Bubbles */
.message {
	position: relative;
	z-index: 2;
	max-width: 65%;
	padding: 8px 12px;
	margin: 4px 0;
	border-radius: 7.5px;
	word-wrap: break-word;
	font-size: 14px;
	line-height: 1.4;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	clear: both;
}

.message.sent {
	background: var(--message-out);
	margin-left: auto;
	border-top-right-radius: 0;
}

.message.received {
	background: var(--message-in);
	margin-right: auto;
	border-top-left-radius: 0;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
	:root {
		--sidebar-width: 40%;
	}
}

@media screen and (max-width: 768px) {
	.dashboard-return {
		right: 70px;
	}

	.chat-container {
		position: relative;
	}

	.sidebar {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 2;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}

	.sidebar.active {
		transform: translateX(0);
	}

	.chat-area {
		width: 100%;
	}

	.message {
		max-width: 85%;
	}
}

@media screen and (max-width: 480px) {
	.message {
		max-width: 90%;
	}

	.message-input-container {
		padding: 8px;
		gap: 8px;
	}

	.chat-header {
		padding: 8px;
	}

	.avatar {
		width: 35px;
		height: 35px;
	}
}

/* Touch Device Optimizations */
@media (hover: none) {
	.chat-list {
		-webkit-overflow-scrolling: touch;
	}

	.messages-container {
		-webkit-overflow-scrolling: touch;
	}

	.message-input-container i {
		padding: 8px;
	}
}

/* High DPI Screens */
/* Emoji picker and recording UI styles */
.emoji-picker {
	position: absolute;
	bottom: 70px;
	left: 16px;
	z-index: 1000;
	background: var(--primary-bg);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.attachment-preview {
	position: absolute;
	bottom: 70px;
	left: 16px;
	right: 16px;
	background: var(--primary-bg);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding: 16px;
	z-index: 1000;
}

.preview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.preview-content {
	max-height: 200px;
	overflow: auto;
}

.voice-recorder-container {
	position: absolute;
	bottom: 70px;
	left: 16px;
	right: 16px;
	background: var(--primary-bg);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding: 16px;
	z-index: 1000;
}

.recorder-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.timer {
	font-size: 1.2em;
	color: var(--text-primary);
}

.stop-recording {
	background: #ff4444;
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: white;
}

.recording .fa-microphone {
	color: #ff4444;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
	.messages-container::before {
		background-size: 400px 200px;
	}
}

/* loader messages */
.loading,
.error {
	padding: 20px;
	text-align: center;
	color: #666;
}

.loading::after {
	content: '...';
	animation: dots 1s infinite;
}

@keyframes dots {

	0%,
	20% {
		content: '.';
	}

	40% {
		content: '..';
	}

	60% {
		content: '...';
	}

	80%,
	100% {
		content: '';
	}
}