/* =====================================================================
   chat_popup.css - 2. kör: dokkolt popup chat widget
   =====================================================================
   FONTOS: ez a fájl ÖNÁLLÓ, nem támaszkodik a chat.css-re (az csak
   chat.php-n töltődik be, a popup viszont BÁRMELYIK MÁSIK oldalon
   megjelenhet) - ezért a buborék/avatár/dátum-elválasztó/pipa/törlés-
   gomb/kép-előnézet stílusok itt egy SAJÁT, a #chat_popup_window alá
   skálázott másolatban szerepelnek. Ha a buborék-stílust valaha
   módosítod chat.css-ben, érdemes ide is átvezetni az egyezőséghez.
   ===================================================================== */

#chat_popup_root {
	position: fixed;
	z-index: 120000;
	bottom: 0;
	right: 20px;
	font-family: inherit;
}
.bubble p { white-space: pre-wrap; }
/*-------------------Launcher gomb--------------------*/
.chat-popup-launcher {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #007bff;
	color: #fff;
	border: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	font-size: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	transition: transform 0.15s ease, background 0.15s ease;
}
.chat-popup-launcher:hover {
	background: #0069d9;
	transform: scale(1.05);
}
.chat-popup-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #dc3545;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	border: 2px solid #fff;
}

/*-------------------Popup ablak - 11. kör: EGY kombinált, kétoszlopos
  ablak (bal: aktív beszélgetés, jobb: partnerlista) - a korábbi KÜLÖN
  "beszélgetés-ablak" + "lista-flyout" páros helyett, lásd
  CHAT_ROUND1_VALTOZASOK.md "11. kör".--------------------*/
.chat-popup-window {
	position: fixed;
	right: 40px;
	bottom: 2px;
	width: 640px;
	height: 480px;
	background: #fff;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: row;
	overflow: hidden;
	z-index: 99999;
	transition: height 0.15s ease;
}
.chat-popup-window.minimized {
	height: 52px;
}
.chat-popup-window.minimized .chat-popup-body-wrap,
.chat-popup-window.minimized .chat-popup-list-col {
	display: none;
}
/* Webkit alapú böngészők (Chrome, Edge, Safari) */
#chat_container::-webkit-scrollbar,
#chat_list::-webkit-scrollbar {
    width: 6px; /* Vékony, elegáns vastagság */
}

#chat_container::-webkit-scrollbar-track,
#chat_list::-webkit-scrollbar-track {
    background: transparent; /* A sáv átlátszó, hogy ne zavarja a design-t */
}

#chat_container::-webkit-scrollbar-thumb,
#chat_list::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* Finom szürkés-kékes árnyalat (passzol az #ebf1f4 háttérhez) */
    border-radius: 10px; /* Teljesen lekerekített végek */
}

