/*
 * assets/css/messages.css
 *
 * DROPX PRIME SYSTEM - Üzenetküldő és Chat Stíluslap
 *
 * Ez a stíluslap definiálja a fő üzenetküldő oldal és a lebegő (popup) chat ablakok
 * vizuális megjelenítését.
 *
 * JAVÍTÁS (V48 - KÉPARÁNY-MEGŐRZÉS AZ ÜZENET GALÉRIÁBAN):
 * - `grid-image-item`: Módosítva, hogy a kép ne legyen kényszerítve négyzetes arányra.
 * - `grid-image-item img`: Beállítva `height: auto;` és `object-fit: contain;`,
 *   így az eredeti képarány megmarad, és a teljes kép látható az üzenet buborékban,
 *   ahelyett, hogy négyzetre vágná vagy kitöltené a konténert.
 *   (A sidebar média galéria továbbra is négyzetes thumbnail képeket jelenít meg,
 *    ami ott a kívánt viselkedés.)
 *
 * JAVÍTÁS (V49 - EGYEDI KÉPEK BUBORÉKMÉRETE):
 * - `message-attachments.single-image-attachment`: Új szabályok hozzáadva, hogy ha egy üzenet
 *   csak egyetlen képcsatolmányt tartalmaz, akkor annak maximális szélessége 50%-ra csökkenjen,
 *   így a szövegbuborék is kompaktabb lesz, és jobban illeszkedik egy "emoji"-szerű képküldéshez.
 *   A `justify-content: center` segít, hogy a képek ne húzódjanak szét.
 *   (Ez a V50-ben még specifikusabbá válik a Global Chat számára.)
 *
 * JAVÍTÁS (V50 - BUBORÉK SZÉLESSÉGÉNEK OPTIMALIZÁLÁSA):
 * - `.message-bubble` és `.chat-popup-messages .msg-bubble`: A `display` tulajdonság
 *   `block` helyett `inline-block` értékre változott.
 *   Ez lehetővé teszi, hogy az üzenetbuborék a tartalmához igazodva zsugorodjon,
 *   nem pedig mindig a `max-width` teljes szélességét vegye fel, így kompaktabb lesz,
 *   ha kevés vagy csak kép tartalom van benne.
 * - `.message-list .message-attachments.single-image-attachment`: Specifikus szabály hozzáadva
 *   a fő chat ablakban (Global Chat) található egyedi képcsatolmányok konténerének
 *   maximális szélességére. Ez csökkenti a buborék szélességét a képernyőfotón látott
 *   "túlságosan széles" problémára.
 * - A Popup Chat (`.chat-popup-messages .message-attachments.single-image-attachment`)
 *   `max-width` értéke explicit módon vissza lett állítva 50%-ra, hogy ne befolyásolja
 *   a Global Chat változása.
 *
 * JAVÍTÁS (V52 - GLOBAL CHAT EGYEDI KÉP BUBORÉK KILÓGÁS FIX):
 * - `.message-list .message-bubble`: A `max-width` értéke 70%-ról 50%-ra csökkentve,
 *   hogy az egyedi képekkel rendelkező buborékok ne legyenek túlságosan szélesek.
 *   Ez a szabály a Global Chat fő üzenetbuborékjára vonatkozik.
 * - `.message-list .message-attachments.single-image-attachment`: Eltávolítva a `max-width`
 *   szabály, mivel a buborék (`.message-bubble`) `max-width` szabálya már gondoskodik a megfelelő
 *   szélességről, és a `display: flex` miatt már nem volt szükség rá a belső kép méretezéséhez.
 *
 * JAVÍTÁS (V53 - POPUP CHAT EGYEDI KÉP BUBORÉK KILÓGÁS FIX):
 * - `.chat-popup-messages .message-attachments.single-image-attachment`: A `max-width` értéke
 *   100%-ról 70%-ra csökkentve, és a `justify-content: center` helyett `flex-start` értékre állítva,
 *   így az egyedi képpel rendelkező buborék nem lóg ki, és a kép a buborékon belül is
 *   a bal oldalra igazodik a feladó buborékjában, illetve a jobb oldalra a saját buborékunkban.
 *   Ezen kívül a `max-width` csökkentésével a buborék kompaktabbá válik.
 *
 * JAVÍTÁS (V54 - POPUP CHAT TÖBB KÉPES BUBORÉK KILÓGÁS FIX):
 * - `.chat-popup-messages .message-attachments.message-grid-gallery`: Explicit `max-width: 75%`
 *   érték hozzáadva, hogy a teljes képgaléria konténer ne feszítse szét a buborékot.
 * - `@media (min-width: 769px) .chat-popup-messages .message-attachments.message-grid-gallery`:
 *   A `grid-template-columns` `minmax` értéke `80px`-ről `70px`-re csökkentve,
 *   hogy a 3 oszlop a szűkebb `max-width` korláton belül is elférjen.
 *
 * JAVÍTÁS (V55 - POPUP CHAT TÖBB KÉPES BUBORÉK KILÓGÁS FIX - Centrázás és Overflow):
 * - `.chat-popup-messages .msg-bubble`: Hozzáadva `overflow: hidden;` tulajdonság,
 *   hogy a buborék határain kívül eső tartalom levágásra kerüljön.
 * - `.chat-popup-messages .message-attachments.message-grid-gallery`: Hozzáadva `margin: 0 auto;`
 *   tulajdonság, hogy a képgaléria konténer vízszintesen középre igazodjon a buborékon belül,
 *   így egyenletes margók alakuljanak ki.
 *
 * JAVÍTÁS (V56 - POPUP CHAT BUBORÉK DINAMIKUS SZÉLESSÉG ÉS KÉP OPTIMALIZÁLÁS):
 * - `.chat-popup-messages .msg-bubble`: A `max-width` értéke 85%-ról 100%-ra növelve.
 *   Ez lehetővé teszi, hogy a buborék a szülője által (ami 85%) meghatározott teljes rendelkezésre álló
 *   szélességet kihasználja, így elkerülve a dupla szűkítést.
 * - `.chat-popup-messages .message-attachments.message-grid-gallery`: Az explicit
 *   `max-width: 75%` szabály eltávolítva. A képgaléria most már a buborékon belüli
 *   dinamikusan rendelkezésre álló helyet használja fel, a grid belső logikája alapján.
 *
 * JAVÍTÁS (V57 - AKCIÓ GOMBOK POZÍCIÓJÁNAK FIXÁLÁSA ÉS SZÖVEG ÁRNYÉK):
 * - `.message-item` és `.chat-popup-messages .message-group`: `position: relative` hozzáadva.
 * - `.message-list .message-item .message-actions` és `.chat-popup-messages .message-group .message-actions`:
 *   A pozicionálási szabályok módosítva (`left: 50%; transform: translateX(-50%); top` értékek igazítása),
 *   hogy a gombok vízszintesen középre igazítva, a buborék fölött jelenjenek meg.
 * - `.message-reply-quote .reply-content-text`: Hozzáadva `text-shadow: 1px 1px 6px rgba(0,0,0,0.8);`
 *   a jobb olvashatóság érdekében.
 *
 * JAVÍTÁS (V60 - GLOBAL CHAT AKCIÓ GOMBOK POZÍCIÓJÁNAK VÉGLEGES FIXÁLÁSA):
 * - `#message-list .message-item .message-actions`: Eltávolítva a `left: 50%` és `transform: translateX(-50%)`,
 *   helyette a `top` érték -40px-re állítva, és a `white-space: nowrap` hozzáadva.
 *   A `right: 0px` (saját üzenet) és `left: 0px` (mások üzenete) beállításokkal a buborék széléhez igazodik.
 * - `.chat-popup-messages .message-group .message-actions`: Hasonlóan módosítva a popup chathoz,
 *   ahol a `top` -35px, a `white-space: nowrap` bevezetve, és a `right: 0px` / `left: 0px` használva.
 *
 * MÓDOSÍTÁS (V82 - REAKCIÓK ÉS IDŐ STÍLUSA, ELCSÚSZÁS FIX):
 * - Hozzáadva a `.message-time-and-reactions` és `.msg-time-and-reactions` stílusa. Ez a konténer
 *   csoportosítja az üzenet időbélyegét és a reakciókat, flexbox elrendezéssel.
 * - A `.message-reactions-container` stílusai finomítva, hogy a flexbox elrendezésbe illeszkedjenek.
 * - A `.message-time` és `.msg-time` elemek `flex-shrink: 0` tulajdonságot kaptak,
 *   hogy ne zsugorodjanak, ha sok reakció van.
 *
 * MÓDOSÍTÁS (V121 - FEJLÉC ÉS REAKCIÓ GOMB STÍLUSOK):
 * - A fejléc legördülő menü stílusai (`.chat-popup-header .header-dropdown`, `.chat-popup-header .header-dropdown a`)
 *   frissítve, hogy legyen hátterük és jobb olvashatóságuk.
 *
 * JAVÍTÁS (V124 - POPUP CHAT FEJLÉC MENÜ POZÍCIONÁLÁS FIX):
 * - `.chat-popup-header .header-main-trigger`: Hozzáadva `position: relative;` a menüpont gyermek
 *   legördülő menüjének (`.header-dropdown`) helyes pozícionálásához.
 */


/* ========================================= */
/* SCROLLBAR STÍLUS (globálisan alkalmazható) */
/* ========================================= */
.custom-scrollbar {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--color-gold) rgba(255,255,255,0.1); /* Firefox */
    overflow-x: hidden; /* Megakadályozza a vízszintes görgetősávot */
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color-gold);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gold-hover);
}


/* ========================================= */
/* Fő ÜZENETKÜLDŐ OLDAL ÉS ELRENDEZÉS */
/* ========================================= */
.message-app-layout {
    display: flex;
    height: 750px; /* Fix magasság desktopon */
    background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3)); /* Finomabb háttér */
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6); /* Enyhe árnyék */
}

/* Sidebar a beszélgetések listájának és média galériának */
.conversation-list-sidebar {
    width: 320px;
    max-width: 320px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.6));
    flex-shrink: 0;
}

.message-view-tabs {
    display: flex;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.message-view-tabs .tab-btn {
    flex: 1;
    padding: 15px;
    background: transparent;
    border: none;
    color: var(--color-silver);
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-shadow: 0 0 5px rgba(255,255,255,0.1);
}

.message-view-tabs .tab-btn.active {
    color: var(--color-gold);
    background: linear-gradient(90deg, rgba(229, 158, 0, 0.05), rgba(229, 158, 0, 0.15));
    box-shadow: inset 0 -3px 0 var(--color-gold), 0 0 10px rgba(229, 158, 0, 0.3);
    text-shadow: 0 0 8px var(--color-gold);
}
.message-view-tabs .tab-btn:hover:not(.active) {
    background: rgba(255,255,255,0.05);
    color: var(--color-white);
}

.sidebar-panel {
    display: none;
    flex-grow: 1;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-panel.active {
    display: flex;
}

/* Keresőmező és új üzenet gomb */
.search-and-new-message {
    display: flex;
    padding: 10px;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

#conversation-search {
    flex-grow: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--color-silver);
    font-family: 'JetBrains Mono', monospace;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    transition: all 0.2s ease;
}
#conversation-search:focus {
    border-color: var(--color-gold);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(229, 158, 0, 0.3);
    outline: none;
}

#start-new-message {
    padding: 8px 15px;
    background: linear-gradient(90deg, var(--color-gold), #ffdf80);
    color: var(--color-dark);
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    box-shadow: 0 2px 8px rgba(229, 158, 0, 0.3);
}
#start-new-message:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(229, 158, 0, 0.4);
    transform: translateY(-2px) scale(1.02);
}
#start-new-message:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Beszélgetés lista */
.conversation-list {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-silver);
    margin-bottom: 5px;
    transition: all 0.2s ease;
    position: relative;
    background: rgba(0,0,0,0.1);
    border: 1px solid transparent;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.conversation-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.conversation-item.active {
    background: linear-gradient(90deg, rgba(229, 158, 0, 0.1), rgba(229, 158, 0, 0.2));
    color: var(--color-gold);
    border-color: var(--color-gold);
    box-shadow: 0 2px 10px rgba(229, 158, 0, 0.2);
}

.conversation-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.conversation-item.active .conversation-avatar {
    border-color: var(--color-gold);
    box-shadow: 0 0 8px rgba(229, 158, 0, 0.4);
}

.conversation-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.conversation-title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}

.last-message {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.2;
}

.unread-dot {
    width: 10px;
    height: 10px;
    background-color: var(--color-red);
    border-radius: 50%;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 5px var(--color-red), 0 0 10px rgba(255,0,0,0.5);
    animation: pulse-red 1.5s infinite ease-out;
}
@keyframes pulse-red {
    0% { transform: translateY(-50%) scale(0.8); opacity: 0.7; }
    50% { transform: translateY(-50%) scale(1.1); opacity: 1; }
    100% { transform: translateY(-50%) scale(0.8); opacity: 0.7; }
}

.empty-list-message {
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding: 20px;
    font-family: 'Rajdhani', sans-serif;
}

/* Média galéria panel */
.media-panel-header {
    padding: 15px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    color: var(--color-silver);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    background: rgba(0,0,0,0.3);
    text-shadow: 0 0 5px rgba(255,255,255,0.1);
}

.media-grid {
    display: grid;
    /* JAVÍTÁS (V39): Explicit 4 oszlop desktopon a média galériához */
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
    flex-grow: 1;
}

.media-grid-item {
    aspect-ratio: 1/1;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.media-grid-item:hover {
    border-color: var(--color-gold);
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(229, 158, 0, 0.3);
}

.media-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-empty-info {
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding: 20px;
    grid-column: 1 / -1;
    font-family: 'Rajdhani', sans-serif;
}

.load-more-conv-btn {
    width: calc(100% - 20px);
    padding: 12px;
    margin: 10px auto;
    background: rgba(0,0,0,0.2);
    border: 1px dashed rgba(229, 158, 0, 0.3);
    color: var(--color-gold);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
.load-more-conv-btn:hover {
    background: rgba(229, 158, 0, 0.15);
    border-color: var(--color-gold);
    box-shadow: 0 3px 10px rgba(229, 158, 0, 0.3);
    transform: translateY(-2px);
}

/* ========================================= */
/* FŐ CHAT KONTEXTUS (JOBB OLDAL) */
/* ========================================= */
.message-main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2));
    width: 100%;
}

.conversation-header {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.3);
}

.conversation-current-title {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-gold);
    margin: 0;
    text-shadow: 0 0 5px rgba(229, 158, 0, 0.5);
}

.message-list {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* JAVÍTÁS (V57 - AKCIÓ GOMBOK POZÍCIÓJÁNAK FIXÁLÁSA): */
.message-item {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: transparent;
    position: relative; /* Pozícionálás alapja az akció gomboknak */
}

.message-item.my-message {
    justify-content: flex-end;
}

.message-item.other-message {
    justify-content: flex-start;
}

.message-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.message-item.my-message .message-avatar {
    order: 2;
}

/* JAVÍTÁS (V50): Üzenetbuborék alapvető megjelenítési módjának módosítása */
/* JAVÍTÁS (V52): A max-width 70%-ról 50%-ra csökkentve a Global Chaten a kompaktabb megjelenés érdekében. */
.message-list .message-bubble { /* SPECIFIKUSAN A GLOBAL CHAT BUBORÉK */
    max-width: 50%; /* JAVÍTÁS (V52): Csökkentve a max-width, hogy kisebb legyen a buborék képek esetén */
    padding: 10px 15px;
    border-radius: 20px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    background-size: 15px 15px;
    box-sizing: border-box;
    min-height: 30px;
    display: inline-block; /* display block helyett inline-block */
    background-color: rgba(0,0,0,0.3);
    vertical-align: bottom; /* Igazítás az aljához */
}

/* A Popup Chat buborékja maradjon a korábbi szabály szerint */
/* JAVÍTÁS (V56 - POPUP CHAT BUBORÉK DINAMIKUS SZÉLESSÉG): A max-width 85%-ról 100%-ra növelve. */
.chat-popup-messages .msg-bubble {
    max-width: 100%; 
    padding: 8px 12px;
    border-radius: 20px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    background-size: 15px 15px;
    box-sizing: border-box;
    min-height: 30px;
    display: inline-block;
    background-color: rgba(0,0,0,0.3);
    vertical-align: bottom;
    /* JAVÍTÁS (V55 - POPUP CHAT TÖBB KÉPES BUBORÉK KILÓGÁS FIX - Centrázás és Overflow): */
    overflow: hidden; /* Levágja a buborék határain kívül eső tartalmat */
}


.message-item.my-message .message-bubble {
    background: linear-gradient(135deg, #FFDF80, #E5A500);
    color: #222;
    border-radius: 20px;
    background-image:
        linear-gradient(45deg, rgba(0,0,0,0.15) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0.15)),
        linear-gradient(45deg, rgba(0,0,0,0.15) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0.15));
    background-position: 0 0, 7.5px 7.5px;
}

.message-item.other-message .message-bubble {
    background: linear-gradient(135deg, #5A5A5A, #444444);
    color: var(--color-silver);
    border-radius: 20px;
    background-image: none;
}

.message-content, .msg-text {
    color: inherit;
    text-shadow: 1px 1px 6px rgba(0,0,0,1);
    word-break: break-word;
    overflow-wrap: break-word;
    /* JAVÍTÁS (V42): Biztosítja, hogy a tartalom felvegye a buborék teljes szélességét */
    width: 100%;
    max-width: 100%;
}

/* MÓDOSÍTÁS (V82): Új konténer az időbélyegnek és reakcióknak */
.message-time-and-reactions, .msg-time-and-reactions {
    display: flex;
    align-items: center; /* Vertikálisan középre igazítja a reakciókat és időt */
    gap: 8px; /* Rés a két elem között */
    margin-top: 5px; /* A buborék tartalmától való távolság */
    justify-content: flex-end; /* Saját üzeneteknél alapértelmezetten jobbra igazítva */
    width: 100%; /* Kitölti a rendelkezésre álló szélességet a buborékon belül */
    flex-wrap: wrap; /* Engedélyezi a tördelést kisebb hely esetén */
}

/* Módosítás a mások üzeneteihez való igazításhoz */
.message-item.other-message .message-time-and-reactions,
.chat-popup-messages .msg-left .msg-time-and-reactions {
    justify-content: flex-start; /* Balra igazítás */
}

/* Az időbélyeg stílusa, flex konténerben */
.message-time, .msg-time {
    font-size: 0.75rem;
    color: rgba(0,0,0,0.6);
    display: block; /* Hagyjuk blocknak, de a flexbox kezeli az elrendezést */
    margin-top: 0; /* A szülő konténer már kezeli a margót */
    text-align: right; /* Alapértelmezettem jobbra igazítva */
    font-family: 'JetBrains Mono', monospace;
    text-shadow: 1px 1px 6px rgba(0,0,0,1);
    flex-shrink: 0; /* Ne zsugorodjon össze */
}
.message-item.other-message .message-time,
.chat-popup-messages .msg-left .msg-time {
    color: rgba(255,255,255,0.4);
    text-align: left; /* Balra igazítva mások üzeneteinél */
}

/* Üzenetküldő beviteli terület */
.message-input-area {
    padding: 15px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.4));
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-with-tools {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

#message-content-input,
#new-message-content-input {
    flex-grow: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 10px 15px;
    color: var(--color-silver);
    font-size: 1rem;
    resize: none;
    min-height: 40px;
    max-height: 150px;
    overflow-y: auto;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    transition: all 0.2s ease;
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}
#message-content-input:focus,
#new-message-content-input:focus {
    border-color: var(--color-gold);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(229, 158, 0, 0.3);
    outline: none;
}

