/*
 * assets/css/emoji.css
 *
 * DROPX PRIME SYSTEM - Emotikon és Reakció Stíluslap
 *
 * Ez a stíluslap definiálja az emotikon választó modal ablak,
 * az üzenet reakció gombok és az üzenetbuborékok alatti reakció buborékok
 * vizuális megjelenítését. Teljesen modulárisan, elkülönítve a messages.css-től.
 *
 * MÓDOSÍTÁS (V82 - UX FINOMÍTÁS: EMOJI PICKER MODAL):
 * - A `.emoji-picker-modal` háttér elmosása és színe enyhébbé téve.
 * - A `.emoji-picker-modal-content` maximális szélessége és magassága finomítva,
 *   hogy "emberibb" méretű legyen, elkerülve a teljes képernyős dominanciát.
 * - Reszponzív módosítások a kisebb képernyőkhöz, hogy a modal jobban illeszkedjen.
 *
 * MÓDOSÍTÁS (V85 - Z-INDEX NÖVELÉS AZ EMOJI PICKER MODALNÁL):
 * - A `.emoji-picker-modal` `z-index` értéke tovább növelve (`10000`-ről `2147483647`-re, ami a maximális CSS z-index).
 *   Ez biztosítja, hogy az emotikon választó modal minden körülmények között
 *   az összes többi elem (beleértve az overlay-eket és popupokat) felett jelenjen meg.
 *
 * MÓDOSÍTÁS (V93 - REAKCIÓ POPUP ÉS EMOJI PICKER POZÍCIÓ/STÍLUS FIX):
 * - `.reaction-options-popup`: `position: fixed`-re változtatva, `z-index` növelve, hogy minden chat ablak előtt jelenjen meg.
 * - `.emoji-picker-modal`: `position: fixed`-re változtatva, átalakítva egy gombhoz pozícionált, lenyúló menü stílusú display-re.
 *   Eltávolítva a teljes képernyős overlay és blur hatások, a `max-width` és `max-height` beállítva.
 *   A stílusok a DropX rendszer sötét/arany dizájnhoz igazítva.
 * - `emoji-picker`: A custom element stílusváltozói frissítve a DropX sötét megjelenéshez.
 *
 * JAVÍTÁS (V103 - EMOJI PICKER MÉRET ÉS SZÍN FIX):
 * - `.emoji-picker-modal`: A `max-height` tovább csökkentve (pl. 250px), hogy a modal kompaktabb legyen.
 * - `emoji-picker`: A `--emoji-picker-bg` és `--emoji-picker-header-bg` `!important`-tal felülírva,
 *   és az `overflow-y: auto` hozzáadva, hogy a belső tartalom görgethető legyen, ha nagyobb a modalnál.
 *   A `background-color` direktben is beállítva a `emoji-picker` elemen, hogy felülírja az esetleges alapértelmezett fehér hátteret.
 *
 * JAVÍTÁS (V105 - EMOJI PICKER SZÍN ÉS MÉRET FIX - MÉG AGRESSZÍVEBB FELÜLÍRÁS):
 * - `.emoji-picker-modal`: A `max-height` érték tovább csökkentve, hogy még kisebb legyen.
 * - `emoji-picker`: Direkt `background-color: #1a1a1a !important;` hozzáadva az elemhez,
 *   és a `--emoji-picker-*` változók még hangsúlyosabban felülírva, hogy a DropX sötét dizájnja érvényesüljön.
 *
 * JAVÍTÁS (V107 - EMOJI PICKER BELSŐ MAGASSÁG ÉS GÖRGETŐSÁV FIX):
 * - `emoji-picker`: Hozzáadva `height: 100% !important;` és `overflow-y: auto !important;` a komponenshez,
 *   valamint a `--emoji-picker-height: 100% !important;` custom property felülírva,
 *   hogy a komponens a szülője (modal) magasságát vegye fel, és aktiválja a belső görgetést.
 *
 * JAVÍTÁS (V109 - EMOJI PICKER MÉRET ÉS GÖRGETŐSÁV VÉGLEGES FIX):
 * - `.emoji-picker-modal`: `max-height` növelve 280px-re, `min-height` beállítva 200px-re.
 * - `.emoji-picker-modal-content`: Hozzáadva `overflow-y: auto !important;` a görgetősáv kényszerítéséhez.
 * - Minden releváns elemen `box-sizing: border-box !important;` hozzáadva a konzisztens méretezésért.
 *
 * JAVÍTÁS (V111 - EMOJI PICKER GÖRGETŐSÁV ÉS MÉRET TOVÁBBI FINOMÍTÁSA):
 * - `.emoji-picker-modal`: `max-height` csökkentve 220px-re, `min-height` 150px-re.
 * - `emoji-picker-modal-content`: `overflow-y: auto !important;` megerősítve.
 * - `emoji-picker` elemre specifikus scrollbar stílusok hozzáadva a WebKit alapú böngészők számára.
 *
 * JAVÍTÁS (V113 - EMOJI PICKER MÉRET ÉS GÖRGETŐSÁV EXPLICIT KÉNYSZERÍTÉSE):
 * - `.emoji-picker-modal`: `max-height` 250px-re, `min-height` 150px-re állítva.
 * - `.emoji-picker-modal-content`: `overflow-y: scroll !important;` beállítva.
 * - `emoji-picker`: `height: 100% !important;` és `overflow-y: scroll !important;` megerősítve,
 *   valamint a scrollbar stílusok a komponensre is alkalmazva, `!important` kulcsszóval.
 *
 * JAVÍTÁS (V114 - EMOJI PICKER VÉGLEGES MÉRET ÉS SCROLLBAR KÉNYSZERÍTÉSE):
 * - `.emoji-picker-modal`: `max-height` 250px-re, `min-height` 150px-re állítva (desktop).
 * - `emoji-picker-modal-content`: `height: 100% !important;` és `overflow-y: scroll !important;`
 *   Megerősítve a görgetősáv megjelenítését a külső konténeren.
 * - `emoji-picker`: `height: 100% !important;` és `overflow-y: scroll !important;` megerősítve.
 *   **Célzott Shadow DOM scrollbar stílusok a `::part(body)` elemen keresztül, hogy az `emoji-picker` belső scrollbar-ja is a DropX stílusát kapja és működjön.**
 *   A reszponzív magasságok is újra átnézve a kérésnek megfelelően.
 *
 * JAVÍTÁS (V115 - EMOJI PICKER AGRESSZÍV GÖRGETŐSÁV ÉS MÉRET FIX):
 * - `.emoji-picker-modal`: `max-height` 270px-re (desktop), `min-height` 150px-re állítva.
 * - `emoji-picker-modal-content`: `height: 100% !important;` és `overflow-y: scroll !important;`
 *   Megerősítve a görgetősáv megjelenítését a külső konténeren.
 * - `emoji-picker::part(category-list)` és `emoji-picker::part(emoji-list)`:
 *   Ezeket az elemeket célozzuk meg a belső görgetősáv és magasság kezelésére.
 *   `height: 100% !important;` és `overflow-y: scroll !important;` tulajdonságok hozzáadva.
 *   A görgetősáv stílusok is ezekre a `::part` elemekre vonatkoznak.
 *   A reszponzív magasságok is adaptálva.
 *
 * JAVÍTÁS (V117 - EMOJI PICKER VÉGLEGES GÖRGETÉS ÉS MÉRET FIX):
 * - `.emoji-picker-modal`: `max-height` 250px-re (desktop), `min-height` 150px-re állítva.
 * - `.emoji-picker-modal-content`: `height: 100% !important;` és `overflow-y: scroll !important;` megerősítve.
 * - `emoji-picker`: `height: 100% !important;` és `overflow-y: scroll !important;` megerősítve.
 *   **A görgetősáv stílusokat most már közvetlenül az `emoji-picker` komponensre alkalmazzuk, nem `::part()`-tal.**
 *   Ez a legagresszívebb megközelítés a komponens belső görgetésének aktiválására, amennyiben az `overflow-y: scroll` egyáltalán engedélyezett rajta.
 *   Reszponzív magasságok is újra adaptálva.
 *
 * JAVÍTÁS (V118 - EMOJI PICKER GÖRGETŐSÁV FIX):
 * - `.emoji-picker-modal`: Az `overflow: hidden;` eltávolítva és `overflow-y: auto !important;`-ra cserélve.
 *   Ez biztosítja, hogy a modal konténer maga is görgethetővé váljon, ha a belső elemek nem tudják kezelni az overflow-t.
 * - `emoji-picker`: A közvetlen scrollbar stílusok eltávolítva a host elemről, mivel azok nem az Shadow DOM belső tartalmát célozták.
 * - `emoji-picker::part(emoji-list)`: Hozzáadva `height: 100% !important;` és `overflow-y: scroll !important;` a fő emoji lista görgetésének kényszerítéséhez.
 * - `emoji-picker::part(emoji-list)` és `emoji-picker::part(category-list)`: A scrollbar stílusok most már ezekre a Shadow DOM részekre vonatkoznak,
 *   így biztosítva a DropX stílusú görgetősáv megjelenését a belső tartalomhoz.
 *
 * MÓDOSÍTÁS (V121 - FEJLÉC ÉS REAKCIÓ GOMB STÍLUSOK):
 * - `.chat-popup-header .header-dropdown`: Hozzáadott háttér, keret és árnyék a menü olvashatóságának javításához.
 * - `.chat-popup-header .header-dropdown a`: Hozzáadott padding és hover effektus.
 * - `.reaction-main-toggle-btn`: Megnövelt méret, kiemelt pozíció az input mezőből, és egy pulzáló animáció.
 * - `@keyframes pulse-reaction`: Definíció a pulzáló animációhoz.
 * - `.chat-send-btn`: `display: none !important;` a küldés gomb elrejtésére.
 */

