/* ============================================================
   chatWS — chat.css
   All styles for the main chat interface:
   layout, room list, dropdowns, panels, mobile fixes.
   Replaces: chat.css + room.css + dropdown-menus.css +
             chat_panel.css + mobile_chat_fix.css + right_panel.css
============================================================ */


/* ========================================================
   ── CORE CHAT LAYOUT
======================================================== */

/* ==========================================================
   chatWS — FULL CHAT SYSTEM LAYOUT (MOBILE + DESKTOP FIXED)
========================================================== */

/* Prevent body scroll on mobile + fix 100vh sizing */
html,
body {
    margin: 0;
    padding: 0;

    /* Disable scrolling on page itself */
    

    /* Full height for mobile browsers */
    height: 100%;
    background: #050505;
    color: #fafafa;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Mobile viewport height fix */
:root {
    --vh: 1vh;

    /* Real height of the fixed bottom footer bar (.chat-footer-bar),
       including the device's home-indicator / gesture-bar safe area.
       Every rule that positions something "above the footer" or
       subtracts the footer's height from a layout box should use this
       variable instead of a bare 48px, so that on notched / gesture-nav
       phones the footer (and everything stacked above it) grows by the
       safe-area inset instead of sitting AT the very edge of the
       screen with content sliding out underneath the OS gesture bar. */
    --footer-h: calc(48px + env(safe-area-inset-bottom, 0px));
}

/* Android note: unlike iOS Safari, most Android Chrome builds report
   env(safe-area-inset-bottom) as a flat 0px even when the OS is
   drawing a gesture-navigation pill over the page — there is no
   platform signal to react to. So on phones (≤900px) --footer-h adds
   a fixed 14px cushion on top of whatever safe-area value (if any) the
   browser does report, instead of trusting env() alone. On iOS this
   just makes the already-correct inset a little more generous; on
   Android — where env() silently returns 0 — it's the only thing
   actually preventing the footer bar / input bar / PM panels from
   sitting flush against, and rendering underneath, that gesture pill. */
@media (max-width: 900px) {
    :root {
        --footer-h: calc(48px + env(safe-area-inset-bottom, 0px) + 14px);
    }
}

#app {
    height: calc(var(--vh) * 100);
    display: flex;
    flex-direction: column;
}

/* ==========================================================
   TOP BAR (FIXED)
========================================================== */
.topbar {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #050505;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    z-index: 100;
}

.brand {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 14px;
    color: #fefefe;
}

.top-user {
    font-size: 13px;
    opacity: 0.85;
}

/* ==========================================================
   MAIN AREA LAYOUT
========================================================== */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Views */
.view {
    padding: 12px;
}

.view.hidden {
    display: none !important;
}

/* Auth cards */
.card {
    background: rgba(21,21,21, 0.96);
    border-radius: 14px;
    padding: 16px 14px;
    margin-bottom: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================
   CHAT LAYOUT (LEFT BAR + CENTER CHAT)
========================================================== */

.layout-shell {
    display: flex;
    flex: 1;
    min-height: 0;
    height: 100%;
}

/* ============ LEFT ICON BAR ============ */
.side-left {
    width: 58px;
    min-width: 58px;
    background: #050505;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px;
    gap: 6px;
}

.side-left-logo {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff8a4a, #ffc857);
    margin-bottom: 4px;
}

.side-left-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e5e5e5;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, transform 0.06s ease;
}

.side-left-btn:hover,
.side-left-btn.active {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}

.side-left-btn:active {
    transform: scale(0.95);
}

.side-left-spacer {
    flex: 1;
}

/* ==========================================================
   CENTER CHAT COLUMN
========================================================== */
.chat-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;   /* anchors #emoPanel (position:absolute) so it floats over .messages
                              instead of stealing flex height from it — see .emo-panel below */

    /* Chat wrapper should NOT scroll */
    
}

/* Chat Room Header */
.chat-header {
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #050505;
    position: sticky;
    top: 56px;
    z-index: 50;
    flex-shrink: 0;
}

/* ==========================================================
   MESSAGES SCROLL AREA (THE CORRECT SCROLLABLE LAYER)
========================================================== */

.messages {
    flex: 1 1 auto;
    min-height: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    overflow-y: auto;
    padding: 10px 12px 6px;
}
.messages::before {
    content: "";
    flex: 1 1 auto;
}
/* Messages */
.message {
    display: flex;
    gap: 8px;
    padding-bottom: 10px;
    font-size: 13px;
}

.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
}

.message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-body {
    flex: 1;
    min-width: 0;
}

.message-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
    opacity: 0.85;
}

.message-user {
    font-weight: 600;
}

.message-rank {
    font-size: 10px;
    opacity: 0.75;
}

.message-time {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.6;
}

.message-text {
    font-size: 13px;
    word-wrap: break-word;
}

/* Typing indicator */
.typing {
    font-size: 11px;
    color: #a3a3a3;
    padding: 3px 14px 5px;
    min-height: 22px;           /* always reserves vertical space */
    flex-shrink: 0;
    opacity: 0.85;
    letter-spacing: .01em;
    /* removed: margin-top:auto — that pushed it behind chat-input */
}
.typing:empty { min-height: 0; padding-top: 0; padding-bottom: 0; }

