/* ============================================================
   MxM glassy theme — extracted from former glassy-experiment.phtml.
   Committed to the main stylesheets directory on 2026-05-26.
   Loaded via container.phtml as a standard <link> stylesheet.
   Pair: themes/wondertag/javascript/mxm-glassy.js
============================================================ */
/* ============ Bokeh ambient layer painted onto body, fixed so it never scrolls.
   #2f38ff is the anchor — others are quiet accents, alphas kept low. ============ */
body {
    background-image:
        radial-gradient(ellipse 50% 45% at 12% 18%, rgba(47, 56, 255, 0.22), transparent 70%),
        radial-gradient(ellipse 45% 50% at 88% 14%, rgba(94, 110, 255, 0.14), transparent 72%),
        radial-gradient(ellipse 55% 45% at 82% 82%, rgba(47, 56, 255, 0.10), transparent 72%),
        radial-gradient(ellipse 45% 50% at 18% 88%, rgba(124, 92, 255, 0.10), transparent 72%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}
body.mxm-glassy-dark {
    background-image:
        radial-gradient(ellipse 50% 45% at 12% 18%, rgba(47, 56, 255, 0.32), transparent 68%),
        radial-gradient(ellipse 45% 50% at 88% 14%, rgba(94, 110, 255, 0.22), transparent 70%),
        radial-gradient(ellipse 55% 45% at 82% 82%, rgba(47, 56, 255, 0.16), transparent 70%),
        radial-gradient(ellipse 45% 50% at 18% 88%, rgba(124, 92, 255, 0.16), transparent 70%) !important;
}

/* Mobile: pull alphas back further and shrink blob sizes so they read as soft accents,
   not a wash. */
@media (max-width: 768px) {
    body {
        background-image:
            radial-gradient(ellipse 45% 35% at 10% 12%, rgba(47, 56, 255, 0.16), transparent 72%),
            radial-gradient(ellipse 40% 35% at 90% 10%, rgba(94, 110, 255, 0.10), transparent 74%),
            radial-gradient(ellipse 45% 35% at 85% 88%, rgba(47, 56, 255, 0.07), transparent 74%),
            radial-gradient(ellipse 40% 35% at 15% 92%, rgba(124, 92, 255, 0.07), transparent 74%) !important;
    }
    body.mxm-glassy-dark {
        background-image:
            radial-gradient(ellipse 45% 35% at 10% 12%, rgba(47, 56, 255, 0.24), transparent 70%),
            radial-gradient(ellipse 40% 35% at 90% 10%, rgba(94, 110, 255, 0.16), transparent 72%),
            radial-gradient(ellipse 45% 35% at 85% 88%, rgba(47, 56, 255, 0.12), transparent 72%),
            radial-gradient(ellipse 40% 35% at 15% 92%, rgba(124, 92, 255, 0.12), transparent 72%) !important;
    }
}

/* Subtle drifting motion so the bokeh doesn't feel static */
@keyframes mxmBokehDrift {
    0%, 100% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
    50%      { background-position: 4% -2%, 96% 2%, 96% 98%, 4% 102%; }
}
body { animation: mxmBokehDrift 28s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

/* ============ Glass cards (light + dark) ============ */
.wow_content,
.mxm_cchat_card,
.mxm_threads_card,
#posts .post .panel-white,
.panel.panel-white {
    background: rgba(255, 255, 255, 0.62) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
        0 10px 36px rgba(31, 38, 135, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 -1px 0 rgba(255, 255, 255, 0.10) inset;
    border-radius: 14px;
}
body.mxm-glassy-dark .wow_content,
body.mxm-glassy-dark .mxm_cchat_card,
body.mxm-glassy-dark .mxm_threads_card,
body.mxm-glassy-dark #posts .post .panel-white,
body.mxm-glassy-dark .panel.panel-white {
    background: rgba(20, 22, 30, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.42),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* ============ Post-card overflow fix ============
   The post panel can't keep `backdrop-filter` directly: that property creates
   a containing block for fixed-positioned descendants AND a stacking-context
   isolation barrier. Together those two effects trap:
     (a) the header arrow dropdown (.tag_post_hdr_menu) — invisible behind
         neighboring post stacking contexts.
     (b) the "Are you sure you want to delete?" Bootstrap modal (#delete-post)
         — fixed-positioned but clipped inside the post bounding box.
   Fix: strip backdrop-filter from the post panel itself and move the glass
   render to a ::before pseudo-element, which doesn't create a containing
   block for the panel's other descendants. Plus a small `:has()` z-index
   lift so the open dropdown rises above sibling post panels. */
#posts .post .panel-white {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: relative;
    isolation: auto;
    /* `overflow: hidden` is set on .panel-white by load-posts.phtml so that the
       post's image children clip to the panel's rounded corners. That same
       overflow CLIPS the header arrow dropdown menu — even after the :has()
       z-index lift below, the menu visually stops at the panel edge. Override
       to `visible` here; images keep their own border-radius from
       load-posts.phtml:92, the ::after glass layer keeps the rounded look via
       `inset: 0; border-radius: inherit`, and the ::before glow line is only
       1.5px tall at `top: 0` so it has nothing to escape. */
    overflow: visible !important;
}
/* Glass surface lives on ::after instead of ::before. ::before is already taken
   by load-posts.phtml's animated "glow line" at the top of each post — using
   ::after here avoids clobbering that pre-existing accent. ::after is layered
   BEHIND the panel's content (z-index: -1), so the glow line on ::before
   (z-index: 2 from load-posts.phtml:41) stays on top — never gets buried. */
#posts .post .panel-white::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-radius: inherit;
    pointer-events: none;
}
/* Belt-and-suspenders: explicitly assert the glow-line layer in case future
   edits add a competing rule. Matches load-posts.phtml:41. */
#posts .post .panel-white::before { z-index: 2 !important; }
body.mxm-glassy-dark #posts .post .panel-white {
    background: transparent !important;
}
body.mxm-glassy-dark #posts .post .panel-white::after {
    background: rgba(20, 22, 30, 0.58);
}
/* When the header arrow dropdown is open, raise the entire post out of the
   normal flow's stacking order so the menu can render above subsequent posts. */
#posts .post:has(.tag_post_hdr_menu.open),
#posts .post:has(.tag_post_hdr_menu .dropdown-menu.show),
#posts .post:has(.tag_post_hdr_menu [aria-expanded="true"]) {
    position: relative;
    z-index: 100;
}
/* When the in-post Bootstrap modal opens, lift further. The modal itself is
   already position: fixed; with backdrop-filter removed above, it can now
   escape the panel and overlay the viewport correctly. */
#posts .post:has(.modal.in),
#posts .post:has(.modal.show) {
    position: static;
    z-index: auto;
}

/* Keep existing accent stripes / glowing lines crisp over glass */
.mxm_cchat_accent,
.mxm_threads_accent { border-radius: 14px 14px 0 0; }
.wow_content hr,
.mxm_cchat_head,
.mxm_threads_head,
.mxm_cchat_main_head { border-color: rgba(127, 127, 127, 0.18) !important; }
.tag_post_people_know .tag_scroll img { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
#posts .post .panel-white img:not(.avatar):not(.emoji) { border-radius: 10px; }

/* Publisher box (the "What's on your mind?" composer) */
.tag_publisher,
.publisher-box,
.tag_st_publisher {
    background: rgba(255, 255, 255, 0.62) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 14px;
    box-shadow: 0 10px 36px rgba(31,38,135,0.12);
}
body.mxm-glassy-dark .tag_publisher,
body.mxm-glassy-dark .publisher-box,
body.mxm-glassy-dark .tag_st_publisher {
    background: rgba(20, 22, 30, 0.58) !important;
    border-color: rgba(255,255,255,0.08);
}
.tag_publisher .tag_pub_box_bg,
.tag_pub_box_bg { background: transparent !important; }
.tag_publisher .tag_pub_box_bg_text,
.tag_pub_box_bg_text {
    background: rgba(127, 127, 127, 0.08) !important;
    border: 1px solid rgba(127, 127, 127, 0.12);
    border-radius: 999px !important;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.tag_publisher .tag_pub_box_bg_text:hover,
.tag_pub_box_bg_text:hover {
    background: rgba(47, 56, 255, 0.08) !important;
    border-color: rgba(47, 56, 255, 0.20);
}

/* Stories strip + greet alert */
.tag_stories_on_home,
.greetalert {
    background: rgba(255, 255, 255, 0.62) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.40);
}
body.mxm-glassy-dark .tag_stories_on_home,
body.mxm-glassy-dark .greetalert {
    background: rgba(20,22,30,0.58) !important;
    border-color: rgba(255,255,255,0.08);
}

/* ============ Post inner surfaces — let the glass show through ============ */
#posts .post .panel-white .tag_post_actions,
#posts .post .panel-white .post-actions,
#posts .post .panel-white .post-bottom,
#posts .post .panel-white .tag_post_foot_stats,
#posts .post .panel-white .post-description,
#posts .post .panel-white .post-heading {
    background: transparent !important;
}
#posts .post .panel-white .tag_post_foot_acticon {
    border-radius: 10px;
    transition: background 0.18s ease, color 0.18s ease;
}
#posts .post .panel-white .tag_post_foot_acticon:hover {
    background: rgba(47, 56, 255, 0.08);
    color: #2f38ff;
}
body.mxm-glassy-dark #posts .post .panel-white .tag_post_foot_acticon:hover {
    background: rgba(124, 156, 255, 0.16);
    color: #a8b6ff;
}