.btn-send-message {
    background: linear-gradient(90deg, var(--color-gold), #ffdf80);
    color: var(--color-dark);
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(229, 158, 0, 0.3);
}
.btn-send-message:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(229, 158, 0, 0.4);
    transform: translateY(-2px) scale(1.02);
}
.btn-send-message:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.chat-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: var(--color-silver);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.chat-tool-btn:hover {
    background: rgba(229, 158, 0, 0.15);
    color: var(--color-gold);
    border-color: var(--color-gold);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 3px 10px rgba(229, 158, 0, 0.3);
}
.chat-tool-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.chat-tool-btn svg {
    width: 26px;
    height: 26px;
    color: var(--color-gold);
}

.no-conversation-selected {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
}
.no-conversation-selected h2 {
    color: var(--color-silver);
    margin-top: 20px;
    text-shadow: 0 0 5px rgba(255,255,255,0.2);
}

/* Új beszélgetés kezdése terület */
.new-conversation-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
}
.target-user-info-new-message {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,0.08);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.target-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.new-conversation-area h3 {
    margin: 0;
    color: var(--color-gold);
    font-family: 'Chakra Petch', sans-serif;
    text-shadow: 0 0 5px rgba(229, 158, 0, 0.5);
}

/* Rich Link és Média Előnézetek */
.rich-link-card {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}
.rich-link-card:hover {
    border-color: var(--color-gold);
    box-shadow: 0 2px 8px rgba(229, 158, 0, 0.3);
}
.rich-link-anchor {
    color: var(--color-gold);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
}
.rich-link-anchor:hover {
    text-decoration: underline;
}
.rich-link-icon svg {
    width: 14px;
    height: 14px;
    color: var(--color-silver);
}
.rich-link-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rich-media-wrapper {
    margin-top: 8px;
    display: block;
    max-width: 100%;
}

.rich-image-card img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    object-fit: cover;
    cursor: zoom-in;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: all 0.2s ease;
}
.rich-image-card img:hover {
    border-color: var(--color-gold);
    box-shadow: 0 4px 12px rgba(229, 158, 0, 0.4);
    transform: scale(1.01);
}

.youtube-card {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    transition: all 0.2s ease;
}
.youtube-card:hover {
    border-color: var(--color-gold);
    box-shadow: 0 4px 15px rgba(229, 158, 0, 0.4);
    transform: translateY(-2px);
}
.youtube-card .rich-preview-thumb {
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 arány */
    position: relative;
    background-size: cover;
    background-position: center;
}
.youtube-card .rich-preview-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,0,0,0.8);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(255,0,0,0.5);
}
.youtube-card .rich-preview-play-btn:hover {
    background: #ff0000;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 20px rgba(255,0,0,0.7);
}
.youtube-card .rich-preview-play-btn svg {
    color: #fff;
}
.youtube-card .rich-preview-body {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.5);
}
.youtube-card .rich-preview-site-name {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    font-family: 'JetBrains Mono', monospace;
}
.youtube-card .rich-preview-action {
    color: var(--color-gold);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    font-family: 'Rajdhani', sans-serif;
}
.youtube-card .rich-preview-action:hover {
    text-decoration: underline;
    color: #ffdf80;
}

/* Csattolmány fájlok stílusa */
.msg-file {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 5px 10px;
    margin-top: 5px;
    color: var(--color-silver);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
.msg-file:hover {
    background: rgba(255,255,255,0.1);
    color: var(--color-gold);
    border-color: var(--color-gold);
    transform: translateX(2px);
}
.msg-file svg {
    width: 26px;
    height: 26px;
    color: var(--color-gold);
}

/* Üzenet képgaléria (explicit oszlopszám és arányos méret) */
/* Alapértelmezett a fő chaten, ahol a buborék szélesebb lehet */
.message-attachments.message-grid-gallery {
    display: grid;
    /* JAVÍTÁS (V48): Alapértelmezett 2 oszlop, 80px minimális mérettel, hogy ne legyen túl nagy. */
    grid-template-columns: repeat(2, minmax(80px, 1fr));
    gap: 5px;
    margin-top: 8px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Fő chat üzenet galéria tableten és nagyobbon (769px felett) */
@media (min-width: 769px) {
    .message-list .message-attachments.message-grid-gallery {
        /* JAVÍTÁS (V48): Fő chaten 4 oszlop, 70px minimális mérettel. */
        grid-template-columns: repeat(4, minmax(70px, 1fr)); /* 4 oszlop desktop fő chaten */
        gap: 8px;
    }
}

/* JAVÍTÁS (V54 - POPUP CHAT TÖBB KÉPES BUBORÉK KILÓGÁS FIX): */
/* JAVÍTÁS (V56 - POPUP CHAT BUBORÉK DINAMIKUS SZÉLESSÉG ÉS KÉP OPTIMALIZÁLÁS): */
.chat-popup-messages .message-attachments.message-grid-gallery {
    /* max-width: 75%; -- Eltávolítva a dinamikus szélesség érdekében */
    /* JAVÍTÁS (V55 - POPUP CHAT TÖBB KÉPES BUBORÉK KILÓGÁS FIX - Centrázás és Overflow): */
    margin: 0 auto; /* Középre igazítja a galériát a buborékon belül */
}

/* JAVÍTÁS (V48): Popup chat üzenet galéria - mindig 3 oszlop (768px felett) */
/* Mivel a popup chat szélessége fix (380px), és a buborék max 85%,
   ezért 3 oszlop a popupban a cél. Ezt külön beállítjuk. */
@media (min-width: 769px) { /* Csak desktop/tablet nézetben releváns a popup. */
    .chat-popup-messages .message-attachments.message-grid-gallery {
        /* JAVÍTÁS (V54): 3 oszlop a popupban, 70px minimális mérettel, hogy elférjen. */
        grid-template-columns: repeat(3, minmax(70px, 1fr)); /* 3 oszlop a popupban */
        gap: 5px;
    }
}


/* JAVÍTÁS (V48): .grid-image-item és .grid-image-item img stílusok frissítése a képarány megőrzéséhez */
.grid-image-item {
    width: 100%;
    /* padding-bottom: 100%;  Eltávolítva a négyzetes arány kényszerítéséhez */
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    cursor: zoom-in;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    display: block; /* Fontos, hogy a kép diktálhassa a magasságot */
}
.grid-image-item:hover {
    border-color: var(--color-gold);
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(229, 158, 0, 0.3);
}
.grid-image-item img {
    /* position: absolute; top: 0; left: 0; */ /* Eltávolítva, ha a `display: block` van */
    width: 100%;
    height: auto; /* Képarány megőrzése */
    display: block; /* Biztosítja, hogy ne legyen inline */
    object-fit: contain; /* Az egész kép látható legyen a kereten belül, ha az arányok eltérnek */
}

/* JAVÍTÁS (V49): Stílus egyetlen kép csatolmányhoz, kompaktabb buborékért */
.message-attachments.single-image-attachment {
    display: flex; /* Flexbox-ként kezeljük, hogy a tartalom kompakt maradjon */
    justify-content: flex-start; /* Képek balra igazítása */
    flex-wrap: nowrap; /* Nincs sortörés, ha csak egy kép van */
    /* A max-width itt általános, a specifikusabb szabályok felülírják majd. */
    max-width: 100%; /* Marad 100%, a buborék max-width szabálya fogja korlátozni */
    grid-template-columns: minmax(0, auto);
}

/* JAVÍTÁS (V50): Specifikus szabály a GLOBAL CHAT-en belüli egyedi kép csatolmányokhoz */
/* JAVÍTÁS (V52): A .message-attachments.single-image-attachment szabályt a .message-bubble kezeli
   így itt nincs rá szükség, mivel az már inline-block és a max-width-je korlátozza. */
.message-list .message-attachments.single-image-attachment {
    /* max-width: 250px; -- Eltávolítva, most már a message-bubble max-width-je lesz a mérvadó */
    /* A flex tulajdonságok a fenti .message-attachments.single-image-attachment-ből öröklődnek. */
}

/* JAVÍTÁS (V53 - POPUP CHAT EGYEDI KÉP BUBORÉK KILÓGÁS FIX): */
.chat-popup-messages .message-attachments.single-image-attachment {
    max-width: 70%; /* A Popup Chat-ben csökkentjük a max szélességet az eddigi 100%-ról */
    justify-content: flex-start; /* A képek balra igazítása az üzenet buborékon belül */
}


/* ========================================= */
/* POPUP CHAT ÁLTALÁNOS STÍLUSOK */
/* ========================================= */
.chat-popup-wrapper {
    position: fixed;
    bottom: 0;
    right: 20px;
    /* JAVÍTÁS (V46): Alapértelmezett display: flex, hogy JS nélkül is látható legyen desktopon. */
    display: flex;
    flex-direction: row-reverse;
    gap: 15px;
    z-index: 9999;
}

.chat-popup {
    width: 350px;
    height: 460px;
    background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(0,0,0,0.8));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 8px 30px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    transform-origin: bottom right;
}

.chat-popup.minimized {
    display: none;
}

.chat-popup.minimized .chat-popup-messages,
.chat-popup.minimized .image-preview-container,
.chat-popup.minimized .chat-popup-form {
    display: none;
}

/* Popup fejléc */
.chat-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(90deg, var(--color-dark), rgba(0,0,0,0.6));
    border-bottom: 1px solid rgba(255,255,255,0.18);
    color: var(--color-gold);
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    text-shadow: 0 0 7px rgba(229, 158, 0, 0.6);
}

.chat-popup-header .header-main-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    /* JAVÍTÁS (V124): Hozzáadva position: relative a header-dropdown helyes pozícionálásához. */
    position: relative; 
    cursor: pointer;
    flex-grow: 1;
}

.chat-popup-header .header-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-gold);
    box-shadow: 0 0 8px rgba(229, 158, 0, 0.4);
}

.chat-popup-header .header-name {
    font-size: 1.05rem;
    color: var(--color-gold);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-popup-header .header-name svg {
    transition: transform 0.2s ease;
}
.chat-popup-header .header-main-trigger.open .header-name svg {
    transform: rotate(180deg);
}


/* Popup header dropdown menü */
.chat-popup-header .header-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    /* MÓDOSÍTÁS (V121): Háttér és stílusok a jobb olvashatóságért */
    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 */
    display: none;
    z-index: 1000;
    flex-direction: column;
    font-family: 'Rajdhani', sans-serif;
}

.chat-popup-header .header-main-trigger.open .header-dropdown {
    display: flex;
}

.chat-popup-header .header-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    /* MÓDOSÍTÁS (V121): Padding és szín */
    padding: 8px 15px;
    color: var(--color-silver);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.chat-popup-header .header-dropdown a:hover {
    /* MÓDOSÍTÁS (V121): Hover stílus */
    background: rgba(229, 158, 0, 0.2);
    color: var(--color-gold);
    transform: translateX(5px);
}

.chat-popup-header .header-dropdown a svg {
    width: 16px;
    height: 16px;
    color: var(--color-silver);
}
.chat-popup-header .header-dropdown a:hover svg {
    color: var(--color-gold);
}


.chat-popup-header .header-actions {
    display: flex;
    gap: 5px;
}

.chat-popup-header .chat-act-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    color: var(--color-silver);
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
.chat-popup-header .chat-act-btn:hover {
    background: rgba(229, 158, 0, 0.2);
    color: var(--color-gold);
    border-color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(229, 158, 0, 0.3);
}
.chat-popup-header .chat-act-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.chat-popup-header .chat-act-btn svg {
    width: 18px;
    height: 18px;
}


.chat-popup-messages {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Popup chat üzenetek stílusa */
/* JAVÍTÁS (V57 - AKCIÓ GOMBOK POZÍCIÓJÁNAK FIXÁLÁSA): */
.chat-popup-messages .message-group {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    position: relative; /* Pozícionálás alapja az akció gomboknak */
    background: transparent;
}

.chat-popup-messages .msg-left {
    justify-content: flex-start;
}

.chat-popup-messages .msg-right {
    justify-content: flex-end;
}

.chat-popup-messages .msg-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.chat-popup-messages .msg-bubble-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}

.chat-popup-messages .msg-author {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    font-family: 'Rajdhani', sans-serif;
    text-shadow: 1px 1px 6px rgba(0,0,0,1);
}

.chat-popup-messages .msg-right .msg-author {
    text-align: right;
}

.chat-popup-messages .msg-left .msg-author {
    text-align: left;
}

/* JAVÍTÁS (V50): Popup üzenetbuborék alapvető megjelenítési módjának módosítása */
/* JAVÍTÁS (V56 - POPUP CHAT BUBORÉK DINAMIKUS SZÉLESSÉG): A max-width 85%-ról 100%-ra növelve. */
.chat-popup-messages .msg-bubble {
    max-width: 100%; 
    padding: 8px 12px;
    border-radius: 20px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    background-size: 15px 15px;
    box-sizing: border-box;
    min-height: 30px;
    display: inline-block;
    background-color: rgba(0,0,0,0.3);
    vertical-align: bottom;
    /* JAVÍTÁS (V55 - POPUP CHAT TÖBB KÉPES BUBORÉK KILÓGÁS FIX - Centrázás és Overflow): */
    overflow: hidden; /* Levágja a buborék határain kívül eső tartalmat */
}

.chat-popup-messages .msg-right .msg-bubble {
    background: linear-gradient(135deg, #FFDF80, #E5A500);
    color: #222;
    border-radius: 20px;
    background-image:
        linear-gradient(45deg, rgba(0,0,0,0.15) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0.15)),
        linear-gradient(45deg, rgba(0,0,0,0.15) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0.15));
    background-position: 0 0, 7.5px 7.5px;
}

.chat-popup-messages .msg-left .msg-bubble {
    background: linear-gradient(135deg, #5A5A5A, #444444);
    color: var(--color-silver);
    border-radius: 20px;
    background-image: none;
}

.chat-popup-messages .msg-text {
    color: inherit;
    font-size: 0.9rem;
    text-shadow: 1px 1px 6px rgba(0,0,0,1);
    /* JAVÍTÁS (V42): Biztosítja, hogy a tartalom felvegye a buborék teljes szélességét */
    width: 100%;
    max-width: 100%;
}

/* MÓDOSÍTÁS (V82): Új konténer az időbélyegnek és reakcióknak */
.chat-popup-messages .msg-time-and-reactions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    justify-content: flex-end; /* Saját üzeneteknél jobbra igazítva */
    width: 100%;
    flex-wrap: wrap; /* Engedélyezi a tördelést */
}

/* Módosítás a mások üzeneteihez való igazításhoz */
.chat-popup-messages .msg-left .msg-time-and-reactions {
    justify-content: flex-start; /* Balra igazítás */
}

/* Az időbélyeg stílusa, flex konténerben */
.chat-popup-messages .msg-time {
    font-size: 0.7rem;
    color: rgba(0,0,0,0.6);
    display: block;
    margin-top: 0; /* A szülő konténer már kezeli a margót */
    text-align: right;
    line-height: 1;
    font-family: 'JetBrains Mono', monospace;
    text-shadow: 1px 1px 6px rgba(0,0,0,1);
    flex-shrink: 0; /* Ne zsugorodjon össze */
}
.chat-popup-messages .msg-left .msg-time {
    color: rgba(255,255,255,0.4);
    text-align: left;
}


/* Popup chat üzenetküldő forma */
.chat-popup-form {
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.15);
    background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-with-tools {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.chat-popup-form textarea {
    min-height: 35px;
    max-height: 80px;
    padding: 8px 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}
.chat-popup-form textarea:focus {
    border-color: var(--color-gold);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(229, 158, 0, 0.3);
    outline: none;
}

.chat-popup-form .chat-send-btn {
    padding: 8px 15px;
    font-size: 0.9rem;
    box-shadow: 0 1px 5px rgba(229, 158, 0, 0.3);
}
.chat-popup-form .chat-send-btn:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 3px 8px rgba(229, 158, 0, 0.4);
}
.chat-popup-form .chat-send-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.chat-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.chat-tool-btn:hover {
    background: rgba(229, 158, 0, 0.15);
    color: var(--color-gold);
    border-color: var(--color-gold);
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 3px 8px rgba(229, 158, 0, 0.3);
}
.chat-tool-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}


/* ========================================= */
/* ÜZENET AKCIÓK */
/* ========================================= */

/* Fő chat akciók - csak hoverre látszanak, vízszintesen */
/* JAVÍTÁS (V57 - AKCIÓ GOMBOK POZÍCIÓJÁNAK FIXÁLÁSA): */
/* JAVÍTÁS (V60 - GLOBAL CHAT AKCIÓ GOMBOK POZÍCIÓJÁNAK VÉGLEGES FIXÁLÁSA): */
#message-list .message-item .message-actions {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    display: flex;
    flex-direction: row;
    gap: 5px;
    position: absolute;
    top: -40px; /* Pozíció a buborék fölött */
    white-space: nowrap; /* Megakadályozza a sortörést */
    z-index: 100; /* Magasabb z-index a láthatóságért */
    background: rgba(0,0,0,0.6);
    border-radius: 6px;
    padding: 2px 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    pointer-events: none;
}
/* JAVÍTÁS (V60): Saját üzenetekhez igazítás */
#message-list .message-item.my-message .message-actions {
    right: 0px; /* A jobbra igazított buborék jobb széléhez igazodik */
    left: auto; /* Alapértelmezett értéken hagyjuk */
    transform: none; /* Centírozás kikapcsolva */
}
/* JAVÍTÁS (V60): Mások üzeneteihez igazítás */
#message-list .message-item.other-message .message-actions {
    left: 0px; /* A balra igazított buborék bal széléhez igazodik */
    right: auto; /* Alapértelmezett értéken hagyjuk */
    transform: none; /* Centírozás kikapcsolva */
}

#message-list .message-item:hover .message-actions {
    opacity: 1;
    pointer-events: auto;
}


