/* emoji-secici.css
 * ─────────────────────────────────────────────────────────────
 * emoji-secici.js tarafından oluşturulan panelin görünümü.
 * Sitenin genelinde kullanılan yuvarlatılmış köşe / gölge diline
 * (canlı-sohbet.php'deki .sohbet-balon, .sohbet-sabit-kapsayici vb.)
 * uyumlu olacak şekilde hazırlandı.
 */

.emoji-secici-panel {
	z-index: 3000;
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 10px;
	padding: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2px;
	width: 280px;
	max-height: 220px;
	overflow-y: auto;
}

.emoji-secici-item {
	border: none;
	background: none;
	font-size: 20px;
	line-height: 1;
	padding: 6px 0;
	border-radius: 6px;
	cursor: pointer;
	text-align: center;
}

.emoji-secici-item:hover {
	background: #f1f3f5;
}

.emoji-secici-panel::-webkit-scrollbar {
	width: 6px;
}
.emoji-secici-panel::-webkit-scrollbar-thumb {
	background: #dee2e6;
	border-radius: 3px;
}

/* Emoji butonu SADECE tabletten büyük (normal masaüstü) ekranlarda görünür.
 * Mobil/tablette klavye zaten emoji desteği sağladığı için buton hiç
 * render edilmez. Bootstrap'in "lg" kırılım noktası (992px) kullanıldı;
 * büyük tabletleri (ör. iPad Pro yatay, 1024px) de gizli tutmak istersen
 * 992px değerini 1200px yapman yeterli.
 * Butonu HTML'de eklerken class listesine "emoji-secici-buton" ekle. */
.emoji-secici-buton {
	display: none;
}
@media (min-width: 992px) {
	.emoji-secici-buton {
		display: inline-flex;
		align-items: center;
	}
}

@media (max-width: 576px) {
	.emoji-secici-panel {
		grid-template-columns: repeat(6, 1fr);
		width: 230px;
	}
}