/* "Load more posts" button */
#load-more-posts {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.40);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(31, 38, 135, 0.10);
    transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
    margin: 12px 0 24px;
}
#load-more-posts .btn-default,
#load-more-posts .btn { background: transparent !important; border: 0 !important; color: inherit !important; }
#load-more-posts:hover {
    border-color: rgba(47, 56, 255, 0.30);
    box-shadow: 0 10px 28px rgba(47, 56, 255, 0.14);
    transform: translateY(-1px);
}
body.mxm-glassy-dark #load-more-posts { background: rgba(20, 22, 30, 0.55) !important; border-color: rgba(255,255,255,0.08); }

/* ============ Filter Posts UI — outer container (was opaque black/white block) ============ */
.tag_home_filters,
.tag_home_filters.home {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.40) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(31, 38, 135, 0.10) !important;
    padding: 10px 12px !important;
    margin-bottom: 16px !important;
}
body.mxm-glassy-dark .tag_home_filters,
body.mxm-glassy-dark .tag_home_filters.home {
    background: rgba(20, 22, 30, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
/* Sort dropdown inside the filters block — match the pill aesthetic */
.tag_home_filters .tag_home_post_order .btn-mat {
    border-radius: 999px !important;
    transition: background 0.15s ease, color 0.15s ease;
}
.tag_home_filters .tag_home_post_order .btn-mat:hover {
    background: rgba(47, 56, 255, 0.08) !important;
    color: #2f38ff !important;
}

/* ============ Filter Posts UI (above the feed) — pill-row on glass ============ */
.filterby,
.tag_page_nav.filterby,
#filterby-post {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.40);
    border-radius: 14px;
    padding: 6px !important;
    box-shadow: 0 8px 24px rgba(31, 38, 135, 0.10);
    margin-bottom: 16px;
}
body.mxm-glassy-dark .filterby,
body.mxm-glassy-dark .tag_page_nav.filterby,
body.mxm-glassy-dark #filterby-post {
    background: rgba(20, 22, 30, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.08);
}
.filter-by-li > a,
.filter-by-li .btn-mat {
    border-radius: 999px !important;
    transition: background 0.18s ease, color 0.18s ease;
    background: transparent !important;
}
.filter-by-li.active > a,
.filter-by-li.active .btn-mat {
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(47, 56, 255, 0.30);
}
.filter-by-li:not(.active) > a:hover,
.filter-by-li:not(.active) .btn-mat:hover {
    background: rgba(47, 56, 255, 0.08) !important;
    color: #2f38ff !important;
}
body.mxm-glassy-dark .filter-by-li:not(.active) > a:hover,
body.mxm-glassy-dark .filter-by-li:not(.active) .btn-mat:hover {
    background: rgba(124, 156, 255, 0.16) !important;
    color: #a8b6ff !important;
}
.tag_home_goup {
    background: rgba(47, 56, 255, 0.10) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(47, 56, 255, 0.18) !important;
}

/* ============ Desktop floating chat sidebar (.chat-wrapper bottom-right popups) ============ */
.chat-wrapper {
    border-radius: 14px !important;
    overflow: hidden;
}
.chat-wrapper .chat-tab-container,
.chat-wrapper .chat-tab-container-inner,
.chat-tab-box {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.40) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 44px rgba(31, 38, 135, 0.18), 0 1px 0 rgba(255,255,255,0.55) inset !important;
}
body.mxm-glassy-dark .chat-wrapper .chat-tab-container,
body.mxm-glassy-dark .chat-wrapper .chat-tab-container-inner,
body.mxm-glassy-dark .chat-tab-box {
    background: rgba(20, 22, 30, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.50) !important;
}
.chat-tab-header,
.chat-tab-status { background: transparent !important; }
.chat-user-list,
.chat-messages,
.chat-tab-input { background: transparent !important; }
.chat-tab-input textarea {
    background: rgba(127, 127, 127, 0.08) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(127, 127, 127, 0.18) !important;
}
.chat-tab-input textarea:focus { border-color: #2f38ff !important; background: rgba(47,56,255,0.06) !important; }

/* ============ Modal dialogs ============ */
.modal-content {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.40) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(31, 38, 135, 0.22), 0 1px 0 rgba(255,255,255,0.55) inset !important;
}
body.mxm-glassy-dark .modal-content {
    background: rgba(20, 22, 30, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.50) !important;
}
.modal-header, .modal-footer { border-color: rgba(127, 127, 127, 0.16) !important; }

/* ============ Header dropdowns (notifications / messages / user menu).
   HEADER BAR ITSELF UNTOUCHED — only its descending dropdown panels. ============ */
.tag_navbar_top_right .dropdown-menu,
.tag_navbar_top .dropdown-menu,
.tag_hdr_user_dropdown,
.notification-container .dropdown-menu,
.messages-notification-container .dropdown-menu {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.40) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 44px rgba(31, 38, 135, 0.18), 0 1px 0 rgba(255,255,255,0.55) inset !important;
}
body.mxm-glassy-dark .tag_navbar_top_right .dropdown-menu,
body.mxm-glassy-dark .tag_navbar_top .dropdown-menu,
body.mxm-glassy-dark .tag_hdr_user_dropdown,
body.mxm-glassy-dark .notification-container .dropdown-menu,
body.mxm-glassy-dark .messages-notification-container .dropdown-menu {
    background: rgba(20, 22, 30, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.50) !important;
}

/* ============ Empty states + skeleton loaders ============ */
.empty_state {
    background: rgba(127, 127, 127, 0.04);
    border: 1px solid rgba(127, 127, 127, 0.10);
    border-radius: 12px;
    padding: 18px;
}
.tag_post_skel,
.skel_noti { background: transparent !important; }

/* ============ Ad / boosted-post containers ============ */
.user-ad-container .panel-white,
.tag_ads_results .panel-white,
.tag_ads_listing .panel-white {
    background: rgba(255, 255, 255, 0.62) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 14px;
}
body.mxm-glassy-dark .user-ad-container .panel-white,
body.mxm-glassy-dark .tag_ads_results .panel-white,
body.mxm-glassy-dark .tag_ads_listing .panel-white {
    background: rgba(20, 22, 30, 0.58) !important;
    border-color: rgba(255, 255, 255, 0.08);
}

/* ============ Forum-specific surfaces ============ */
.tag_forum_main_hdr,
.tag_forum_main,
.tag_forum_section,
.tag_forum_thread,
.tag_forum_card,
.forum_main_body,
.tag_main_forum,
.wo_forum_main {
    background: rgba(255, 255, 255, 0.62) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 14px;
    box-shadow: 0 10px 36px rgba(31, 38, 135, 0.10);
}
body.mxm-glassy-dark .tag_forum_main_hdr,
body.mxm-glassy-dark .tag_forum_main,
body.mxm-glassy-dark .tag_forum_section,
body.mxm-glassy-dark .tag_forum_thread,
body.mxm-glassy-dark .tag_forum_card,
body.mxm-glassy-dark .forum_main_body,
body.mxm-glassy-dark .tag_main_forum,
body.mxm-glassy-dark .wo_forum_main {
    background: rgba(20, 22, 30, 0.58) !important;
    border-color: rgba(255, 255, 255, 0.08);
}
/* Forum link cards / row entries get a soft hover tint */
.tag_forum_section a,
.tag_forum_thread a { transition: background 0.15s ease; border-radius: 8px; }
.tag_forum_section a:hover,
.tag_forum_thread a:hover { background: rgba(47, 56, 255, 0.06); }

