:root {
	--chat-message-radius: 8px;
	--time-color: #8b8ca3;
	--unread-marker-text: #111b21;
	--unread-marker-background: #00a884;
	--panel-header-icon: #aebac1;

	--chat-background: #efeae2;
	--chat-message-incoming-background: #fff;
	--chat-message-outgoing-background: #d9fdd3;
	--text-color: #111b21;
	--background-default-hover: rgba(0, 0, 0, 0.05);
	--border-list: #d6dadc;
	--panel-header-background: #f0f2f5;
	--panel-footer-background: #f0f2f5;
	--compose-input-background: #fff;
	--border-grid-color: #dadee0;
	--background-color-document: rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] {
	--chat-background: #0b141a;
	--chat-message-incoming-background: #202c33;
	--chat-message-outgoing-background: #005c4b;
	--text-color: #e9edef;
	--background-default-hover: rgba(255, 255, 255, 0.05);
	--border-list: #364148;
	--panel-header-background: #202C33;
	--panel-footer-background: #202C33;
	--compose-input-background: #2A3942;
	--border-grid-color: #3F4A51;
	--background-color-document: rgba(255, 255, 255, 0.2);
}

/* PHONE CONTAINER */

.phone {
	position: relative;
	width: 375px;
	height: 667px;
	padding: 20px;
	border-radius: 40px;
	background-color: #000;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.phone::after {
	content: '';
	position: absolute;
	width: 60px;
	height: 5px;
	border-radius: 10px;
	background-color: #000;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
}

.phone .screen {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border-radius: 30px;
	background: var(--chat-background);
}

.phone .screen>h1,
.phone .screen>p {
	color: var(--text-color);
	text-align: center;
}

.phone .screen>h1 {
	font-size: 24px;
	margin: 0;
}

.phone .screen>p {
	font-size: 16px;
}


/* WHATSAPP CONTAINER */

.whatsapp-wrapper {
	height: calc(100vh - 104px);
	min-height: 250px;
}


/* LEFT COLUMN */

.sidebar-column-wrapper {
	border-right: solid 1px var(--border-grid-color);
	width: 400px;
}

.sidebar-header,
.contact-header {
	background-color: var(--panel-header-background);
	border-bottom: solid 1px var(--border-grid-color);
	min-height: 73px;
}

.sidebar-header .sidebar-header-title,
.contact-header .contact-header-title {
	max-width: 270px;
	font-size: 16px;
}

.sidebar-header .sidebar-header-buttons,
.contact-header .contact-header-buttons {
	color: var(--panel-header-icon);
}

.sidebar-section,
.contact-section {
	height: calc(100% - 73px);
}

.sidebar-section ul li,
.contact-section ul li {
	border-top: 1px solid var(--border-list);
}

.sidebar-section ul li:hover,
.sidebar-section ul li.active,
.contact-section ul li:hover {
	background-color: var(--background-default-hover);
}

.sidebar-section ul li .info-section .chat-title,
.contact-section ul li .info-section .chat-title {
	max-width: 225px;
	font-size: 17px;
}

.sidebar-section ul li .info-section .chat-time {
	min-width: 85px;
	font-size: 12px;
}

.sidebar-section ul li .info-section .info-extra {
	min-height: 20px;
}

.sidebar-section ul li .info-section .info-extra .chat-text {
	max-width: 290px;
}

.sidebar-section ul li .info-section .info-extra .unread-messages {
	color: var(--unread-marker-text);
	background-color: var(--unread-marker-background);
}

/* RIGHT COLUMN */

.chat-column .chat-header {
	background-color: var(--panel-header-background);
	border-bottom: solid 1px var(--border-grid-color);
}

.chat-column .chat-header .chat-header-text {
	font-size: 16px;
}

/* CHAT SECTION */

.chat-section {
	width: 100%;
	flex: 1;
	overflow: hidden;
	background: url("../../images/chat-whatsapp-bg-d752c2facc9341b09b31a861bf592bf9.png") var(--chat-background);
}

[data-bs-theme="dark"] .chat-section {
	background: url("../../images/chat-whatsapp-bg-dark-fb297e0fe0a5a84d65d00af552674c62.png") var(--chat-background);
}

.chat-section .chat-messages {
	height: 100%;
	display: flex;
	flex-direction: column;
	margin: 0px;
	padding: 0px;
	overflow-y: scroll;
	scrollbar-width: thin;
	padding: 0px 15px;
}

.chat-section .chat-messages .chat-message {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: visible;
	margin: 6px 0px;
}

.chat-section .chat-messages .chat-message.self {
	align-items: flex-end;
}

.chat-section .chat-messages .chat-message .chat-message-box {
	max-width: 100%;
	min-width: 65px;
	font-size: 14px;
	line-height: 19px;
	border-radius: var(--chat-message-radius);
	background-color: var(--chat-message-incoming-background);
	box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13);
}

.chat-section .chat-messages .chat-message.self .chat-message-box {
	background-color: var(--chat-message-outgoing-background);
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container {
	padding: 8px;
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-text span {
	width: 100%;
	word-wrap: break-word;
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-text div+span {
	margin-top: 10px;
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-text .image-message {
	position: relative;
	width: 400px;
	max-width: 100%;
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-text .image-message img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--chat-message-radius);
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-text .video-message {
	width: 400px;
	max-width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-text .video-message video {
	width: 100%;
	border-radius: var(--chat-message-radius);
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-text .ptt-message {
	width: 400px;
	max-width: 100%;
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-text .ptt-message audio {
	width: 100%;
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-text .document-message {
	width: 400px;
	max-width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: var(--background-color-document);
	padding: 15px;
	border-radius: var(--chat-message-radius);
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-text .document-message .title-container {
	flex-grow: 1;
	display: flex;
	align-items: center;
	gap: 15px;
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-text .document-message .title-container img {
	width: 26px;
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-time {
	display: flex;
	align-items: center;
	float: right;
	padding: 4px 0;
	font-size: 75%;
	line-height: 15px;
	white-space: nowrap;
	color: var(--time-color);
}

.chat-section .chat-messages .chat-message .chat-message-box .chat-message-container .chat-message-time span {
	display: inline-block;
	vertical-align: top;
	overflow-wrap: break-word;
	width: 100%;
}

/* CHAT FOOTER */

.chat-footer {
	min-height: 62px;
	background-color: var(--panel-footer-background);
}

.chat-footer .attach-button {
	font-size: 20px;
	line-height: 20px;
	width: 45px;
	height: 45px;
}

.chat-footer .textarea-container {
	background-color: var(--compose-input-background);
}

.chat-footer .textarea-container textarea {
	font-size: 1rem;
}

.chat-footer .textarea-container textarea:active,
.chat-footer .textarea-container textarea:focus-visible {
	outline: none;
}