/* ═════════════════════════════════════════════════════
   MOBILE SIDEBAR — PHANTOM EDITION v5 (≤768px only)
   – Header: ☰ LEFT + centered BIG LOGO (75px) + Phantom RIGHT
   – Sidebar: FULL SCREEN (edge to edge, no inset)
   – Back arrow: integrated tab on the RIGHT copper rail, vertically centered
   – Profile: avatar LEFT · name + rank + level + status all aligned on the same x
   – Avatar click = edit (pencil removed)
   – Tracker follows the icons grid
   – Active users label + users list (grows)
   – Token balances (verified only) above footer
   – Footer: 44px one-line bar, connected left + wallet right
   Desktop safety nets appended at the bottom.
═════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── HEADER ── */
    .chat-header-bar {
        position: relative !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 12px !important;
        gap: 8px !important;
    }
    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        position: static !important;
        left: auto !important; top: auto !important;
        transform: none !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        overflow: visible !important;
        order: 1 !important;
        z-index: 3 !important;
    }
    .header-center { display: none !important; }

    .header-left .header-logo { display: none !important; }
    .header-logo-mobile {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        height: 75px !important;
        width: auto !important;
        max-width: 250px !important;
        object-fit: contain !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter:
            drop-shadow(0 2px 4px rgba(0,0,0,0.65))
            drop-shadow(0 0 12px rgba(32,255,98,0.4)) !important;
        z-index: 2 !important;
        flex-shrink: 0 !important;
        pointer-events: none !important;
    }

    .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        position: static !important;
        right: auto !important; top: auto !important;
        transform: none !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        order: 2 !important;
        z-index: 3 !important;
    }

    #sidebarToggle {
        position: static !important;
        top: auto !important; right: auto !important; left: auto !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--bg-elevated, rgba(20,20,20,0.92)) !important;
        border: 1px solid var(--border-default, #454B4B) !important;
        color: var(--text-primary) !important;
        font-size: 1.3rem !important;
        line-height: 1 !important;
        box-shadow: none !important;
        z-index: auto !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        margin: 0 !important;
    }
    #sidebarToggle::before { content: none !important; }
    .sidebar.open ~ .chat-panel #sidebarToggle {
        border-color: var(--accent-cyan, #20FF62) !important;
        color: var(--accent-cyan, #20FF62) !important;
        box-shadow: 0 0 14px rgba(32,255,98,0.5) !important;
    }

    .header-right #connectionPill,
    .header-right #onlineCountBadge,
    .header-right #walletAddress,
    .header-right #refreshBtn,
    .header-right #mobileEditBtn,
    .header-right #headerThemeBtn,
    .header-right #rankingsBtn,
    .header-right #modSettingsBtn {
        display: none !important;
    }
    .header-right .phantom-btn {
        width: 44px !important;
        height: 44px !important;
    }
    .header-right .phantom-btn img {
        width: 26px !important;
        height: 26px !important;
    }

    /* ═══════════════════════════════════════════════════
       ⚑ SIDEBAR — FULL SCREEN, edge to edge
    ═══════════════════════════════════════════════════ */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;

        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--bg-panel, #111827) !important;
        overflow: hidden !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;

        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        will-change: transform !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transform: translate3d(-100%, 0, 0) !important;
        z-index: 9000 !important;
    }
    .sidebar.open {
        transform: translate3d(0, 0, 0) !important;
    }

    /* Copper rail — right edge of the sidebar */
    .sidebar::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important; right: 0 !important;
        bottom: 0 !important; left: auto !important;
        width: 9px !important;
        height: 100% !important;
        background: linear-gradient(180deg,
            transparent 0%,
            var(--border-default, #3A2118) 15%,
            var(--accent-cyan, #19D62B) 30%,
            var(--border-default, #3A2118) 45%,
            var(--accent-cyan, #19D62B) 60%,
            var(--border-default, #3A2118) 75%,
            transparent 100%) !important;
        box-shadow:
            0 0 20px var(--accent-cyan, rgba(25, 214, 43, 0.85)),
            0 0 40px var(--accent-cyan, rgba(25, 214, 43, 0.4)) !important;
        background-size: 100% 200% !important;
        animation: railShimmer 4s ease-in-out infinite !important;
        z-index: 50 !important;
        pointer-events: none !important;
        will-change: background-position !important;
        border-radius: 0 !important;
    }

    /* ═══════════════════════════════════════════════════
       ⚑ BACK ARROW — integrated tab on the right copper rail
       – Flush against the rail's left edge (right: 9px)
       – Rounded on the LEFT, flat on the RIGHT (rail continues through)
       – Taller than wide → reads as a tab, not a floating button
       – Same accent color as the rail → seamless merge
    ═══════════════════════════════════════════════════ */
    .sidebar-back-btn {
        position: absolute !important;
        top: 50% !important;
        right: 9px !important;                          /* flush against rail */
        left: auto !important;
        transform: translateY(-50%) !important;
        transform-origin: right center !important;
        width: 34px !important;
        height: 58px !important;                        /* taller — reads as a tab */
        min-width: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        /* Rounded on the left, flat on the right → merges into the rail */
        border-radius: 12px 0 0 12px !important;

        /* Background warms toward the rail on the right edge */
        background: linear-gradient(90deg,
            var(--bg-elevated, rgba(20,20,20,0.92)) 0%,
            color-mix(in srgb,
                var(--accent-cyan, #20FF62) 14%,
                var(--bg-panel, #111827)) 100%) !important;

        /* Border on 3 sides only — the rail is the right side */
        border: 1px solid var(--accent-cyan, #20FF62) !important;
        border-right: none !important;

        color: var(--accent-cyan, #20FF62) !important;
        font-family: var(--font-mono, monospace) !important;
        font-size: 1.15rem !important;
        line-height: 1 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        z-index: 70 !important;

        transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;

        /* Glow only on the LEFT — the right side blends into the rail */
        box-shadow:
            -6px 0 16px var(--accent-cyan, rgba(32,255,98,0.30)),
            inset 0 1px 0 rgba(255,255,255,0.08) !important;

        /* Small chamfer where it meets the rail (top & bottom of right edge) */
        clip-path: polygon(
            0 0,
            calc(100% - 2px) 0,
            100% 6px,
            100% calc(100% - 6px),
            calc(100% - 2px) 100%,
            0 100%
        );
    }
    .sidebar-back-btn .arrow {
        font-size: 1.15rem !important;
        line-height: 1 !important;
        display: inline-block !important;
        transition: transform 0.15s ease !important;
    }
    .sidebar-back-btn .label { display: none !important; }

    .sidebar-back-btn:hover,
    .sidebar-back-btn:focus-visible {
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--accent-cyan, #20FF62) 18%, var(--bg-panel, #111827)) 0%,
            color-mix(in srgb, var(--accent-cyan, #20FF62) 38%, var(--bg-panel, #111827)) 100%) !important;
        outline: none !important;
        box-shadow:
            -8px 0 24px var(--accent-cyan, rgba(32,255,98,0.50)),
            inset 0 1px 0 rgba(255,255,255,0.14) !important;
    }
    .sidebar-back-btn:hover .arrow,
    .sidebar-back-btn:focus-visible .arrow {
        transform: translateX(-3px) !important;
    }

    .sidebar-back-btn:active {
        background: var(--accent-cyan, #20FF62) !important;
        color: var(--bg-panel, #111827) !important;
        box-shadow:
            -4px 0 20px var(--accent-cyan, rgba(32,255,98,0.85)),
            inset 0 1px 0 rgba(255,255,255,0.20) !important;
    }
    .sidebar-back-btn:active .arrow {
        transform: translateX(-4px) !important;
    }

    /* ═══════════════════════════════════════════════════
       ⚑ PROFILE — avatar left, name + rank + level + status
       all aligned at the SAME x to the right of the avatar.
    ═══════════════════════════════════════════════════ */
    .sidebar-user-profile-big {
        flex: 0 0 auto !important;
        position: relative !important;
        display: grid !important;
        grid-template-columns: 84px minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "avatar  name    actions"
            "avatar  rank    actions"
            "avatar  level   actions"
            "avatar  status  actions";
        column-gap: 12px;
        row-gap: 5px;
        padding: 14px 16px 14px !important;
        padding-right: calc(16px + 9px) !important;    /* room for copper rail */
        min-height: 128px !important;
        box-sizing: border-box !important;
        align-items: start;
        border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08)) !important;
    }

    /* Kill the old fake "+" placeholders permanently */
    .sidebar-user-profile-big::before,
    .sidebar-user-profile-big::after {
        content: none !important;
        display: none !important;
    }

    /* Flatten .big-info so its children join the parent grid */
    .sidebar-user-profile-big .big-info {
        display: contents !important;
    }

    /* ── Name — top of the info column, left-aligned with badges ── */
    .sidebar-user-profile-big .big-name {
        grid-area: name;
        align-self: start;
        justify-self: start !important;
        font-size: 1.15rem !important;
        line-height: 1.15 !important;
        letter-spacing: 0.04em !important;
        font-weight: 800 !important;
        margin: 0 !important;
        max-width: 10ch !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-transform: uppercase;
    }

    /* ── Avatar — 84px, matches info column height ── */
    .sidebar-user-profile-big .big-avatar {
        grid-area: avatar;
        width: 84px !important;
        height: 84px !important;
        min-width: 84px !important;
        min-height: 84px !important;
        align-self: start;
        font-size: 1.8rem !important;
        border-width: 2px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s ease !important;
    }
    .sidebar-user-profile-big .big-avatar:active {
        transform: scale(0.94) !important;
    }

    /* ── Rank — own row, single line, aligned with name ── */
    .sidebar-user-profile-big .big-rank {
        grid-area: rank;
        align-self: start;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.68rem !important;
        padding: 2px 9px !important;
        margin: 0 !important;
        line-height: 1 !important;
        letter-spacing: 0.04em !important;
        white-space: nowrap !important;
        justify-self: start !important;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sidebar-user-profile-big .big-rank.hidden { display: none !important; }

    /* ── Level — own row, single line, aligned with name ── */
    .sidebar-user-profile-big .big-level {
        grid-area: level;
        align-self: start;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.68rem !important;
        padding: 2px 9px !important;
        margin: 0 !important;
        line-height: 1 !important;
        letter-spacing: 0.04em !important;
        white-space: nowrap !important;
        justify-self: start !important;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sidebar-user-profile-big .big-level.hidden { display: none !important; }

    /* ── Status line ── */
    .sidebar-user-profile-big .big-status {
        grid-area: status;
        align-self: start;
        font-size: 0.76rem !important;
        gap: 5px !important;
        margin: 2px 0 0 0 !important;
        color: var(--text-secondary) !important;
        white-space: nowrap !important;
    }

    /* ── Pencil hidden on mobile — edit fires from avatar click ── */
    .sidebar-user-profile-big .edit-profile-btn,
    .sidebar-user-profile-big #sidebarChangeNameBtn {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════
       ⚑ 2×2 FUNCTION GRID — top-right, real buttons only
       (JS shim creates .sidebar-profile-actions and moves
        #sidebarThemeBtn + #rankingsBtn into it, plus adds
        #sidebarRefreshBtn and #sidebarModBtn)
    ═══════════════════════════════════════════════════ */
    .sidebar-user-profile-big .sidebar-profile-actions {
        grid-area: actions;
        align-self: start;
        justify-self: end;
        display: grid !important;
        grid-template-columns: 44px 44px;
        grid-template-rows: 44px 44px;
        gap: 6px;
    }

    .sidebar-user-profile-big .sidebar-profile-actions > .btn-icon {
        position: static !important;
        top: auto !important;
        right: auto !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.15rem !important;
        line-height: 1 !important;
        border-radius: 10px !important;
        background: var(--bg-elevated, rgba(255,255,255,0.06)) !important;
        border: 1px solid var(--border-default, #454B4B) !important;
        color: var(--text-primary, #fff) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent;
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease !important;
        z-index: auto !important;
    }
    .sidebar-user-profile-big .sidebar-profile-actions > .btn-icon:active {
        transform: scale(0.92);
    }
    .sidebar-user-profile-big .sidebar-profile-actions > .btn-icon:hover,
    .sidebar-user-profile-big .sidebar-profile-actions > .btn-icon:focus-visible {
        border-color: var(--accent-cyan, #20FF62) !important;
        box-shadow: 0 0 14px rgba(32,255,98,0.45) !important;
        outline: none !important;
    }
    .sidebar-user-profile-big .sidebar-profile-actions > .btn-icon.hidden {
        display: none !important;
    }

    /* Fallback: only while JS shim hasn't moved the buttons yet */
    .sidebar > #sidebarThemeBtn,
    .sidebar > #rankingsBtn {
        position: absolute !important;
        top: 14px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 1.15rem !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
        background: var(--bg-elevated, rgba(255,255,255,0.06)) !important;
        border: 1px solid var(--border-default, #454B4B) !important;
        color: var(--text-primary, #fff) !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }
    .sidebar > #sidebarThemeBtn {
        right: calc(22px + 9px + 44px + 8px) !important;
    }
    .sidebar > #rankingsBtn {
        right: calc(22px + 9px) !important;
    }
    .sidebar > #sidebarThemeBtn:hover,
    .sidebar > #rankingsBtn:hover {
        border-color: var(--accent-cyan, #20FF62) !important;
        box-shadow: 0 0 14px rgba(32,255,98,0.45) !important;
    }

    /* ── TOKEN TRACKER — follows the icons grid ── */
    .sidebar .token-tracker.mobile-only {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 14px 22px !important;
        padding-right: calc(22px + 9px) !important;
        gap: 12px !important;
        font-size: 1.35rem !important;
        font-weight: 700 !important;
        border: none !important;
        border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08)) !important;
        background: transparent !important;
    }
    .sidebar .token-tracker.mobile-only.hidden { display: none !important; }
    .sidebar .token-tracker.mobile-only .token-logo {
        width: 28px !important;
        height: 28px !important;
    }
    .sidebar .token-tracker.mobile-only .token-name { font-size: 1.3rem !important; }
    .sidebar .token-tracker.mobile-only .token-price { font-size: 1.3rem !important; }
    .sidebar .token-tracker.mobile-only .token-change { font-size: 1.2rem !important; }

    /* ── ACTIVE USERS label ── */
    .sidebar-section-label {
        flex: 0 0 auto !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        padding: 14px 22px 10px !important;
        padding-right: calc(22px + 9px) !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: var(--text-primary) !important;
    }
    .sidebar-section-label .active-users-count {
        font-size: 0.9rem !important;
        font-weight: 800 !important;
        padding: 3px 12px !important;
        border-radius: 6px !important;
        background: linear-gradient(135deg,
            var(--bg-elevated, rgba(255,255,255,0.1)) 0%,
            var(--bg-hover, rgba(255,255,255,0.06)) 100%) !important;
        color: var(--accent-cyan, #20FF62) !important;
        border: 1px solid var(--accent-cyan, rgba(32,255,98,0.4)) !important;
        box-shadow: 0 0 10px rgba(32,255,98,0.25) !important;
        line-height: 1 !important;
    }

    /* ── USERS list — ONLY flexible row, fills all remaining space ── */
    .sidebar-users {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 4px 22px 10px !important;
        padding-right: calc(22px + 9px) !important;
        scrollbar-width: thin !important;
        overscroll-behavior: contain !important;
    }
    .sidebar-user-item {
        padding: 12px 14px !important;
        margin-bottom: 6px !important;
        border-radius: 10px !important;
    }
    .sidebar-user-item .user-avatar {
        width: 44px !important;
        height: 44px !important;
        font-size: 1rem !important;
    }
    .sidebar-user-item .user-name { font-size: 1rem !important; }
    .sidebar-user-item .user-status-text { font-size: 0.78rem !important; }
    .sidebar-user-item .private-btn {
        padding: 8px 14px !important;
        font-size: 0.78rem !important;
    }
    .no-users-sidebar {
        padding: 40px 20px !important;
        font-size: 0.9rem !important;
        text-align: center !important;
    }

    /* ── STREAK — hidden ── */
    .sidebar .sidebar-streak-display { display: none !important; }

    /* ── TOKEN BALANCES — verified only, container hides when empty ── */
    .sidebar #walletTokenList {
        flex: 0 0 auto !important;
        background: transparent !important;
        color: var(--text-secondary) !important;
        border: none !important;
        border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08)) !important;
        padding: 10px 22px !important;
        padding-right: calc(22px + 9px) !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        max-height: 56px !important;
        overflow: hidden !important;
    }
    .sidebar #walletTokenList:not(:has(.token-row.target)) {
    display: none !important;
}
.sidebar #walletTokenList > div:first-child { display: none !important; }
.sidebar #walletTokenList > div:not(.token-row.target) {
    display: none !important;
}
.sidebar #walletTokenList > div.token-row.target {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
.sidebar #walletTokenList > div.token-row.target > span:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--text-primary) !important;
}
.sidebar #walletTokenList > div.token-row.target > span:last-child {
    flex-shrink: 0 !important;
    font-weight: 800 !important;
    color: var(--accent-cyan, #20FF62) !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 1rem !important;
}

    /* ═══════════════════════════════════════════════════
       ⚑ FOOTER — 44px one-line bar, connected left + wallet right
    ═══════════════════════════════════════════════════ */
    .sidebar-footer {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 22px !important;
        padding-right: calc(22px + 9px) !important;
        box-sizing: border-box !important;
        border: none !important;
        border-top: 2px solid var(--border-default, #70442D) !important;
        background: var(--bg-panel, #111827) !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.35) !important;
        overflow: hidden !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
    }
    .sidebar-footer .status-dot-sm {
        width: 8px !important;
        height: 8px !important;
        flex-shrink: 0 !important;
    }
    .sidebar-footer #sidebarStatusText {
        flex-shrink: 0 !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        letter-spacing: 0.02em !important;
    }
    .sidebar-footer .wallet-address {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 170px !important;
        display: inline !important;
        margin-left: auto !important;
        text-align: right !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.85rem !important;
        color: var(--text-secondary) !important;
        font-variant-numeric: tabular-nums !important;
        line-height: 1 !important;
    }

    /* No color transitions (theme-swap flicker) */
    .sidebar .sidebar-users,
    .sidebar .sidebar-footer,
    .sidebar .token-tracker.mobile-only,
    .sidebar #walletTokenList,
    .sidebar-user-item,
    .sidebar-user-item * { transition: none !important; }
}

/* ── Rail shimmer ── */
@keyframes railShimmer {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 0% 100%; }
}

/* ── BACK TO CHAT — never on desktop ── */
@media (min-width: 769px) {
    .sidebar-back-btn { display: none !important; }
}

/* ═════════════════════════════════════════════════════
   ⚑ X / TWITTER EMBEDS — fit inside bubble on every theme
═════════════════════════════════════════════════════ */
.msg-bubble .twitter-tweet-rendered,
.msg-bubble iframe[id^="twitter-widget"] {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    display: block !important;
    transform: none !important;
    position: relative !important;
    left: auto !important;
}
.msg-bubble:has(.twitter-tweet-rendered),
.msg-bubble:has(iframe[id^="twitter-widget"]),
.msg-bubble:has(blockquote.twitter-tweet) {
    max-width: 100% !important;
    overflow: visible !important;
}
.msg-wrapper:has(.twitter-tweet-rendered),
.msg-wrapper:has(iframe[id^="twitter-widget"]),
.msg-wrapper:has(blockquote.twitter-tweet) {
    max-width: 100% !important;
    overflow: visible !important;
}
.msg-bubble blockquote.twitter-tweet {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
@media (max-width: 768px) {
    .msg-wrapper:has(.twitter-tweet-rendered) .msg-bubble,
    .msg-wrapper:has(iframe[id^="twitter-widget"]) .msg-bubble,
    .msg-wrapper:has(blockquote.twitter-tweet) .msg-bubble {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
}

/* ═════════════════════════════════════════════════════
   ⚑ DESKTOP SAFETY NET (≥769px)
═════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    /* Header logo — always visible on desktop */
    .header-left .header-logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        height: 60px !important;
        width: auto !important;
    }
    .header-logo-mobile { display: none !important; }

    /* Phantom button — always visible on desktop */
    .header-right .phantom-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Keep the "Live" pill + online count HIDDEN on desktop */
    .header-right #connectionPill,
    .header-right #onlineCountBadge {
        display: none !important;
    }

    /* Sidebar — restore desktop defaults */
    .sidebar {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--sidebar-width, 280px) !important;
        max-width: var(--sidebar-width, 280px) !important;
        height: 100% !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        border: none !important;
        border-right: 3px solid #B25E22 !important;
        border-radius: 0 6px 6px 0 !important;
        box-shadow:
            inset 2px 0 6px rgba(255,255,255,0.06),
            inset -3px 0 8px rgba(0,0,0,0.5),
            2px 0 12px rgba(25, 214, 43, 0.2) !important;
        transform: none !important;
    }

    /* Restore desktop footer */
    .sidebar-footer {
        display: flex !important;
        height: auto !important;
        min-height: 36px !important;
        max-height: none !important;
        padding: 14px 16px !important;
        border-top: 2px solid #70442D !important;
        background: linear-gradient(145deg, #031407 0%, #021206 100%) !important;
        box-shadow: inset 0 2px 4px rgba(255,255,255,0.06) !important;
    }

    /* Restore desktop tracker / streak / token list */
    .sidebar .token-tracker.mobile-only { display: none !important; }
    .sidebar .sidebar-streak-display { display: flex !important; }
    .sidebar #walletTokenList { display: block !important; }

    /* Alpha-mask action cards — keep ::after base */
    .msn-right-sidebar .msn-rs-actions #headerThemeBtn.msn-rs-card::after,
    .msn-right-sidebar .msn-rs-actions #rankingsBtn.msn-rs-card::after,
    .msn-right-sidebar .msn-rs-actions #modSettingsBtn.msn-rs-card::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        pointer-events: none !important;
        z-index: 0 !important;
        border-radius: inherit !important;
    }
}

/* ═════════════════════════════════════════════════════
   ⚑ DESKTOP PROFILE REVAMP (≥769px)
   – Container forced back to flex (undo mobile grid)
   – Hide the pencil (kept in DOM so Edit Profile still works)
   – Avatar 80px (25% bigger than 64)
   – Hover: VIEW PROFILE overlay INSIDE the avatar circle only
   – Overlay uses ::before so theme's ::after (specular) stays intact
   – Info column rebalanced for larger avatar
═════════════════════════════════════════════════════ */
@media (min-width: 769px) {

    /* ── Container — force back to flex (undo the mobile grid) ── */
    .sidebar-user-profile-big {
        display: flex !important;
        position: relative !important;
        gap: 14px !important;
        padding: 18px 16px 16px !important;
        overflow: visible !important;
        cursor: default !important;
        min-height: 0 !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
    }
    .sidebar-user-profile-big .big-info {
        display: flex !important;
    }
    .sidebar-user-profile-big .big-name,
    .sidebar-user-profile-big .big-rank,
    .sidebar-user-profile-big .big-level,
    .sidebar-user-profile-big .big-status {
        grid-area: auto !important;
        justify-self: auto !important;
        align-self: auto !important;
    }

    /* ── Avatar — 25% bigger: 64 → 80 ── */
    .sidebar-user-profile-big .big-avatar {
        width: 80px !important;
        height: 80px !important;
        font-size: 1.85rem !important;
        border-width: 2px !important;
        flex-shrink: 0 !important;
        position: relative !important;
        cursor: pointer !important;
        overflow: hidden !important;
        border-radius: 50% !important;
    }

    /* ── VIEW PROFILE overlay — lives INSIDE the avatar circle ──
       Uses ::before so the theme's ::after (specular highlight)
       stays intact. z-index: 6 lifts it above that highlight. */
    .sidebar-user-profile-big .big-avatar::before {
        content: 'VIEW\A PROFILE';
        white-space: pre;
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
        background: rgba(5, 8, 16, 0.88) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        color: var(--accent-cyan, #00f0ff) !important;
        font-family: var(--font-mono, monospace) !important;
        font-size: 0.55rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
        line-height: 1.25 !important;
        text-transform: uppercase !important;
        text-shadow: 0 0 10px var(--accent-cyan, rgba(0, 240, 255, .9)) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.2s ease !important;
        z-index: 6 !important;
        border-radius: 50% !important;
    }
    .sidebar-user-profile-big .big-avatar:hover::before,
    .sidebar-user-profile-big .big-avatar:focus-visible::before {
        opacity: 1 !important;
    }

    /* ── Info column — rebalanced for the 80px avatar ── */
    .sidebar-user-profile-big .big-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        padding-left: 4px !important;
    }

    .sidebar-user-profile-big .big-name {
        font-size: 1.2rem !important;
        line-height: 1.15 !important;
        letter-spacing: 0.02em !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .sidebar-user-profile-big .big-rank,
    .sidebar-user-profile-big .big-level {
        display: inline-block !important;
        font-size: 0.68rem !important;
        padding: 3px 10px !important;
        margin: 2px 4px 0 0 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.05em !important;
        vertical-align: middle !important;
        align-self: flex-start !important;
    }

    .sidebar-user-profile-big .big-status {
        font-size: 0.76rem !important;
        gap: 5px !important;
        margin-top: 3px !important;
        color: var(--text-secondary) !important;
    }

    /* ── Hide pencil (desktop only) ── */
    .sidebar-user-profile-big .edit-profile-btn,
    .sidebar-user-profile-big #sidebarChangeNameBtn {
        display: none !important;
    }

    /* ── Kill any leftover overlay on the container itself ── */
    .sidebar-user-profile-big::before,
    .sidebar-user-profile-big::after {
        content: none !important;
        display: none !important;
    }

    /* ── Hide the mobile 2×2 actions grid on desktop ── */
    .sidebar-user-profile-big .sidebar-profile-actions {
        display: none !important;
    }
}

/* ═════════════════════════════════════════════════════
   ⚑ DESKTOP — wallet moves from header to sidebar
   footer (matches mobile layout) + refresh button removed
═════════════════════════════════════════════════════ */
@media (min-width: 769px) {

    /* Hide the header wallet display on desktop */
    .header-right #walletAddress,
    .header-right .header-wallet-address {
        display: none !important;
    }

    /* Hide the refresh button on desktop */
    .header-right #refreshBtn {
        display: none !important;
    }

    /* Sidebar footer — wallet shows on the right */
    .sidebar-footer {
        justify-content: space-between !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }

    .sidebar-footer .wallet-address {
        display: inline-block !important;
        font-size: 0.75rem !important;
        flex: 0 1 auto !important;
        margin-left: auto !important;
        max-width: 145px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: right !important;
        color: var(--text-secondary, #94a3b8) !important;
    }

    /* Don't reserve space when nothing's connected */
    .sidebar-footer .wallet-address:empty {
        display: none !important;
        margin-left: 0 !important;
    }
}