/* ============ Welcome screen — login box with glowing #2f38ff outline ============ */
.tag_auth_box {
    position: relative;
    border: 1px solid rgba(47, 56, 255, 0.28) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    box-shadow:
        0 0 0 1px rgba(47, 56, 255, 0.10),
        0 0 28px rgba(47, 56, 255, 0.20),
        0 24px 64px rgba(47, 56, 255, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.55) inset !important;
    animation: mxmAuthBoxBreath 4.5s ease-in-out infinite;
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
    overflow: hidden;
}
body.mxm-glassy-dark .tag_auth_box {
    background: rgba(20, 22, 30, 0.72) !important;
    border-color: rgba(47, 56, 255, 0.45) !important;
    box-shadow:
        0 0 0 1px rgba(47, 56, 255, 0.20),
        0 0 36px rgba(47, 56, 255, 0.30),
        0 24px 64px rgba(47, 56, 255, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
}
@keyframes mxmAuthBoxBreath {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(47, 56, 255, 0.10),
            0 0 24px rgba(47, 56, 255, 0.16),
            0 22px 56px rgba(47, 56, 255, 0.12),
            0 1px 0 rgba(255, 255, 255, 0.55) inset;
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(47, 56, 255, 0.22),
            0 0 40px rgba(47, 56, 255, 0.30),
            0 26px 70px rgba(47, 56, 255, 0.20),
            0 1px 0 rgba(255, 255, 255, 0.55) inset;
    }
}
body.mxm-glassy-dark .tag_auth_box { animation: mxmAuthBoxBreathDark 4.5s ease-in-out infinite; }
@keyframes mxmAuthBoxBreathDark {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(47, 56, 255, 0.18),
            0 0 32px rgba(47, 56, 255, 0.24),
            0 22px 56px rgba(47, 56, 255, 0.18),
            0 1px 0 rgba(255, 255, 255, 0.06) inset;
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(47, 56, 255, 0.34),
            0 0 52px rgba(47, 56, 255, 0.42),
            0 26px 70px rgba(47, 56, 255, 0.28),
            0 1px 0 rgba(255, 255, 255, 0.06) inset;
    }
}
@media (prefers-reduced-motion: reduce) { .tag_auth_box { animation: none !important; } }

/* Input fields inside the login box — high-end focus state */
.tag_auth_box .tag_field input {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.tag_auth_box .tag_field input:focus {
    border-color: #2f38ff !important;
    box-shadow: 0 0 0 4px rgba(47, 56, 255, 0.15) !important;
    outline: none !important;
}

/* Login button — brand gradient pill matching the rest of the system */
.tag_auth_box .tag_wel_btn,
.tag_auth_box .btn-main {
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 100%) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 16px rgba(47, 56, 255, 0.32), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    transition: transform 0.18s ease, box-shadow 0.22s ease, filter 0.18s ease;
}
.tag_auth_box .tag_wel_btn:hover,
.tag_auth_box .btn-main:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(47, 56, 255, 0.44), inset 0 1px 0 rgba(255,255,255,0.22) !important;
    filter: brightness(1.04);
}

/* ============ Welcome screen — successful login animation (#2f38ff checkmark + "Welcome home.") ============ */
/* Override welcome.css's position:absolute so the wrap stands on its own intrinsic height. Otherwise
   on desktop the parent collapses and the absolute wrap with it; mobile happened to work because
   the column flex grid gave the parent a non-zero height. Going static fixes both. */
.tag_auth_animation.mxm-auth-success-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    padding: 48px 20px 44px !important;
    width: 100% !important;
    min-height: 320px !important;
    height: auto !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    background-color: transparent !important;
    text-align: center;
}
.tag_auth_animation.mxm-auth-success-wrap.d-none { display: none !important; }

/* The wrap is static, so to give it the stage to itself we hide its siblings entirely. */
.tag_auth_box .tag_auth_animation.mxm-auth-success-wrap:not(.d-none) ~ * {
    display: none !important;
}

.mxm-auth-success-check {
    overflow: visible;
    flex-shrink: 0;
    filter: drop-shadow(0 10px 28px rgba(47, 56, 255, 0.40));
}
.mxm-auth-success-ring {
    stroke: #2f38ff;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: mxm-auth-circle-draw 0.55s 0s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.mxm-auth-success-tick {
    stroke: #2f38ff;
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: mxm-auth-tick-draw 0.38s 0.4s cubic-bezier(0.65, 0, 0.35, 1) forwards,
               mxm-auth-tick-glow 1.6s 0.8s ease-in-out infinite;
}
@keyframes mxm-auth-circle-draw { to { stroke-dashoffset: 0; } }
@keyframes mxm-auth-tick-draw   { to { stroke-dashoffset: 0; } }
@keyframes mxm-auth-tick-glow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(47,56,255,0)); }
    50%      { filter: drop-shadow(0 0 8px rgba(47,56,255,0.75)); }
}