#chat_container::-webkit-scrollbar-thumb:hover,
#chat_list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* Kicsit sötétebb, ha ráviszed az egeret */
}
/*-------------------Bal oszlop: aktív beszélgetés--------------------*/
.chat-popup-chat-col {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/*-------------------Jobb oszlop: partnerlista--------------------*/
.chat-popup-list-col {
	width: 190px;
	flex-shrink: 0;
	background: #fff;
	border-left: 1px solid #e6e6e6;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index:120100;
}
.chat-popup-list-header {
	background: #007bff;
	color: #fff;
	padding: 14px 12px;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
.chat-popup-list-fullview {
	color: #fff;
	opacity: 0.85;
}
.chat-popup-list-fullview:hover {
	opacity: 1;
	color: #fff;
}
/* 15. kör: a fejléc mostantól 2 ikon-linket tartalmaz (fogaskerék +
   teljes nézet) - lásd chat_popup.js buildDom(). */
.chat-popup-list-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.chat-popup-conversations {
	background: #DFEFFF;
	list-style: none;
	margin: 0;
	padding: 6px 0;
	overflow-y: auto;
	flex: 1;
}
.chat-popup-conversation-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	cursor: pointer;
}
.chat-popup-conversation-item:hover {
	background: #C1DAFF;
}
.chat-popup-conversation-item.active {
	background: #fff;
	border-right:4px solid #85FF29;
}
.chat-popup-conv-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}
.chat-popup-conversation-item .status {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
}
.chat-popup-conversation-item .status:before {
	content: " ";
	position: absolute;
	width: 12px;
	height: 12px;
	bottom: 0;
	left: -0.2rem;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #ccc;
}
.chat-popup-conversation-item .status-success:before { background: #28a745; }
.chat-popup-conversation-item .status-warning:before { background: #ffc107; }
.chat-popup-conversation-item .status-danger:before { background: #dc3545; }
/* A badge (olvasatlan-szám) a névvel EGY VONALBAN, közvetlenül utána -
   lásd chat_popup.js renderConversationList(). */
.chat-popup-conv-name {
	flex: 1;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chat-popup-conv-name .badge {
	margin-left: 4px;
	vertical-align: middle;
}
.chat-popup-empty {
	padding: 20px 10px;
	color: #888;
	font-size: 12px;
	text-align: center;
}

.chat-popup-header {
	background: #007bff;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	cursor: pointer;
	flex-shrink: 0;
}
.chat-popup-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.15);
}
/* 14. kör: amíg nincs kiválasztva partner, ne maradjon egy üres,
   "törött kép"-nek látszó kör a fejlécben - lásd chat_popup.js
   showEmptyChatState()/setHeader(). */
.chat-popup-avatar.chat-popup-avatar-empty {
	visibility: hidden;
}
.chat-popup-header-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.chat-popup-name {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 16. kör - 3. kiegészítés: a név + az aktív-partner olvasatlan-badge
   EGY sorban - lásd chat_popup.js buildDom()/renderMinimizedUnreadUi(). */
.chat-popup-name-row {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.chat-popup-name-row .chat-popup-name {
	flex: 1;
	min-width: 0;
}
.chat-popup-header-badge {
	flex-shrink: 0;
	font-size: 11px;
}
.chat-popup-status {
	font-size: 11px;
	opacity: 0.85;
}

/* 16. kör - 3. kiegészítés: a MINIMALIZÁLT fejléc olvasatlan-jelzései -
   lásd chat_popup.js renderMinimizedUnreadUi() fejlécét. MINDKETTŐ
   (`.chat-popup-header-badge` ÉS `.chat-popup-minimized-unread`) csak
   akkor látszik, ha a chat_popup.js JS-oldalon úgy dönt (state.minimized
   ÉS van releváns olvasatlan) - a `style="display:none"` a markupban az
   alapállapot, a JS ezt kapcsolja `inline-flex`/`flex`-re. Ez a "kis
   avatar-klaszter" pontosan a felhasználó által küldött screenshotot
   követi: max 3 kis, egymást enyhén átfedő avatar, mindegyiken saját
   piros jelvénnyel, 3 fölött egy "+N" jelvénnyel a maradék darabszámmal. */
.chat-popup-minimized-unread {
	display: none;
	align-items: center;
	flex-shrink: 0;
	margin-right: 4px;
}
.chat-popup-mini-avatar {
	position: relative;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid #007bff;
	margin-left: -8px;
	flex-shrink: 0;
	cursor: pointer;
	background: #fff;
	margin: 0 .1rem !important;
}
.chat-popup-mini-avatar:first-child {
	margin-left: 0;
}
.chat-popup-mini-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.chat-popup-mini-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	border-radius: 8px;
	background: #dc3545;
	color: #fff;
	font-size: 9px;
	line-height: 14px;
	text-align: center;
	font-weight: 700;
	box-shadow: 0 0 0 1px #007bff;
}
/* A "+N" jelvény MAGA egy avatar-méretű kör, felirattal, kép nélkül -
   ugyanabba a sorba illeszkedik, ugyanazzal az átfedéssel. */
   
  /* Webkit alapú böngészők (Chrome, Edge, Safari) */
#chat_popup_list_col::-webkit-scrollbar,
#chat_popup_conversations::-webkit-scrollbar {
    width: 6px; /* Vékony, elegáns vastagság */
}

#chat_popup_list_col::-webkit-scrollbar-track,
#chat_popup_conversations::-webkit-scrollbar-track {
    background: transparent; /* A sáv átlátszó, hogy ne zavarja a design-t */
}

#chat_popup_list_col::-webkit-scrollbar-thumb,
#chat_popup_conversations::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* Finom szürkés-kékes árnyalat (passzol az #ebf1f4 háttérhez) */
    border-radius: 10px; /* Teljesen lekerekített végek */
}