/* ========================================= */
/* EMOJIK ÉS REAKCIÓK STÍLUSAI */
/* ========================================= */

/* Emotikon választó modal (nem teljes oldalon átívelő, hanem gombhoz pozícionált) */
.emoji-picker-modal {
    display: none; /* Alapból rejtett, JS jeleníti meg */
    position: fixed; 
    z-index: 2147483647; /* Maximális z-index, hogy biztosan minden felett legyen */
    box-sizing: border-box !important;

    /* JAVÍTÁS (V117): Max-height és min-height a kérésnek megfelelően (desktop) */
    border-radius: 12px;
    background-color: rgba(0,0,0,0.85); /* Sötét, áttetsző háttér */
    box-shadow: 0 8px 30px rgba(0,0,0,0.8); /* Erősebb árnyék */
    max-width: 360px; 
    max-height: 250px; /* JAVÍTÁS (V117): Célzott magasság */
    min-height: 150px; /* JAVÍTÁS (V117): Minimális magasság */
    
    /* JAVÍTÁS (V118): Engedélyezzük a szülő konténer görgetését, ha a belső elemek mégsem tudnák kezelni. */
    overflow-y: auto !important; /* Hozzáadva */
    overflow-x: hidden !important; /* Hozzáadva */

    border: 1px solid rgba(255,255,255,0.15); /* Finomabb keret */
}

