body{
	overflow: hidden !important;
}

/* Sohbet alanı hariç metin seçimini kapat */
body {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Sohbet alanında metin seçimine izin ver */
.vx_chat_body,
.vx_chat_body * {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

/* Input ve textarea'larda metin seçimine izin ver */
input,
textarea,
[contenteditable="true"] {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

.btn i{
	padding-right: 0 !important;
}

/* Metronic .btn'e "outline: 0 !important" veriyor; bu, klavye kullanıcıları için
   odak göstergesini tümden yok ediyor. Fare tıklamasında halka çıkarmayan
   :focus-visible ile telafi ediyoruz. box-shadow kutu modelini değiştirmez,
   dolayısıyla odaklanma hiçbir şeyi kaydırmaz. */
.btn:focus-visible,
[contenteditable="true"]:focus-visible{
	outline: 0;
	box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .35);
}

/* ==================== Uygulama yerleşiminin ana ekseni ====================
   .vx-container yatay bir flex satırı: [ .vx-sidebar | .vx-content ].
   Flex item'ların örtük min-width'i "auto"dur, yani bir item asla kendi
   min-content genişliğinin altına inemez. .vx-content'in min-content'i
   iç sütunlardan (337px oda listesi + 370px sağ panel + sohbet) beslendiği
   için, min-width sıfırlanmazsa satır küçülemeyip viewport'u sağa taşar —
   dar ekranda sağ panel ekran dışında kalır. Zincirdeki HER flex item'da
   min-width:0 olmak zorunda; tek bir halkanın atlanması taşmayı geri getirir.
   overflow:hidden bilerek kullanılmıyor: sohbet başlığındaki dropdown'lar
   bu kapsayıcıların içinde açılıyor, kırpılmamalılar. */
.vx-content{
	flex: 1 1 0%;
	min-width: 0;
}

.vx-sidebar{
	/*margin-top: 30px;*/
	/*margin-left: 38px;*/
	border-radius: var(--bs-card-border-radius);
	background-color: var(--bs-sidebar-navbar-bg-color);
	width: var(--bs-app-sidebar-width);
	/* Sol ikon rayı sabit genişliktedir; alan daraldığında ezilmemeli. */
	flex: 0 0 var(--bs-app-sidebar-width);
	height: 100%;
	--bs-card-border-color: var(--bs-root-card-border-color);
	border: 1px solid var(--bs-card-border-color);
}

/* Kanal/oda ikonlarının listesi: footer (avatar) sabit kalır, liste kaydırılır.
   min-height:0 olmadan flex item içeriği kadar uzar ve overflow hiç tetiklenmez. */
#vx_app_sidebar{
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
}

#vx_app_sidebar::-webkit-scrollbar{
	display: none;
}

#vx_app_sidebar_footer{
	flex: 0 0 auto;
}
.voxhome:hover{
	border-radius: 3px !important;
	transition: all .7s;
}

.voxhome{
	cursor: pointer;
	transition: all .7s;
	width: 40px;
	height: 40px;
	background-image: url("https://cdn.voxnup.com/media/8fa2110a-9b70-11ef-a4eb-000c2987910c");

	background-size: contain;
	background-position: center; /* to center the image */
}

.vx-container{
	height: 100%;
	max-height: 100vh;
	width: 100%;
	min-width: 0;
	display: flex;
}

.vx-app-content-home{
	width: 100%;
	height: 100%;
	min-width: 0;
	display: flex;
}

@keyframes growIn {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	80% {
		transform: scale(1.05);
		opacity: 1;
	}
	100% {
		transform: scale(1);
	}
}

.vx-growin {
	animation: growIn 0.3s ease-in-out; /* Büyüme animasyonu */
}

.card .card-footer{
	padding: 1rem !important;
}

/* ==================== Durum mesajı balonu ==================== */
/* Kullanıcının kendi yazdığı kısa durum metni (tbl_users.status_text) —
   çevrimiçi/meşgul etiketi DEĞİL, o ayrı bir alan.
   Üç yerde paylaşıldığı için komponent CSS'i yerine burada: ayarlardaki profil
   önizlemesi, profil paneli ve özel sohbet kenar çubuğu. */
.vx-status-bubble {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin-top: 10px;
	padding: 6px 10px;
	border-radius: 10px;
	background: var(--bs-gray-200, rgba(255, 255, 255, .06));
	border: 1px solid var(--bs-border-color, rgba(255, 255, 255, .1));
	color: var(--bs-gray-800, inherit);
	font-size: 13px;
	line-height: 1.35;
	text-align: left;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Konuşma balonu kuyruğu: üst kenardan çıkan küçük üçgen.
   background: inherit — balonun rengi değişirse kuyruk kendiliğinden takip eder. */
.vx-status-bubble::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 14px;
	width: 9px;
	height: 9px;
	background: inherit;
	border-left: 1px solid var(--bs-border-color, rgba(255, 255, 255, .1));
	border-top: 1px solid var(--bs-border-color, rgba(255, 255, 255, .1));
	transform: rotate(45deg);
}