/* ==========================================================
   FIXED INPUT BAR
========================================================== */
.chat-input {
    /* A normal (non-fixed, non-sticky) flex item: it's the last child of
       .chat (a flex column), so it always sits at the bottom of the chat
       column, right above the footer bar, with no risk of the message
       list scrolling underneath it — flex layout simply never lets
       siblings overlap. */
    flex-shrink: 0;
    position: static;

    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;

    background: rgba(10,10,10, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Input */
.chat-input input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    font-size: 13px;
    outline: none;
}

.chat-input input:focus {
    border-color: rgba(212, 178, 106, 0.95);
}

/* Send button */
.chat-input .btn {
    padding-inline: 14px;
    flex-shrink: 0;
}

/* Attachment Button */
.chat-attach-btn {
    background: none;
    border: none;
    color: #a3a3a3;
    font-size: 17px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    height: 32px;
    width: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-attach-btn:hover {
    color: #d4d4d4;
    background: rgba(255, 255, 255, 0.05);
}

/* Send button — FIX: #sendBtn only ever matched .chat-input .btn (a class
   the button never had; the markup uses class="send-btn"), so it rendered
   as an unstyled native <button> with none of the rules below. Styled here
   to match CodyChat's circular accent send button (system/box.php /
   css/main.css .send_btn) instead of the browser default. */
.send-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #b8964f, #957637);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .12s, opacity .12s;
}
.send-btn:hover  { transform: scale(1.06); }
.send-btn:active { transform: scale(.94); }
.send-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

/* ==========================================================
   QUOTE / REPLY BAR — shown above .chat-input while replying,
   mirrors CodyChat's #quote_controller (control/chat.php there):
   avatar + "Replying to <name>" + snippet + cancel (x).
   Toggled by setQuote()/resetQuote() in app_socket.js.
========================================================== */
.quote-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(184, 150, 79, 0.10);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid #b8964f;
}
.quote-bar.hidden { display: none; }
.quote-bar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.quote-bar-body { flex: 1; min-width: 0; }
.quote-bar-label {
    font-size: 11px;
    font-weight: 700;
    color: #e6cf98;
}
.quote-bar-label span { color: #e5e5e5; }
.quote-bar-snippet {
    font-size: 12px;
    color: #a3a3a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quote-bar-cancel {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #a3a3a3;
    cursor: pointer;
    font-size: 13px;
    padding: 6px;
    border-radius: 6px;
}
.quote-bar-cancel:hover { color: #f87171; background: rgba(255,255,255,.05); }

/* Mini quote card rendered inside a message that replies to another one
   (msg.quote — see renderQuoteCard() in app_socket.js). Mirrors CodyChat's
   .cqbox/.cquote (js/function_temp.js renderQuote()). */
.msg-quote {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #b8964f;
    border-radius: 6px;
    cursor: pointer;
    max-width: 100%;
}
.msg-quote:hover { background: rgba(255, 255, 255, 0.07); }
.msg-quote-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.msg-quote-body { min-width: 0; }
.msg-quote-name {
    font-size: 11px;
    font-weight: 700;
    color: #e6cf98;
}
.msg-quote-text {
    font-size: 12px;
    color: #a3a3a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-quote-body { flex: 1; }
.msg-quote-thumb,
.quote-bar-thumb {
    width: 44px;
    height: 32px;
    border-radius: 5px;
    object-fit: cover;
    flex-shrink: 0;
    background: #000;
}
.msg-quote { width: fit-content; max-width: min(100%, 420px); }
.msg-quote.quote-highlight {
    background: rgba(184, 150, 79, 0.25);
    transition: background .15s;
}

/* @mention tags — highlighted + clickable (mentionClick() in app_socket.js),
   instead of inert "@username" text. Extra emphasis when it mentions you,
   matching CodyChat's .my_notice (js/function_temp.js myNotice()). */
.mention {
    color: #d4b26a;
    font-weight: 700;
    cursor: pointer;
    border-radius: 4px;
    padding: 0 2px;
}
.mention:hover { background: rgba(212, 178, 106, 0.15); text-decoration: underline; }
.mention.mention-self {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
}

/* Username in a message — click inserts an @mention into the composer
   (see the .message-user click handler in app_socket.js). */
.message-user { cursor: pointer; }
.message-user:hover { text-decoration: underline; }

/* ==========================================================
   (REMAINDER OF YOUR CSS: FULL, UNCHANGED)
========================================================== */

/* ... YOUR ENTIRE CSS EXACTLY AS PROVIDED ... */
/* I did not remove or modify ANYTHING below this line */
/* =========================================================== */

.list-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.list-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.list-item.clickable {
    cursor: pointer;
}

.list-item.clickable:hover {
    background: rgba(255, 255, 255, 0.05);
}

.list-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;     /* Makes the image round */
            /* Crops anything outside the circle */
    flex-shrink: 0;          /* Prevents shrinking in flex layouts */
    background: #111;        /* Optional fallback background */
}

.list-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;     /* Makes the image round */
            /* Crops anything outside the circle */
    flex-shrink: 0;          /* Prevents shrinking in flex layouts */
    background: #111;        /* Optional fallback background */
}

.list-name {
    font-size: 13px;
}

.list-rank {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.75;
}

.hidden {
    display: none !important;
}

/* NOTE: .layout-shell / .chat-center no longer need a hand-calculated
   height that subtracts the topbar and footer-bar heights. The footer
   bar is now a normal flex sibling of .main inside #app (see
   body_end.php + the "Lives as the LAST flex child of #app" note on
   .chat-footer-bar above), and .main / .layout-shell / .chat-center /
   .chat are all `flex: 1; min-height: 0;` — so they simply fill
   whatever space is left over after the topbar and footer bar take
   their own height, automatically, on every screen size. This used to
   be done with several separate calc(var(--vh)*100 - 56px - var(--footer-h))
   rules spread across chat.css AND responsive.css (which loads last and
   had its own copy that forgot to subtract the footer bar at all,
   silently overriding the correct one here) — any time those got out of
   sync, content rendered behind the fixed bars. Flex layout removes the
   need for that arithmetic entirely. */

.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.top-avatar-btn {
    background: transparent;
    border: none;
    cursor: pointer;
}

.top-avatar-img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: transform .15s, opacity .15s;
}

.top-avatar-btn:hover .top-avatar-img {
    transform: scale(1.07);
    opacity: .9;
}

@media(max-width:600px) {
    .top-avatar-img {
        width: 30px;
        height: 30px;
    }
}

.top-user {
    font-size: .8rem;
    opacity: .85;
}

/* ==========================================================
   POPUPS (unchanged)
========================================================== */
.popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.popup.hidden {
    display: none;
}

.popup-content {
    background: #141414;
    padding: 20px;
    width: 320px;
    border-radius: 10px;
    border: 1px solid #303030;
}

#userInfoPopup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#userInfoPopup.visible {
    display: flex;
}

#userInfoPopup .popupContent {
    background: #1a1a1a;
    padding: 20px;
    width: 320px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
    animation: popupFade .2s ease-out;
}

@keyframes popupFade {
    from {
        opacity: 0;
        transform: scale(.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
.msg_avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;     /* Makes the image round */
            /* Crops anything outside the circle */
    flex-shrink: 0;          /* Prevents shrinking in flex layouts */
    background: #111;        /* Optional fallback background */
}

.msg_avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* Ensures proper cropping */
    display: block;
}

.popupAvatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-bottom: 12px;
    object-fit: cover;
}

#userInfoPopup .btn {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    background: #222222;
    border-radius: 6px;
}

#userInfoPopup .btn:hover {
    background: #2c2c2c;
}

.closeBtn {
    background: #822;
}

.closeBtn:hover {
    background: #a33;
}

/* ==========================================================
   PROFILE BOX
========================================================== */

#profileViewBox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 40px;
    z-index: 10000;
}

#profileViewBox.visible {
    display: flex;
}

.profileBanner {
    width: 100%;
    height: 180px;
    
    border-radius: 10px 10px 0 0;
}

.profileBanner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profileBoxInner {
    background: #242424;
    width: 420px;
    max-width: 95%;
    border-radius: 0 0 14px 14px;
    padding-bottom: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    animation: boxFade .25s ease-out;
    text-align: center;
}