.mxm-auth-success-text {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    background: linear-gradient(135deg, #2f38ff 0%, #7c5cff 50%, #2f38ff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transform: translateY(8px);
    animation:
        mxm-auth-text-enter   0.45s 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards,
        mxm-auth-text-shimmer 3.2s   1.30s ease-in-out infinite;
}
.mxm-auth-success-period {
    display: inline-block;
    opacity: 0;
    transform: translateY(-4px);
    animation: mxm-auth-period-pop 0.4s 1.20s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes mxm-auth-text-enter   { to { opacity: 1; transform: translateY(0); } }
@keyframes mxm-auth-text-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes mxm-auth-period-pop {
    0%   { opacity: 0; transform: translateY(-4px) scale(0.6); }
    60%  { opacity: 1; transform: translateY(2px)  scale(1.2); }
    100% { opacity: 1; transform: translateY(0)    scale(1);   }
}
@media (prefers-reduced-motion: reduce) {
    .mxm-auth-success-ring, .mxm-auth-success-tick { animation: none !important; stroke-dashoffset: 0 !important; }
    .mxm-auth-success-text, .mxm-auth-success-period { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============ Welcome screen (login / signup / startup) ============ */
.tag_welcome_form,
.tag_welcome_box,
.tag_log_form,
.tag_log_box,
.tag_startup_form,
.tag_signup_box,
.welcome-card,
.tag_wlcm_form { /* common WoWonder welcome wrappers */
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 56px rgba(31, 38, 135, 0.18), 0 1px 0 rgba(255,255,255,0.55) inset !important;
}
body.mxm-glassy-dark .tag_welcome_form,
body.mxm-glassy-dark .tag_welcome_box,
body.mxm-glassy-dark .tag_log_form,
body.mxm-glassy-dark .tag_log_box,
body.mxm-glassy-dark .tag_startup_form,
body.mxm-glassy-dark .tag_signup_box,
body.mxm-glassy-dark .welcome-card,
body.mxm-glassy-dark .tag_wlcm_form {
    background: rgba(20, 22, 30, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.50), 0 1px 0 rgba(255,255,255,0.06) inset !important;
}

/* ============ Lightbox upgrade — refined glass + smoother interactions ============ */
.lightbox-backgrond {
    background: rgba(8, 10, 18, 0.72) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    animation: mxmLboxBgFade 0.28s ease-out;
}
@keyframes mxmLboxBgFade { from { opacity: 0; } to { opacity: 1; } }

.lightbox-content {
    animation: mxmLboxContentIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mxmLboxContentIn {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1);     }
}

/* Toolbar glass pill at the top */
.lightbox-content .tag_lbox_toolbar {
    padding: 14px 18px !important;
    z-index: 5;
}
.lightbox-content .tag_lbox_toolbar > .valign {
    background: rgba(15, 17, 24, 0.55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.36);
}
.lightbox-content .tag_lbox_toolbar .btn-mat {
    width: 40px; height: 40px;
    border-radius: 50% !important;
    background: transparent !important;
    color: #fff !important;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.lightbox-content .tag_lbox_toolbar .btn-mat:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    transform: scale(1.06);
}
.lightbox-content .tag_lbox_toolbar .close-lightbox:hover {
    background: rgba(255, 90, 90, 0.18) !important;
    color: #ff8a8a !important;
}

/* Prev/next arrows — bigger, softer, with brand-glow on hover */
.lightbox-content .changer {
    width: 52px !important; height: 52px !important;
    border-radius: 50% !important;
    background: rgba(15, 17, 24, 0.50) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32) !important;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
}
.lightbox-content .changer:hover {
    background: rgba(47, 56, 255, 0.36) !important;
    border-color: rgba(124, 156, 255, 0.45) !important;
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 12px 36px rgba(47, 56, 255, 0.40) !important;
}
.lightbox-content .previous-btn,
.lightbox-content .next-btn { top: 50% !important; transform: translateY(-50%); }
.lightbox-content .previous-btn { left: 18px !important; }
.lightbox-content .next-btn     { right: 18px !important; }

/* Image area — smooth swipe transform target */
.lightbox-content .tag_lbox_img_innr {
    transition: background 0.22s ease;
}
.lightbox-content #draggableHelper {
    will-change: transform;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox-content.mxm-lbox-swiping #draggableHelper { transition: none; }

/* Slide-out / slide-in animations when navigating prev/next — ported from the gallery lightbox.
   Applied via JS: mxm-lbox-leave-left ("next" direction sends current image off to the left),
   then once the original Wo_NextPicture/etc. has swapped the src, mxm-lbox-enter-left runs from
   the right side back into place. */
.lightbox-content.mxm-lbox-leave-left  #draggableHelper { transform: translate3d(-100vw, 0, 0); opacity: 0; }
.lightbox-content.mxm-lbox-leave-right #draggableHelper { transform: translate3d( 100vw, 0, 0); opacity: 0; }
.lightbox-content.mxm-lbox-enter-left  #draggableHelper { animation: mxmLboxEnterLeft  0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.lightbox-content.mxm-lbox-enter-right #draggableHelper { animation: mxmLboxEnterRight 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes mxmLboxEnterLeft  { from { transform: translate3d( 100vw, 0, 0); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes mxmLboxEnterRight { from { transform: translate3d(-100vw, 0, 0); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .lightbox-content #draggableHelper { transition: none; }
    .lightbox-content.mxm-lbox-leave-left  #draggableHelper,
    .lightbox-content.mxm-lbox-leave-right #draggableHelper { transform: none; opacity: 0; }
    .lightbox-content.mxm-lbox-enter-left  #draggableHelper,
    .lightbox-content.mxm-lbox-enter-right #draggableHelper { animation: none; opacity: 1; }
}

/* Comment side rail glassy */
.lightbox-content .comment-section,
.lightbox-content .wow_lightbox_right {
    background: rgba(15, 17, 24, 0.55) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    color: #e8e8ee;
}
body.mxm-glassy-dark .lightbox-content .comment-section,
body.mxm-glassy-dark .lightbox-content .wow_lightbox_right {
    background: rgba(8, 10, 18, 0.62) !important;
}
.lightbox-content .comment-inner-footer textarea,
.lightbox-content .lighbox.comment-textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 999px !important;
    color: #fff !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.lightbox-content .comment-inner-footer textarea:focus,
.lightbox-content .lighbox.comment-textarea:focus {
    border-color: #2f38ff !important;
    background: rgba(47, 56, 255, 0.08) !important;
}

/* Page indicator dots for multi-image posts — fades in only when there are >1 images */
.mxm-lbox-dots {
    position: absolute;
    left: 50%; bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(15, 17, 24, 0.55);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mxm-lbox-dots.is-visible { opacity: 1; }
.mxm-lbox-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.32);
    transition: background 0.2s ease, transform 0.2s ease, width 0.25s ease;
}
.mxm-lbox-dot.is-active {
    width: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2f38ff, #7c5cff);
    box-shadow: 0 0 8px rgba(47, 56, 255, 0.55);
}

/* Mobile lightbox tweaks — arrows hidden in favor of swipe */
@media (max-width: 768px) {
    .lightbox-content .changer { display: none !important; }
    .lightbox-content .tag_lbox_toolbar { padding: 10px 12px !important; }
    .lightbox-content .tag_lbox_toolbar .btn-mat { width: 38px; height: 38px; }
    .mxm-lbox-dots { bottom: 16px; padding: 6px 10px; }
    .mxm-lbox-swipe-hint {
        position: absolute;
        left: 50%; top: 60%;
        transform: translateX(-50%);
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
        letter-spacing: 0.04em;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
        pointer-events: none;
        opacity: 0;
        animation: mxmLboxHint 2.6s ease-out 0.6s 1;
    }
    @keyframes mxmLboxHint {
        0%   { opacity: 0; }
        20%  { opacity: 0.95; }
        80%  { opacity: 0.95; }
        100% { opacity: 0; }
    }
}

/* ============ Scrollbar tint to match brand on glass scroll areas ============ */
.wow_content::-webkit-scrollbar-thumb,
.tag_scroll::-webkit-scrollbar-thumb { background: rgba(47, 56, 255, 0.28); border-radius: 6px; }
.wow_content::-webkit-scrollbar-thumb:hover,
.tag_scroll::-webkit-scrollbar-thumb:hover { background: rgba(47, 56, 255, 0.45); }

/* ============ /messages — full glass treatment ===========================
   Brings the messages page in line with the gallery / community-chat / settings
   surfaces. Scoped to `.tag_messages` to avoid bleeding into other chat widgets
   (the floating bottom-right chat sidebar has its own block above). Inherits
   the body font ("Carrois Gothic, sans-serif" from style.css:9) — same family
   that dominates the other upgraded surfaces. */

.tag_messages { padding-top: 14px; }

/* Outer card — same glass aesthetic as .wow_content but with rounded radius
   carried to inner panels. NOTE: overflow stays `visible` here so the
   header toolbar dropdowns (profile + gear) aren't clipped when they
   extend past the conversation-list column. The rounded corners still
   read correctly because the inner panels (`.tag_msg_user_list`,
   `.tag_msg_user_chat`) inherit them via the rules below. */
.tag_messages > .wow_content {
    border-radius: 18px;
    overflow: visible !important;
    padding: 0 !important;
}
.tag_messages .tag_msg_user_list {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
    overflow: visible;
}
.tag_messages .tag_msg_user_chat {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    overflow: hidden;
}

/* Two-pane layout. Left rail (conversation list) gets a soft right border so the
   panels feel distinct without a hard divider. */
.tag_messages .tag_message_innr {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 200px);
}
.tag_messages .tag_msg_user_list {
    border-right: 1px solid rgba(127, 127, 127, 0.12);
}
body.mxm-glassy-dark .tag_messages .tag_msg_user_list {
    border-right-color: rgba(255, 255, 255, 0.06);
}

/* ---- Headers (top of each panel) ----
   Same trap pattern as the post panel: putting `backdrop-filter` directly
   on `.tag_msg_header` makes it a containing block for fixed-positioned
   descendants AND a stacking-context barrier — which clips the profile
   and gear dropdown menus inside the toolbar. Render the glass via a
   `::before` pseudo and keep the header itself transparent + overflow
   visible so the dropdowns escape cleanly. */
.tag_messages .tag_msg_header {
    position: relative;
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(127, 127, 127, 0.10);
    background: transparent !important;
    overflow: visible !important;
    isolation: auto;
}
.tag_messages .tag_msg_header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.20) 100%);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    pointer-events: none;
}
body.mxm-glassy-dark .tag_messages .tag_msg_header::before {
    background: linear-gradient(180deg, rgba(15, 17, 24, 0.55) 0%, rgba(15, 17, 24, 0.25) 100%);
}
body.mxm-glassy-dark .tag_messages .tag_msg_header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
/* Toolbar dropdowns: switched from `position: absolute` (which kept
   landing off-screen on desktop because some ancestor's stacking-context
   or transform was hijacking the containing block) to `position: fixed`
   with JS-computed `top` / `left` set against the trigger button. This
   bypasses every parent overflow + stacking-context trap — the menu is
   always relative to the viewport. CSS just provides the positioning
   defaults so the menu is in a sane spot before JS runs (top-left
   corner, hidden until the parent .open lights it up). */