/* Popup chat akcióikonok - csak hoverre látszanak, VÍZSZINTESEN */
/* Az `.message-group` hover eseményére reagálva aktiválódik az ikonok láthatósága és kattinthatósága. */
/* JAVÍTÁS (V57 - AKCIÓ GOMBOK POZÍCIÓJÁNAK FIXÁLÁSA): */
/* JAVÍTÁS (V60 - POPUP CHAT AKCIÓ GOMBOK POZÍCIÓJÁNAK VÉGLEGES FIXÁLÁSA): */
.chat-popup-messages .message-group .message-actions {
    position: absolute;
    top: -35px; /* Buborék fölött helyezkedik el a popupban */
    white-space: nowrap; /* Megakadályozza a sortörést */
    opacity: 0;
    display: flex;
    flex-direction: row;
    gap: 5px;
    background: rgba(0,0,0,0.7);
    border-radius: 6px;
    padding: 2px 4px;
    z-index: 100; /* Magasabb z-index a láthatóságért */
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}
/* Aktiválódás az üzenetcsoport (message-group) hoverjére */
.chat-popup-messages .message-group:hover .message-actions {
    opacity: 1;
    pointer-events: auto;
}

/* JAVÍTÁS (V60): Saját üzenetekhez igazítás a popupban */
.chat-popup-messages .message-group.msg-right .message-actions {
    right: 0px; /* A jobbra igazított buborék jobb széléhez igazodik */
    left: auto; /* Alapértelmezett értéken hagyjuk */
    transform: none; /* Centírozás kikapcsolva */
}
/* JAVÍTÁS (V60): Mások üzeneteihez igazítás a popupban */
.chat-popup-messages .message-group.msg-left .message-actions {
    left: 0px; /* A balra igazított buborék bal széléhez igazodik */
    right: auto; /* Alapértelmezett értéken hagyjuk */
    transform: none; /* Centírozás kikapcsolva */
}


/* Az akció gombok stílusa */
.message-actions .chat-action-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    width: 36px;
    height: 36px;
    color: var(--color-silver);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.message-actions .chat-action-btn:hover {
    background: rgba(229, 158, 0, 0.2);
    color: var(--color-gold);
    border-color: var(--color-gold);
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(229, 158, 0, 0.3);
}
.message-actions .chat-action-btn:active {
    transform: scale(1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.message-actions svg {
    width: 26px;
    height: 26px;
    stroke-width: 2.5;
}

/* A buborékok relatív pozícionálása az akció gombok miatt */
/* Ezek a szabályok már redundánsak, ha a .message-item/.message-group kapja a position: relative-t. */
/* .message-list .message-bubble,
.chat-popup-messages .msg-bubble {
    position: relative;
    box-sizing: border-box;
} */

/* Válasz kontextus jelző a beviteli mező felett */
.reply-context-indicator {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(229, 158, 0, 0.1), rgba(229, 158, 0, 0.2));
    border: 1px solid rgba(229, 158, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 5px;
    color: var(--color-silver);
    font-size: 0.9rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.reply-context-indicator .reply-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.reply-context-indicator .reply-to-user {
    font-weight: 700;
    color: var(--color-gold);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
    font-family: 'Rajdhani', sans-serif;
}
.reply-context-indicator .reply-content-text {
    font-style: italic;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    font-family: 'JetBrains Mono', monospace;
    max-height: 4.2em;
    line-height: 1.4em;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.8); /* Erős árnyék az olvashatóságért */
}


/* Válasz quote az üzenet buborékban */
.message-reply-quote {
    background: rgba(255,255,255,0.1);
    border-left: 3px solid var(--color-gold);
    padding: 5px 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: 'Rajdhani', sans-serif;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}
.message-reply-quote .reply-author {
    font-weight: 700;
    color: var(--color-gold);
    display: block;
}
/* JAVÍTÁS (V57 - SZÖVEG ÁRNYÉK HOZZÁADÁSA): */
.message-reply-quote .reply-content-text {
    color: rgba(255,255,255,0.7);
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    font-family: 'JetBrains Mono', monospace;
    max-height: 4.2em;
    line-height: 1.4em;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.8); /* Erős árnyék az olvashatóságért */
}


/* Fájl/kép előnézet a beviteli mező felett */
.image-preview-container, .file-preview-area {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 8px;
    background: rgba(0,0,0,0.3);
    margin-bottom: 5px;
    overflow-x: auto;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.image-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
.image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.image-preview-item .file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    color: var(--color-silver);
    font-size: 48px;
}
.image-preview-item .file-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: var(--color-white);
    font-size: 0.7rem;
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'JetBrains Mono', monospace;
}
.image-preview-item .remove-image-preview {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(255,0,0,0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 1px 5px rgba(255,0,0,0.5);
    transition: all 0.2s ease;
}
.image-preview-item .remove-image-preview:hover {
    background: #ff0000;
    transform: scale(1.1);
}

.dropdown-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--color-gold);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================= */
/* RESZPONZÍV DESIGN JAVÍTÁSOK */
/* ========================================= */

/* Kisebb asztali gépek / nagy tabletek (pl. 1024px) */
@media (max-width: 1024px) {
    .message-app-layout {
        height: 700px;
    }

    .conversation-list-sidebar {
        width: 280px;
        min-width: 250px;
    }

    /* JAVÍTÁS (V39): Média galéria oszlopainak igazítása kisebb képernyőn - 3 oszlop */
    .media-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .chat-popup-wrapper {
        right: 10px;
        gap: 10px;
    }
    .chat-popup {
        width: 350px;
        height: 500px;
    }
    .chat-popup.minimized {
        width: 220px;
    }
}

/* Tabletek és felette (768px - 1023px) */
@media (max-width: 768px) {
    .message-app-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 100px);
        border-radius: 0;
        box-shadow: none;
    }

    .conversation-list-sidebar {
        width: 100%;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .conversation-list-sidebar .sidebar-panel {
        height: 350px;
        flex-shrink: 0;
    }

    .message-main-content {
        width: 100%;
        min-height: 400px;
    }

    .message-item .message-bubble,
    .chat-popup-messages .msg-bubble {
        max-width: 85%;
    }

    /* JAVÍTÁS (V39): Média galéria oszlopainak igazítása mobilon - 2 oszlop */
    .media-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Popup chat ablakok mobil nézetben */
    .chat-popup-wrapper {
        /* JAVÍTÁS (V43): Popup chat letiltása mobil nézetben, így a wrapper is inaktív. */
        display: none;
    }

    .chat-popup {
        /* Ezek a szabályok csak akkor lennének érvényesek, ha a chat-popup-wrapper display: flex lenne.
           Mivel most display: none, ezek nem relevánsak. */
        width: calc(100% - 20px);
        height: calc(100vh - 60px);
        max-height: 550px;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 4px 20px rgba(0,0,0,0.7);
        position: relative;
        margin-bottom: 10px;
    }
    .chat-popup:last-of-type {
        z-index: 100;
    }

    .chat-popup.minimized {
        width: 100%;
        max-width: 200px;
        height: 40px;
        border-radius: 8px;
        margin-bottom: 0;
    }
    .chat-popup.minimized .chat-popup-header {
        padding: 8px 10px;
    }
    .chat-popup.minimized .header-avatar {
        width: 30px;
        height: 30px;
    }
    .chat-popup.minimized .header-name {
        font-size: 0.9rem;
    }
}

/* Nagyon kicsi képernyők (pl. 480px) */
@media (max-width: 480px) {
    .message-view-tabs .tab-btn {
        padding: 12px;
        font-size: 0.9rem;
    }

    .search-and-new-message {
        flex-wrap: wrap;
    }
    #conversation-search {
        width: calc(100% - 50px);
    }
    #start-new-message {
        width: 40px;
        height: 40px;
        padding: 0;
        display: flex;
    }

    .message-list {
        padding: 10px;
        gap: 10px;
    }

    .message-item .message-bubble,
    .chat-popup-messages .msg-bubble {
        max-width: 90%;
        padding: 8px 12px;
    }
    .message-avatar, .msg-avatar {
        width: 40px;
        height: 40px;
    }

    /* JAVÍTÁS (V39): Média galéria oszlopainak igazítása nagyon kicsi képernyőn - 2 oszlop */
    .media-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .message-input-area, .chat-popup-form {
        padding: 10px;
        gap: 5px;
    }
    .chat-tool-btn, .btn-send-message {
        width: 35px;
        height: 35px;
        padding: 0;
        font-size: 0.8rem;
    }
    textarea {
        font-size: 0.9rem;
    }

    .chat-popup {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .chat-popup.minimized {
        width: 100%;
        max-width: none;
    }
}

/* ========================================================================
   DROPX MOBILE APP — ÉRTESÍTÉSEK
   ======================================================================== */
.notification-page-shell {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 28px 20px 110px;
    box-sizing: border-box;
}

.notification-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.notification-page-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--color-gold, #95661c);
    font: 700 .62rem var(--theme-font-mono, monospace);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.notification-page-header h1 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

.notification-page-header p {
    margin: 7px 0 0;
    color: var(--theme-text-muted, #6b5b4b);
}

.notification-page-settings,
.notification-page-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--theme-line, rgba(149,102,28,.25));
    background: var(--theme-surface, #eee3d3);
    color: var(--theme-text, #302820);
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
}

.notification-page-settings {
    min-height: 38px;
    padding: 0 13px;
}

.notification-page-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notification-page-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--theme-line, rgba(149,102,28,.20));
    border-radius: 15px;
    background: var(--theme-surface, #eee3d3);
    box-shadow: 0 8px 22px rgba(0,0,0,.07);
}