#chat_popup_list_col::-webkit-scrollbar-thumb:hover,
#chat_popup_conversations::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* Kicsit sötétebb, ha ráviszed az egeret */
} 
   
   
.chat-popup-mini-avatar.chat-popup-mini-more {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #dc3545;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	border-color: #fff;
}
.chat-popup-icon-btn {
	background: transparent;
	border: none;
	color: #fff !important;
	opacity: 0.9;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	cursor: pointer;
	flex-shrink: 0;
	line-height:1;
	font-size:1rem;
}
.chat-popup-icon-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	opacity: 1;
}

.chat-popup-body-wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	/* 16. kör: a .chat-scroll-bottom-btn ehhez, mint legközelebbi
	   pozícionált őshöz igazodik (position:absolute). */
	position: relative;
}

/* 16. kör: "aljára görgetés" gomb - lásd assets/css/chat.css AZONOS
   nevű/szerepű szabályát (chat.php-s párja), itt kicsit kisebb méretben,
   a popup szűkebb elrendezéséhez igazítva. */
.chat-scroll-bottom-btn {
	position: absolute;
	right: 14px;
	bottom: 10px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: #fff;
	color: #555;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	cursor: pointer;
	z-index: 5;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.chat-scroll-bottom-btn:hover {
	background: #f2f2f2;
}
.chat-scroll-bottom-btn.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* A #chat_container/#chat_list IDE, a popup body-ba kerül dinamikusan
   (lásd chat_popup.js) - ugyanaz az id, mint chat.php-n, DE mivel a
   popup sosem jelenik meg chat.php-n, nincs ütközés. */
.chat-popup-body {
	flex: 1;
	overflow-y: auto;
	background: #ebf1f4;
	padding: 8px 10px;
	min-height: 0;
}
#chat_popup_window #chat_list {
	display: flex;
	flex-direction: column;
}

/*-------------------Üzenet-buborék (chat.css-sel egyező stílus)--------------------*/
#chat_popup_window .msg {
	display: flex;
	align-items: flex-end;
	margin: 6px 0;
	max-width: 85%;
	position: relative;
}
#chat_popup_window .msg.them { justify-content: flex-start; }
#chat_popup_window .msg.me { justify-content: flex-end; margin-left: auto; }

#chat_popup_window .bubble {
	padding: 8px 12px;
	padding-bottom: 16px;
	border-radius: 14px;
	font-size: 13px;
	line-height: 1.35;
	max-width: 100%;
	word-wrap: break-word;
	position: relative;
}
#chat_popup_window .msg.them .bubble {
	background: #e6e6e6;
	color: #333;
	border-bottom-left-radius: 4px;
}
#chat_popup_window .msg.me .bubble {
	background: #007bff;
	color: #fff;
	border-bottom-right-radius: 4px;
}
#chat_popup_window .avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 6px;
}
#chat_popup_window .bubble b {
	display: block;
	font-size: 11px;
	opacity: 0.8;
	margin-bottom: 2px;
}

#chat_popup_window .date-separator {
	display: flex;
	justify-content: center;
	margin: 10px 0 6px;
}
#chat_popup_window .date-separator span {
	background: rgba(0, 0, 0, 0.08);
	color: #555;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 10px;
}

#chat_popup_window .msg-meta {
	display: flex;
	align-items: center;
	gap: 3px;
	position: absolute;
	right: 8px;
	bottom: 2px;
	font-size: 9px;
	opacity: 0.75;
}
#chat_popup_window .msg.them .msg-meta { right: auto; left: 8px; color: #555; }
#chat_popup_window .msg.me .msg-meta { color: rgba(255, 255, 255, 0.85); }
#chat_popup_window .msg-seen i { font-size: 10px; }
#chat_popup_window .msg-seen.seen i { color: #b3e5fc; }

#chat_popup_window .msg-delete-btn {
	background: transparent;
	border: none;
	color: #999;
	opacity: 0;
	cursor: pointer;
	font-size: 11px;
	padding: 2px 4px;
	align-self: center;
	transition: opacity 0.15s ease;
}
#chat_popup_window .msg.me:hover .msg-delete-btn { opacity: 1; }
#chat_popup_window .msg-delete-btn:hover { color: #dc3545; }
#chat_popup_window .msg.deleted .bubble { opacity: 0.7; }
#chat_popup_window .deleted-text { font-style: italic; opacity: 0.85; margin: 0; }