.tag_messages .tag_msg_toolbar { position: relative; }
.tag_messages .tag_msg_toolbar .dropdown-menu.tag_create_menu {
    position: fixed !important;
    top: auto;
    left: auto;
    right: auto;
    z-index: 2000 !important;
    /* The JS handler attaches `data-anchor="left|right"` so we can position
       relative to either the trigger's left edge (profile menu) or its
       right edge (gear menu). Default below covers the un-positioned case. */
}
.tag_messages .tag_msg_header .name {
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ---- Toolbars: pill chips for header dropdowns + action buttons ---- */
.tag_messages .tag_msg_toolbar > .btn {
    width: 40px; height: 40px;
    border-radius: 50% !important;
    background: rgba(127, 127, 127, 0.10) !important;
    border: 1px solid rgba(127, 127, 127, 0.14) !important;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 !important;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
}
.tag_messages .tag_msg_toolbar > .btn:hover {
    background: rgba(47, 56, 255, 0.14) !important;
    border-color: rgba(47, 56, 255, 0.24) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(47, 56, 255, 0.20);
}
.tag_messages .tag_msg_toolbar > .btn img { width: 32px; height: 32px; border-radius: 50%; }

/* ---- Search bar ---- */
.tag_messages .tag_msg_search {
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(127, 127, 127, 0.10);
}
body.mxm-glassy-dark .tag_messages .tag_msg_search {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.tag_messages .tag_msg_search .search_input {
    background: rgba(127, 127, 127, 0.10);
    border: 1px solid rgba(127, 127, 127, 0.16);
    border-radius: 999px;
    padding: 0 14px;
    display: flex; align-items: center; gap: 8px;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease;
}
.tag_messages .tag_msg_search .search_input:focus-within {
    background: rgba(47, 56, 255, 0.08);
    border-color: rgba(47, 56, 255, 0.45);
    box-shadow: 0 0 0 4px rgba(47, 56, 255, 0.12);
}
.tag_messages .tag_msg_search .search_input input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    font-size: 14px;
    color: inherit;
    outline: none;
}

/* ---- Conversation list items: glass cards with hover lift, brand-tinted
   active state, refined avatar shadow. ---- */
.tag_messages .messages-chat-list li,
.tag_messages .messages-group-list li,
.tag_messages .messagejoint li {
    border-radius: 14px;
    margin: 2px 8px;
    padding: 10px 12px;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.22s ease;
    border: 1px solid transparent;
}
.tag_messages .messages-chat-list li:hover,
.tag_messages .messages-group-list li:hover {
    background: rgba(47, 56, 255, 0.06);
    border-color: rgba(47, 56, 255, 0.14);
    transform: translateY(-1px);
}
.tag_messages .messages-chat-list li.active,
.tag_messages .messages-group-list li.active,
.tag_messages .messages-chat-list li.target,
.tag_messages .messages-group-list li.target {
    background: linear-gradient(135deg, rgba(47, 56, 255, 0.14), rgba(124, 92, 255, 0.10)) !important;
    border-color: rgba(124, 92, 255, 0.28);
    box-shadow: 0 4px 14px rgba(47, 56, 255, 0.14);
}
.tag_messages .messages-chat-list li .avatar img,
.tag_messages .messages-group-list li .avatar img {
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

/* Unread indicator dot — small gradient pill */
.tag_messages .messages-chat-list .unread,
.tag_messages .messages-group-list .unread {
    background: linear-gradient(135deg, #2f38ff, #7c5cff);
    box-shadow: 0 0 8px rgba(124, 92, 255, 0.45);
}

/* ---- Tabs row (Chats / Groups switch) — pinned to column bottom ----
   WoWonder's original `.tag_msg_switch` (style.css:1827) is `position:
   fixed; bottom: 0; width: calc(25% - 1px)` and then re-widthed per
   breakpoint at lines 3843/3941/4016/4071 to chase the conversation
   list's actual width. Brittle and viewport-coupled — at the wrong
   viewport the bar reads "super stretched" or misaligned to the rail
   above it.

   Switch to `position: absolute` against `.tag_msg_body` (which already
   has `position: relative` per style.css:1808). `left:0; right:0`
   automatically sizes the bar to the actual conversation-list column
   width regardless of breakpoint or flex layout above. No `calc()`,
   no media queries needed — the bar always matches the column. */
.tag_messages .tag_msg_body { position: relative; }
.tag_messages .tag_msg_switch {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    /* Inner padding holds the active pill off the bar's edges, matching the
       gallery's Newest/Popular/Oldest control and the lightbox toolbar
       aesthetic. The horizontal gap separates the two cells. */
    padding: 8px !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    border-top: 1px solid rgba(127, 127, 127, 0.14) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    z-index: 50;
}
body.mxm-glassy-dark .tag_messages .tag_msg_switch {
    background: rgba(15, 17, 24, 0.62) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}
/* Each tab cell shrinks slightly so the pill has breathing room from the bar
   edges. Override the original `li { width: 50% }` from style.css:1828 with
   `flex: 1 1 0` to share the bar evenly while honoring the gap. */
.tag_messages .tag_msg_switch > li {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tag_messages .tag_msg_switch > li > a {
    /* Override the original 56px-tall block link with a centered pill that
       fits inside the now-padded bar. Icon + label sit on one row for a
       tidier look than the stacked icon-above-text default. */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100%;
    height: auto !important;
    padding: 11px 14px !important;
    border-radius: 999px !important;
    color: inherit !important;
    background: transparent !important;
    opacity: 0.75 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.01em;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: opacity 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease, transform 0.15s ease;
}
.tag_messages .tag_msg_switch > li > a svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    display: inline-block !important;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}
.tag_messages .tag_msg_switch > li > a:hover,
.tag_messages .tag_msg_switch > li > a:focus {
    opacity: 1 !important;
    color: inherit !important;
    background: rgba(47, 56, 255, 0.10) !important;
    text-decoration: none !important;
}
.tag_messages .tag_msg_switch > li > a:hover svg {
    transform: scale(1.06);
}
.tag_messages .tag_msg_switch > li.active > a,
.tag_messages .tag_msg_switch > li > a.active,
.tag_messages .tag_msg_switch > li.active > a:hover,
.tag_messages .tag_msg_switch > li.active > a:focus,
.tag_messages .tag_msg_switch > li > a.active:hover,
.tag_messages .tag_msg_switch > li > a.active:focus {
    opacity: 1 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 100%) !important;
    box-shadow: 0 4px 12px rgba(47, 56, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    text-decoration: none !important;
}

/* ---- Active conversation panel ---- */
.tag_messages .tag_msg_user_chat { flex: 1; min-width: 0; }
.tag_messages .messagejoint { padding: 16px 18px !important; }

/* Message bubbles — refined: sent gradient, received soft glass, smoother corners. */
.tag_messages .messages-list .message-item .text,
.tag_messages .messagejoint .message-item .text,
.tag_messages .messagejoint .replier .text,
.tag_messages .messagejoint .recipient .text {
    border-radius: 18px !important;
    padding: 10px 14px !important;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.18s ease;
}
.tag_messages .messagejoint .replier .text {
    background: linear-gradient(135deg, #2f38ff 0%, #7c5cff 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(47, 56, 255, 0.28);
    border-bottom-right-radius: 6px !important;
}
.tag_messages .messagejoint .recipient .text {
    background: rgba(127, 127, 127, 0.10) !important;
    border: 1px solid rgba(127, 127, 127, 0.10);
    color: inherit !important;
    border-bottom-left-radius: 6px !important;
}
body.mxm-glassy-dark .tag_messages .messagejoint .recipient .text {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.08);
}

/* Timestamps + ticks */
.tag_messages .messagejoint .ajax-time,
.tag_messages .messagejoint .messages-last-sent {
    opacity: 0.55;
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* ---- Composer (text-sender-container at bottom) ---- */
.tag_messages .text-sender-container {
    display: flex; flex-direction: column; min-height: 100%;
}
.tag_messages .text-sender-container .text-typing-area,
.tag_messages .text-sender-container .send-message-form,
.tag_messages .text-sender-container .text-form,
.tag_messages .text-sender-container .send-message {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid rgba(127, 127, 127, 0.10) !important;
    padding: 12px 16px !important;
}
body.mxm-glassy-dark .tag_messages .text-sender-container .text-typing-area,
body.mxm-glassy-dark .tag_messages .text-sender-container .send-message-form,
body.mxm-glassy-dark .tag_messages .text-sender-container .text-form,
body.mxm-glassy-dark .tag_messages .text-sender-container .send-message {
    background: rgba(15, 17, 24, 0.45) !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}
.tag_messages .text-sender-container textarea,
.tag_messages .text-sender-container .message-content,
.tag_messages .tag_write_msg > textarea {
    background: rgba(127, 127, 127, 0.08) !important;
    border: 1px solid rgba(127, 127, 127, 0.16) !important;
    border-radius: 22px !important;
    /* Left padding leaves room for the absolutely-positioned .tag_msg_emostick
       emoji button that overlays the row at left:10 bottom:10. Right padding
       holds the charsLeft counter. */
    padding: 10px 16px 10px 46px !important;
    color: inherit !important;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease;
}
/* Lift the emoji-picker trigger so it sits centered against the new pill height
   instead of clipping into the placeholder. */
.tag_messages .tag_msg_emostick > .dropdown-toggle,
.tag_messages .tag_msg_emostick > .emo-message {
    left: 14px !important;
    bottom: 18px !important;
    color: rgba(127, 127, 127, 0.75) !important;
    transition: color 0.18s ease, transform 0.15s ease;
}
.tag_messages .tag_msg_emostick > .dropdown-toggle:hover,
.tag_messages .tag_msg_emostick > .emo-message:hover {
    color: #2f38ff !important;
    transform: scale(1.08);
}
.tag_messages .text-sender-container textarea:focus,
.tag_messages .text-sender-container .message-content:focus {
    background: rgba(47, 56, 255, 0.06) !important;
    border-color: rgba(47, 56, 255, 0.45) !important;
    box-shadow: 0 0 0 4px rgba(47, 56, 255, 0.12);
    outline: none !important;
}
.tag_messages .text-sender-container button[type="submit"],
.tag_messages .text-sender-container .send-text {
    background: linear-gradient(135deg, #2f38ff 0%, #7c5cff 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0 18px !important;
    height: 40px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(47, 56, 255, 0.30);
    transition: transform 0.15s ease, box-shadow 0.22s ease;
}
.tag_messages .text-sender-container button[type="submit"]:hover,
.tag_messages .text-sender-container .send-text:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(47, 56, 255, 0.40);
}

/* ---- Profile + gear icon dropdown menus (top of left rail) ----
   The .tag_msg_toolbar dropdowns use .tag_create_menu which is WoWonder's
   shared dropdown class. Scope the new glass treatment to `.tag_messages`
   so it only applies here, not to the rest of the site's dropdowns (until
   we explicitly extend it). */
.tag_messages .tag_msg_toolbar .dropdown-menu.tag_create_menu {
    margin-top: 8px;
    padding: 6px !important;
    min-width: 230px !important;
    border: 1px solid rgba(127, 127, 127, 0.12) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 1px 0 rgba(255, 255, 255, 0.55) inset !important;
    overflow: hidden;
}
body.mxm-glassy-dark .tag_messages .tag_msg_toolbar .dropdown-menu.tag_create_menu {
    background: rgba(20, 22, 30, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42), 0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
}
.tag_messages .tag_msg_toolbar .dropdown-menu.tag_create_menu > li {
    padding: 0 !important;
    margin: 1px 0 !important;
}
.tag_messages .tag_msg_toolbar .dropdown-menu.tag_create_menu > li > a,
.tag_messages .tag_msg_toolbar .dropdown-menu.tag_create_menu .pointer {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    color: inherit !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    background: transparent !important;
    transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
    cursor: pointer;
}
.tag_messages .tag_msg_toolbar .dropdown-menu.tag_create_menu > li > a:hover,
.tag_messages .tag_msg_toolbar .dropdown-menu.tag_create_menu .pointer:hover {
    background: rgba(47, 56, 255, 0.10) !important;
    color: #2f38ff !important;
}
.tag_messages .tag_msg_toolbar .dropdown-menu.tag_create_menu svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.16s ease;
}
.tag_messages .tag_msg_toolbar .dropdown-menu.tag_create_menu > li > a:hover svg,
.tag_messages .tag_msg_toolbar .dropdown-menu.tag_create_menu .pointer:hover svg {
    opacity: 1;
}
.tag_messages .tag_msg_toolbar .dropdown-menu.tag_create_menu hr,
.tag_messages .tag_msg_toolbar .dropdown-menu.tag_create_menu .divider {
    margin: 6px 4px !important;
    border-color: rgba(127, 127, 127, 0.16) !important;
    background: rgba(127, 127, 127, 0.16) !important;
    height: 1px;
}
/* Bring the right-aligned gear dropdown back to the trigger's edge — the
   default .dropdown-menu-right at this width was floating off-screen on
   narrow viewports. */
.tag_messages .tag_msg_toolbar .dropdown-menu-right.tag_create_menu {
    right: 0 !important;
    left: auto !important;
}

/* ---- Empty states (no chat selected / no users) ---- */
.tag_messages .empty_state {
    padding: 48px 24px;
    text-align: center;
    opacity: 0.7;
    font-size: 14px;
}
.tag_messages .empty_state svg { width: 92px; height: 92px; margin-bottom: 14px; opacity: 0.85; }

/* ---- Progress / "loading messages" indicator ---- */
.tag_messages .msg_progress {
    background: rgba(127, 127, 127, 0.08);
    height: 2px;
}
.tag_messages .msg_progress .indeterminate {
    background: linear-gradient(90deg, transparent, #2f38ff, #7c5cff, transparent);
}

/* ---- Mobile: stack panels (left rail collapses to full-width above active chat) ---- */
@media (max-width: 768px) {
    .tag_messages .tag_message_innr { flex-direction: column; min-height: 0; }
    .tag_messages .tag_msg_user_list,
    .tag_messages .tag_msg_user_chat { width: 100%; }
    .tag_messages .tag_msg_user_list { border-right: none; border-bottom: 1px solid rgba(127, 127, 127, 0.12); }
}

@media (prefers-reduced-motion: reduce) {
    .tag_messages .messages-chat-list li,
    .tag_messages .messages-group-list li,
    .tag_messages .tag_msg_toolbar > .btn,
    .tag_messages .text-sender-container button[type="submit"] { transition: none; }
    .tag_messages .messages-chat-list li:hover,
    .tag_messages .messages-group-list li:hover,
    .tag_messages .tag_msg_toolbar > .btn:hover,
    .tag_messages .text-sender-container button[type="submit"]:hover { transform: none; }
}

/* ============ Hamburger launcher — centered grid of action tiles ============
   Replaces the slide-in side panel `.tag_navbar_top_side_all` with a
   centered modal that shows the MxM seal, a gradient prompt, and a
   grid of icon tiles. Toggle remains the existing hamburger button +
   body.side_open class, so no JS or markup wiring elsewhere changes. */
.tag_navbar_top_side_all.mxm-launcher {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 24px !important;
    margin: 0 !important;
    background: rgba(8, 10, 18, 0.55) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    /* Flex column + `margin: auto` on the card centers when the card fits in
       the viewport but degrades to top-aligned + scrollable when the card is
       taller (e.g. mobile with many tiles). Using `align-items: center` here
       would clip the top of the card and make the clipped portion
       unscrollable — that was the "only a piece of the logo" bug on mobile. */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    transform: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.22s ease !important;
}
body.side_open .tag_navbar_top_side_all.mxm-launcher {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1046 !important;
}
.tag_navbar_top_side_all.mxm-launcher .tag_navbar_top_side_all_arrow { display: none !important; }

.mxm-launcher-card {
    width: 100%;
    max-width: 880px;
    /* `margin: auto` here is the load-bearing trick: when the card is shorter
       than the viewport, auto margins center it vertically inside the flex
       parent; when it's taller, auto margins compress to 0 and the card
       sits at the top with the rest of the content fully scrollable below. */
    margin: auto !important;
    padding: 32px 36px 40px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(8, 10, 18, 0.32), 0 1px 0 rgba(255, 255, 255, 0.55) inset;
    text-align: center;
    transform: translateY(8px) scale(0.985);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
    flex-shrink: 0;
}
body.side_open .mxm-launcher-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}
body.mxm-glassy-dark .mxm-launcher-card {
    background: rgba(20, 22, 30, 0.78);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.mxm-launcher-logo {
    display: flex;
    justify-content: center;
    margin: 0 0 18px;
}
.mxm-launcher-logo img {
    width: 96px;
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(47, 56, 255, 0.22));
}

.mxm-launcher-title {
    margin: 0 0 28px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 55%, #b76cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.mxm-launcher-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 768px) {
    .mxm-launcher-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .mxm-launcher-title { font-size: 22px; margin-bottom: 22px; }
    .mxm-launcher-logo img { width: 80px; }
    .mxm-launcher-card { padding: 26px 18px 30px; }
}
@media (max-width: 420px) {
    .mxm-launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mxm-launcher-tile {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 1 / 1;
    padding: 16px 10px !important;
    border-radius: 16px !important;
    background: rgba(127, 127, 127, 0.06) !important;
    border: 1px solid rgba(127, 127, 127, 0.10) !important;
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    min-width: 0 !important;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.22s ease, color 0.18s ease;
}
.mxm-launcher-tile:hover,
.mxm-launcher-tile:focus {
    background: linear-gradient(135deg, rgba(47, 56, 255, 0.14), rgba(124, 92, 255, 0.10)) !important;
    border-color: rgba(124, 92, 255, 0.28) !important;
    color: #2f38ff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(47, 56, 255, 0.18);
    outline: none !important;
    text-decoration: none !important;
}
body.mxm-glassy-dark .mxm-launcher-tile {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.mxm-glassy-dark .mxm-launcher-tile:hover,
body.mxm-glassy-dark .mxm-launcher-tile:focus {
    background: linear-gradient(135deg, rgba(47, 56, 255, 0.24), rgba(124, 92, 255, 0.18)) !important;
    border-color: rgba(124, 92, 255, 0.35) !important;
    color: #b6c0ff !important;
}

.mxm-launcher-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(47, 56, 255, 0.12), rgba(124, 92, 255, 0.08));
    color: #2f38ff;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.mxm-launcher-tile:hover .mxm-launcher-tile-icon,
.mxm-launcher-tile:focus .mxm-launcher-tile-icon {
    background: linear-gradient(135deg, #2f38ff 0%, #7c5cff 100%);
    color: #fff;
    transform: scale(1.06);
}
body.mxm-glassy-dark .mxm-launcher-tile-icon { color: #8b95ff; }

.mxm-launcher-tile-label {
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.01em;
    line-height: 1.25;
}

/* "Glow ring" modifier — applied to the MxM Gallery tile so it stands out
   in the grid. Bright #2f38ff conic-gradient ring rotates continuously
   around the tile, plus a soft outer halo for the lit-from-within feel.
   The conic gradient is registered via `@property` so the rotation
   actually animates the gradient (otherwise CSS animates discrete keyframes
   and the gradient would jump rather than sweep). A two-layer mask clips
   the pseudo down to a 3px ring around the tile so the rotating gradient
   only shows as the border. */
@property --mxm-ring-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.mxm-launcher-tile--glow {
    position: relative;
    isolation: isolate;
    /* Slightly brighter resting background than a normal tile so the
       ring reads as decoration on top, not as the tile's only color. */
    background: rgba(47, 56, 255, 0.06) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 26px rgba(47, 56, 255, 0.22), 0 0 24px rgba(47, 56, 255, 0.14) !important;
}
.mxm-launcher-tile--glow::before {
    content: '';
    position: absolute;
    inset: -3px;
    z-index: -1;
    border-radius: 19px;     /* tile is 16px, +3px outset = 19px to stay smooth */
    padding: 3px;            /* the ring's thickness */
    background: conic-gradient(
        from var(--mxm-ring-angle),
        rgba(47, 56, 255, 0)   0deg,
        rgba(47, 56, 255, 0)  70deg,
        #2f38ff              130deg,
        #7c5cff              175deg,
        #2f38ff              220deg,
        rgba(47, 56, 255, 0) 290deg,
        rgba(47, 56, 255, 0) 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
            mask-composite: exclude;
    animation: mxmRingSpin 3.2s linear infinite;
}
.mxm-launcher-tile--glow .mxm-launcher-tile-icon {
    background: linear-gradient(135deg, rgba(47, 56, 255, 0.24), rgba(124, 92, 255, 0.16));
    color: #2f38ff;
    box-shadow: 0 0 20px rgba(47, 56, 255, 0.34);
}
body.mxm-glassy-dark .mxm-launcher-tile--glow {
    background: rgba(47, 56, 255, 0.16) !important;
    box-shadow: 0 8px 30px rgba(47, 56, 255, 0.36), 0 0 32px rgba(124, 156, 255, 0.20) !important;
}
body.mxm-glassy-dark .mxm-launcher-tile--glow .mxm-launcher-tile-icon {
    color: #b6c0ff;
    box-shadow: 0 0 24px rgba(124, 156, 255, 0.42);
}
@keyframes mxmRingSpin {
    to { --mxm-ring-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
    .mxm-launcher-tile--glow::before { animation: none !important; }
}
@media (max-width: 420px) {
    .mxm-launcher-tile-icon { width: 56px; height: 56px; }
    .mxm-launcher-tile-icon svg { width: 30px; height: 30px; }
    .mxm-launcher-tile-label { font-size: 13px; }
}

/* Close (X) button — small floating chip top-right of the modal. */
.tag_toggle_sidebar_top {
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 1050 !important;
    width: 44px; height: 44px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(15, 17, 24, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    color: #fff !important;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.36);
    transition: background 0.18s ease, transform 0.18s ease, opacity 0.22s ease;
    opacity: 0;
    pointer-events: none;
}
body.side_open .tag_toggle_sidebar_top {
    display: inline-flex !important;
    opacity: 1;
    pointer-events: auto;
}
.tag_toggle_sidebar_top:hover {
    background: rgba(255, 90, 90, 0.18) !important;
    color: #ff8a8a !important;
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .tag_navbar_top_side_all.mxm-launcher,
    .mxm-launcher-card,
    .mxm-launcher-tile,
    .mxm-launcher-tile-icon,
    .tag_toggle_sidebar_top { transition: none !important; }
    .mxm-launcher-tile:hover { transform: none !important; }
}

/* ============ Who's Online card (home screen) ============
   Visually parallel to .mxm_recent_card and .mxm_threads_card, with the
   accent stripe and gradient title in GOLD (#ffc107 → #ff8a00) instead of
   the brand blue. Gold signals "live presence right now" — the same warm
   amber WoWonder uses for boosted/promoted indicators. */
.mxm_online_card {
    padding: 0 !important;
    margin-bottom: 22px !important;
    overflow: hidden;
    position: relative;
}
.mxm_online_accent {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 193, 7, 0.55) 12%,
        #ffc107 35%,
        #ff8a00 50%,
        #ffc107 65%,
        rgba(255, 193, 7, 0.55) 88%,
        transparent 100%);
    box-shadow:
        0 0 8px rgba(255, 193, 7, 0.50),
        0 0 18px rgba(255, 138, 0, 0.22);
    animation: mxmOnlineAccentPulse 4s ease-in-out infinite;
}
@keyframes mxmOnlineAccentPulse {
    0%, 100% { opacity: 0.7; filter: brightness(0.95); }
    50%      { opacity: 1;   filter: brightness(1.18); }
}
.mxm_online_head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 12px;
}
.mxm_online_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.22), rgba(255, 138, 0, 0.16));
    color: #d97706;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(255, 193, 7, 0.28);
}
body.mxm-glassy-dark .mxm_online_icon { color: #fbbf24; }
.mxm_online_head_meta { line-height: 1.2; min-width: 0; }
.mxm_online_head_label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
}
.mxm_online_head_title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #ffc107 0%, #ff8a00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.mxm_online_card .sidebar-users-may-know-container {
    padding: 4px 16px 16px;
}

@media (prefers-reduced-motion: reduce) {
    .mxm_online_accent { animation: none !important; opacity: 0.85; }
}

/* ============ Recently Active Members card (home screen) ============
   Glass card matching .mxm_threads_card / .mxm_cchat_card aesthetic, with
   a horizontally auto-scrolling marquee of avatars. Layout uses the same
   `.wow_content.tag_sidebar_widget` wrapper as the other home-side cards,
   so it inherits all the established glassy background / radius / shadow
   from the base `.wow_content` rule above. */
.mxm_recent_card {
    padding: 0 !important;
    margin-bottom: 32px !important;
    overflow: hidden;
    position: relative;
}
/* Global Feed header sits directly under the side-card stack; give it room
   and a brand-blue "live" ping dot inline before the title text. */
.mxm-global-feed-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    margin-bottom: 6px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.mxm-global-feed-sub {
    margin-bottom: 24px;
    opacity: 0.7;
}

/* Ping dot — iOS-style live indicator. A solid 10px brand-blue dot at center
   with an expanding/fading ripple ring that loops. Signals "this feed is
   live right now". The wrapper is `inline-flex` so it baselines neatly with
   the heading text and shrinks with the title at smaller viewports. */
.mxm-feed-ping {
    position: relative;
    display: inline-flex;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.mxm-feed-ping-dot {
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    background: #2f38ff;
    box-shadow:
        0 0 10px rgba(47, 56, 255, 0.55),
        0 0 18px rgba(47, 56, 255, 0.25);
}
.mxm-feed-ping-ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(47, 56, 255, 0.55);
    animation: mxmFeedPing 1.7s cubic-bezier(0, 0, 0.2, 1) infinite;
    transform-origin: center;
}
@keyframes mxmFeedPing {
    0%   { transform: scale(1);    opacity: 0.75; }
    75%  { transform: scale(2.4);  opacity: 0;    }
    100% { transform: scale(2.4);  opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
    .mxm-feed-ping-ripple { animation: none !important; opacity: 0; }
}
.mxm_recent_accent {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(47, 56, 255, 0.55) 12%,
        #2f38ff 35%,
        #7c5cff 50%,
        #2f38ff 65%,
        rgba(47, 56, 255, 0.55) 88%,
        transparent 100%);
    box-shadow:
        0 0 8px rgba(47, 56, 255, 0.45),
        0 0 18px rgba(124, 92, 255, 0.22);
    animation: mxmRecentAccentPulse 4.5s ease-in-out infinite;
}
@keyframes mxmRecentAccentPulse {
    0%, 100% { opacity: 0.65; filter: brightness(0.95); }
    50%      { opacity: 1;    filter: brightness(1.15); }
}
.mxm_recent_head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 12px;
}
.mxm_recent_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(47, 56, 255, 0.18), rgba(124, 92, 255, 0.14));
    color: #2f38ff;
    flex-shrink: 0;
}
body.mxm-glassy-dark .mxm_recent_icon { color: #8b95ff; }
.mxm_recent_head_meta { line-height: 1.2; min-width: 0; }
.mxm_recent_head_label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
}
.mxm_recent_head_title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #2f38ff 0%, #7c5cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ---- Marquee (horizontal auto-scrolling carousel) ----
   The track holds two copies of the user list. Animation translates from
   0 to -50% (one full set width) and loops; at -50% the second set is at
   the original position, so the loop is visually seamless. Edge mask
   fades the leading/trailing 32px so users don't pop in/out abruptly. */