.emoji-picker-modal-content {
    padding: 0;
    border-radius: 12px;
    height: 100% !important; /* JAVÍTÁS (V117): Kitölti a modalt */
    width: 100% !important; /* JAVÍTÁS (V117): Kitölti a modalt */
    /* JAVÍTÁS (V117): Görgetősáv kényszerítése a modal-content-re */
    overflow-y: scroll !important; 
    overflow-x: hidden !important; 
    display: flex;
    flex-direction: column;
    box-sizing: border-box !important;
}

/* Az emoji-picker-element custom element stílusainak felülírása CSS változókkal */
emoji-picker {
    width: 100% !important;
    height: 100% !important; /* JAVÍTÁS (V117): A magasságot 100%-ra kényszerítjük */
    box-sizing: border-box !important;

    background-color: #1a1a1a !important; 

    --emoji-picker-category-button-color: var(--color-silver) !important;
    --emoji-picker-category-button-color-active: var(--color-gold) !important;
    --emoji-picker-category-button-bg-active: rgba(229, 158, 0, 0.15) !important;
    --emoji-picker-header-bg: #222 !important; 
    --emoji-picker-bg: #1a1a1a !important; 
    --emoji-picker-search-bg: #333 !important; 
    --emoji-picker-search-border: #555 !important;
    --emoji-picker-search-color: var(--color-silver) !important;
    --emoji-picker-text-color: var(--color-silver) !important;
    --emoji-picker-emoji-size: 28px !important; 
    --emoji-picker-border-radius: 10px !important; 
    --emoji-picker-font-family: 'Rajdhani', sans-serif !important;
    --emoji-picker-box-shadow: none !important; 
    --emoji-picker-button-hover-bg: #2a2a2a !important; 
    --emoji-picker-search-focus-border: var(--color-gold) !important;
    --emoji-picker-search-focus-box-shadow: 0 0 5px rgba(229, 158, 0, 0.3) !important;
    --emoji-picker-scrollbar-thumb-color: var(--color-gold) !important; /* Ez a custom property még hasznos lehet, de felülírjuk lentebb */
    --emoji-picker-scrollbar-track-color: #333 !important; /* Ez a custom property még hasznos lehet, de felülírjuk lentebb */
    --emoji-picker-entry-img-size: 28px !important; 
    --emoji-picker-height: 100% !important; 
}