#chat_popup_window .chat-image-link { display: block; margin-bottom: 4px; }
#chat_popup_window .chat-image {
	max-width: 100%;
	/* 🐛 JAVÍTVA (élő teszt után, lásd chat.css ugyanezen szabályát): a
	   korábbi `max-height` + `min-height` páros (`height` nélkül) miatt a
	   kép TÉNYLEGES magassága a betöltéséig ismeretlen/változó volt -
	   `loadOlderMessages()` közben (régi üzenetek görgetéssel való
	   betöltésekor, ahol NINCS `onImageLoad`-alapú scroll-korrekció) ez
	   okozta az élesben jelentett "visszaugró görgetés" hibát. Mostantól
	   FIX `height`, tehát a doboz mérete a kép betöltése előtt/után
	   azonos - nincs mit korrigálnia a görgetésnek. */
	height: 160px;
	max-height: 160px;
	border-radius: 10px;
	display: block;
	object-fit: cover;
	cursor: zoom-in;
	background: #d9dfe3;
}

/*-------------------Több kép "kártya" elrendezésben (3. kör, max. 4 kép)--------------------*/
#chat_popup_window .chat-image-gallery {
	display: grid;
	gap: 4px;
	margin-bottom: 4px;
}
#chat_popup_window .chat-image-gallery-1 { grid-template-columns: 1fr; }
#chat_popup_window .chat-image-gallery-2,
#chat_popup_window .chat-image-gallery-3,
#chat_popup_window .chat-image-gallery-4 { grid-template-columns: 1fr 1fr; }
/* 3 képnél az első kártya a teljes szélességet kapja, alatta a másik kettő. */
#chat_popup_window .chat-image-gallery-3 .chat-gallery-item:first-child { grid-column: 1 / span 2; }
#chat_popup_window .chat-image-gallery .chat-image {
	width: 100%;
	height: 90px;
	max-height: none;
}
#chat_popup_window .chat-image-gallery-1 .chat-image {
	/* 🐛 JAVÍTVA (élő teszt után): lásd a fenti `.chat-image` szabály
	   megjegyzését - `height: auto` helyett itt is FIX magasság kell. */
	height: 200px;
}

/*-------------------Kép-előnézet sáv (küldés előtt, max. 4 kártya)--------------------*/
#chat_popup_window .chat-image-preview-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: #f3f2f1;
	border-top: 1px solid #e6e6e6;
	flex-shrink: 0;
}
#chat_popup_window .chat-image-preview-card {
	position: relative;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
}
#chat_popup_window .chat-image-preview-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	background: #d9dfe3;
}
#chat_popup_window .chat-image-preview-remove {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #dc3545;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 9px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
#chat_popup_window .chat-image-preview-remove:hover { background: #b52a37; }

/*-------------------Húzd-és-ejtsd visszajelzés--------------------*/
#chat_popup_window.chat-dragover {
	outline: 2px dashed #007bff;
	outline-offset: -4px;
}

/*-------------------Beviteli sor--------------------*/
.chat-popup-input {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	padding: 8px 10px;
	background: #fff;
	border-top: 1px solid #eee;
	flex-shrink: 0;
}

/* 15. kör - 4. kiegészítés: lásd chat.css `.chat-input-row-locked`
   ugyanezen kommentjét - itt is `visibility:hidden`-t használunk
   `display:none` helyett (a popup ablaka fix szélességű, tehát nála a
   chat.php-n élesben jelentkezett szélesség-összeomlás konkrétan nem
   fordult elő, de a biztonságosabb technikát konzisztencia és védekező
   jelleggel itt is bevezetjük). A `.chat-popup-input`-nak (a
   `.chat-input-row`-tól eltérően) SAJÁT paddingje/border-topja van -
   ezeket is nullázni kell, különben `height:0` mellett is maradna egy
   kb. 17px-es üres, keretezett sáv. */
.chat-popup-input.chat-input-row-locked {
	visibility: hidden;
	height: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-top: none;
	overflow: hidden;
}
/* SZŰKÍTVE #chat_popup_window alá - a `.chat-attach-btn` osztálynevet a
   chat.css (chat.php, teljes oldal) is használja; mivel ezt a fájlt
   elméletileg akár chat.php-n is betölthetik (véletlenül, vagy mert a
   site-wide sablon minden oldalra tölti), a szűkítés nélkül a két
   stílus egymást felülírhatná a betöltési sorrendtől függően. */