@keyframes boxFade {
    from {
        opacity: 0;
        transform: scale(.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.boxAvatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin-top: -55px;
    border: 4px solid #242424;
    object-fit: cover;
}

.boxUsername {
    font-size: 1.5rem;
    font-weight: 700;
}

.boxRank {
    opacity: .8;
    margin-bottom: 5px;
}

.boxGender {
    opacity: .8;
    margin-bottom: 15px;
}

.boxBio {
    opacity: .9;
    padding: 0 20px;
    margin-bottom: 20px;
}

.boxLastActive {
    font-size: .9rem;
    opacity: .7;
    margin-bottom: 20px;
}

.boxControls .btn {
    width: 85%;
    margin: 8px auto;
}

/* ==========================================================
   MODAL
========================================================== */
.modalBox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    z-index: 99999;
}

.modalBox.visible {
    display: flex;
}

.modalContent {
    width: 320px;
    padding: 20px;
    background: #1b1b1b;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    animation: modalFade .2s ease-out;
}

@keyframes modalFade {
    from {
        opacity: 0;
        transform: scale(.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modalAvatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}

/* ==========================================================
   PRIVATE MESSAGE PANEL
========================================================== */
.pmPanel {
    position: fixed;
    bottom: 0;
    right: 10px;
    width: 300px;
    max-height: 70vh;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-direction: column;
    z-index: 9000;
    
}

.pmHeader {
    padding: 10px;
    background: #191919;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pmClose {
    cursor: pointer;
}

.pmBody {
    flex: 1;
    padding: 10px;
}

.pmInputBar {
    padding: 8px;
    background: #161616;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================
   ALERT / WARN / GIFT — UNCHANGED
========================================================== */
.alertBox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.alertInner {
    background: #1b1b1b;
    padding: 20px;
    width: 260px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
}

.alertText {
    margin-bottom: 15px;
}

.alertBtn {
    background: #2c2c2c;
    border-radius: 6px;
    padding: 8px 12px;
    color: #fff;
}

.warnBox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.warnInner {
    background: #202020;
    padding: 18px;
    width: 260px;
    border-radius: 10px;
    text-align: center;
}

.warnInput {
    width: 100%;
    padding: 8px;
    background: #191919;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    margin-bottom: 12px;
}

.warnBtn {
    background: #ab3434;
    border-radius: 6px;
    padding: 8px 12px;
}

.giftBox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.70);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.giftHeader {
    font-size: 16px;
    margin-bottom: 10px;
}

.giftItems {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.giftItem {
    width: 64px;
    height: 64px;
    background: #1e1e1e;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.giftSendBtn {
    margin-top: 12px;
    width: 100%;
    padding: 10px;
    background: #957637;
    border-radius: 8px;
}

.userListBox {
    padding: 10px;
}

.userListItem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    margin-bottom: 5px;
}

.userListAvatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    
}

.userListName {
    font-size: 14px;
    font-weight: 600;
}

.userListRank {
    margin-left: auto;
    opacity: .7;
}

/* ==========================================================
   UNIVERSAL BASE
========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem .8rem;
    font-size: .9rem;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #202020;
    color: #fff;
    transition: .15s;
    user-select: none;
}

.btn:hover {
    background: #2a2a2a;
}

.btn.small {
    font-size: .8rem;
    padding: .35rem .7rem;
}

.btn.primary {
    background: #2d6cdf;
    border-color: rgba(255, 255, 255, 0.15);
}

.btn.primary:hover {
    background: #3b79ef;
}

.btn.danger {
    background: #b62828;
}

.btn.danger:hover {
    background: #d73333;
}

input,
textarea,
select {
    width: 100%;
    padding: .45rem .6rem;
    background: #131313;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f5f5f5;
    outline: none;
    font-size: .9rem;
    transition: border .15s, background .15s;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #3b79ef;
    background: #191919;
}

textarea {
    resize: vertical;
}

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

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #202020;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2a2a2a;
}

img {
    user-select: none;
}

button {
    user-select: none;
}

.attach-menu {
    position: absolute;
    bottom: 50px;
    left: 12px;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px 0;
    border-radius: 8px;
    width: 140px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.attach-menu.hidden {
    display: none;
}

.attach-item {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #e0e4ff;
}

.attach-item:hover {
    background: rgba(255, 255, 255, 0.07);
}

/* ==========================================================
   EMBEDDED IMAGES
========================================================== */
.chat-embed-image {
    max-width: 240px;
    max-height: 240px;
    width: auto;
    height: auto;
    display: block;
    border-radius: 6px;
    object-fit: contain;
    background: #000;
    margin-top: 6px;
    margin-bottom: 6px;
}

.embed-img-wrap {
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* ==========================================================
   CUSTOM EMOTICONS / STICKERS  (:name: -> <img class="emocc …">,
   see system/emoticons.php -> cws_emo_img())
   FIX: these classes had NO rules anywhere, so a :name: image
   rendered at its raw file resolution with no constraint at all.
   Base-pack emoji happen to ship as small 64x64 pngs so this went
   unnoticed, but "large" display packs (sticker_* folders) range
   from ~100px up to 1199x1161 — full-size in a narrow mobile chat
   column, which is exactly the "giant/cropped-looking image" bug:
   the picture isn't actually cropped, it's just rendered many times
   larger than its container so only a corner of it is on-screen.
========================================================== */
.emocc {
    display: inline-block;
    vertical-align: middle;
    border: 0;
}
/* small inline emoji: sits in the text flow like a normal :) */
.emo_chat {
    width: 22px;
    height: 22px;
    object-fit: contain;
    margin: -4px 1px;
}
/* large stand-alone sticker/reaction packs: own line, capped size,
   same treatment as pasted/uploaded images (.chat-embed-image) so
   stickers and shared images look consistent regardless of the
   source file's actual resolution. */
.sticker_chat {
    display: block;
    max-width: 160px;
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    margin-top: 4px;
    margin-bottom: 4px;
    background: transparent;
}

/* END — FULL PATCHED FILE */
.ulist_container {overflow:hidden; overflow-y:auto; }
.side-left-logo {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 10px;
}
/* ======================================================
   ELEMENT MODAL OVERLAY
====================================================== */
.element-box {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    z-index: 9999;

    /* smooth fade */
    opacity: 0;
    transition: opacity 0.2s ease;
}

.element-box.visible {
    display: flex;
    opacity: 1;
    align-items: center;
    justify-content: center;
}

/* ======================================================
   MODAL CONTAINER
====================================================== */
.element-box-inner {
    background: #111;
    color: #fff;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;

    margin: 12px;
    padding: 16px 16px 18px;

    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);

    display: flex;
    flex-direction: column;

    /* smooth entrance */
    transform: translateY(10px);
    transition: transform 0.2s ease;
}

.element-box.visible .element-box-inner {
    transform: translateY(0);
}

/* ======================================================
   HEADER / FOOTER
====================================================== */
.element-header {
    text-align: center;
    margin-bottom: 12px;
}

.element-header h3 {
    font-size: 1.15rem;
    margin: 0;
}

.element-footer {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

/* ======================================================
   BODY
====================================================== */
.element-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ======================================================
   FORM ELEMENTS
====================================================== */
.form-group label {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-bottom: 4px;
    display: block;
}

.form-group .input,
.form-group textarea {
    width: 100%;
    background: #1a1a1a;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    font-size: 0.95rem;
}

/* ======================================================
   ROOM IMAGE EDITOR (RESPONSIVE)
====================================================== */
.room-image-editor {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

.room-image-wrap {
    position: relative;
    width: 120px;
    height: 120px;

    border-radius: 14px;
    

    background: #111;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.room-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ======================================================
   IMAGE EDIT BUTTON
====================================================== */
.room-image-edit {
    position: absolute;
    right: 6px;
    bottom: 6px;

    width: 36px;
    height: 36px;

    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    

    transition: background 0.15s ease, transform 0.15s ease;
}

.room-image-edit:hover {
    background: rgba(0, 0, 0, 0.95);
    transform: scale(1.05);
}

/* ======================================================
   BUTTON
====================================================== */
.element-footer .btn {
    width: 100%;
    max-width: 260px;
    padding: 10px;
    font-size: 0.95rem;
}

/* ======================================================
   MOBILE OPTIMIZATIONS
====================================================== */
@media (max-width: 480px) {
    .element-box-inner {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 12px;
        margin: 8px;
    }

    .room-image-wrap {
        width: 100px;
        height: 100px;
    }
}

/* ========================================================
   ── ROOM LIST
======================================================== */

/* ==========================================================
   ROOM LIST CONTAINER (NEW: FULL SCROLL SUPPORT)
========================================================== */
.roomListBox {
    padding: 10px;
    /* Scrollable list */
    overflow-y: auto;
    overflow-x: hidden;

    /* Required for scroll inside flex containers */
    flex: 1 1 auto;
    min-height: 0;

    /* Smooth mobile scrolling */
    -webkit-overflow-scrolling: touch;

    /* Optional look */
    background: rgba(255, 255, 255, 0.015);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* Optional: styled scrollbar (you can remove this if you want hidden scrollbars) */
.roomListBox::-webkit-scrollbar {
    width: 6px;
}

.roomListBox::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.roomListBox::-webkit-scrollbar-track {
    background: transparent;
}

/* ==========================================================
   ROOM ITEM WRAPPER (no clipping, supports multi-line)
========================================================== */
.room_item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.room_item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================
   ROOM IMAGE (LEFT)
========================================================== */
.room-left {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 8px;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* ==========================================================
   ROOM MID SECTION
========================================================== */
.room-mid {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.room-mid.active-room .room-name {
    color: #4db0ff;
    font-weight: 700;
}

.room-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================
   ROOM DESCRIPTION — 3-line clamp, no clipping
========================================================== */
.room-desc {
    font-size: 12px;
    line-height: 1.3em;
    color: #bbb;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3; /* Standard property for future compatibility */
}

/* ==========================================================
   RIGHT SIDE: USER COUNT
========================================================== */
.room-users {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #ddd;
    min-width: 45px;
    justify-content: flex-end;
}

.room-user-count {
    font-weight: 600;
}

/* ==========================================================
   OPTIONAL LEGACY SUPPORT
========================================================== */
.roomListItem {
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.roomListUserCount {
    opacity: .7;
}

.roomListJoin {
    background: #b8964f;
    border-radius: 6px;
    padding: 4px 10px;
}

/* ========================================================
   ── DROPDOWN MENUS (hamburger / avatar)
======================================================== */

/* ============================================================
   chatWS — dropdown-menus.css
   Float boxes for hamburger (left) and avatar (right) menus.
   CRITICAL: Must use position:fixed, NOT absolute.
   The menu divs live inside .layout-shell (no positioned parent),
   so absolute would put them off-screen (below the viewport).
============================================================ */

/* ── FLOAT MENU BASE ─────────────────────────────────────── */
.float-menu {
    position: fixed;           /* fixed to viewport, not a parent */
    top: 60px;                 /* just below the 56px topbar */
    z-index: 1100;
    min-width: 240px;
    max-width: 320px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    display: none;
    animation: menuPopIn 0.18s ease-out;
}

.float-menu.visible {
    display: block;
}

@keyframes menuPopIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── HAMBURGER MENU — anchored to top-left ───────────────── */
.hamburger-menu {
    left: 16px;
    top: 60px;
}

/* ── AVATAR MENU — anchored to top-right ────────────────── */
.avatar-menu {
    right: 16px;
    left: auto;
    top: 60px;
}

/* ── BACKDROP ────────────────────────────────────────────── */
.menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1099;       /* just below menus */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.menu-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

/* ── MENU HEADER (avatar menu user info) ─────────────────── */
.menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.menu-avatar {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.menu-user-info  { flex: 1; min-width: 0; }
.menu-username   { font-weight: 600; font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-user-rank  { font-size: 12px; color: #a3a3a3; margin-top: 2px; }

/* ── MENU SECTIONS ───────────────────────────────────────── */
.menu-section {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.menu-section:last-child { border-bottom: none; }

.menu-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #a3a3a3;
    padding: 8px 16px 4px;
}

/* ── MENU ITEMS ──────────────────────────────────────────── */
.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #e5e5e5;
    transition: background 0.12s ease;
    user-select: none;
}
.menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.menu-item:active { background: rgba(255, 255, 255, 0.09); }

.menu-item i {
    width: 20px;
    text-align: center;
    font-size: 15px;
    color: #a3a3a3;
    flex-shrink: 0;
}
.menu-item:hover i { color: #b8964f; }

.menu-item.danger,
.menu-item.danger i { color: #f87171; }
.menu-item.danger:hover { background: rgba(248, 113, 113, 0.08); }

.menu-item.admin i { color: #fbbf24; }

/* Badge inside menu item (PM count, friend requests) */
.menu-item .badge {
    margin-left: auto;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

/* ── HAMBURGER BUTTON ────────────────────────────────────── */
.hamburger-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #e5e5e5;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.hamburger-btn:hover  { background: rgba(255,255,255,0.06); color: #fff; }
.hamburger-btn.active { background: rgba(255,255,255,0.09); color: #b8964f; }

/* ── TOP BAR LAYOUT ──────────────────────────────────────── */
.topbar-left  { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 12px; position: relative; }
.avatar-btn-wrapper { position: relative; }

/* ── AVATAR BUTTON ───────────────────────────────────────── */
.top-avatar-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}
.top-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.12);
    transition: border-color 0.15s;
}
.top-avatar-btn:hover .top-avatar-img { border-color: #b8964f; }

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Hamburger: full-height side panel.
       CRITICAL: do NOT set display:block here.
       Base rule has display:none — that hides it safely.
       .visible class adds display:block when actually open. */
    .float-menu.hamburger-menu {
        top: 56px;
        left: 0;
        bottom: 0;
        right: auto;
        width: 280px;
        max-width: 82vw;
        max-height: none;
        border-radius: 0 14px 14px 0;
    }

    /* Avatar: bottom sheet.
       Same: display:none from base keeps it from covering the message bar. */
    .float-menu.avatar-menu {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
    }

    .menu-item { padding: 14px 16px; font-size: 15px; }
    .menu-item i { font-size: 17px; }
}


/* ========================================================
   ── SLIDE-OVER RIGHT PANEL (legacy overlay)
======================================================== */

/* === Right overlay panel (slides over chat) === */

.right-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 90vw;
    height: 100vh;
    background: #050505;
    color: #fafafa;
    box-shadow: -14px 0 40px rgba(0, 0, 0, 0.65);
    border-left: 1px solid rgba(255, 255, 255, 0.10);
    transform: translateX(100%);
    transition: transform 0.22s ease-out;
    display: flex;
    flex-direction: column;
    z-index: 9999;
}

.right-panel.open {
    transform: translateX(0);
}

.right-panel-header {
    height: 52px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.right-panel-title {
    font-size: 14px;
    font-weight: 600;
}

.right-panel-close {
    background: transparent;
    border: none;
    color: #fafafa;
    font-size: 18px;
    cursor: pointer;
}

.right-panel-body {
    flex: 1 1 auto;
    padding: 10px 10px 14px;

    /* Correct scrolling behavior */
    overflow-y: auto;
    overflow-x: hidden;

    /* Fix: prevents content from overflowing below screen */
    min-height: 0;
    max-height: calc(var(--vh) * 100 - 56px);
    /* 56px = your top bar height */

    /* Smooth mobile scrolling */
    -webkit-overflow-scrolling: touch;

    background: rgba(255, 255, 255, 0.015);
    /* optional, remove if not needed */
}

/* Simple panel sections */
.panel-section {
    margin-bottom: 12px;
}

.panel-section h4 {
    margin: 0 0 6px;
    font-size: 13px;
    opacity: 0.9;
}

/* Backdrop on mobile for dimming chat when panel open */
@media (max-width: 900px) {
    .right-panel-backdrop {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 9998;
        display: none;
    }

    .right-panel-backdrop.visible {
        display: block;
    }
}

/* Prevent backdrop from blocking chat scrolling */
.right-panel-backdrop {
    pointer-events: none;
}

.right-panel-backdrop.visible {
    pointer-events: auto;
    /* Optional: Allow closing by tapping outside */
}

/* ========================================================
   ── MOBILE CHAT INPUT FIX
======================================================== */

/* ============================================================
   chatWS — Mobile Chat Fix
   /css/mobile_chat_fix.css

   KEY FIX: Removed justify-content:flex-end + ::before spacer
   that broke upward scrolling on mobile. Scroll-to-bottom is
   handled by JS (messagesEl.scrollTop = messagesEl.scrollHeight).
============================================================ */

@media (max-width: 767px) {

    /* ── Messages scroll container ───────────────────── */
    .messages {
        display:          flex !important;
        flex-direction:   column !important;
        justify-content:  flex-start !important;  /* NOT flex-end — that kills upward scroll */
        overflow-y:       auto !important;
        -webkit-overflow-scrolling: touch !important; /* iOS momentum scroll */
        overscroll-behavior: contain !important;  /* prevent page bounce while scrolling messages */
        /* .chat-input is no longer position:fixed (see below), so
           #messages no longer needs artificial padding-bottom to fake
           clearance from a bar floating on top of it — the input bar is
           a normal flex sibling now and simply pushes #messages' bottom
           edge up by its own height. A small comfort gap is still nice. */
        padding-bottom:   8px !important;
        padding-top:      8px !important;
        scroll-behavior:  auto !important;         /* instant scroll to bottom (no smooth jank) */
    }

    /* Remove the ::before spacer — it pushes old messages out of scroll reach */
    .messages::before {
        display: none !important;
        content: none !important;
        flex:    none !important;
    }

    /* ── Input bar: normal flex item, NOT fixed ────────
       Used to be position:fixed with a hand-picked `bottom: var(--footer-h)`
       to clear the footer bar. That value had to stay in sync with the
       footer bar's real height everywhere it was used, and with
       .chat-center's own height calc, and with responsive.css's separate
       (and, on this exact breakpoint, out-of-sync) copy of that calc —
       any one of those drifting was enough to make messages render behind
       the bars. As a normal flex child of .chat it just sits right above
       whatever comes after it with zero coordination required. */
    .chat-input {
        position:   static !important;
        z-index:    auto !important;
        background: var(--bg-primary, #050505) !important;
        border-top: 1px solid rgba(255,255,255,.08) !important;
        padding:    8px 10px !important;
        display:    flex !important;
        align-items: center !important;
        gap:        8px !important;
    }

    /* ── Hide native file chooser button ─────────────── */
    .chat-input input[type="file"],
    .chat-input #chatFileInput {
        display:        none !important;
        width:          0 !important;
        height:         0 !important;
        opacity:        0 !important;
        position:       absolute !important;
        pointer-events: none !important;
    }

    /* ── Text input ──────────────────────────────────── */
    .chat-input input[type="text"],
    .chat-input input:not([type="file"]),
    .chat-input #messageInput {
        flex:       1 !important;
        min-width:  0 !important;
        height:     38px !important;
        display:    block !important;
        opacity:    1 !important;
        visibility: visible !important;
    }

    /* ── Attach / send buttons ───────────────────────── */
    .chat-attach-btn,
    .chat-input .send-btn,
    #sendBtn {
        width:       38px !important;
        height:      38px !important;
        font-size:   16px !important;
        flex-shrink: 0 !important;
        display:     flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ── Typing indicator ────────────────────────────── */
    /* Was `padding-bottom: 70px` here, trying to clear the fixed bars
       by growing #typing's own box downward. That never worked: #typing
       sits at the bottom edge of an oversized .chat box (see the fix on
       the mobile .chat-center rule above), so padding just made more of
       the box extend further behind the opaque footer/input bars — the
       text itself, near the TOP of the box, stayed hidden regardless.
       Now that .chat-center's height is correct, #typing naturally ends
       up sitting right above the input bar with no extra padding
       needed; a little breathing room is enough. */
    .typing { padding-bottom: 6px; }

    /* ── Individual messages ─────────────────────────── */
    .message {
        max-width:  100% !important;  /* prevent overflow on tiny screens */
        word-break: break-word !important;
    }
}

/* ── Very small screens (≤ 400px) ────────────────────── */
@media (max-width: 400px) {
    .chat-input {
        padding: 6px 8px !important;
    }
}

/* ── iOS safe area (notch / home indicator) ──────────── */
/* No longer needs a rule here: the home-indicator safe area only has to
   be reserved once, at the very bottom of the screen, and .chat-footer-bar
   already does that itself (its own bottom padding uses
   env(safe-area-inset-bottom)). .chat-input sits in normal flow above the
   footer bar now, so it never touches the bottom edge and needs no safe-area
   padding of its own. */


/* ========================================================
   ── RIGHT PANEL  (3-tab sidebar + footer bar)
======================================================== */

/* ============================================================
   right_panel.css
   Right panel (3-tab sidebar) + Footer bar + Topbar icons
============================================================ */

/* ── Topbar icon buttons (PM + Friend requests) ───────────── */
.topbar-icon-btn {
    position: relative;
    width: 36px; height: 36px;
    border-radius: 50%; border: none;
    background: transparent; color: #d4d4d4;
    font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    margin-right: 4px;
}
.topbar-icon-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.topbar-badge {
    position: absolute; top: 1px; right: 1px;
    min-width: 16px; height: 16px;
    background: #ef4444; color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: 99px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 3px; pointer-events: none;
}

/* ── Footer bar — fixed, full width, hamburger at bottom-right ──
   Was: three spread-out icon buttons (users / friends / search).
   Now: a plain fixed bar with ONE hamburger button on the right that
   opens/closes the right panel (the panel has its own Users / Friends /
   Search tabs at the top). */
.chat-footer-bar {
    /* Lives as the LAST flex child of #app (see body_end.php) instead of
       position:fixed. Being a normal flex item means it can never overlap
       or be overlapped by anything else in #app's flex column — the
       browser lays every sibling out above it automatically, on every
       screen size, with no manual height subtraction needed anywhere else. */
    flex-shrink: 0;
    width: 100%;
    height: var(--footer-h);
    box-sizing: border-box;             /* keep the icon row a fixed 48px;
                                            the safe-area inset (if any)
                                            is extra padding below it,
                                            not extra icon height */
    background: #090909;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: flex-end;          /* hamburger sits at the right */
    padding: 0 10px calc(env(safe-area-inset-bottom, 0px));
    z-index: 600;   /* stays above the messages list if anything scrolls under it */
}
.footer-menu-btn {
    position: relative;
    width: 44px; height: 38px;
    border: none; background: transparent;
    border-radius: 10px;
    color: #737373; font-size: 19px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.footer-menu-btn:hover  { color: #d4d4d4; background: rgba(255,255,255,0.05); }
.footer-menu-btn.active { color: #d4b26a; background: rgba(184,150,79,0.12);  }
.footer-menu-btn:focus-visible { outline: 2px solid #b8964f; outline-offset: 2px; }
.footer-badge {
    position: absolute; top: 1px; right: 1px;
    min-width: 14px; height: 14px;
    background: #ef4444; color: #fff;
    font-size: 9px; font-weight: 700;
    border-radius: 99px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 3px; pointer-events: none;
}

/* Desktop no longer needs a separate rule shrinking .layout-shell /
   .chat-center above the footer bar — the base flex rules above (
   flex: 1; min-height: 0;) already fill exactly the space left over
   after the footer bar, on every screen size. */

/* ── Right panel shell ─────────────────────────────────────────
   BUG (was): the panel was z-index 401 but the message box is 1000
   (desktop) / 500 (mobile), so the message box painted OVER the panel,
   and nothing made room for it — it just floated on top of the chat.

   Now:
   • ≥768px  the panel is DOCKED: body.rpanel-open shrinks .layout-shell
             by the panel width, so chat + message box slide over and sit
             next to it (see the min-width media query below).
   • <768px  the panel is an overlay sheet, but above the message box
             (z-index 1050) and with a dimmed, tap-to-close backdrop.
   The panel bottom stays clear of the footer bar (z 1060, --footer-h
   tall including its safe-area padding) so its buttons keep working. */
:root { --rpanel-w: 280px; }

.rpanel {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: var(--footer-h);         /* sits above footer bar */
    width: var(--rpanel-w);
    box-sizing: border-box;          /* border counts inside the width, so docking is exact */
    background: #090909;
    border-left: 1px solid rgba(255,255,255,0.07);
    display: flex; flex-direction: column;
    z-index: 1050;                   /* above .chat-input (1000/500), below dropdown menus (1100) */
    transform: translateX(calc(100% + 24px));
    visibility: hidden;              /* closed panel is not focusable */
    transition: transform 0.24s cubic-bezier(0.4,0,0.2,1),
                visibility 0s linear 0.24s;
    box-shadow: -4px 0 24px rgba(0,0,0,0.4);
}
.rpanel.open {
    transform: none;
    visibility: visible;
    transition: transform 0.24s cubic-bezier(0.4,0,0.2,1),
                visibility 0s;
}

/* Chat column slides over smoothly when the panel docks/undocks */
.layout-shell { transition: margin-right 0.24s cubic-bezier(0.4,0,0.2,1); }

/* ── Tab icon bar ──────────────────────────────────────────── */
.rpanel-tabbar {
    display: flex; align-items: center; gap: 2px;
    padding: 8px 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: #111111;
    flex-shrink: 0;
}
.rpanel-tab {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 8px; border: none;
    background: transparent; color: #737373;
    font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 4px;
}
.rpanel-tab:hover  { background: rgba(255,255,255,0.07); color: #d4d4d4; }
.rpanel-tab.active { background: rgba(184,150,79,0.18); color: #d4b26a; }
.rpanel-tab.active::after {
    content: ''; position: absolute;
    bottom: -5px; left: 25%; right: 25%;
    height: 2px; background: #d4b26a; border-radius: 2px;
}
.rpanel-badge {
    position: absolute; top: 4px; right: 4px;
    min-width: 14px; height: 14px;
    background: #ef4444; color: #fff;
    font-size: 9px; font-weight: 700;
    border-radius: 99px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 2px;
}
.rpanel-close-btn {
    width: 34px; height: 34px;
    border-radius: 7px; border: none;
    background: transparent; color: #525252;
    font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 4px;
}
.rpanel-close-btn:hover { background: rgba(248,113,113,0.12); color: #f87171; }

/* ── Content area ──────────────────────────────────────────── */
.rpanel-content {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.rpanel-content::-webkit-scrollbar { width: 4px; }
.rpanel-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.rpanel-loading { display:flex; align-items:center; justify-content:center; padding:32px; color:#525252; font-size:20px; }
.rpanel-empty { padding:24px 16px; text-align:center; color:#525252; font-size:13px; line-height:1.6; }
.rpanel-section-title {
    padding: 10px 14px 4px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: #525252;
}

/* ── User rows ─────────────────────────────────────────────── */
.rpanel-user-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; cursor: pointer;
    transition: background 0.12s;
}
.rpanel-user-row:hover { background: rgba(255,255,255,0.05); }
.rp-avatar-wrap { position: relative; flex-shrink: 0; }
.rpanel-user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%; object-fit: cover; background: #202020;
}
.rp-online-dot {
    position: absolute; bottom: 0; right: 0;
    width: 10px; height: 10px;
    border-radius: 50%; border: 2px solid #090909;
}
.rp-online-dot.online  { background: #22c55e; }
.rp-online-dot.offline { background: #525252; }
.rp-rank-dot {
    display: inline-block; width: 6px; height: 6px;
    border-radius: 50%; margin-right: 4px; vertical-align: middle;
}
.rpanel-user-info { flex: 1; min-width: 0; }
.rpanel-username { font-size:13px; font-weight:600; color:#e5e5e5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rpanel-rank     { font-size:11px; color:#737373; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-status-icon  { color:#f59e0b; font-size:12px; }
.rp-accept-btn, .rp-decline-btn {
    width:28px; height:28px; border-radius:6px; border:none;
    cursor:pointer; font-size:13px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rp-accept-btn  { background:rgba(34,197,94,.15);  color:#22c55e; }
.rp-decline-btn { background:rgba(248,113,113,.12); color:#f87171; }
.rp-accept-btn:hover  { background:rgba(34,197,94,.28); }
.rp-decline-btn:hover { background:rgba(248,113,113,.24); }

/* ── Search tab ────────────────────────────────────────────── */
.rpanel-search-wrap { padding: 10px 12px 6px; }
.rpanel-search-input {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 8px 12px;
    color: #f5f5f5; font-size: 13px; outline: none;
    transition: border-color 0.15s;
}
.rpanel-search-input:focus { border-color: #b8964f; }

/* ── Backdrop (phones only) ────────────────────────────────── */
.rpanel-backdrop {
    display: none; position: fixed; inset: 0; z-index: 1049;
    background: rgba(0,0,0,0.45);
}
.rpanel-backdrop.visible { display: block; }

/* ── Footer bar must stay above the panel + message box ────── */
.chat-footer-bar { z-index: 1060; }

/* ── Desktop / tablet: dock the panel, push the chat over ───── */
@media (min-width: 768px) {
    body.rpanel-open .layout-shell { margin-right: var(--rpanel-w); }
    .rpanel-backdrop,
    .rpanel-backdrop.visible { display: none !important; }   /* chat stays clickable */
    .rpanel { box-shadow: none; }
}

/* ── Phones: overlay sheet, full width up to 360px ──────────── */
@media (max-width: 767px) {
    .rpanel { width: min(100%, 360px); }
}
/* ── Room list settings cog button ────────────────────────── */
.room-settings-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    background:      transparent;
    border:          1px solid rgba(255,255,255,.1);
    border-radius:   6px;
    color:           #737373;
    cursor:          pointer;
    font-size:       13px;
    flex-shrink:     0;
    transition:      background .15s, color .15s, border-color .15s;
    margin-left:     4px;
}
.room-settings-btn:hover {
    background:      rgba(184,150,79,.15);
    border-color:    #b8964f;
    color:           #d4b26a;
}

/* ============================================================
   chatWS — Emoticon picker (js/emoticons.js)
   Mirrors CodyChat's #main_emoticon: tab strip of packs above a
   scrollable image grid, anchored just above .chat-input.
============================================================ */
.chat-emo-btn {
    background: none;
    border: none;
    color: #a3a3a3;
    font-size: 17px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    height: 32px;
    width: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-emo-btn:hover { color: #d4d4d4; background: rgba(255, 255, 255, 0.05); }
.chat-emo-btn.hidden { display: none; }

.emo-panel {
    /* FIX: was a plain flex sibling of .messages inside .chat, so opening it
       ate its full height straight out of the flex column and could squash
       .messages down to a sliver on short mobile screens (the last message
       or two would end up hidden behind the picker instead of visible above
       it). Floating it — anchored to .chat, which is position:relative for
       exactly this — keeps it visually "just above .chat-input" without
       taking any space away from the message list underneath. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 55px;      /* height of .chat-input: 10px+10px padding + 34px send-btn + 1px border */
    background: rgba(10,10,10, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    max-height: 280px;
    z-index: 1000;
}
.emo-panel.hidden { display: none; }

.emo-panel-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.emo-tab {
    position: relative;
    background: none;
    border: none;
    border-radius: 8px;
    padding: 4px;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emo-tab img { width: 100%; height: 100%; object-fit: contain; }
.emo-tab:hover  { background: rgba(255, 255, 255, 0.06); }
.emo-tab.active { background: rgba(212, 178, 106, 0.18); }
.emo-tab.locked img { opacity: 0.35; filter: grayscale(1); }
.emo-tab-lock {
    position: absolute;
    bottom: -1px;
    right: -1px;
    font-size: 8px;
    color: #f59e0b;
    background: #111111;
    border-radius: 50%;
    padding: 2px;
}

.emo-panel-grid {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
    padding: 8px;
}
.emo-item {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
}
.emo-item:hover { background: rgba(255, 255, 255, 0.06); }
.emo-item img { max-width: 24px; max-height: 24px; }
.emo-item-large { width: 64px; height: 64px; }
.emo-item-large img { max-width: 56px; max-height: 56px; }

.emo-loading, .emo-locked {
    width: 100%;
    padding: 24px 12px;
    text-align: center;
    color: #737373;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.emo-locked i { font-size: 18px; color: #f59e0b; }

@media (max-width: 900px) {
    .emo-panel { max-height: min(45vh, 260px); }
}

/* ==========================================================
   YOUTUBE AUTO-EMBED — click-to-play thumbnail
   (see system/actions/chat_post.php _ytId()/rendering, and
   js/media_lightbox.js for the popup this opens)
========================================================== */
.embed-youtube {
    position: relative;
    display: block;
    width: 280px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    margin-top: 6px;
    margin-bottom: 6px;
    cursor: pointer;
}
.embed-yt-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.embed-yt-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.18);
    transition: background .15s ease;
}
.embed-youtube:hover .embed-yt-play { background: rgba(0, 0, 0, 0.34); }
.embed-yt-play i {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* ==========================================================
   MEDIA LIGHTBOX — shared click-to-enlarge popup for chat
   images/gifs and YouTube embeds (js/media_lightbox.js)
========================================================== */
.mlb-overlay {
    position: fixed;
    inset: 0;
    z-index: 9800;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.mlb-overlay.mlb-visible { display: flex; animation: mlbFadeIn .15s ease; }
@keyframes mlbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.mlb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10, 0.9);
    backdrop-filter: blur(3px);
}
.mlb-stage {
    position: relative;
    z-index: 1;
    max-width: min(92vw, 1100px);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mlb-image {
    max-width: 92vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.mlb-video-wrap {
    width: min(92vw, 960px);
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.mlb-video-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.mlb-close, .mlb-open-new {
    position: absolute;
    top: -44px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    font-size: 15px;
    text-decoration: none;
}
.mlb-close:hover, .mlb-open-new:hover { background: rgba(255, 255, 255, 0.22); }
.mlb-close { right: 0; }
.mlb-open-new { right: 46px; }
body.mlb-open { overflow: hidden; }

/* ==========================================================
   SELF-DELETE ACCOUNT — pending-deletion banner
   (js/account_delete.js, system/actions/account_delete_*.php)
========================================================== */
.ad-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9600;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: linear-gradient(90deg, #7f1d1d, #991b1b);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.ad-banner.ad-banner-visible { display: flex; }
.ad-banner i { color: #fca5a5; }
.ad-banner-cancel {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ad-banner-cancel:hover { background: rgba(255, 255, 255, 0.22); }
.ad-banner-cancel:disabled { opacity: .6; cursor: default; }
body.ad-banner-open { padding-top: 40px; }
@media (max-width: 640px) {
    body.ad-banner-open { padding-top: 56px; }
}
/* ── Room user list — CodyChat-style (right_panel.js ulRow) ─────────── */
.ul-count { display:flex; align-items:center; gap:8px; padding:10px 12px 6px; font-size:12px; font-weight:700; color:#a3a3a3; text-transform:uppercase; letter-spacing:.05em; }
.ul-badge { min-width:22px; padding:1px 7px; border-radius:99px; background:#b8964f; color:#fff; font-size:11px; text-align:center; letter-spacing:0; }
.ul-count-off { margin-top:6px; }
.ul-list { display:flex; flex-direction:column; padding:0 6px 4px; }
.ul-item { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px; cursor:pointer; transition:background .12s; min-width:0; }
.ul-item:hover { background:rgba(255,255,255,.05); }
.ul-item.offline { opacity:.5; }
.ul-item.offline .ul-av img { filter:grayscale(.6); }
.ul-av { position:relative; flex:0 0 38px; width:38px; height:38px; }
.ul-av img { width:38px; height:38px; border-radius:50%; object-fit:cover; display:block; background:#202020; }
.ul-dot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:#22c55e; border:2px solid #0c0c0c; }
.ul-data { flex:1; min-width:0; }
.ul-name { font-size:14px; font-weight:700; color:#e5e5e5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25; }
.ul-mood { font-size:11.5px; color:#737373; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
.ul-ic { flex:0 0 auto; font-size:12px; }
.ul-mute  { color:#f87171; }
.ul-rmute { color:#fb923c; }
.ul-ghost { color:#a3a3a3; }
.ul-rank { flex:0 0 auto; max-width:84px; padding:2px 7px; border-radius:6px; font-size:10.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
           color:var(--rc,#737373); background:color-mix(in srgb, var(--rc,#737373) 14%, transparent); }
.ul-item.is-bot .ul-rank { color:#22d3ee; background:rgba(34,211,238,.12); }

/* ── News badge: hamburger button + News item in the left panel (js/news_alert.js) ── */
.hamburger-btn { position: relative; }
.hamburger-btn .topbar-badge { top: 2px; right: 2px; }
.menu-item .menu-badge {
    margin-left: auto;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: #ef4444; color: #fff;
    font-size: 11px; font-weight: 700;
    align-items: center; justify-content: center;
}

/* ── Left menu: current room header ── */
.menu-current-room {
    display: flex; align-items: center; gap: 14px;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.menu-room-img {
    width: 64px; height: 44px; flex-shrink: 0;
    object-fit: cover; border-radius: 8px;
    background: rgba(255,255,255,0.05);
}
.menu-room-info { min-width: 0; }
.menu-room-label { font-size: 12px; color: #8f8f8f; margin-bottom: 2px; }
.menu-room-name {
    font-size: 17px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Right panel: user search bar + filters (js/right_panel.js) ── */
.us-bar { display: flex; gap: 8px; align-items: center; }
.us-bar .rpanel-search-input { flex: 1; min-width: 0; }
.us-filter-btn {
    width: 38px; height: 38px; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    background: rgba(255,255,255,0.04); color: #a3a3a3; cursor: pointer; font-size: 15px;
}
.us-filter-btn:hover { color: #fff; }
.us-filter-btn.on { color: #d4b26a; border-color: #b8964f; background: rgba(184,150,79,0.15); }
.us-filters {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
    margin: 4px 12px 8px; padding: 10px;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: rgba(255,255,255,0.03);
}
.us-filters[hidden] { display: none; }
.us-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: #a3a3a3; text-transform: uppercase; letter-spacing: .04em; }
.us-filters select {
    padding: 7px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
    background: #121212; color: #e5e5e5; font-size: 13px; font-family: inherit; text-transform: none; letter-spacing: 0;
}
.us-filters .us-check { flex-direction: row; align-items: center; gap: 6px; text-transform: none; font-size: 13px; color: #d4d4d4; font-weight: 600; letter-spacing: 0; }
.us-reset {
    justify-self: end; align-self: center;
    padding: 6px 12px; border: none; border-radius: 8px;
    background: rgba(255,255,255,0.06); color: #d4d4d4; font-size: 12px; cursor: pointer; font-family: inherit;
}

/* ── Rank icons (CodyChat default_images/rank) — chat names + user list ── */
.message-meta .message-rank.message-rank-icons,
.message-meta .message-rank.message-rank-icons.message-rank--bot {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 0 !important; margin: 0 4px 0 0;
    background: none !important; border-radius: 0;
    opacity: 1; font-size: 0; line-height: 1;
    order: -1; flex-shrink: 0;
}
.message-rank-icons .rank-icon { height: 13px; width: auto; display: block; }
.ul-rank.ul-rank--icon { padding: 0; background: none; max-width: none; display: inline-flex; align-items: center; }
.ul-rank-icon { height: 15px; width: auto; display: block; }