/* JAVÍTÁS (V118): Custom scrollbar stílusok a ::part(emoji-list) és ::part(category-list) elemekre (WebKit) */

/* Emoji lista görgetője */
emoji-picker::part(emoji-list) {
    height: 100% !important; /* Biztosítja, hogy az emoji lista kitöltse a rendelkezésre álló magasságot */
    overflow-y: scroll !important; /* Aktiválja a görgetést az emoji listán belül */
    overflow-x: hidden !important;
}

emoji-picker::part(emoji-list)::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

emoji-picker::part(emoji-list)::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05) !important;
    border-radius: 10px !important;
}

emoji-picker::part(emoji-list)::-webkit-scrollbar-thumb {
    background-color: var(--color-gold) !important;
    border-radius: 10px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}

emoji-picker::part(emoji-list)::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gold-hover) !important;
}

/* Kategória lista görgetője (ha sok kategória van) */
emoji-picker::part(category-list) {
    height: auto; /* A magasságot az automatikus tartalomhoz igazítja */
    overflow-y: auto !important; /* Görgetés, ha túl sok kategória van */
    overflow-x: hidden !important;
}

emoji-picker::part(category-list)::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

emoji-picker::part(category-list)::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03) !important;
    border-radius: 10px !important;
}

emoji-picker::part(category-list)::-webkit-scrollbar-thumb {
    background-color: var(--color-silver) !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background-clip: padding-box !important;
}

emoji-picker::part(category-list)::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-silver-hover) !important;
}


/* Globális reakció választó popup (üzenet buborék felett jelenik meg) */
.reaction-options-popup {
    display: none; /* Alapból rejtett, JS jeleníti meg */
    position: fixed;
    z-index: 99999; 
    
    bottom: unset; 
    left: unset;
    transform: unset;
    box-sizing: border-box !important;

    background: linear-gradient(135deg, rgba(0,0,0,0.95), rgba(0,0,0,0.8));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 25px; /* Kerekebb gombokhoz */
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    padding: 5px 10px;
    white-space: nowrap;
    user-select: none; /* Ne lehessen kijelölni az emotikonokat */
}

.reaction-options-popup .reaction-option {
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    margin: 0 2px;
    transition: transform 0.2s ease, background-color 0.2s ease;
    border-radius: 50%; /* Kör alakú gombok */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
}

.reaction-options-popup .reaction-option:hover {
    transform: translateY(-3px) scale(1.15); /* Kicsit feljebb ugrik és nagyobb lesz */
    background-color: rgba(255,255,255,0.1);
}
.reaction-options-popup .reaction-option:active {
    transform: translateY(0) scale(1);
}

/* Reakció "+"" gomb stílusa a popupban */
.reaction-options-popup .emoji-picker-trigger-option {
    background: rgba(229, 158, 0, 0.15);
    color: var(--color-gold);
    font-weight: 700;
    border: 1px solid var(--color-gold);
    border-radius: 50%;
    font-size: 1.5rem; /* Nagyobb "+" jel */
    line-height: 1;
    width: 40px;
    height: 40px;
}
.reaction-options-popup .emoji-picker-trigger-option:hover {
    background: var(--color-gold);
    color: var(--color-dark);
    transform: translateY(-3px) scale(1.15);
    box-shadow: 0 0 10px var(--color-gold);
}


/* Üzenet alatti reakció buborékok */
.message-reactions-container {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    padding-left: 5px; /* Kicsit beljebb, mint a buborék széle */
    position: relative; /* A reakció popupokhoz */
    /* Helyezkedjen el a buborékon belül */
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box !important;
}