.mxm_recent_marquee {
    padding: 4px 0 18px;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.mxm_recent_track {
    display: flex;
    width: max-content;
    gap: 18px;
    padding: 6px 16px;
    animation: mxmRecentMarquee 80s linear infinite;
    will-change: transform;
}
@keyframes mxmRecentMarquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
.mxm_recent_marquee:hover .mxm_recent_track,
.mxm_recent_marquee:focus-within .mxm_recent_track {
    animation-play-state: paused;
}

/* ---- Individual member tile ---- */
.mxm_recent_item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 84px;
    text-align: center;
    color: inherit !important;
    text-decoration: none !important;
    transition: transform 0.18s ease, color 0.18s ease;
}
.mxm_recent_item:hover,
.mxm_recent_item:focus {
    color: #2f38ff !important;
    transform: translateY(-3px);
    outline: none;
    text-decoration: none !important;
}
body.mxm-glassy-dark .mxm_recent_item:hover,
body.mxm-glassy-dark .mxm_recent_item:focus { color: #b6c0ff !important; }

.mxm_recent_avatar {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, rgba(47, 56, 255, 0.45), rgba(124, 92, 255, 0.32));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6px 18px rgba(47, 56, 255, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.55) inset;
    transition: box-shadow 0.22s ease, transform 0.18s ease;
}
.mxm_recent_item:hover .mxm_recent_avatar,
.mxm_recent_item:focus .mxm_recent_avatar {
    box-shadow:
        0 10px 26px rgba(47, 56, 255, 0.42),
        0 0 0 2px rgba(124, 92, 255, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.55) inset;
    transform: scale(1.04);
}
.mxm_recent_avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: rgba(255, 255, 255, 0.5);
}
body.mxm-glassy-dark .mxm_recent_avatar img { background: rgba(15, 17, 24, 0.5); }