.notification-page-item.is-unread {
    border-color: color-mix(in srgb, var(--theme-gold, #95661c) 45%, var(--theme-line, rgba(149,102,28,.20)));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-gold, #95661c) 8%, transparent);
}

.notification-page-item-main {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
}

.notification-page-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-gold, #95661c) 10%, transparent);
    color: var(--theme-gold, #95661c);
}

.notification-page-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notification-page-copy {
    min-width: 0;
}

.notification-page-copy strong {
    display: block;
    color: var(--theme-text-strong, #302820);
    font-size: .82rem;
    line-height: 1.35;
}

.notification-page-copy small {
    display: block;
    margin-top: 4px;
    color: var(--theme-text-muted, #6b5b4b);
    font-size: .65rem;
}

.notification-page-delete {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.notification-page-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    gap: 8px;
    padding: 28px;
    border: 1px dashed var(--theme-line, rgba(149,102,28,.28));
    border-radius: 18px;
    text-align: center;
    color: var(--theme-text-muted, #6b5b4b);
    background: color-mix(in srgb, var(--theme-surface, #eee3d3) 75%, transparent);
}

.notification-page-empty svg { color: var(--theme-gold, #95661c); }
.notification-page-empty strong { color: var(--theme-text-strong, #302820); }

@media (max-width: 700px) {
    .notification-page-shell {
        width: 100%;
        margin: 0;
        padding: 14px 12px calc(var(--app-nav-height-mobile, 64px) + 16px);
    }

    .notification-page-header {
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .notification-page-header h1 {
        font-size: 1.05rem;
    }

    .notification-page-header p,
    .notification-page-settings span {
        display: none;
    }

    .notification-page-settings {
        width: 38px;
        height: 38px;
        padding: 0;
        flex: 0 0 38px;
    }

    .notification-page-item {
        border-radius: 13px;
        padding: 8px;
    }

    .notification-page-item-main {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 8px;
    }

    .notification-page-icon {
        width: 38px;
        height: 38px;
    }

    .notification-page-copy strong {
        font-size: .76rem;
    }
}

/* DROPX NOTIFICATIONS — mobil olvashatóság és letisztult sorok */
@media (max-width: 700px) {
    body.theme-dark .notification-page-shell,
    body.dark-mode .notification-page-shell {
        color: #f1f3f5;
    }

    body.theme-dark .notification-page-header h1,
    body.dark-mode .notification-page-header h1 {
        color: #f5f6f7;
    }

    body.theme-dark .notification-page-header p,
    body.dark-mode .notification-page-header p {
        color: #aeb5bf;
    }

    .notification-page-list {
        gap: 0;
        border-top: 1px solid rgba(180, 188, 199, .18);
    }

    .notification-page-item,
    body.theme-dark .notification-page-item,
    body.dark-mode .notification-page-item {
        position: relative;
        align-items: center;
        gap: 11px;
        padding: 13px 2px;
        border: 0;
        border-bottom: 1px solid rgba(180, 188, 199, .18);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .notification-page-item.is-unread,
    body.theme-dark .notification-page-item.is-unread,
    body.dark-mode .notification-page-item.is-unread {
        background: linear-gradient(90deg, rgba(218, 169, 45, .075), transparent 92%);
        box-shadow: none;
    }

    .notification-page-item-main {
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        min-width: 0;
    }

    .notification-page-icon {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        margin-top: 1px;
        border: 1px solid rgba(218, 169, 45, .18);
        background: rgba(218, 169, 45, .09);
        color: #e3b52e;
    }

    .notification-page-copy {
        min-width: 0;
        padding: 1px 0 0;
    }

    .notification-page-copy strong,
    body.theme-dark .notification-page-copy strong,
    body.dark-mode .notification-page-copy strong {
        display: block;
        color: #edf0f3;
        font-size: .84rem;
        font-weight: 500;
        line-height: 1.5;
        overflow-wrap: anywhere;
        word-break: normal;
        text-wrap: pretty;
    }

    .notification-page-copy small,
    body.theme-dark .notification-page-copy small,
    body.dark-mode .notification-page-copy small {
        margin-top: 6px;
        color: #a3abb5;
        font-size: .7rem;
        line-height: 1.35;
    }

    .notification-page-settings {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        flex: 0 0 40px;
        border: 1px solid rgba(180, 188, 199, .22);
        border-radius: 12px;
        background: rgba(255, 255, 255, .025);
        color: #d9dee5;
    }

    .notification-page-settings svg {
        width: 18px;
        height: 18px;
    }

    .notification-page-delete {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        align-self: center;
        border: 1px solid rgba(180, 188, 199, .22);
        border-radius: 11px;
        background: transparent;
        color: #d6dbe2;
        transition: color .18s ease, border-color .18s ease, background .18s ease;
    }

    .notification-page-delete svg {
        width: 17px;
        height: 17px;
        stroke-width: 1.8;
    }

    .notification-page-delete:active {
        color: #ff8585;
        border-color: rgba(255, 105, 105, .55);
        background: rgba(255, 105, 105, .08);
    }
}


/* DROPX MESSAGING CORE — PWA fókuszált privát chat nézet */
.mobile-chat-back { display:none; }
.dropdown-event-chat-icon { display:flex; align-items:center; justify-content:center; border:1px solid var(--color-gold); color:var(--color-gold); border-radius:50%; }
.dropdown-event-chat-icon svg { width:18px; height:18px; }
.dropdown-event-chat-item .dropdown-item-time { color:var(--color-gold); }

@media (max-width:700px) {
  #messages.content-section { padding:0; margin:0; min-height:0; }
  #messages .messages-page-title, #messages .message-view-tabs, #messages #panel-media { display:none; }
  #messages .message-app-layout { display:flex; flex-direction:column; height:calc(100dvh - var(--app-nav-height-mobile, 64px) - 86px); min-height:0; margin:0; border:0; border-radius:0; box-shadow:none; background:var(--theme-bg, #0d1013); overflow:hidden; }
  #messages .conversation-list-sidebar { width:100%; min-width:0; max-width:none; flex:1 1 auto; height:100%; border:0; background:transparent; }
  #messages #panel-conversations { display:flex; flex-direction:column; height:100%; min-height:0; }
  #messages .search-and-new-message { display:flex; flex-wrap:nowrap; padding:10px 12px; gap:8px; }
  #messages #conversation-search { min-width:0; flex:1; width:auto; }
  #messages #start-new-message { display:flex; flex:0 0 42px; width:42px; height:42px; align-items:center; justify-content:center; }
  #messages .conversation-list { height:auto; flex:1 1 auto; min-height:0; padding:0 10px 12px; }
  #messages .message-main-content { display:none; }
  #messages.has-selected-conversation .conversation-list-sidebar { display:none; }
  #messages.has-selected-conversation .message-main-content { display:flex; flex-direction:column; width:100%; height:100%; min-height:0; flex:1 1 auto; overflow:hidden; }
  #messages .conversation-header { display:flex; flex:0 0 48px; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid var(--theme-border, rgba(190,150,55,.28)); background:var(--theme-surface, #111519); }
  #messages .mobile-chat-back { display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 34px; color:var(--theme-text, #f2f2f2); text-decoration:none; border-radius:9px; }
  #messages .mobile-chat-back svg { width:20px; height:20px; }
  #messages .conversation-current-title { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem; }
  #messages .message-list { flex:1 1 auto; height:auto; min-height:0; padding:12px 10px; overflow-y:auto; overscroll-behavior:contain; }
  #messages .message-input-area { position:relative; flex:0 0 auto; margin:0; padding:8px 9px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid var(--theme-border, rgba(190,150,55,.25)); background:var(--theme-surface, #111519); }
  #messages .message-input-area .input-with-tools { display:flex; align-items:flex-end; gap:7px; }
  #messages .message-input-area .chat-tool-btn { width:36px; height:38px; flex:0 0 36px; display:flex; align-items:center; justify-content:center; }
  #messages .message-input-area .chat-tool-btn svg { width:20px; height:20px; }
  #messages #mainEmojiToggleButton, #messages #mainReactionToggleButton { display:none; }
  #messages #message-content-input { flex:1 1 auto; min-width:0; max-height:112px; min-height:38px; padding:10px 11px; resize:none; border-radius:18px; }
  #messages .btn-send-message { width:39px; height:39px; flex:0 0 39px; display:flex; align-items:center; justify-content:center; padding:0; border-radius:13px; }
  #messages .btn-send-message svg { width:19px; height:19px; }
  #messages .image-preview-container { max-width:100%; overflow-x:auto; }
  #messages.conversation-list-mode .message-main-content { display:none; }
}

/* LiveLine eseménybeszélgetések: ugyanaz a Messenger-kontextus, nem külön modal. */
.conversation-item-event .conversation-event-badge,
.conversation-event-badge { margin-left:auto; color:var(--color-gold); font-size:.56rem; letter-spacing:.04em; white-space:nowrap; }
.conversation-item-event .last-message svg { width:13px; height:13px; vertical-align:middle; margin-right:4px; }
.event-conversation-header { gap:9px; }
.event-conversation-mark { display:inline-flex; align-items:center; justify-content:center; color:var(--color-gold); }
.event-conversation-mark svg { width:20px; height:20px; }
.event-message-item { display:flex; align-items:flex-end; gap:9px; margin:12px 0; max-width:min(78%,620px); }
.event-message-item.is-mine { margin-left:auto; flex-direction:row-reverse; }
.event-message-avatar { width:32px; height:32px; flex:0 0 32px; border-radius:50%; object-fit:cover; border:1px solid var(--color-gold); }
.event-message-bubble { min-width:0; padding:10px 12px; border:1px solid var(--theme-border,rgba(190,150,55,.2)); border-radius:13px; background:var(--theme-surface-raised,#17191c); overflow-wrap:anywhere; }
.event-message-item.is-mine .event-message-bubble { background:color-mix(in srgb,var(--color-gold) 10%,var(--theme-surface-raised,#17191c)); }
.event-message-bubble strong { display:block; margin-bottom:5px; color:var(--color-gold); font-size:.72rem; }
.event-message-bubble p { margin:0 0 5px; white-space:pre-wrap; color:var(--theme-text,#eee); }
.event-message-bubble time { display:block; color:var(--theme-text-muted,#9299a3); font-size:.6rem; }
.event-message-empty,.event-message-error { display:flex; align-items:center; justify-content:center; gap:9px; min-height:120px; color:var(--theme-text-muted,#9299a3); text-align:center; }
.event-message-empty svg { width:22px; height:22px; color:var(--color-gold); }
.event-message-error { color:#e77; }
.event-message-input-tools textarea { flex:1; min-width:0; }


/* Egységes privát + esemény Messenger-lista: pontos utolsó aktivitás és olvasatlan számláló. */
#messages .conversation-item { position:relative; }
#messages .conversation-last-time { flex:0 0 auto; align-self:flex-start; margin-left:6px; color:var(--theme-text-muted,#89919b); font-size:.58rem; line-height:1.35; white-space:nowrap; }
#messages .conversation-unread-count { display:inline-flex; min-width:17px; height:17px; padding:0 4px; align-items:center; justify-content:center; border-radius:999px; background:var(--color-gold,#d9ad3b); color:#111; font-size:.62rem; font-weight:800; line-height:1; }
#messages .conversation-item.unread .conversation-title { color:var(--theme-text,#fff); font-weight:800; }
@media(max-width:700px) { #messages .conversation-last-time { font-size:.52rem; margin-left:2px; } #messages .conversation-item { gap:8px; } }

/* Egységes méret minden popup chathez, a kicsinyített beszélgetések avataros dokkba kerülnek. */
@media (min-width: 701px) { .chat-popup { width:350px; height:460px; max-height:calc(100vh - 28px); } }
.message-deleted .message-content, .message-deleted .msg-text { color:#9299a2; font-style:italic; }

/* Közös avataros dock privát és LiveLine eseménychatekhez. */
.dx-chat-minimized-dock { position:fixed; right:18px; bottom:76px; z-index:2147482000; display:flex; flex-direction:column; align-items:center; gap:10px; max-height:70vh; }
.dx-chat-dock-avatar { position:relative; flex:0 0 48px; width:48px; height:48px; padding:0; border:2px solid var(--color-gold,#d8aa32); border-radius:50%; background:var(--theme-surface,#111417); box-shadow:0 3px 12px rgba(0,0,0,.45); cursor:pointer; overflow:visible; }
.dx-chat-dock-avatar-image { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.dx-chat-dock-avatar:hover { transform:translateX(-3px); }
.dx-chat-dock-close { position:absolute; top:-5px; left:-5px; display:none; width:20px; height:20px; padding:0; border:1px solid #555; border-radius:50%; background:#222; color:#fff; cursor:pointer; }
.dx-chat-dock-avatar:hover .dx-chat-dock-close,.dx-chat-dock-avatar:focus-within .dx-chat-dock-close { display:grid; place-items:center; }
.dx-chat-dock-close svg { width:12px; height:12px; }
.dx-chat-dock-unread { position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:10px; background:#d52d36; color:#fff; font-size:10px; line-height:17px; text-align:center; }
@media(max-width:700px){.dx-chat-minimized-dock{display:none;}}

/* DROPX GLOBAL CHAT POLISH — spacious bubbles, animated corner reactions, popup/dock separation. */
@media (min-width: 769px) {
  .chat-popup-wrapper { right: 88px; bottom: 76px; gap: 14px; z-index: 2147481500; }
  .chat-popup { width: 370px; height: 480px; }
  .chat-popup .chat-popup-messages { padding: 16px 14px; gap: 14px; }
  .chat-popup-messages .msg-bubble { max-width: min(78%, 290px); padding: 11px 14px; }
  .chat-popup.dx-event-chat-popup { width: 370px; height: 480px; }
}
/* Reactions sit on the message card corner instead of consuming a separate row. */
.dx-event-message-body { position: relative; margin-bottom: 8px; }
.dx-event-reactions { position: absolute; right: 7px; bottom: -13px; z-index: 2; display: flex; flex-wrap: wrap; gap: 3px; margin: 0; max-width: min(220px, 80vw); }
.dx-event-popup-message:not(.is-mine) .dx-event-reactions { left: 7px; right: auto; }
.dx-event-reaction-chip { display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 2px 7px; border: 1px solid rgba(216,170,50,.55); border-radius: 999px; background: linear-gradient(145deg,#24201a,#111315); box-shadow: 0 3px 10px #0009; font-size: 11px; transform-origin: center; animation: dx-reaction-pop .24s cubic-bezier(.2,.8,.2,1.2); }
.dx-event-reaction-chip:hover { transform: translateY(-2px) scale(1.06); }
@keyframes dx-reaction-pop { from { opacity: 0; transform: scale(.55) translateY(5px); } to { opacity: 1; transform: scale(1) translateY(0); } }
/* More room for message text and tools; action controls remain available on touch devices. */
.dx-event-popup-messages { padding: 16px 14px; gap: 15px; }
.dx-event-popup-message { max-width: 100%; gap: 10px; }
.dx-event-message-body { max-width: min(84%, 300px); padding: 11px 13px 9px; }
.dx-event-message-actions { opacity: .8; }
@media (max-width: 768px) {
  .chat-popup-wrapper { display: none; }
  #messages .event-message-item { max-width: 94%; gap: 8px; margin: 14px 0; }
  #messages .event-message-bubble { max-width: calc(100vw - 92px); padding: 11px 13px; margin-bottom: 8px; }
  #messages .dx-event-reactions { position: absolute; bottom: -13px; right: 7px; }
  #messages .dx-event-message-actions { opacity: 1; }
  #messages .dx-event-reaction-chip { min-height: 24px; font-size: 12px; }
}


/* DROPX CHAT UX FINAL: viewport anchored popups, slim reply bar, actions on bubble edge. */
@media (min-width: 701px) {
  .chat-popup-wrapper { right: clamp(78px, 5.5vw, 104px); bottom: 12px; gap: 12px; align-items: flex-end; }
  .chat-popup { height: min(480px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); }
  .dx-chat-minimized-dock { right: 12px; bottom: 12px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 4px; }
}
.dx-event-popup-form { display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.dx-event-reply-context { order:0; width:100%; box-sizing:border-box; min-height:0; margin:0; padding:6px 9px; border:1px solid rgba(216,170,50,.28); border-left:3px solid var(--color-gold,#d8aa32); border-radius:7px; background:rgba(216,170,50,.07); color:var(--theme-text-muted,#a5abb4); font-size:.68rem; line-height:1.25; }
.dx-event-reply-context:not([hidden]) { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dx-event-reply-context > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dx-event-reply-context button { flex:0 0 24px; width:24px; height:24px; border:0; border-radius:5px; background:transparent; color:var(--color-gold,#d8aa32); font-size:18px; }
.dx-event-file-preview { order:1; }
.dx-event-input-row { order:2; width:100%; }
.dx-event-message-body { display:flex; flex-direction:column; }
.dx-event-message-meta { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:5px; margin-top:8px; }
.dx-event-message-actions { order:2; flex:0 0 100%; display:flex; justify-content:flex-end; gap:4px; opacity:1; }
.dx-event-message-meta time { order:1; margin-right:auto; }
.dx-event-message-actions button { width:25px; height:25px; }
.dx-event-reactions { bottom:-12px; }
.dx-event-popup-message { margin:12px 0 16px; }
.dx-event-message-body { margin-bottom:5px; }
/* Slim Messenger-style reply preview above the composer in private chat too. */
#messages .reply-context-indicator:not([hidden]) { display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; padding:6px 10px; margin:0 0 7px; border-left:3px solid var(--color-gold,#d8aa32); border-radius:7px; background:color-mix(in srgb,var(--color-gold,#d8aa32) 7%,var(--theme-surface,#111519)); }
#messages .reply-context-indicator .reply-info { min-width:0; display:flex; flex-direction:column; gap:2px; }
#messages .reply-context-indicator .reply-content-text { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
#messages .reply-context-indicator .cancel-reply { flex:0 0 26px; width:26px; height:26px; }
/* Mobile event chat replaces the conversation shell only when an event_id is present. */
#messages.dx-mobile-event-chat-active { padding:0; margin:0; }
#messages.dx-mobile-event-chat-active .message-app-layout { display:none; }
#dx-mobile-event-chat-root:not([hidden]) { display:block; width:100%; }
.dx-mobile-event-shell { position:relative; display:flex; flex-direction:column; width:100%; height:calc(100dvh - var(--app-nav-height-mobile,64px) - 4px); min-height:300px; overflow:hidden; background:var(--theme-bg,#090b0d); color:var(--theme-text,#f2f2f2); }
.dx-mobile-event-header { display:flex; flex:0 0 54px; align-items:center; gap:9px; padding:0 12px; border-bottom:1px solid var(--theme-border,rgba(190,150,55,.25)); background:var(--theme-surface,#111519); }
.dx-mobile-event-back,.dx-mobile-event-refresh { display:flex; flex:0 0 34px; width:34px; height:34px; align-items:center; justify-content:center; border:1px solid var(--theme-border,#2a2e33); border-radius:9px; background:transparent; color:var(--color-gold,#d8aa32); text-decoration:none; }
.dx-mobile-event-heading-icon { display:flex; flex:0 0 22px; color:var(--color-gold,#d8aa32); }
.dx-mobile-event-heading { display:flex; flex:1; min-width:0; flex-direction:column; gap:2px; }
.dx-mobile-event-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.86rem; }
.dx-mobile-event-heading small { color:var(--theme-text-muted,#9299a3); font-size:.62rem; }
.dx-mobile-event-messages { display:flex; flex:1 1 auto; min-height:0; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; padding:12px 10px 18px; }
.dx-mobile-event-message { display:flex; align-items:flex-end; gap:7px; max-width:100%; margin:9px 0 16px; }
.dx-mobile-event-message.is-mine { align-self:flex-end; flex-direction:row-reverse; }
.dx-mobile-event-avatar { flex:0 0 29px; width:29px; height:29px; border:1px solid var(--color-gold,#d8aa32); border-radius:50%; object-fit:cover; }
.dx-mobile-event-bubble { position:relative; display:flex; flex-direction:column; min-width:0; max-width:min(82%,440px); padding:9px 11px 7px; border:1px solid var(--theme-border,#2c3034); border-radius:13px; background:var(--theme-surface-raised,#191c20); overflow-wrap:anywhere; }
.dx-mobile-event-message.is-mine .dx-mobile-event-bubble { background:color-mix(in srgb,var(--color-gold,#d8aa32) 12%,var(--theme-surface-raised,#191c20)); }
.dx-mobile-event-text { margin:0 0 4px; white-space:pre-wrap; line-height:1.38; font-size:.86rem; }
.dx-mobile-event-quote { margin:0 0 6px; padding:5px 7px; border-left:2px solid var(--color-gold,#d8aa32); border-radius:4px; background:rgba(216,170,50,.08); color:var(--theme-text-muted,#a8afb8); font-size:.68rem; }
.dx-mobile-event-meta { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:7px; }
.dx-mobile-event-meta time { order:0; margin-right:auto; color:var(--theme-text-muted,#9299a3); font-size:.58rem; }
.dx-mobile-event-actions { order:1; display:flex; flex:0 0 100%; justify-content:flex-end; gap:4px; padding-top:2px; }
.dx-mobile-event-actions button { display:grid; place-items:center; flex:0 0 25px; width:25px; height:25px; padding:0; border:1px solid var(--theme-border,#363a40); border-radius:7px; background:rgba(0,0,0,.2); color:var(--color-gold,#d8aa32); }
.dx-mobile-event-actions svg { width:14px; height:14px; }
.dx-mobile-event-attachment { display:block; max-width:100%; margin-top:5px; }
.dx-mobile-event-attachment img { display:block; max-width: min(100%,280px); max-height:240px; border-radius:8px; object-fit:contain; }
.dx-mobile-event-edited,.dx-mobile-event-deleted { color:var(--theme-text-muted,#9299a3); font-size:.62rem; font-style:italic; }
.dx-mobile-event-reactions { position:absolute; right:7px; bottom:-12px; display:flex; gap:3px; max-width:85%; flex-wrap:wrap; }
.dx-mobile-event-reaction { padding:2px 7px; border:1px solid rgba(216,170,50,.55); border-radius:999px; background:#17191b; color:#fff; font-size:.68rem; box-shadow:0 3px 8px #0008; animation:dx-reaction-pop .22s ease-out; }
.dx-mobile-event-form { flex:0 0 auto; display:flex; flex-direction:column; gap:6px; padding:7px 9px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid var(--theme-border,rgba(190,150,55,.25)); background:var(--theme-surface,#111519); }
.dx-mobile-event-reply:not([hidden]),.dx-mobile-event-preview:not([hidden]) { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 9px; border-left:3px solid var(--color-gold,#d8aa32); border-radius:7px; background:rgba(216,170,50,.08); font-size:.68rem; }
.dx-mobile-event-reply > div { display:flex; min-width:0; flex-direction:column; gap:3px; }
.dx-mobile-event-reply strong,.dx-mobile-event-reply span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dx-mobile-event-reply strong { color:var(--color-gold,#d8aa32); font-size:.68rem; }
.dx-mobile-event-reply button,.dx-mobile-event-preview button { flex:0 0 24px; border:0; background:transparent; color:var(--color-gold,#d8aa32); font-size:18px; }
.dx-mobile-event-tools { display:flex; align-items:flex-end; gap:6px; }
.dx-mobile-event-tool,.dx-mobile-event-send { display:flex; flex:0 0 36px; width:36px; height:38px; align-items:center; justify-content:center; border:1px solid var(--theme-border,#333840); border-radius:9px; background:var(--theme-surface-raised,#17191c); color:var(--color-gold,#d8aa32); }
.dx-mobile-event-tool svg,.dx-mobile-event-send svg { width:20px; height:20px; }
.dx-mobile-event-input { flex:1 1 auto; min-width:0; min-height:38px; max-height:112px; resize:none; padding:9px 11px; border:1px solid var(--theme-border,#333840); border-radius:14px; background:var(--theme-bg,#08090a); color:var(--theme-text,#f2f2f2); font:inherit; }
.dx-mobile-event-send { border-color:var(--color-gold,#d8aa32); background:rgba(216,170,50,.08); }
.dx-mobile-event-state { margin:auto; padding:18px; color:var(--theme-text-muted,#9299a3); text-align:center; font-size:.8rem; }
.dx-mobile-event-state.is-error { color:#ef7777; }
.dx-mobile-event-emoji-menu { position:absolute; z-index:30; display:flex; flex-wrap:wrap; gap:4px; max-width:min(300px,calc(100vw - 24px)); padding:8px; border:1px solid var(--color-gold,#d8aa32); border-radius:12px; background:var(--theme-surface,#111519); box-shadow:0 8px 25px #000a; }
.dx-mobile-event-emoji-menu button { width:34px; height:34px; border:0; border-radius:7px; background:transparent; font-size:20px; }
@media(max-width:700px){
 .chat-popup-wrapper { display:none; }
 .dx-mobile-event-shell { height:calc(100dvh - var(--app-nav-height-mobile,64px)); }
 .dx-mobile-event-message { max-width:100%; }
 .dx-mobile-event-bubble { max-width:calc(100vw - 94px); }
 .dx-mobile-event-actions { opacity:1; }
}

/* DropX mobile chat session + viewport containment fix (2026-10-20). */
@media (max-width: 700px) {
  #messages.content-section {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: calc(100dvh - var(--dx-mobile-header-height, 90px) - var(--app-nav-height-mobile, 55px) - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
  #messages > h1 { display: none; }
  #messages .message-app-layout {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  #messages .message-main-content,
  #messages.has-selected-conversation .message-main-content {
    min-height: 0;
  }
  #messages .conversation-header .mobile-chat-back,
  #messages .target-user-info-new-message .mobile-chat-back {
    display: flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216,170,50,.22);
    background: rgba(216,170,50,.035);
    color: var(--color-gold, #d8aa32);
  }
  #messages .target-user-info-new-message { display: flex; align-items: center; gap: 9px; }
  #messages .target-user-info-new-message .target-user-avatar { flex: 0 0 34px; }
  #dx-mobile-event-chat-root:not([hidden]) {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .dx-mobile-event-shell {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
  }
  .dx-mobile-event-messages { min-height: 0; }
  .dx-mobile-event-form { flex: 0 0 auto; }
  .dx-mobile-event-actions button,
  .message-actions .chat-action-btn {
    background: rgba(8, 9, 10, .16);
    border-color: rgba(216, 170, 50, .24);
    box-shadow: none;
    backdrop-filter: blur(5px);
  }
  .dx-mobile-event-actions button:hover,
  .message-actions .chat-action-btn:hover {
    background: rgba(216, 170, 50, .12);
  }
  #message-list .message-item .message-actions,
  .chat-popup-messages .message-group .message-actions {
    opacity: 1;
    pointer-events: auto;
    top: auto;
    bottom: -13px;
    padding: 2px 3px;
    gap: 3px;
    background: rgba(7, 8, 9, .24);
    border: 1px solid rgba(216, 170, 50, .16);
    border-radius: 9px;
    backdrop-filter: blur(5px);
    box-shadow: none;
  }
  #message-list .message-item .message-actions .chat-action-btn,
  .chat-popup-messages .message-group .message-actions .chat-action-btn {
    width: 27px;
    height: 27px;
    background: rgba(10, 11, 12, .12);
    border-color: rgba(216, 170, 50, .2);
    box-shadow: none;
  }
}

/* Shared private/event chat action controls sit partially over the lower bubble edge. */
#message-list .message-item .message-actions,
.chat-popup-messages .message-group .message-actions {
  top: auto;
  bottom: -13px;
  padding: 2px 3px;
  gap: 3px;
  background: rgba(7, 8, 9, .24);
  border: 1px solid rgba(216, 170, 50, .16);
  border-radius: 9px;
  backdrop-filter: blur(5px);
  box-shadow: none;
}
.message-actions .chat-action-btn {
  width: 28px;
  height: 28px;
  background: rgba(10, 11, 12, .12);
  border-color: rgba(216, 170, 50, .2);
  box-shadow: none;
}
.message-actions .chat-action-btn:hover {
  background: rgba(216, 170, 50, .12);
  box-shadow: none;
}



/* DropX chat final stabilization: bottom anchoring, explicit hidden states and PWA safe-area layout. */
.dx-mobile-event-reply[hidden],
.dx-mobile-event-preview[hidden],
.dx-event-reply-context[hidden],
.dx-event-file-preview[hidden],
#messages .reply-context-indicator[hidden] { display: none; }
@media (min-width: 701px) {
  body > .chat-popup-wrapper,
  .chat-popup-wrapper {
    position: fixed;
    right: clamp(82px, 5.5vw, 108px);
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    height: auto;
    max-height: calc(100dvh - 24px);
    align-items: flex-end;
    align-content: flex-end;
    transform: none;
  }
  .chat-popup-wrapper > .chat-popup { flex: 0 1 auto; max-height: calc(100dvh - 24px); pointer-events: auto; }
}
@media (max-width: 700px) {
  #messages.dx-mobile-event-chat-active {
    position: relative;
    height: calc(100dvh - var(--dx-mobile-header-height, 90px) - var(--app-nav-height-mobile, 55px) - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    overflow: hidden;
  }
  #dx-mobile-event-chat-root:not([hidden]) { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .dx-mobile-event-shell { height: 100%; min-height: 0; max-height: 100%; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .dx-mobile-event-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; scroll-behavior: auto; }
  .dx-mobile-event-form { position: relative; z-index: 2; flex: 0 0 auto; }
  .dx-mobile-event-reply:not([hidden]) { display: flex; }
}


/* DropX GLOBAL EVENT CHAT FINAL: event rooms share the global chat popup on desktop and PWA mobile. */
@media (max-width: 700px) {
  .chat-popup-wrapper {
    position: fixed;
    inset: auto 8px calc(var(--app-nav-height-mobile, 54px) + env(safe-area-inset-bottom, 0px) + 7px) 8px;
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
    width: auto;
    height: auto;
    max-height: calc(100dvh - var(--dx-mobile-header-height, 82px) - var(--app-nav-height-mobile, 54px) - env(safe-area-inset-bottom, 0px) - 14px);
    overflow: visible;
    z-index: 2147482500;
    pointer-events: none;
  }
  .chat-popup-wrapper > .chat-popup.dx-event-chat-popup {
    display: flex;
    position: relative;
    inset: auto;
    width: 100%;
    height: min(68dvh, 570px);
    max-height: calc(100dvh - var(--dx-mobile-header-height, 82px) - var(--app-nav-height-mobile, 54px) - env(safe-area-inset-bottom, 0px) - 18px);
    min-height: 270px;
    border-radius: 14px;
    pointer-events: auto;
    transform: none;
  }
  .chat-popup-wrapper > .chat-popup.dx-event-chat-popup.dx-event-popup-docked { display: none; }
  .dx-event-chat-popup .dx-event-popup-messages { min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; }
  .dx-event-chat-popup .dx-event-popup-form { flex: 0 0 auto; padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .dx-chat-minimized-dock {
    display: flex;
    position: fixed;
    right: 9px;
    bottom: calc(var(--app-nav-height-mobile, 54px) + env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 2147482600;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 18px);
    max-height: none;
    overflow: visible;
    pointer-events: auto;
  }
  .dx-chat-dock-avatar { width: 43px; height: 43px; flex-basis: 43px; }
  .dx-chat-dock-close { opacity: 1; visibility: visible; transform: scale(1); }
}


/* Event chat entries share the same global conversation list as private chats. */
.event-conversation-item { position: relative; padding-right: 58px; }
.event-conversation-label { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--color-gold,#d8aa32); font-size: .52rem; font-weight: 800; letter-spacing: .035em; }
.event-conversation-item .conversation-unread-count { position: absolute; right: 8px; bottom: 7px; }
.event-conversation-item.unread { background: color-mix(in srgb,var(--color-gold,#d8aa32) 9%,transparent); }

/* DROPX CHAT FIX 2026-10-20: compact edge controls, corner reactions, mobile event navigation. */
#message-list .message-item .message-bubble,
.chat-popup-messages .message-group .msg-bubble {
  position: relative;
  overflow: visible;
  padding-bottom: 18px;
}
.chat-popup-messages .message-group .msg-bubble { overflow: visible; }
#message-list .message-item .message-actions,
.chat-popup-messages .message-group .message-actions {
  position: absolute;
  top: auto;
  bottom: -13px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: max-content;
  height: auto;
  min-height: 0;
  max-width: calc(100vw - 28px);
  padding: 3px;
  border: 1px solid rgba(216,170,50,.22);
  border-radius: 10px;
  background: rgba(8,10,12,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  white-space: nowrap;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
}
#message-list .message-item.my-message .message-actions,
.chat-popup-messages .message-group.msg-right .message-actions { right: -5px; left: auto; }
#message-list .message-item.other-message .message-actions,
.chat-popup-messages .message-group.msg-left .message-actions { left: -5px; right: auto; }
#message-list .message-item:hover .message-actions,
.chat-popup-messages .message-group:hover .message-actions,
#message-list .message-item:focus-within .message-actions,
.chat-popup-messages .message-group:focus-within .message-actions { opacity: 1; pointer-events: auto; }
.message-actions .chat-action-btn {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  min-width: 27px;
  padding: 0;
  border: 1px solid rgba(216,170,50,.22);
  border-radius: 7px;
  background: rgba(9,11,13,.38);
  color: var(--color-gold,#d8aa32);
  box-shadow: none;
}
.message-actions .chat-action-btn svg { width: 15px; height: 15px; stroke-width: 2; }
.message-actions .chat-action-btn:hover { background: rgba(216,170,50,.16); transform: translateY(-1px); box-shadow: none; }
.message-time-and-reactions,
.chat-popup-messages .msg-time-and-reactions { position: static; }
.message-reactions-container:empty { display: none; }
.message-reactions-container:not(:empty) {
  position: absolute;
  right: 8px;
  bottom: -13px;
  z-index: 13;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  width: max-content;
  max-width: min(78%, 240px);
  padding: 2px 5px;
  border: 1px solid rgba(216,170,50,.42);
  border-radius: 999px;
  background: rgba(15,16,18,.86);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 3px 9px rgba(0,0,0,.28);
  transform: rotate(-4deg);
  transform-origin: center;
  animation: dx-chat-reaction-arrive .22s cubic-bezier(.2,.8,.2,1.2);
}
#message-list .message-item.other-message .message-reactions-container,
.chat-popup-messages .message-group.msg-left .message-reactions-container { left: 8px; right: auto; transform: rotate(4deg); }
@keyframes dx-chat-reaction-arrive { from { opacity: 0; transform: scale(.72) rotate(-9deg) translateY(4px); } to { opacity: 1; transform: scale(1) rotate(-4deg) translateY(0); } }

/* Event chat actions remain compact and overlap the bubble edge, never stretch into a tall panel. */
.dx-event-message-body { position: relative; min-width: 0; overflow: visible; padding-bottom: 8px; }
.dx-event-message-meta { position: static; }
.dx-event-message-actions {
  position: absolute;
  top: auto;
  bottom: -13px;
  right: 6px;
  left: auto;
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100vw - 100px);
  gap: 3px;
  margin: 0;
  padding: 3px;
  border: 1px solid rgba(216,170,50,.22);
  border-radius: 9px;
  background: rgba(8,10,12,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  z-index: 12;
}
.dx-event-message-actions button {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  min-width: 27px;
  padding: 0;
  border: 1px solid rgba(216,170,50,.22);
  border-radius: 7px;
  background: rgba(9,11,13,.38);
  color: var(--color-gold,#d8aa32);
  box-shadow: none;
}
.dx-event-popup-message:not(.is-mine) .dx-event-message-actions { left: 6px; right: auto; }
.dx-event-reactions { transform: rotate(-4deg); }
.dx-event-popup-message:not(.is-mine) .dx-event-reactions { transform: rotate(4deg); }
.dx-mobile-event-bubble { overflow: visible; padding-bottom: 18px; }
.dx-mobile-event-meta { position: static; }
.dx-mobile-event-actions {
  position: absolute;
  right: 5px;
  bottom: -13px;
  left: auto;
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  width: max-content;
  max-width: calc(100vw - 96px);
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(216,170,50,.22);
  border-radius: 9px;
  background: rgba(8,10,12,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 12;
}
.dx-mobile-event-message:not(.is-mine) .dx-mobile-event-actions { left: 5px; right: auto; }
.dx-mobile-event-actions button { flex: 0 0 27px; width: 27px; height: 27px; min-width: 27px; background: rgba(9,11,13,.38); box-shadow: none; }
.dx-mobile-event-reactions { transform: rotate(-4deg); }
.dx-mobile-event-message:not(.is-mine) .dx-mobile-event-reactions { left: 7px; right: auto; transform: rotate(4deg); }
@media (max-width:700px) {
  #message-list .message-item .message-actions,
  .chat-popup-messages .message-group .message-actions { opacity: 1; pointer-events: auto; }
  #message-list .message-item .message-bubble { max-width: calc(100vw - 86px); }
  .chat-popup-messages .msg-bubble { max-width: calc(100vw - 86px); }
}


/* Reply quotes are navigable references to the original message. */
.message-reply-quote[data-parent-message-id] { display:flex; flex-direction:column; width:100%; text-align:left; cursor:pointer; color:inherit; font:inherit; appearance:none; border-top:1px solid transparent; border-right:1px solid transparent; border-bottom:1px solid transparent; }
.message-reply-quote[data-parent-message-id]:hover { border-color:rgba(216,170,50,.72); background:rgba(216,170,50,.13); }
.dx-message-jump-highlight { outline:2px solid var(--color-gold,#d8aa32); outline-offset:3px; animation:dxMessageJumpGlow 1.8s ease-out; }
@keyframes dxMessageJumpGlow { 0%,100% { box-shadow:0 0 0 rgba(216,170,50,0); } 25%,55% { box-shadow:0 0 22px rgba(216,170,50,.48); } }
.dx-chat-minimized-dock { right:12px; bottom:12px; z-index:2147482600; }
.dx-chat-dock-avatar { flex:0 0 46px; width:46px; height:46px; }
@media (min-width: 769px) {
  .chat-popup-wrapper { max-width:calc(100vw - 110px); justify-content:flex-start; }
  .chat-popup-wrapper > .chat-popup { width:clamp(280px, 24vw, 370px); min-width:0; }
}
@media (max-width: 768px) {
  .dx-chat-minimized-dock { right:8px; bottom:calc(var(--app-nav-height-mobile,54px) + env(safe-area-inset-bottom,0px) + 8px); max-width:calc(100vw - 16px); }
}


/* DROPX CHAT PATCH 2026-10-20 — unified bubble contrast, non-overlapping tools, corner reactions. */
.chat-popup-messages .message-group { min-width:0; }
.chat-popup-messages .msg-bubble-wrapper { min-width:0; overflow:visible; }
.chat-popup-messages .msg-bubble { overflow:visible; }
.chat-popup-messages .msg-right .msg-bubble {
  background:linear-gradient(145deg, rgba(218,174,61,.96), rgba(143,99,23,.94));
  background-image:none;
  color:#191611;
  border:1px solid rgba(255,224,137,.5);
  box-shadow:0 3px 12px rgba(0,0,0,.16);
}
.chat-popup-messages .msg-right .msg-text,
.chat-popup-messages .msg-right .message-content { color:#191611; text-shadow:none; }
.chat-popup-messages .msg-left .msg-bubble {
  background:var(--theme-surface-raised,#24272b);
  background-image:none;
  color:var(--theme-text,#f2f2f2);
  border:1px solid var(--theme-border,rgba(255,255,255,.12));
}
.chat-popup-messages .msg-left .msg-text,
.chat-popup-messages .msg-left .message-content { color:inherit; text-shadow:none; }
.chat-popup-messages .msg-time-and-reactions { position:relative; z-index:1; }
.chat-popup-messages .message-group .message-actions {
  top:auto;
  bottom:-12px;
  max-width:calc(100% - 8px);
  flex-wrap:wrap;
  white-space:normal;
  gap:4px;
  padding:3px 5px;
  background:rgba(10,11,13,.62);
  border:1px solid rgba(216,170,50,.22);
  border-radius:9px;
  backdrop-filter:blur(8px);
}
.chat-popup-messages .message-group.msg-right .message-actions { right:7px; left:auto; }
.chat-popup-messages .message-group.msg-left .message-actions { left:7px; right:auto; }
.chat-popup-messages .message-actions .chat-action-btn { width:27px; height:27px; flex:0 0 27px; }
.chat-popup-messages .message-actions .chat-action-btn svg { width:16px; height:16px; }

/* Mobile light theme: action controls remain compact and do not cover message text. */
@media (max-width:700px) {
  .chat-popup-wrapper > .chat-popup { min-width:0; width:100%; max-width:100%; }
  .chat-popup-messages { min-width:0; }
  .chat-popup-messages .msg-bubble-wrapper { max-width:calc(100% - 2px); }
  .chat-popup-messages .msg-bubble { max-width:100%; padding:9px 11px 15px; }
  .chat-popup-messages .message-group .message-actions { bottom:-11px; }
  .chat-popup-messages .message-actions .chat-action-btn { width:25px; height:25px; flex-basis:25px; }
}
body.theme-light .chat-popup-messages .msg-left .msg-bubble,
body.light-theme .chat-popup-messages .msg-left .msg-bubble,
body.light-mode .chat-popup-messages .msg-left .msg-bubble,
body[data-theme="light"] .chat-popup-messages .msg-left .msg-bubble {
  background:linear-gradient(145deg,#fffaf0,#eee3ce);
  color:#29231a;
  border-color:rgba(128,91,28,.22);
}
body.theme-light .chat-popup-messages .msg-left .msg-text,
body.light-theme .chat-popup-messages .msg-left .msg-text,
body.light-mode .chat-popup-messages .msg-left .msg-text,
body[data-theme="light"] .chat-popup-messages .msg-left .msg-text { color:#29231a; text-shadow:none; }


/* Shared private-chat reaction pill: top-right overlay, larger emoji and superscript count. */
.message-reactions-container:not(:empty) {
  top:-13px;
  bottom:auto;
  right:8px;
  display:flex;
  align-items:flex-start;
  gap:1px;
  width:max-content;
  max-width:min(82%,240px);
  padding:2px 5px 3px;
  border-radius:12px;
  transform:rotate(-5deg);
  transform-origin:top right;
}
#message-list .message-item.other-message .message-reactions-container,
.chat-popup-messages .message-group.msg-left .message-reactions-container {
  top:-13px;
  bottom:auto;
  left:8px;
  right:auto;
  transform:rotate(-5deg);
  transform-origin:top left;
}
.message-reactions-container .reaction-count {
  display:inline-flex;
  align-items:flex-start;
  gap:1px;
  min-height:27px;
  padding:2px 5px;
  border:1px solid rgba(216,170,50,.38);
  border-radius:11px;
  background:rgba(15,16,18,.72);
  color:#fff6df;
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  line-height:1;
  font-size:0;
}
.message-reactions-container .reaction-emoji { font-size:22px; line-height:1.05; }
.message-reactions-container .reaction-total { position:relative; top:-3px; margin-left:1px; font-size:12px; font-weight:800; line-height:1; }
.message-reactions-container .reaction-count.my-reaction { border-color:rgba(255,211,91,.82); box-shadow:0 2px 8px rgba(216,170,50,.18); }
@media(max-width:700px) {
  .message-reactions-container:not(:empty) { top:-12px; max-width:85%; }
  .message-reactions-container .reaction-emoji { font-size:21px; }
  .message-reactions-container .reaction-total { font-size:12px; }
}


/* Legacy event selectors consolidated into the single popup-chat stylesheet. */
/* LiveLine event chats reuse the shared DropX Messenger popup shell. */
.dx-event-chat-popup { display:flex; flex-direction:column; overflow:hidden; width:320px; height:460px; max-height:calc(100vh - 90px); }
.dx-event-chat-popup .dx-event-popup-title { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.dx-event-chat-popup .dx-event-popup-title .header-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.86rem; color:var(--color-gold); }
.dx-event-popup-icon { display:flex; flex:0 0 25px; align-items:center; justify-content:center; color:var(--color-gold); }
.dx-event-popup-icon svg { width:17px; height:17px; }
.dx-event-room-label { color:var(--theme-text-muted,#9299a3); font-size:.62rem; white-space:nowrap; }
.dx-event-popup-context { display:flex; align-items:center; gap:8px; margin:7px 10px 0; padding:7px 10px; border:1px solid var(--theme-border,rgba(190,150,55,.22)); border-radius:9px; color:var(--theme-text-muted,#9299a3); font-size:.68rem; }
.dx-event-popup-context svg { width:15px; height:15px; color:var(--color-gold); flex:0 0 auto; }
.dx-event-popup-messages { flex:1 1 auto; min-height:130px; padding:12px 10px; display:flex; flex-direction:column; gap:10px; }
.dx-event-popup-message { display:flex; align-items:flex-end; gap:8px; max-width:90%; }
.dx-event-popup-message.is-mine { align-self:flex-end; flex-direction:row-reverse; }
.dx-event-avatar-trigger { position:relative; align-self:flex-end; display:flex; flex:0 0 29px; width:29px; height:29px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.dx-event-message-avatar { width:29px; height:29px; border-radius:50%; object-fit:cover; border:1px solid var(--color-gold); flex:0 0 29px; }
.dx-event-message-body { min-width:0; padding:9px 11px; border-radius:12px; background:var(--theme-surface-raised,#1b1e22); border:1px solid var(--theme-border,rgba(180,180,180,.13)); }
.dx-event-popup-message.is-mine .dx-event-message-body { background:color-mix(in srgb,var(--color-gold) 12%,var(--theme-surface-raised,#1b1e22)); }
.dx-event-message-body p { margin:2px 0 6px; color:var(--theme-text,#e8e8e8); white-space:pre-wrap; overflow-wrap:anywhere; font-size:.82rem; line-height:1.35; }
.dx-event-message-body time { color:var(--theme-text-muted,#9299a3); font-size:.58rem; white-space:nowrap; }
.dx-message-profile-action { position:absolute; z-index:10020; left:50%; top:calc(100% + 7px); transform:translateX(-50%); display:block; width:max-content; max-width:180px; padding:8px 10px; border:1px solid var(--color-gold); border-radius:8px; background:var(--theme-surface,#111417); color:var(--color-gold); font-size:.72rem; font-weight:700; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.45); }
.dx-event-popup-message.is-mine .dx-message-profile-action { left:auto; right:0; transform:none; }
.dx-event-popup-form { display:flex; align-items:flex-end; gap:8px; padding:9px; border-top:1px solid var(--theme-border,rgba(190,150,55,.2)); }
.dx-event-chat-input { min-width:0; flex:1; resize:none; max-height:100px; padding:10px 12px; border:1px solid var(--theme-border,rgba(190,150,55,.25)); border-radius:12px; background:var(--theme-bg,#090b0d); color:var(--theme-text,#f3f3f3); font:inherit; }
.dx-event-popup-form .chat-send-btn { width:39px; height:39px; flex:0 0 39px; display:flex; align-items:center; justify-content:center; }
.dx-event-popup-empty,.dx-event-popup-error { margin:auto; padding:15px; text-align:center; color:var(--theme-text-muted,#9299a3); font-size:.8rem; }
.dx-event-popup-error { color:#ef7777; }
.dx-event-chat-popup.dx-event-popup-docked { display:none; }
.dx-chat-minimized-dock { position:fixed; right:18px; bottom:18px; z-index:10010; display:flex; flex-direction:column; align-items:center; gap:10px; max-height:70vh; }
.dx-chat-dock-avatar { position:relative; width:48px; height:48px; padding:0; border:2px solid var(--color-gold,#d8aa32); border-radius:50%; background:var(--theme-surface,#111417); box-shadow:0 3px 12px rgba(0,0,0,.45); cursor:pointer; }
.dx-chat-dock-avatar img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.dx-chat-dock-avatar:hover { transform:translateX(-3px); }
.dx-chat-dock-unread { position:absolute; top:-3px; right:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:10px; background:#d92d45; color:#fff; font-size:10px; line-height:17px; }
@media(max-width:700px){.dx-event-chat-popup{display:none;}.dx-chat-minimized-dock{display:none;}}

/* Profile action is portalled to body so popup overflow cannot clip it. */
body > .dx-message-profile-action { position:fixed; z-index:2147483000; display:block; box-sizing:border-box; width:max-content; max-width:min(190px,calc(100vw - 16px)); padding:9px 12px; border:1px solid var(--color-gold,#d8aa32); border-radius:9px; background:var(--theme-surface,#111417); color:var(--color-gold,#d8aa32); font-size:.75rem; font-weight:700; line-height:1.25; text-decoration:none; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.6); }
.dx-chat-minimized-dock { position:fixed; right:18px; bottom:76px; z-index:2147482000; }
.dx-chat-dock-avatar { flex:0 0 48px; }
@media(max-width:700px){ .dx-chat-minimized-dock { display:none; } }


/* Minimized conversation avatars keep their close control hidden until hover/focus. */
.dx-chat-dock-avatar { position:relative; overflow:visible; display:block; cursor:pointer; }
.dx-chat-dock-avatar-image { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.dx-chat-dock-close { position:absolute; top:-5px; right:-5px; display:flex; align-items:center; justify-content:center; width:20px; height:20px; border:1px solid rgba(255,255,255,.72); border-radius:50%; background:#24272b; color:#fff; opacity:0; visibility:hidden; transform:scale(.85); transition:opacity .15s ease, transform .15s ease, visibility .15s ease; padding:0; cursor:pointer; z-index:2; box-shadow:0 2px 7px rgba(0,0,0,.45); }
.dx-chat-dock-close svg { width:12px; height:12px; stroke-width:2.5; }
.dx-chat-dock-avatar:hover .dx-chat-dock-close,
.dx-chat-dock-avatar:focus-visible .dx-chat-dock-close,
.dx-chat-dock-close:focus-visible { opacity:1; visibility:visible; transform:scale(1); }
.dx-chat-dock-close:hover { background:#b42332; }
@media (hover:none) { .dx-chat-dock-close { opacity:1; visibility:visible; transform:scale(1); } }


/* Header dropdown: privát és eseménybeszélgetések közös listája. */
.dropdown-event-chat-item { position:relative; padding-right:64px; }
.dropdown-event-chat-label { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--color-gold,#d8aa32); font-size:.55rem; font-weight:800; letter-spacing:.04em; }
.dropdown-chat-unread-count { position:absolute; right:10px; bottom:9px; min-width:17px; height:17px; padding:0 4px; border-radius:10px; background:#d92d45; color:#fff; font-size:10px; line-height:17px; text-align:center; font-weight:800; }
.dropdown-event-chat-item.unread { background:color-mix(in srgb,var(--color-gold,#d8aa32) 9%,transparent); }
.dropdown-event-chat-item .dropdown-item-time { white-space:nowrap; }

/* Egységes globális popup méret és azonos eszköztár minden beszélgetéstípushoz. */
.chat-popup.dx-event-chat-popup { width:350px; height:460px; max-height:calc(100vh - 28px); }
.chat-popup.dx-event-chat-popup .dx-event-popup-messages { flex:1; min-height:0; overflow-y:auto; padding:12px 10px; }
.dx-event-popup-form { flex:0 0 auto; padding:8px; border-top:1px solid rgba(216,170,50,.25); background:rgba(5,6,7,.96); }
.dx-event-input-row { display:flex; align-items:flex-end; gap:6px; }
.dx-event-input-row .chat-tool-btn,.dx-event-input-row .chat-send-btn { flex:0 0 36px; width:36px; height:36px; display:grid; place-items:center; }
.dx-event-chat-input { flex:1; min-width:0; max-height:100px; min-height:36px; resize:none; border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:9px 10px; color:var(--theme-text,#eee); background:#08090a; font:inherit; }
.dx-event-chat-input:focus { outline:1px solid var(--color-gold,#d8aa32); }
.dx-event-popup-message { display:flex; align-items:flex-end; gap:7px; margin:10px 0; max-width:100%; }
.dx-event-popup-message.is-mine { flex-direction:row-reverse; }
.dx-event-avatar-trigger { flex:0 0 30px; width:30px; height:30px; border:1px solid var(--color-gold,#d8aa32); border-radius:50%; padding:0; background:#151719; overflow:hidden; cursor:pointer; }
.dx-event-message-avatar { width:100%; height:100%; display:block; object-fit:cover; border-radius:50%; }
.dx-event-message-body { position:relative; min-width:0; max-width:78%; padding:9px 11px 7px; border:1px solid #2c3034; border-radius:13px; background:#191c20; color:#e7e7e7; overflow-wrap:anywhere; }
.dx-event-popup-message.is-mine .dx-event-message-body { background:#302b1f; border-color:#49402a; }
.dx-event-message-text { margin:0 0 5px; white-space:pre-wrap; }
.dx-event-message-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:5px; color:#9299a2; font-size:10px; }
.dx-event-message-actions { display:flex; align-items:center; gap:3px; opacity:0; transition:opacity .15s ease; }
.dx-event-popup-message:hover .dx-event-message-actions,.dx-event-popup-message:focus-within .dx-event-message-actions { opacity:1; }
.dx-event-message-actions button { width:22px; height:22px; display:grid; place-items:center; border:1px solid #34383d; border-radius:6px; background:#101214; color:#d8aa32; cursor:pointer; }
.dx-event-message-actions svg { width:13px; height:13px; }
.dx-event-attachment { display:block; margin-top:5px; max-width:220px; }
.dx-event-attachment img { display:block; max-width:100%; max-height:190px; border-radius:8px; object-fit:contain; }
.dx-event-edited-label,.dx-event-deleted-label { display:block; color:#9ca3af; font-size:10px; font-style:italic; }
.dx-event-deleted-label { margin:0; }
.dx-event-reply-quote { padding:5px 7px; margin-bottom:6px; border-left:2px solid var(--color-gold,#d8aa32); background:rgba(216,170,50,.08); border-radius:4px; color:#bfc4cb; font-size:11px; }
.dx-event-reply-context { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:7px; padding:6px 8px; border-left:2px solid var(--color-gold,#d8aa32); background:#17191b; color:#bfc4cb; font-size:11px; }
.dx-event-reply-context[hidden],.dx-event-file-preview[hidden] { display:none; }
.dx-event-reply-context button,.dx-event-file-preview button { border:0; background:transparent; color:#d8aa32; font-size:18px; cursor:pointer; }
.dx-event-file-preview { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:4px 8px; margin-bottom:6px; color:#bfc4cb; font-size:11px; }
.dx-event-reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.dx-event-reaction-chip { border:1px solid rgba(216,170,50,.35); border-radius:12px; padding:2px 6px; background:#17191b; color:#eee; font-size:11px; cursor:pointer; }
.dx-event-emoji-menu { position:fixed; z-index:2147483000; display:flex; flex-wrap:wrap; gap:4px; width:220px; padding:8px; border:1px solid rgba(216,170,50,.55); border-radius:12px; background:#111315; box-shadow:0 8px 28px #000b; }
.dx-event-emoji-menu button { width:34px; height:34px; border:0; border-radius:7px; background:#202327; font-size:20px; cursor:pointer; }
.dx-event-emoji-menu button:hover { background:#3b321d; }
.dx-chat-dock-unread { position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:10px; background:#d52d36; color:white; font-size:10px; line-height:17px; text-align:center; }
.dx-chat-dock-close { position:absolute; top:-5px; left:-5px; display:none; width:20px; height:20px; padding:0; border:1px solid #555; border-radius:50%; background:#222; color:#fff; cursor:pointer; }
.dx-chat-dock-avatar:hover .dx-chat-dock-close,.dx-chat-dock-avatar:focus-within .dx-chat-dock-close { display:grid; place-items:center; }
.dx-chat-dock-close svg { width:12px; height:12px; }
@media (max-width:700px) { .chat-popup.dx-event-chat-popup { display:none; } }

/* Event chat responsive polish shared with the global messenger design. */
.chat-popup.dx-event-chat-popup { width:370px; height:480px; }
.dx-event-message-body { position:relative; margin-bottom:8px; max-width:min(84%,300px); padding:11px 13px 9px; }
.dx-event-reactions { position:absolute; right:7px; bottom:-13px; z-index:3; display:flex; flex-wrap:wrap; gap:3px; margin:0; max-width:min(220px,80vw); }
.dx-event-popup-message:not(.is-mine) .dx-event-reactions { left:7px; right:auto; }
.dx-event-reaction-chip { display:inline-flex; align-items:center; min-height:22px; padding:2px 7px; border:1px solid rgba(216,170,50,.55); border-radius:999px; background:linear-gradient(145deg,#24201a,#111315); box-shadow:0 3px 10px #0009; animation:dx-reaction-pop .24s cubic-bezier(.2,.8,.2,1.2); }
@keyframes dx-reaction-pop { from { opacity:0; transform:scale(.55) translateY(5px); } to { opacity:1; transform:scale(1) translateY(0); } }
@media (min-width:769px) { .chat-popup.dx-event-chat-popup { width:370px; height:480px; } }
@media (max-width:700px) {
  .chat-popup.dx-event-chat-popup { display:none; }
  #messages .event-message-item { max-width:94%; gap:8px; margin:14px 0; }
  #messages .event-message-bubble { max-width:calc(100vw - 92px); padding:11px 13px; margin-bottom:8px; }
  #messages .dx-event-message-actions { opacity:1; }
}


/* Final composer layout: compact reply preview above input, actions always at bubble bottom. */
.dx-event-popup-form { display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.dx-event-reply-context:not([hidden]) { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; padding:5px 8px; min-height:0; border-left:3px solid var(--color-gold,#d8aa32); border-radius:7px; background:rgba(216,170,50,.07); font-size:.66rem; }
.dx-event-reply-context > span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.dx-event-file-preview { margin:0; }
.dx-event-input-row { width:100%; }
.dx-event-message-body { display:flex; flex-direction:column; }
.dx-event-message-meta { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.dx-event-message-meta time { order:0; margin-right:auto; }
.dx-event-message-actions { order:1; flex:0 0 100%; justify-content:flex-end; opacity:1; }
.dx-event-message-actions button { width:25px; height:25px; }
@media (min-width:701px) {
 .chat-popup-wrapper { right:clamp(78px,5.5vw,104px); bottom:12px; gap:12px; align-items:flex-end; }
 .chat-popup.dx-event-chat-popup { width:clamp(340px,27vw,390px); height:min(490px,calc(100dvh - 24px)); max-height:calc(100dvh - 24px); }
 .dx-chat-minimized-dock { right:12px; bottom:12px; max-height:calc(100dvh - 24px); overflow-y:auto; padding:4px; }
}

/* A globális chat-akciókhoz igazított, áttetsző eseménychat ikonok. */
.dx-event-message-actions button {
  background: rgba(10, 11, 12, .14);
  border-color: rgba(216, 170, 50, .22);
  box-shadow: none;
  backdrop-filter: blur(5px);
}
.dx-event-message-actions button:hover {
  background: rgba(216, 170, 50, .12);
  border-color: rgba(216, 170, 50, .42);
}


/* DROPX EVENT CHAT PATCH 2026-10-20 — match private popup chat on desktop and PWA. */
.chat-popup.dx-event-chat-popup { box-sizing:border-box; min-width:0; }
.dx-event-popup-messages { min-width:0; }
.dx-event-popup-message { min-width:0; align-items:flex-end; }
.dx-event-message-body {
  box-sizing:border-box;
  min-width:0;
  max-width:min(84%,320px);
  margin-bottom:8px;
  padding:27px 12px 13px;
  overflow:visible;
  color:var(--theme-text,#f2f2f2);
  background:var(--theme-surface-raised,#191c20);
  border-color:var(--theme-border,rgba(255,255,255,.13));
}
.dx-event-popup-message.is-mine .dx-event-message-body {
  color:#211a0b;
  background:linear-gradient(145deg,rgba(225,190,103,.96),rgba(174,128,43,.96));
  border-color:rgba(255,223,151,.48);
}
.dx-event-message-text { color:inherit; text-shadow:none; overflow-wrap:anywhere; }
.dx-event-popup-message.is-mine .dx-event-message-text { color:#211a0b; }
.dx-event-message-meta { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.dx-event-message-meta time { order:0; flex:1 1 auto; min-width:35px; margin:0; }
.dx-event-message-actions { order:1; flex:0 1 auto; max-width:100%; flex-wrap:wrap; justify-content:flex-end; gap:4px; opacity:1; }
.dx-event-message-actions button {
  flex:0 0 26px; width:26px; height:26px; padding:0;
  background:rgba(8,9,10,.2); border-color:rgba(216,170,50,.3);
  backdrop-filter:blur(6px);
}
.dx-event-message-actions button svg { width:14px; height:14px; }
.dx-event-reactions {
  top:-13px; right:8px; bottom:auto; left:auto;
  display:flex; align-items:flex-start; gap:2px; max-width:90%;
  transform:rotate(-7deg); transform-origin:top right;
}
.dx-event-popup-message:not(.is-mine) .dx-event-reactions { left:8px; right:auto; transform:rotate(-7deg); transform-origin:top left; }
.dx-event-reaction-chip {
  display:inline-flex; align-items:flex-start; justify-content:center; gap:0;
  min-width:31px; min-height:30px; padding:2px 6px 3px;
  border:1px solid rgba(216,170,50,.46); border-radius:12px;
  background:rgba(20,19,16,.72); color:#fff7df;
  box-shadow:0 3px 9px rgba(0,0,0,.2); backdrop-filter:blur(7px);
  line-height:1; cursor:pointer;
}
.dx-event-reaction-emoji { font-size:22px; line-height:1.05; }
.dx-event-reaction-count { position:relative; top:-3px; margin-left:2px; font-size:12px; font-weight:800; line-height:1; }
.dx-event-reaction-chip:hover { transform:translateY(-2px) scale(1.04); }
.dx-event-reply-quote { overflow-wrap:anywhere; color:var(--theme-text-muted,#bfc4cb); }
.dx-event-popup-form { gap:6px; }
.dx-event-reply-context:not([hidden]) { display:flex; margin:0; padding:6px 9px; min-width:0; }
.dx-event-reply-context > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dx-event-input-row { min-width:0; }
.dx-event-chat-input { box-sizing:border-box; color:var(--theme-text,#f2f2f2); background:var(--theme-bg,#08090a); }
body.theme-light .dx-event-popup-message .dx-event-message-body,
body.light-theme .dx-event-popup-message .dx-event-message-body,
body.light-mode .dx-event-popup-message .dx-event-message-body,
body[data-theme="light"] .dx-event-popup-message .dx-event-message-body {
  background:linear-gradient(145deg,#fffaf0,#eee3ce);
  border-color:rgba(128,91,28,.22); color:#29231a;
}
body.theme-light .dx-event-popup-message.is-mine .dx-event-message-body,
body.light-theme .dx-event-popup-message.is-mine .dx-event-message-body,
body.light-mode .dx-event-popup-message.is-mine .dx-event-message-body,
body[data-theme="light"] .dx-event-popup-message.is-mine .dx-event-message-body {
  background:linear-gradient(145deg,#f4dfab,#e7c77f); color:#292016;
}
body.theme-light .dx-event-popup-message .dx-event-message-text,
body.light-theme .dx-event-popup-message .dx-event-message-text,
body.light-mode .dx-event-popup-message .dx-event-message-text,
body[data-theme="light"] .dx-event-popup-message .dx-event-message-text { color:inherit; }
@media (max-width:700px) {
  .chat-popup-wrapper > .chat-popup.dx-event-chat-popup {
    width:100%; min-width:0; max-width:100%;
    height:min(68dvh,570px); min-height:270px;
    border-radius:14px;
  }
  .dx-event-popup-message { max-width:100%; }
  .dx-event-message-body { max-width:min(84%,calc(100vw - 82px)); padding:25px 10px 13px; }
  .dx-event-message-actions { gap:3px; }
  .dx-event-message-actions button { flex-basis:25px; width:25px; height:25px; }
  .dx-event-reaction-emoji { font-size:21px; }
  .dx-event-reaction-count { font-size:12px; }
}


/* DROPX SHARED POPUP CHAT CORE — 2026-10-21 */
.chat-popup-wrapper > .chat-popup,
.chat-popup-wrapper > .chat-popup.dx-event-chat-popup {
  box-sizing:border-box;
  width:350px;
  height:460px;
  max-width:calc(100vw - 20px);
  max-height:calc(100dvh - 24px);
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.chat-popup.dx-event-chat-popup .dx-event-popup-messages { flex:1 1 auto; min-height:0; overflow-y:auto; }
.chat-popup.dx-event-chat-popup .dx-event-popup-form,
.chat-popup.dx-event-chat-popup .chat-popup-form { flex:0 0 auto; box-sizing:border-box; width:100%; padding:8px; }
.chat-popup.dx-event-chat-popup .dx-event-input-row,
.chat-popup.dx-event-chat-popup .input-with-tools { display:flex; align-items:center; flex-wrap:nowrap; gap:7px; min-width:0; width:100%; }
.chat-popup.dx-event-chat-popup .dx-event-chat-input,
.chat-popup.dx-event-chat-popup textarea { box-sizing:border-box; min-width:0; width:auto; flex:1 1 auto; height:39px; min-height:39px; max-height:100px; resize:none; color:var(--theme-text,#eee); background:var(--theme-input-bg,#0a0b0d); border:1px solid var(--theme-border,rgba(216,170,50,.28)); border-radius:12px; padding:10px 11px; font:inherit; }
.chat-popup.dx-event-chat-popup .dx-event-chat-input:focus,
.chat-popup.dx-event-chat-popup textarea:focus { outline:1px solid var(--color-gold,#d8aa32); }
/* Both chat types share readable bubbles and a single horizontal hover toolbar. */
.chat-popup .message-group .message-content,
.chat-popup .dx-event-message-body { color:var(--theme-text,#f0f0f0); background:rgba(25,27,30,.96); border:1px solid rgba(216,170,50,.52); border-radius:13px; padding:10px 12px; overflow-wrap:anywhere; }
.chat-popup .message-group.msg-right .message-content,
.chat-popup .dx-event-popup-message.is-mine .dx-event-message-body { color:#f5e6bd; background:linear-gradient(145deg,rgba(52,43,24,.97),rgba(25,23,18,.98)); border-color:rgba(216,170,50,.75); }
.chat-popup .message-group .message-content { display:block; min-width:40px; }
.chat-popup .message-group .message-content,
.chat-popup .dx-event-message-body p { white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-popup .message-group .message-actions,
.chat-popup .dx-event-message-actions { position:absolute; z-index:8; bottom:-13px; left:7px; right:auto; display:flex; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center; justify-content:flex-start; gap:4px; width:max-content; max-width:calc(100% - 12px); padding:3px; border:1px solid rgba(216,170,50,.25); border-radius:9px; background:rgba(7,8,9,.94); box-shadow:0 4px 12px rgba(0,0,0,.35); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .14s ease,visibility .14s ease; }
.chat-popup .message-group.msg-right .message-actions,
.chat-popup .dx-event-popup-message.is-mine .dx-event-message-actions { left:auto; right:7px; }
.chat-popup .message-group:hover .message-actions,
.chat-popup .message-group:focus-within .message-actions,
.chat-popup .dx-event-popup-message:hover .dx-event-message-actions,
.chat-popup .dx-event-popup-message:focus-within .dx-event-message-actions { opacity:1; visibility:visible; pointer-events:auto; }
.chat-popup .message-group .message-actions .chat-action-btn,
.chat-popup .dx-event-message-actions button { display:inline-flex; flex:0 0 27px; width:27px; height:27px; align-items:center; justify-content:center; padding:0; border:1px solid rgba(216,170,50,.24); border-radius:7px; background:#111214; color:var(--color-gold,#d8aa32); }
.chat-popup .dx-event-popup-message { position:relative; max-width:100%; min-width:0; margin:8px 0 15px; }
.chat-popup .dx-event-message-body { position:relative; min-width:0; max-width:min(84%,300px); margin:0 0 7px; padding:10px 12px 13px; }
.chat-popup .dx-event-message-text { margin:0 0 5px; color:inherit; }
.chat-popup .dx-event-message-meta { display:flex; align-items:center; justify-content:flex-start; gap:6px; flex-wrap:nowrap; margin-top:6px; }
.chat-popup .dx-event-message-meta time { margin-right:auto; }
.chat-popup .dx-event-reactions { position:absolute; top:-12px; right:8px; bottom:auto; left:auto; z-index:4; display:flex; gap:3px; max-width:90%; transform:rotate(-6deg); transform-origin:top right; }
.chat-popup .dx-event-popup-message:not(.is-mine) .dx-event-reactions { left:8px; right:auto; transform:rotate(6deg); transform-origin:top left; }
.chat-popup .dx-event-reaction-chip { display:inline-flex; align-items:center; gap:2px; border:1px solid rgba(216,170,50,.7); border-radius:999px; padding:2px 7px; background:rgba(8,9,10,.94); color:#fff; }
.chat-popup .dx-event-reaction-emoji { font-size:20px; line-height:1; }
.chat-popup .dx-event-reaction-count { color:#f0c64e; font-size:10px; }
.chat-popup .dx-event-message-body audio,
.chat-popup .dx-event-message-body video { display:block; width:min(100%,260px); max-width:100%; height:auto; border-radius:10px; background:#090909; }
.chat-popup .dx-event-message-body audio { height:38px; }
.chat-popup .dx-event-popup-context { flex:0 0 auto; }
.chat-popup .dx-event-popup-form .dx-event-input-row { display:flex; flex-direction:row; align-items:center; }
.chat-popup .dx-event-popup-form .dx-event-input-row > * { flex-shrink:0; }
.chat-popup .dx-event-popup-form .dx-event-chat-input { flex:1 1 auto; }
.chat-popup .dx-event-popup-form .dx-event-send-btn { display:none; }
.chat-popup .dx-event-popup-form .dx-event-input-row .chat-send-btn { flex:0 0 36px; width:36px; height:36px; }
.chat-popup .dx-chat-voice-tool { position:relative; }
.chat-popup .dx-chat-voice-tool.is-recording { color:#ff6262; border-color:#ff6262; animation:dxVoicePulse 1.2s infinite; }
.chat-popup .dx-chat-record-status { flex:0 0 auto; max-width:105px; color:var(--theme-text-muted,#9b9b9b); font-size:9px; line-height:1.2; }
@keyframes dxVoicePulse { 50% { box-shadow:0 0 0 4px rgba(255,70,70,.12); } }
@media(max-width:700px) {
  .chat-popup-wrapper > .chat-popup,
  .chat-popup-wrapper > .chat-popup.dx-event-chat-popup { display:none; }
  .chat-popup .message-group .message-actions,
  .chat-popup .dx-event-message-actions { opacity:1; visibility:visible; pointer-events:auto; }
}

.dx-chat-audio-player{display:block;width:min(100%,260px);height:38px;margin-top:6px;border-radius:10px}.dx-chat-video-player{display:block;width:min(100%,260px);max-height:220px;margin-top:6px;border-radius:10px;background:#080808}

/* DROPX GLOBAL CHAT HEADER + LEGIBLE TECH GIF WORDMARK */
.chat-tool-btn.dx-chat-gif-button {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 28px; width:28px; min-width:28px; height:30px; padding:0;
  border:0; border-radius:0; background:transparent; box-shadow:none;
  color:var(--color-gold,#e0ad2d); opacity:.92;
}
.chat-tool-btn.dx-chat-gif-button span {
  display:block; font-family:'Orbitron','Rajdhani',system-ui,sans-serif;
  font-size:10px; line-height:1; font-weight:900; letter-spacing:-.45px;
  transform:scaleX(.96); text-shadow:0 0 7px rgba(224,173,45,.28);
}
.chat-tool-btn.dx-chat-gif-button:disabled { cursor:default; opacity:.92; }
.chat-popup-header { position:relative; }
.chat-popup-header .header-main-trigger { min-width:0; }
.dx-chat-header-menu {
  position:absolute; z-index:40; top:calc(100% + 5px); left:8px;
  display:flex; flex-direction:column; min-width:190px; max-width:min(260px,80vw);
  padding:5px; border:1px solid rgba(214,168,48,.48); border-radius:10px;
  background:rgba(10,11,13,.98); box-shadow:0 12px 32px rgba(0,0,0,.55);
}
.dx-chat-header-menu[hidden] { display:none !important; }
.dx-chat-header-menu a,.dx-chat-header-menu button {
  display:flex; align-items:center; gap:9px; width:100%; min-height:34px; box-sizing:border-box;
  padding:7px 9px; border:0; border-radius:6px; background:transparent;
  color:#e4e4e4; font-family:inherit; font-size:12px; font-weight:500; line-height:1.3; text-align:left; text-decoration:none; cursor:pointer;
}
.dx-chat-header-menu a:hover,.dx-chat-header-menu button:hover:not(:disabled) { background:rgba(214,168,48,.12); color:#efc34c; }
.dx-chat-header-menu button:disabled { opacity:.42; cursor:not-allowed; }
.dx-chat-header-menu svg { width:15px; height:15px; flex:0 0 15px; color:#d9ad39; }
.dx-event-popup-title { display:flex; align-items:center; gap:7px; flex:1; min-width:0; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.dx-chat-title-chevron { width:12px; height:12px; flex:0 0 12px; opacity:.75; }
.dx-event-call-disabled { opacity:.42; cursor:not-allowed !important; }
.dx-chat-members-panel {
  position:absolute; z-index:45; top:57px; left:8px; width:min(280px,calc(100% - 16px));
  max-height:min(330px,calc(100% - 72px)); display:flex; flex-direction:column;
  overflow:hidden; border:1px solid rgba(214,168,48,.48); border-radius:11px;
  background:#0b0c0e; color:#eee; box-shadow:0 14px 35px #000b;
}
.dx-chat-members-panel-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #282828; color:#e6b83f; font-size:12px; }
.dx-chat-members-panel-head button { width:26px; height:26px; border:0; background:transparent; color:#f66; font-size:21px; cursor:pointer; }
.dx-chat-members-list { overflow:auto; padding:5px; }
.dx-chat-member-row { display:flex; align-items:center; gap:9px; padding:7px; border-radius:7px; color:#e5e5e5; text-decoration:none; font-size:12px; }
.dx-chat-member-row:hover { background:#1a1a1a; }
.dx-chat-member-row img { width:30px; height:30px; border-radius:50%; object-fit:cover; border:1px solid rgba(214,168,48,.55); }
.dx-chat-members-list p { margin:10px; color:#999; font-size:12px; }

/* DROPX GLOBAL CHAT CONTROL LAYER — shared by private/group/event popups */
.chat-popup .chat-popup-header .header-actions { display:flex; flex:0 0 auto; align-items:center; gap:3px; }
.chat-popup .chat-popup-header .header-actions .chat-act-btn { display:inline-flex !important; flex:0 0 31px; width:31px; min-width:31px; height:31px; align-items:center; justify-content:center; padding:0; border:0; border-radius:7px; background:transparent; color:#c9cbd0; box-shadow:none; opacity:1; }
.chat-popup .chat-popup-header .header-actions .chat-act-btn:hover:not(:disabled) { color:#efc34c; background:rgba(216,170,50,.10); }
.chat-popup .chat-popup-header .header-actions .chat-act-btn svg { width:17px; height:17px; display:block; }
.chat-popup .chat-popup-header .header-actions .dx-event-call-disabled { opacity:.32 !important; }
.chat-popup .header-main-trigger { cursor:pointer; }
.chat-popup .header-dropdown.dx-chat-header-menu { z-index:80; }
.chat-popup .dx-chat-header-menu .is-danger { color:#ff7777; }
.chat-popup .dx-chat-composer { display:flex; align-items:center; gap:5px; min-width:0; width:100%; box-sizing:border-box; }
.chat-popup .dx-chat-composer > .chat-tool-btn,
.chat-popup .dx-chat-composer > .reaction-main-toggle-btn,
.chat-popup .dx-chat-composer > .chat-send-btn { flex:0 0 31px; width:31px; min-width:31px; height:34px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.chat-popup .dx-chat-composer > .dx-chat-record-status { display:none; }
.chat-popup .dx-chat-composer > .dx-chat-composer-input,
.chat-popup .dx-chat-composer > textarea { flex:1 1 60px; width:60px; min-width:0; max-width:100%; min-height:36px; max-height:96px; height:36px; box-sizing:border-box; resize:none; overflow-y:auto; line-height:18px; padding:8px 11px; border-radius:18px; }
.chat-popup .dx-chat-composer .dx-chat-gif-button { font-family:'Orbitron','Rajdhani',system-ui,sans-serif; font-size:10px; line-height:1; font-weight:900; letter-spacing:-.35px; color:#e6b83f; opacity:.95; }
.chat-popup .dx-chat-composer .dx-chat-gif-button span { font:inherit; }
.chat-popup .dx-chat-composer .dx-chat-submit { display:none; }
.chat-popup .dx-chat-composer .dx-chat-emoji-send { border:0; background:transparent; box-shadow:none; color:#e6b83f; font-size:21px; }
.chat-popup .dx-chat-composer .dx-chat-emoji-send:hover { background:rgba(216,170,50,.1); }
.chat-popup .dx-chat-composer .chat-tool-btn { border:0; background:transparent; box-shadow:none; color:#e6b83f; }
.chat-popup .dx-chat-composer .chat-tool-btn svg,
.chat-popup .dx-chat-composer .chat-tool-btn i { width:17px; height:17px; }
.chat-popup .dx-chat-composer .chat-tool-btn:hover:not(:disabled) { background:rgba(216,170,50,.09); }
.dx-chat-invite-form { display:flex; gap:6px; padding:8px; border-top:1px solid #272727; }
.dx-chat-invite-form input { flex:1; min-width:0; width:auto; height:32px; padding:6px 9px; border:1px solid #51421f; border-radius:7px; background:#101113; color:#eee; }
.dx-chat-invite-form button,.dx-chat-remove-member { display:inline-flex; flex:0 0 30px; width:30px; height:30px; align-items:center; justify-content:center; padding:0; border:1px solid #5e481a; border-radius:7px; background:transparent; color:#e6b83f; cursor:pointer; }
.dx-chat-remove-member { color:#ff6262 !important; border-color:#7c3030 !important; margin-left:auto; font-size:20px; }
.dx-chat-member-row > a { display:flex; align-items:center; gap:9px; min-width:0; flex:1; color:inherit; text-decoration:none; }
.dx-chat-confirm-overlay { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72); backdrop-filter:blur(5px); }
.dx-chat-confirm-dialog { width:min(420px,100%); padding:22px; border:1px solid rgba(214,168,48,.65); border-radius:14px; background:#0b0c0e; color:#eee; box-shadow:0 20px 70px #000b; }
.dx-chat-confirm-dialog h3 { margin:0 0 9px; color:#e6b83f; font-size:18px; }
.dx-chat-confirm-dialog p { margin:0; color:#c5c5c5; line-height:1.5; }
.dx-chat-confirm-dialog > div { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; }
.dx-chat-confirm-dialog button { width:auto; min-width:90px; padding:9px 13px; border:1px solid #5a4a24; border-radius:8px; background:#151619; color:#eee; cursor:pointer; }
.dx-chat-confirm-dialog button[data-confirm] { background:#d8aa32; border-color:#d8aa32; color:#17120a; font-weight:700; }
@media (max-width:700px) {
 .chat-popup .dx-chat-composer .dx-chat-submit { display:inline-flex; }
 .chat-popup .dx-chat-composer .dx-chat-emoji-send { display:none; }
 .chat-popup .dx-chat-composer > .dx-chat-composer-input,.chat-popup .dx-chat-composer > textarea { max-height:96px; }
 .chat-popup .chat-popup-header .header-actions .chat-act-btn { flex-basis:28px; width:28px; min-width:28px; height:30px; }
}
.chat-popup .dx-chat-group-avatar { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; flex:0 0 34px; width:34px; height:34px; overflow:hidden; border:1px solid rgba(216,170,50,.8); border-radius:50%; background:#101114; }
.chat-popup .dx-chat-group-avatar img { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:cover; border:0; border-radius:0; }
.chat-popup.is-muted .header-name::after { content:' 🔕'; font-size:11px; opacity:.8; }


/* DropX categorized emoji/reaction chooser: viewport-centered with only a light blur. */
.dx-global-emoji-overlay{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(4,5,7,.10);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.dx-global-emoji-dialog{width:min(440px,calc(100vw - 28px));max-height:min(590px,calc(100dvh - 28px));display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(150deg,#111316,#070809);border:1px solid rgba(216,170,50,.68);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 22px rgba(216,170,50,.08);color:#f4f0e7}
.dx-global-emoji-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid rgba(216,170,50,.22);color:#e8bb43;font-weight:700}
.dx-global-emoji-dialog>header button{width:30px;height:30px;border:0;background:transparent;color:#ddd;font-size:25px;cursor:pointer}
.dx-global-emoji-tabs{display:flex;gap:6px;padding:10px;overflow-x:auto;border-bottom:1px solid rgba(255,255,255,.07)}
.dx-global-emoji-tabs button{flex:0 0 auto;padding:7px 10px;border:1px solid rgba(216,170,50,.16);border-radius:9px;background:#15171a;color:#b9b9b9;font:inherit;font-size:11px;cursor:pointer}
.dx-global-emoji-tabs button.is-active{background:rgba(216,170,50,.16);border-color:#d8aa32;color:#f3c64c}
.dx-global-emoji-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;padding:12px;overflow-y:auto}
.dx-global-emoji-grid button{display:flex;align-items:center;justify-content:center;min-width:0;aspect-ratio:1;border:1px solid transparent;border-radius:9px;background:transparent;font-size:25px;cursor:pointer}
.dx-global-emoji-grid button:hover,.dx-global-emoji-grid button.is-selected{background:rgba(216,170,50,.13);border-color:rgba(216,170,50,.65);transform:scale(1.04)}
.dx-profile-message-action{cursor:pointer}
@media(max-width:480px){.dx-global-emoji-dialog{width:calc(100vw - 22px);max-height:calc(100dvh - 22px)}.dx-global-emoji-grid{grid-template-columns:repeat(7,minmax(0,1fr));padding:9px;gap:4px}.dx-global-emoji-grid button{font-size:23px}.dx-global-emoji-tabs button{font-size:10px;padding:7px 8px}}


/* Global chat refinement: persistent group avatars in the minimized dock and readable composer controls. */
.dx-chat-dock-avatar-content { position:absolute; inset:0; display:block; overflow:hidden; border-radius:50%; }
.dx-chat-dock-avatar-content > img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.dx-chat-dock-avatar-content.is-group { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.dx-chat-dock-avatar-content.is-group > img { width:100%; height:100%; min-width:0; min-height:0; object-fit:cover; border-radius:0; }
.chat-popup .dx-chat-composer > .chat-tool-btn { flex-basis:34px; width:34px; min-width:34px; height:36px; }
.chat-popup .dx-chat-composer .chat-tool-btn svg,
.chat-popup .dx-chat-composer .chat-tool-btn i { width:19px; height:19px; }
.chat-popup .dx-chat-composer .dx-chat-gif-button { font-size:13px; font-weight:950; letter-spacing:-.15px; min-width:34px; text-shadow:0 0 7px rgba(230,184,63,.24); }
.chat-popup .dx-chat-composer > .reaction-main-toggle-btn { flex-basis:36px; width:36px; min-width:36px; height:38px; font-size:25px; line-height:1; }
.chat-popup .dx-chat-composer > .chat-send-btn { flex-basis:34px; width:34px; min-width:34px; height:36px; }
.dx-chat-group-settings-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:36px; padding:8px 11px; border:0; border-top:1px solid #272727; background:rgba(216,170,50,.07); color:#e6b83f; text-align:left; font:inherit; font-size:12px; cursor:pointer; }
.dx-chat-group-settings-toggle:hover { background:rgba(216,170,50,.13); }
.dx-chat-group-profile-form { display:flex; flex-direction:column; gap:8px; padding:10px; border-top:1px solid #272727; }
.dx-chat-group-profile-form[hidden] { display:none !important; }
.dx-chat-group-profile-form input[name="group_name"] { box-sizing:border-box; width:100%; min-width:0; height:35px; padding:7px 9px; border:1px solid #51421f; border-radius:7px; background:#101113; color:#eee; }
.dx-chat-group-avatar-picker { display:flex; flex-direction:column; gap:6px; color:#aaa; font-size:11px; }
.dx-chat-group-avatar-picker input { max-width:100%; color:#ccc; font:inherit; }
.dx-chat-group-profile-form > button[type="submit"] { min-height:32px; border:1px solid #6e541c; border-radius:7px; background:#d8aa32; color:#17120a; font-weight:700; cursor:pointer; }
@media(max-width:700px) {
 .chat-popup .dx-chat-composer > .chat-tool-btn { flex-basis:31px; width:31px; min-width:31px; }
 .chat-popup .dx-chat-composer .dx-chat-gif-button { font-size:12px; }
 .chat-popup .dx-chat-composer > .reaction-main-toggle-btn { font-size:24px; }
}
.dx-chat-header-menu button[hidden] { display:none; }


/* Final composer spacing and large standalone emoji messages. */
.chat-popup .dx-chat-composer { gap:1px; }
.chat-popup .dx-chat-composer > .chat-tool-btn { margin-right:0; }
.chat-popup .dx-chat-composer .dx-chat-gif-button { font-size:13px; min-width:32px; }
.chat-popup .dx-chat-composer > .reaction-main-toggle-btn { margin-left:1px; }
.message-group.dx-emoji-only-message .msg-text,
.message-item.dx-emoji-only-message .message-content { font-size:150%; line-height:1.2; }
.message-group.dx-emoji-only-message .msg-text,
.message-item.dx-emoji-only-message .message-content { min-width:0; }
.message-group.dx-emoji-only-message .msg-bubble,
.message-item.dx-emoji-only-message .message-bubble { padding-top:8px; padding-bottom:8px; }

/* Final fix: minimized popup is fully hidden, but its dock avatar remains until close. */
.chat-popup.minimized,
.chat-popup.dx-event-chat-popup.dx-event-popup-docked {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Dock icons represent all open chats (open or minimized), not just minimized chats. */
.dx-chat-minimized-dock { display:flex !important; }
@media (max-width:700px) {
  .dx-chat-minimized-dock { display:flex !important; }
}


/* DropX composer refinement: tighter, clearer controls and a prominent mobile send action. */
.chat-popup .dx-chat-composer { gap:0; }
.chat-popup .dx-chat-composer > .chat-tool-btn { flex-basis:32px; width:32px; min-width:32px; height:36px; }
.chat-popup .dx-chat-composer .chat-tool-btn svg,
.chat-popup .dx-chat-composer .chat-tool-btn i { width:21px; height:21px; }
.chat-popup .dx-chat-composer .dx-chat-gif-button { flex-basis:32px; width:32px; min-width:32px; font-size:14px; letter-spacing:-.1px; }
.chat-popup .dx-chat-composer > .reaction-main-toggle-btn { flex-basis:39px; width:39px; min-width:39px; height:39px; font-size:28px; line-height:1; }
.chat-popup .dx-chat-composer > .dx-chat-composer-input,
.chat-popup .dx-chat-composer > textarea { border-color:rgba(216,170,50,.42); font-size:13px; }
.chat-popup .dx-chat-composer > .dx-chat-composer-input:focus,
.chat-popup .dx-chat-composer > textarea:focus { border-color:#d8aa32; box-shadow:0 0 0 2px rgba(216,170,50,.13),0 0 12px rgba(216,170,50,.12); }
.dx-chat-member-message { display:inline-flex; flex:0 0 30px; width:30px; height:30px; align-items:center; justify-content:center; padding:0; border:1px solid rgba(216,170,50,.4); border-radius:7px; background:rgba(216,170,50,.06); color:#e6b83f; cursor:pointer; }
.dx-chat-member-message:hover { border-color:#d8aa32; background:rgba(216,170,50,.17); color:#ffd45e; }
.dx-chat-member-message svg { display:block; width:16px; height:16px; }
@media(max-width:700px) {
 .chat-popup .dx-chat-composer > .chat-tool-btn { flex-basis:30px; width:30px; min-width:30px; }
 .chat-popup .dx-chat-composer .chat-tool-btn svg,
 .chat-popup .dx-chat-composer .chat-tool-btn i { width:20px; height:20px; }
 .chat-popup .dx-chat-composer .dx-chat-gif-button { flex-basis:30px; width:30px; min-width:30px; font-size:13px; }
 .chat-popup .dx-chat-composer > .reaction-main-toggle-btn { flex-basis:36px; width:36px; min-width:36px; height:38px; font-size:27px; }
 .chat-popup .dx-chat-composer .dx-chat-submit { flex:0 0 38px; width:38px; min-width:38px; height:38px; border:1px solid #e0b43c; border-radius:50%; background:linear-gradient(145deg,#f2c84b,#c89419); color:#17120a; box-shadow:0 3px 12px rgba(216,170,50,.22); }
 .chat-popup .dx-chat-composer .dx-chat-submit svg,
 .chat-popup .dx-chat-composer .dx-chat-submit i { width:19px; height:19px; }
 .dx-chat-member-message { flex-basis:28px; width:28px; height:28px; }
}

/* Persistent quick action under chat heads + Messenger-like group creation panel. */
.dx-chat-create-group-button {
  display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; padding:0;
  border:1px solid rgba(216,170,50,.8); border-radius:50%; color:#f0c34b;
  background:linear-gradient(145deg,#211b0c,#0c0d0f); box-shadow:0 3px 12px #0009;
  cursor:pointer; transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.dx-chat-create-group-button svg { width:22px; height:22px; }
.dx-chat-create-group-button:hover { transform:translateX(-3px); background:#2a210d; box-shadow:0 0 0 2px #d8aa3233,0 4px 16px #000b; }
.dx-chat-create-group-panel {
  position:fixed; right:78px; bottom:82px; z-index:2147483000; width:min(360px,calc(100vw - 24px));
  max-height:min(560px,calc(100dvh - 32px)); display:flex; flex-direction:column; overflow:hidden;
  color:#e7e7e7; background:#111214; border:1px solid rgba(216,170,50,.75); border-radius:15px;
  box-shadow:0 16px 48px #000c; font:inherit;
}
.dx-chat-create-group-head { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 14px; border-bottom:1px solid #302a1b; color:#e9bb3d; }
.dx-chat-create-group-head strong { font-size:14px; font-weight:800; }
.dx-chat-create-group-head button { width:30px; height:30px; border:0; background:transparent; color:#d9d9d9; font-size:24px; cursor:pointer; }
.dx-chat-create-group-form { display:flex; flex-direction:column; gap:11px; padding:13px; min-height:0; overflow:auto; }
.dx-chat-create-field { display:flex; flex-direction:column; gap:6px; color:#9b9b9b; font-size:11px; }
.dx-chat-create-field input:not([type=file]) { width:100%; min-height:38px; padding:8px 10px; color:#f4f4f4; background:#08090a; border:1px solid #493a19; border-radius:8px; outline:none; }
.dx-chat-create-field input[type=file] { width:100%; max-width:100%; padding:7px; color:#c5c5c5; background:#090a0b; border:1px solid #302f2c; border-radius:8px; font-size:11px; }
.dx-chat-create-search { display:flex; gap:6px; }
.dx-chat-create-search input { min-width:0; flex:1; padding:9px 10px; color:#f4f4f4; background:#08090a; border:1px solid #383838; border-radius:8px; }
.dx-chat-create-search button,.dx-chat-create-submit { border:1px solid #e1b536; border-radius:8px; padding:8px 11px; background:#d9aa32; color:#15110a; font-weight:800; cursor:pointer; }
.dx-chat-create-results { display:flex; flex-direction:column; gap:5px; max-height:170px; overflow:auto; }
.dx-chat-create-results p { margin:0; padding:8px 4px; color:#969ba2; font-size:12px; }
.dx-chat-create-results p.is-error { color:#ff7777; }
.dx-chat-create-result { display:flex; align-items:center; gap:9px; min-height:42px; padding:5px 8px; text-align:left; color:#e5e5e5; background:#1b1c1f; border:1px solid #2c2d30; border-radius:8px; cursor:pointer; }
.dx-chat-create-result img,.dx-chat-create-chip img { width:29px; height:29px; border-radius:50%; object-fit:cover; }
.dx-chat-create-result span { flex:1; font-size:12px; font-weight:700; }
.dx-chat-create-result b { color:#e9b832; font-size:17px; }
.dx-chat-create-result:disabled { opacity:.55; cursor:default; }
.dx-chat-create-selected { padding-top:8px; border-top:1px solid #302a1b; }
.dx-chat-create-selected strong { display:block; margin-bottom:7px; color:#d9b347; font-size:11px; }
.dx-chat-create-chips { display:flex; flex-wrap:wrap; gap:6px; }
.dx-chat-create-chip { display:flex; align-items:center; gap:6px; max-width:100%; padding:4px 7px 4px 4px; color:#e9e9e9; background:#252321; border:1px solid #4c3c1b; border-radius:999px; cursor:pointer; }
.dx-chat-create-chip span { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.dx-chat-create-chip b { color:#ff6262; font-size:15px; }
.dx-chat-create-submit:disabled { opacity:.4; cursor:not-allowed; }
@media(max-width:700px) {
  .dx-chat-minimized-dock { display:flex !important; right:8px; bottom:calc(var(--app-nav-height-mobile,54px) + env(safe-area-inset-bottom,0px) + 10px); gap:7px; max-height:65dvh; }
  .dx-chat-create-group-button { width:43px; height:43px; flex-basis:43px; }
  .dx-chat-create-group-panel { right:8px; bottom:calc(var(--app-nav-height-mobile,54px) + env(safe-area-inset-bottom,0px) + 66px); width:min(360px,calc(100vw - 16px)); max-height:calc(100dvh - var(--app-nav-height-mobile,54px) - 88px); }
}


/* DROPX FINAL REACTION FIX 2026-10-22
   Keep every private/group reaction pinned to the bubble's top-right corner,
   and ensure the categorized emoji chooser is above every floating chat. */
html body .chat-popup-wrapper { z-index: 2147481000; }
html body .dx-chat-minimized-dock { z-index: 2147481100; }
html body .dx-global-emoji-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
html body .dx-global-emoji-overlay .dx-global-emoji-dialog {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
/* Private and group messages: the reaction tray is anchored to the bubble itself,
   never to the timestamp row. All senders use the same upper-right position. */
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group .msg-bubble,
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group .msg-bubble-wrapper,
html body #message-list .message-item .message-bubble {
  position: relative;
  overflow: visible;
}
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group .msg-bubble .msg-time-and-reactions,
html body #message-list .message-item .message-bubble .message-time-and-reactions {
  position: static;
  overflow: visible;
}
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group .msg-bubble .message-reactions-container:not(:empty),
html body #message-list .message-item .message-bubble .message-reactions-container:not(:empty) {
  position: absolute;
  top: -13px;
  right: 8px;
  bottom: auto;
  left: auto;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 5px;
  width: max-content;
  max-width: min(82%, 240px);
  margin: 0;
  padding: 3px 7px;
  border: 1px solid rgba(216,170,50,.68);
  border-radius: 999px;
  background: rgba(8,9,10,.96);
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
  transform: rotate(-5deg);
  transform-origin: top right;
}
/* Override the legacy left-aligned reaction rule: reactions intentionally stay top-right. */
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.msg-left .msg-bubble .message-reactions-container:not(:empty) {
  top: -13px;
  right: 8px;
  bottom: auto;
  left: auto;
  transform: rotate(-5deg);
  transform-origin: top right;
}
html body .chat-popup-wrapper .chat-popup .message-reactions-container .reaction-count {
  display: inline-flex;
  align-items: flex-start;
  gap: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body .chat-popup-wrapper .chat-popup .message-reactions-container .reaction-count + .reaction-count {
  padding-left: 4px;
  border-left: 1px solid rgba(216,170,50,.25);
}
html body .chat-popup-wrapper .chat-popup .message-reactions-container .reaction-emoji { font-size: 20px; line-height: 1.05; }
/* Event chat already has its own message-body anchor; unify the reaction tray to top-right. */
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-popup-message .dx-event-message-body { position: relative; overflow: visible; }
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-popup-message .dx-event-reactions {
  position: absolute;
  top: -13px;
  right: 8px;
  bottom: auto;
  left: auto;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 5px;
  width: max-content;
  max-width: min(82%, 240px);
  margin: 0;
  padding: 3px 7px;
  border: 1px solid rgba(216,170,50,.68);
  border-radius: 999px;
  background: rgba(8,9,10,.96);
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
  transform: rotate(-5deg);
  transform-origin: top right;
}
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-reaction-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff6df;
}
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-reaction-chip + .dx-event-reaction-chip {
  padding-left: 4px;
  border-left: 1px solid rgba(216,170,50,.25);
}
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-reaction-emoji { font-size: 20px; line-height: 1.05; }
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-reaction-count { position: relative; top: -3px; color: #f0c64e; font-size: 10px; font-weight: 800; }
@media (max-width: 700px) {
  html body .chat-popup-wrapper .chat-popup .message-reactions-container:not(:empty),
  html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-popup-message .dx-event-reactions { max-width: 86%; }
}


/* DROPX FINAL CHAT PICKER + EVENT HOVER TOOLBAR FIX — 2026-10-22 */
/* Always show message action controls as one legible floating row outside the event bubble. */
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-popup-message { position:relative; overflow:visible; padding-bottom:9px; }
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-message-body { position:relative; overflow:visible; padding-bottom:22px; }
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-message-meta { display:block; position:static; margin:0; min-height:0; overflow:visible; }
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-message-meta > time { display:block; margin-top:5px; }
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-message-actions {
  position:absolute !important; right:8px !important; left:auto !important; bottom:-13px !important; top:auto !important;
  z-index:2147482000 !important; display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  align-items:center !important; justify-content:flex-end !important; gap:4px !important; width:max-content !important;
  max-width:calc(100vw - 28px) !important; margin:0 !important; padding:4px !important;
  border:1px solid rgba(216,170,50,.58) !important; border-radius:10px !important;
  background:rgba(8,9,10,.98) !important; box-shadow:0 5px 16px rgba(0,0,0,.72) !important;
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-popup-message:hover .dx-event-message-actions,
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-popup-message:focus-within .dx-event-message-actions {
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
}
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-message-actions button {
  flex:0 0 29px !important; width:29px !important; min-width:29px !important; height:29px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important; border:1px solid rgba(216,170,50,.45) !important; border-radius:7px !important;
  background:#141414 !important; color:#e9b832 !important; box-shadow:none !important; backdrop-filter:none !important;
}
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-message-actions button:hover { background:#302611 !important; border-color:#e9b832 !important; }
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-message-actions button svg { width:15px !important; height:15px !important; }
/* Familiar quick reaction strip for event-message reactions; never use the categorized chooser here. */
html body .dx-event-quick-reaction-menu {
  position:fixed !important; z-index:2147483647 !important; isolation:isolate; display:flex; align-items:center; gap:5px;
  max-width:calc(100vw - 16px); padding:6px 8px; border:1px solid rgba(216,170,50,.72); border-radius:999px;
  background:rgba(8,9,10,.98); box-shadow:0 8px 26px rgba(0,0,0,.72); pointer-events:auto;
}
html body .dx-event-quick-reaction-menu button { flex:0 0 30px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; background:transparent; font-size:21px; cursor:pointer; }
html body .dx-event-quick-reaction-menu button:hover, html body .dx-event-quick-reaction-menu button:focus-visible { background:rgba(216,170,50,.18); outline:1px solid rgba(216,170,50,.65); }
/* The legacy private/group reaction palette is viewport-positioned: keep it above all chat wrappers. */
html body #globalReactionOptionsPopup { position:fixed !important; z-index:2147483647 !important; isolation:isolate; }
@media (max-width:700px) {
  html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-message-actions { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
  html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-message-actions button { flex-basis:27px !important; width:27px !important; min-width:27px !important; height:27px !important; }
  html body .dx-event-quick-reaction-menu { gap:2px; padding:5px 6px; }
  html body .dx-event-quick-reaction-menu button { flex-basis:27px; width:27px; height:27px; font-size:19px; }
}

/* DROPX EVENT CHAT MENU RECOVERY — scoped only to the event-chat dropdown. */
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .chat-popup-header .header-dropdown.dx-chat-header-menu:not([hidden]) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  top: calc(100% + 5px) !important;
  left: 8px !important;
  z-index: 2147483000 !important;
}
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .chat-popup-header .header-dropdown.dx-chat-header-menu[hidden] {
  display: none !important;
}

/* DROPX EVENT CHAT SENDER ALIGNMENT + STANDALONE QUICK REACTIONS — 2026-10-22 */
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-popup-message.is-mine {
  align-self: flex-end !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
}
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-popup-message:not(.is-mine) {
  align-self: flex-start !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
}
/* A one-tap quick reaction is a large standalone emoji, not a text bubble. */
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-popup-message.dx-event-standalone-reaction {
  align-items: center !important;
  min-height: 48px;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-standalone-reaction .dx-event-message-body {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  overflow: visible !important;
}
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-standalone-reaction .dx-event-standalone-reaction-emoji {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 1.5em !important;
  line-height: 1.15 !important;
  text-align: center !important;
}
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-standalone-reaction .dx-event-message-meta {
  display: none !important;
}

/* DROPX UNIFIED STANDALONE QUICK REACTIONS — private, group and event chats.
   Emoji-only sends are rendered without a message bubble and at one consistent size. */
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.dx-standalone-quick-reaction {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 54px !important;
  margin-block: 8px !important;
  overflow: visible !important;
}
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.dx-standalone-quick-reaction.msg-right {
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
}
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.dx-standalone-quick-reaction.msg-left {
  flex-direction: row !important;
  justify-content: flex-start !important;
}
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.dx-standalone-quick-reaction .msg-bubble-wrapper,
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.dx-standalone-quick-reaction .msg-bubble {
  display: contents !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.dx-standalone-quick-reaction .msg-text {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 42px !important;
  line-height: 1.15 !important;
  overflow: visible !important;
}
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.dx-standalone-quick-reaction .msg-author,
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.dx-standalone-quick-reaction .msg-time-and-reactions,
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.dx-standalone-quick-reaction .msg-time,
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.dx-standalone-quick-reaction .message-actions,
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.dx-standalone-quick-reaction .message-reactions-container {
  display: none !important;
}
html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.dx-standalone-quick-reaction .msg-avatar {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
html body .dx-event-quick-reaction-menu .dx-event-reaction-more {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(216,170,50,.72) !important;
  background: rgba(216,170,50,.12) !important;
  color: #f4c542 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}
@media (max-width:700px) {
  html body .chat-popup-wrapper .chat-popup .chat-popup-messages .message-group.dx-standalone-quick-reaction .msg-text { font-size: 42px !important; }
}

/* Shared reaction scale: event-chat quick reactions match private/group standalone emoji. */
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-popup-message.dx-event-standalone-reaction .dx-event-standalone-reaction-emoji {
  font-size: 42px !important;
  line-height: 1.15 !important;
}
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-popup-message.dx-event-standalone-reaction .dx-event-message-body {
  display: contents !important;
}
html body .chat-popup-wrapper .chat-popup.dx-event-chat-popup .dx-event-popup-message.dx-event-standalone-reaction .dx-event-message-avatar {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
}