.message-item.my-message .message-reactions-container,
.chat-popup-messages .msg-right .message-reactions-container {
    justify-content: flex-end; /* Saját üzenetnél jobbra igazítva */
    padding-right: 5px;
    padding-left: 0;
}


.reaction-count {
    display: inline-flex;
    align-items: center;
    background-color: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 15px;
    padding: 3px 8px;
    font-size: 0.8rem;
    color: var(--color-silver);
    gap: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    user-select: none; /* Ne lehessen kijelölni */
    box-sizing: border-box !important;
}

.reaction-count:hover {
    background-color: rgba(229, 158, 0, 0.2);
    border-color: var(--color-gold);
    color: var(--color-gold);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(229, 158, 0, 0.3);
}

.reaction-count.my-reaction {
    background-color: var(--color-gold); /* Kiemelés, ha én reagáltam */
    color: var(--color-dark);
    font-weight: 700;
    border-color: #ffdf80;
    box-shadow: 0 1px 5px rgba(229, 158, 0, 0.5);
}
.reaction-count.my-reaction:hover {
    filter: brightness(1.1);
}

/* Fő reakció gomb stílusa a beviteli mező mellett */
.reaction-main-toggle-btn {
    /* MÓDOSÍTÁS (V121): Megnövelt méret és pozíció */
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px; /* Kerekítés */
    padding: 12px 18px; /* Nagyobb padding */
    cursor: pointer;
    font-size: 1.4rem; /* Nagyobb emotikon mérete */
    transition: all 0.1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    color: var(--color-gold);
    box-sizing: border-box !important;
    margin-left: 10px; /* Eltávolodik a textarea-tól */
    position: relative; /* Animációhoz */
    z-index: 2; /* Az input felett legyen */
}
.reaction-main-toggle-btn:hover {
    background: rgba(229, 158, 0, 0.15);
    border-color: var(--color-gold);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 3px 10px rgba(229, 158, 0, 0.3);
}
.reaction-main-toggle-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* MÓDOSÍTÁS (V121): Pulzáló animáció a reakció gombhoz */
.reaction-main-toggle-btn.pulsate-once {
    animation: pulse-reaction 0.6s ease-out forwards;
}

@keyframes pulse-reaction {
    0% { transform: scale(1); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
    50% { transform: scale(1.1); box-shadow: 0 0 15px var(--color-gold-light); }
    100% { transform: scale(1); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
}

/* MÓDOSÍTÁS (V121): Küldés gomb elrejtése */
.chat-send-btn {
    display: none !important;
}

/* MÓDOSÍTÁS (V121): Popup chat fejléc legördülő menü stílusa */
.chat-popup-header .header-dropdown {
    background: rgba(18, 18, 18, 0.98); /* Sötét, áttetsző háttér */
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    padding: 10px 0;
    min-width: 150px; /* Minimális szélesség */
}

.chat-popup-header .header-dropdown a {
    color: var(--color-silver);
    padding: 8px 15px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-popup-header .header-dropdown a:hover {
    background-color: rgba(229, 158, 0, 0.15);
    color: var(--color-gold);
}


/* Reszponzív módosítások az emotikon és reakció stílusokhoz */
@media (max-width: 1024px) {
    .emoji-picker-modal {
        max-width: 320px;
        max-height: 220px; /* JAVÍTÁS (V117): Reszponzív magasság adaptálva */
        min-height: 140px; 
    }
}

@media (max-width: 768px) {
    .emoji-picker-modal {
        max-width: 90%;
        max-height: 40%; /* JAVÍTÁS (V117): Növelve reszponzív módban is */
        min-height: 130px; 
    }
}

@media (max-width: 480px) {
    .reaction-options-popup .reaction-option {
        font-size: 20px;
        width: 34px;
        height: 34px;
    }
    .reaction-options-popup .emoji-picker-trigger-option {
        font-size: 1.3rem;
        width: 36px;
        height: 36px;
    }
    .reaction-main-toggle-btn {
        font-size: 1.1rem; /* Kisebb emotikon */
    }
    .emoji-picker-modal {
        max-width: 95%;
        max-height: 35%; /* JAVÍTÁS (V117): Növelve reszponzív módban is */
        min-height: 100px; 
    }
}