.mxm_recent_dot {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #ffffff;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.55);
}
body.mxm-glassy-dark .mxm_recent_dot { border-color: #1a1c24; }

.mxm_recent_name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 84px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

@media (max-width: 768px) {
    .mxm_recent_item { width: 76px; }
    .mxm_recent_avatar { width: 64px; height: 64px; }
    .mxm_recent_name { max-width: 76px; font-size: 12px; }
    .mxm_recent_track { animation-duration: 60s; }
}

@media (prefers-reduced-motion: reduce) {
    .mxm_recent_track { animation: none !important; }
    .mxm_recent_marquee {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .mxm_recent_item { scroll-snap-align: center; }
    .mxm_recent_item:hover { transform: none; }
    .mxm_recent_avatar { transition: none; }
    .mxm_recent_accent { animation: none !important; opacity: 0.85; }
}

/* ============ Snackbar / toast notifications ============ */
.snackbar, .snackbar-container, .toast {
    background: rgba(20, 22, 30, 0.86) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    color: #fff !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32) !important;
}

/* ============ /setting/* sidebar — day-mode text contrast =================
   `.tag_sett_sidebar` is also `.wow_content`, so the glass-card rule above
   paints it translucent white. style.css then forces the sidebar text to
   `var(--header-color)` at `min-width: 1351px` (rules ~3788–3789), which is
   `#f9f9f9` in day mode — white-on-white, invisible. Night mode is fine
   because dark.css repaints the glass dark AND `--header-color` is still
   light-grey there. Re-color the sidebar text dark when the day glass is
   in effect. */
body:not(.mxm-glassy-dark) .tag_sett_sidebar > p.bold,
body:not(.mxm-glassy-dark) .tag_sett_sidebar > li > a,
body:not(.mxm-glassy-dark) .tag_sett_sidebar > li > a:hover,
body:not(.mxm-glassy-dark) .tag_sett_sidebar > li > a:focus,
body:not(.mxm-glassy-dark) .tag_sett_sidebar > li > a:active {
    color: #1f2937;
}
body:not(.mxm-glassy-dark) .tag_sett_sidebar > hr {
    border-color: rgba(0, 0, 0, 0.12);
}

/* ============ Safari fallback for ancient versions without backdrop-filter ============ */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .wow_content, .mxm_cchat_card, .mxm_threads_card, #posts .post .panel-white, .panel.panel-white,
    .tag_publisher, .publisher-box, .tag_st_publisher,
    .tag_stories_on_home, .greetalert,
    .chat-wrapper .chat-tab-container, .chat-wrapper .chat-tab-container-inner,
    .filterby, .tag_forum_main_hdr, .tag_forum_section, .tag_welcome_form, .tag_log_form {
        background: rgba(255, 255, 255, 0.92) !important;
    }
    body.mxm-glassy-dark .wow_content,
    body.mxm-glassy-dark .mxm_cchat_card,
    body.mxm-glassy-dark .mxm_threads_card,
    body.mxm-glassy-dark #posts .post .panel-white,
    body.mxm-glassy-dark .panel.panel-white,
    body.mxm-glassy-dark .tag_publisher,
    body.mxm-glassy-dark .publisher-box,
    body.mxm-glassy-dark .tag_st_publisher,
    body.mxm-glassy-dark .tag_stories_on_home,
    body.mxm-glassy-dark .greetalert,
    body.mxm-glassy-dark .chat-wrapper .chat-tab-container,
    body.mxm-glassy-dark .chat-wrapper .chat-tab-container-inner,
    body.mxm-glassy-dark .filterby,
    body.mxm-glassy-dark .tag_forum_main_hdr,
    body.mxm-glassy-dark .tag_forum_section,
    body.mxm-glassy-dark .tag_welcome_form,
    body.mxm-glassy-dark .tag_log_form {
        background: rgba(28, 30, 38, 0.94) !important;
    }
}