#chat_popup_window .chat-attach-btn {
	background: #f3f2f1;
	border: none;
	color: #555;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 15px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
#chat_popup_window .chat-attach-btn:hover { background: #e6e6e6; }
#chat_popup_window .chat-attach-btn:disabled { opacity: 0.5; cursor: default; }

.chat-popup-textarea {
	flex: 1;
	min-height: 34px;
	max-height: 100px;
	resize: none;
	border: 1px solid #e6e6e6;
	border-radius: 18px;
	padding: 7px 14px;
	font-size: 13px;
	line-height: 18px;
	background: #f3f2f1;
}
.chat-popup-textarea:focus {
	background: #fff;
	outline: none;
	border-color: #007bff;
}
.chat-popup-textarea:disabled {
	opacity: 0.6;
	cursor: default;
}

.chat-popup-send {
	background: #007bff;
	border: none;
	color: #fff;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.chat-popup-send:hover { background: #0069d9; }
.chat-popup-send:disabled { opacity: 0.5; cursor: default; background: #007bff; }

.chat-popup-body-wrap .no-chat {
	margin: auto;
	text-align: center;
	padding: 30px 16px;
	color: #777;
	font-size: 13px;
}

.chat-popup-body-wrap .typing-indicator {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
}
.chat-popup-body-wrap .typing-indicator span {
	width: 5px;
	height: 5px;
	background: #999;
	border-radius: 50%;
	animation: chatPopupTyping 1.4s infinite ease-in-out;
}
.chat-popup-body-wrap .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.chat-popup-body-wrap .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatPopupTyping {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
	40% { transform: scale(1); opacity: 1; }
}

/*-------------------Mobil--------------------*/
@media (max-width: 480px) {
	.chat-popup-window {
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		border-radius: 0;
	}
	.chat-popup-window.minimized {
		height: 52px;
		width: 220px;
		right: 10px;
		bottom: 10px;
		border-radius: 12px;
	}
	/* Keskeny kijelzőn a jobb oszlop (partnerlista) csak addig kap helyet,
	   amíg elfér - a bal (chat) oszlop mindig a hely nagy részét kapja. */
	.chat-popup-list-col {
		width: 110px;
	}
	.chat-popup-launcher {
		right: 16px;
		bottom: 16px;
	}
}

/*===========================================================
  Emoji panel - 6. javítási kör (lásd assets/js/emoji_widget.js
  fejlécét). A komment-rendszer emoji-designjának (editor.css +
  _editor.css) chat-specifikus, ÖNÁLLÓ portja - szándékosan
  UGYANAZOKKAL az osztálynevekkel, mint az eredetiben, hogy ha egy
  oldalon véletlenül mindkettő betöltődik (pl. a chat-popup egy
  olyan oldalon, ahol komment-doboz is van), ne legyen vizuális
  ütközés - a szabályok egyeznek.
  =========================================================== */

.emoji-dropdown {
	position: relative;
	display: inline-block; z-index:130010;
}

.emoji-toggle {
	
	padding: 6px 10px;
	
	cursor: pointer;
	font-size: 16px;
	transition: background 0.2s;
	line-height: 1;
}

.emoji-toggle:hover {
	background: #e5e7eb;
	 border-radius:40%;
}

/* 13. kör: amíg nincs kiválasztva partner (vagy válaszra várunk, lásd
   applyPendingApprovalUi()), a gomb vizuálisan is tiltottnak látszik. */
.emoji-toggle:disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

.emoji-panel {
	display: none;
	/* position:fixed - a JS (positionChatFloating()) állítja be pixel-
	   pontosan a top/left/bottom értékeket, a viewporthoz képest. */
	position: fixed;
	width: 460px;
	max-width: calc(100vw - 16px);
	max-height: 280px;
	overflow: visible;
	background: #fff !important;
	border: 1px solid #ccc;
	border-radius: 8px;
	padding: 8px;
	z-index: 2000;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.emoji-panel.open {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.emoji-panel.panel-down::after {
	content: "";
	position: absolute;
	top: -9px;
	left: 10px;
	width: 0;
	height: 0;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-bottom: 9px solid #ccc;
}
.emoji-panel.panel-down::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 10px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #fff;
	z-index: 1;
}

.emoji-panel.panel-up::after {
	content: "";
	position: absolute;
	bottom: -9px;
	left: 10px;
	width: 0;
	height: 0;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 9px solid #ccc;
}
.emoji-panel.panel-up::before {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 10px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #fff;
	z-index: 1;
}

.emoji-search {
	width: 100%;
	border: 1px solid #e1e3e6;
	border-radius: 6px;
	padding: 5px 8px;
	font-size: 0.85em;
	outline: none;
	flex: 0 0 auto;
}

.emoji-search:focus {
	border-color: #adb5bd;
}

.emoji-grid {
	width: 100%;
	max-height: 290px;
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.emoji-grid .emoji-item {
	cursor: pointer;
	padding: 4px;
	font-size: 1.3em;
	line-height: 1;
	border-radius: 6px;
}

.emoji-grid .emoji-item:hover {
	background: #f1f1f1;
}

.emoji-empty {
	padding: 12px 4px;
	text-align: center;
	color: #adb5bd;
	font-size: 0.85em;
	width: 100%;
}

/* :shortcode: javaslatdoboz - a JS (document.body-hoz fűzve, lásd
   emoji_widget.js initChatEmojiWidget()) miatt ez a szabály
   szándékosan NEM scope-olt egyik konténerhez sem. */
.shortcode-suggest {
	display: none;
	position: fixed;
	width: 435px;
	max-width: calc(100vw - 16px);
	max-height: 220px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	z-index: 2050;
	padding: 4px;
}

.shortcode-suggest.open {
	display: block;
}

.shortcode-suggest-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.85em;
}

.shortcode-suggest-item:hover,
.shortcode-suggest-item.active {
	background: #f1f1f1;
}

.shortcode-suggest-emoji {
	font-size: 1.1em;
}

.shortcode-suggest-code {
	color: #6c757d;
}

/* ua., mint chat.css - lásd ott a kommentet. */
.chat-popup-input .emoji-dropdown { flex-shrink: 0; }

/*-------------------Engedély-kérés banner (7. kör)--------------------*/
.chat-pending-banner {
	display: none;
	align-items: center;
	gap: 8px;
	background: #fff8e1;
	border: 1px solid #ffe08a;
	color: #8a6100;
	border-radius: 8px;
	padding: 6px 10px;
	margin: 0 10px 6px;
	font-size: 0.8em;
}
.chat-pending-banner i {
	flex-shrink: 0;
}

/*-------------------"Ne zavarj" banner (15. kör)--------------------*/
.chat-dnd-banner {
	display: none;
	align-items: center;
	gap: 6px;
	background: #fdecea;
	border: 1px solid #f3b7b1;
	color: #a72820;
	border-radius: 8px;
	padding: 6px 10px;
	margin: 0 10px 6px;
	font-size: 0.8em;
}
.chat-dnd-banner i {
	flex-shrink: 0;
}

/*-------------------"Ne zavarj" jelvény a partnerlistában--------------------*/
.badge-dnd {
	background: #dc3545;
	color: #fff;
}

/*-------------------Chat-beállítások menü (15. kör) - lásd chat.css
  ugyanezen kommentjét: js_funkciok/profil_socket.js
  buildChatSettingsMenu() `document.body`-hoz fűzi a menüt, NEM egy
  adott konténer alá - ezért ez a blokk itt is, chat.css-ben is
  szerepel (duplikálva, nem scope-olva), ugyanúgy, mint az
  emoji-panel/shortcode-suggest osztályok fentebb.--------------------*/
.chat-settings-menu {
	display: none;
	position: fixed;
	
	
	max-width: calc(100vw - 126px);
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 8px;
	padding: 4px;
	z-index: 130000;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.chat-settings-menu.open {
	display: block;
}
.chat-settings-item {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 9px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.8em;
	color: #333;
}
.chat-settings-item:hover {
	background: #f1f1f1;
}
.chat-settings-item i {
	width: 14px;
	text-align: center;
	color: #666;
	flex-shrink: 0;
}
.chat-settings-item span:not(.chat-settings-state) {
	flex: 1;
}
.chat-settings-state {
	font-size: 0.85em;
	font-weight: 600;
	color: #888;
	background: #f1f1f1;
	padding: 2px 7px;
	border-radius: 10px;
	flex-shrink: 0;
}
.chat-settings-state.is-on {
	color: #fff;
	background: #dc3545;
}