/* =========================================
   MOBILE RESPONSIVENESS & MENU
   ========================================= */

/* Default: Hide Mobile Elements on Desktop */
#mobile-menu-btn,
#mobile-menu-overlay,
#mobile-launcher,
#mobile-header-actions,
#persistent-welcome-mobile {
    display: none !important;
}

/* Mobile Media Query */
@media (max-width: 768px) {

    /* =============================================
       1. GLOBAL OVERFLOW FIX
       ============================================= */
    html,
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        /* Allow vertical scrolling */
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    /* =============================================
       2. HEADER — Compact Single Row
       ============================================= */
    .site-head-wrapper {
        height: auto !important;
        position: sticky !important;
        top: 0;
        z-index: 6000;
    }

    .site-head {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px !important;
        /* Restored comfortable padding */
        height: auto !important;
        min-height: auto !important;
        gap: 0 !important;
    }

    #mobile-page-container {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 10000000 !important;
        /* Must be higher than account modal (999999) for pages opened from account dashboard */
        pointer-events: none !important;
    }

    #mobile-page-container>* {
        pointer-events: auto !important;
    }

    /* Hide Desktop Nav & Tagline */
    .site-head .nav-actions,
    .site-head .center-tagline {
        display: none !important;
    }

    /* Logo — Fit on small screens */
    .logo-area {
        flex-shrink: 1 !important;
        min-width: 0;
        max-width: calc(100% - 60px);
        margin: 0 !important;
    }

    .text-logo-mode {
        font-size: 18px !important;
        letter-spacing: -0.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .logo {
        width: 36px !important;
        height: 36px !important;
    }

    /* Hide hamburger — replaced by launcher grid */
    #mobile-menu-btn {
        display: none !important;
    }

    /* Show Mobile Header Actions (Account + Wallet) */
    #mobile-header-actions {
        display: flex !important;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .mobile-header-icon {
        background: #04080b !important;
        /* Solid background to hide "ghost" elements */
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--color-accent-cyan);
        width: 36px;
        height: 36px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        cursor: pointer;
        /* FORCE VISIBILITY */
        visibility: visible !important;
        opacity: 1 !important;
        transition: all 0.15s;
    }

    .mobile-header-icon:active {
        border-color: var(--color-accent-cyan);
        color: var(--color-accent-cyan);
        background: rgba(0, 242, 254, 0.08);
    }

    /* Persistent Welcome Message — Now inside header */
    #persistent-welcome-mobile {
        display: block !important;
        background: transparent;
        color: var(--color-text-dim);
        font-family: 'Space Mono', monospace;
        font-size: 10px !important;
        padding: 5px 0 5px 0 !important;
        /* Restored padding */
        border-top: 1px solid rgba(0, 242, 254, 0.1);
        width: 100% !important;
        margin-top: 8px !important;
        /* Restored margin */
        flex-basis: 100%;
        transition: opacity 0.2s ease;
    }

    /* Hide welcome ticker when a mobile widget is active to save space */
    /* body.mobile-widget-active #persistent-welcome-mobile {
        display: none !important;
    } */

    #persistent-welcome-mobile .launcher-highlight {
        color: var(--color-accent-cyan);
    }

    /* Force Back Button Default State */
    #mobile-back-btn {
        display: none;
        /* Hidden by default on home */
        position: absolute !important;
        top: 80px !important;
        left: 10px !important;
        z-index: 7000 !important;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--color-accent-cyan);
        width: 36px;
        height: 36px;
        border-radius: 4px;
        font-size: 18px;
        cursor: pointer;
        line-height: 1;
        padding-bottom: 2px;
    }

    /* Push content down - styling for unboxed look */
    .section-categories-container {
        margin-top: 50px !important;
        /* Clear header + welcome */
        padding-top: 10px !important;
        position: relative;
        z-index: 5;
    }

    /* Stack Header for cleaner look - UNBOXED */
    .section-categories-container .categories-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        /* Increased gap */
        background: transparent !important;
        /* Remove box */
        border: none !important;
        /* Remove border */
        padding: 0 !important;
        /* Remove padding */
    }

    .section-categories-container .categories-header>div {
        width: 100%;
        justify-content: space-between;
        padding-left: 5px;
        /* Slight alignment fix */
    }

    /* Hide Title Visibility - REDUNDANT */
    #community-posts-sub-header {
        display: none !important;
    }

    /* =============================================
       3. MOBILE LAUNCHER GRID
       ============================================= */

    /* Hide main content on mobile — launcher replaces it */
    .custom-homepage {
        display: none !important;
    }

    /* Show launcher */
    #mobile-launcher {
        display: flex !important;
        flex-direction: column;
        /* Equalized top/bottom spacing via positioning */
        position: fixed !important;
        top: 80px !important;
        /* Slightly tighter to clear welcome message */
        bottom: 35px !important;
        /* Matches slimmer footer height + small gap */
        height: auto !important;
        margin: 0 !important;
        padding: 0 12px 0 12px !important;
        /* Vertical padding handled by top/bottom offsets */
        z-index: 1000 !important;
        /* Higher than main content but below header */
        left: 0;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        /* Kill scrolling */
    }

    /* Welcome bar handled by sticky header wrapper usually */

    /* Grid */
    .launcher-grid {
        flex: 1 !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        /* 3 columns for mobile */
        grid-template-rows: repeat(4, 1fr) !important;
        /* 4 rows (10 tiles + 2 empty) */
        gap: 8px !important;
        padding: 12px 8px !important;
        padding-top: 20px !important;
        /* Extra space below welcome message */
        height: 100% !important;
        align-content: start;
    }

    /* --- Tile --- */
    .launcher-tile {
        background: rgba(10, 20, 30, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        padding: 8px 6px;
        pointer-events: auto;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: all 0.15s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 100% !important;
        min-height: 0 !important;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    /* Subtle radial highlight */
    .launcher-tile::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
        pointer-events: none;
    }

    .tile-icon svg {
        width: 50px !important;
        height: 50px !important;
        display: block;
    }

    .tile-label {
        font-size: 0.65rem !important;
        text-align: center;
        line-height: 1.2;
    }

    .launcher-tile:active {
        transform: scale(0.96);
        background: rgba(15, 30, 45, 0.85);
        box-shadow: 0 0 20px rgba(0, 242, 254, 0.08), inset 0 0 20px rgba(0, 242, 254, 0.02);
    }

    /* Accent colors per tile */
    .launcher-tile[data-accent="cyan"] {
        border-color: rgba(0, 242, 254, 0.15);
    }

    .launcher-tile[data-accent="cyan"] .tile-icon svg {
        color: #00f2fe;
    }

    .launcher-tile[data-accent="cyan"]:active {
        border-color: rgba(0, 242, 254, 0.5);
    }

    .launcher-tile[data-accent="green"] {
        border-color: rgba(0, 230, 118, 0.12);
    }

    .launcher-tile[data-accent="green"] .tile-icon svg {
        color: #00e676;
    }

    .launcher-tile[data-accent="green"]:active {
        border-color: rgba(0, 230, 118, 0.4);
    }

    .launcher-tile[data-accent="purple"] {
        border-color: rgba(168, 85, 247, 0.12);
    }

    .launcher-tile[data-accent="purple"] .tile-icon svg {
        color: #a855f7;
    }

    .launcher-tile[data-accent="purple"]:active {
        border-color: rgba(168, 85, 247, 0.4);
    }

    .launcher-tile[data-accent="orange"] {
        border-color: rgba(247, 147, 26, 0.12);
    }

    .launcher-tile[data-accent="orange"] .tile-icon svg {
        color: #f7931a;
    }

    .launcher-tile[data-accent="orange"]:active {
        border-color: rgba(247, 147, 26, 0.4);
    }

    .launcher-tile[data-accent="pink"] {
        border-color: rgba(217, 70, 239, 0.12);
    }

    .launcher-tile[data-accent="pink"] .tile-icon svg {
        color: #d946ef;
    }

    .launcher-tile[data-accent="pink"]:active {
        border-color: rgba(217, 70, 239, 0.4);
    }

    .launcher-tile[data-accent="white"] {
        border-color: rgba(255, 255, 255, 0.06);
    }

    .launcher-tile[data-accent="white"] .tile-icon svg {
        color: #ffffff;
    }

    .launcher-tile[data-accent="white"]:active {
        border-color: rgba(255, 255, 255, 0.2);
    }

    .tile-icon {
        font-size: 20px;
        /* Smaller icon */
        line-height: 1;
        margin-bottom: 2px;
    }

    .tile-label {
        font-family: 'Space Mono', monospace;
        font-size: 10px;
        /* Slightly smaller label */
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .tile-stat {
        font-size: 9px;
        /* Smaller stat text */
        color: var(--color-text-dim, rgba(255, 255, 255, 0.4));
        margin-top: auto;
        /* Push to bottom */
        line-height: 1.1;
    }

    /* Pulse dot for live indicators */
    .pulse-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: var(--color-positive, #00e676);
        border-radius: 50%;
        margin-right: 4px;
        vertical-align: middle;
        animation: launcherPulse 2s infinite;
    }

    @keyframes launcherPulse {

        0%,
        100% {
            opacity: 1;
            box-shadow: 0 0 4px var(--color-positive, #00e676);
        }

        50% {
            opacity: 0.3;
            box-shadow: none;
        }
    }

    /* Staggered entrance animation */
    .launcher-tile {
        opacity: 0;
        transform: translateY(14px);
        animation: tileBootIn 0.35s ease forwards;
    }

    .launcher-tile:nth-child(1) {
        animation-delay: 0.04s;
    }

    .launcher-tile:nth-child(2) {
        animation-delay: 0.08s;
    }

    .launcher-tile:nth-child(3) {
        animation-delay: 0.12s;
    }

    .launcher-tile:nth-child(4) {
        animation-delay: 0.16s;
    }

    .launcher-tile:nth-child(5) {
        animation-delay: 0.20s;
    }

    .launcher-tile:nth-child(6) {
        animation-delay: 0.24s;
    }

    .launcher-tile:nth-child(7) {
        animation-delay: 0.28s;
    }

    .launcher-tile:nth-child(8) {
        animation-delay: 0.32s;
    }

    .launcher-tile:nth-child(9) {
        animation-delay: 0.36s;
    }

    .launcher-tile:nth-child(10) {
        animation-delay: 0.40s;
    }

    .launcher-tile:nth-child(11) {
        animation-delay: 0.44s;
    }

    .launcher-tile:nth-child(12) {
        animation-delay: 0.48s;
    }

    @keyframes tileBootIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* =============================================
       4. MAIN CONTENT — Hidden on mobile (launcher replaces)
       ============================================= */
    section {
        max-width: 100vw !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .section-chart-container .section-title {
        display: none !important;
    }

    .market-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid rgba(0, 242, 254, 0.1) !important;
    }

    .alpha-tabs-container {
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .alpha-tab-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    .crypto-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .chart-card {
        display: grid !important;
        grid-template-columns: 2fr 1.5fr 1fr !important;
        /* [Name/Logo] [Price] [Spark+Change] */
        grid-template-areas: "name price meta" !important;
        align-items: center !important;
        padding: 12px 0 !important;
        gap: 5px !important;
        border-bottom: 1px solid rgba(0, 242, 254, 0.05) !important;
        background: transparent !important;
    }

    .market-list-header-row {
        display: grid !important;
        grid-template-columns: 2fr 1.2fr 1fr !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border-bottom: 1px solid rgba(0, 242, 254, 0.3) !important;
        margin-bottom: 4px !important;
    }

    .market-list-header-row>div:nth-child(1) {
        /* Coin Name */
        text-align: left !important;
    }

    .market-list-header-row>div:nth-child(2) {
        /* Price */
        text-align: right !important;
    }

    .market-list-header-row>div:nth-child(3) {
        /* 24h Change */
        text-align: right !important;
    }

    .market-list-header-row>div:nth-child(4),
    .market-list-header-row>div:nth-child(5) {
        /* Volume and Chart - hide on mobile */
        display: none !important;
    }

    .chart-card .coin-name {
        grid-area: name !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 14px !important;
    }

    .chart-card .coin-name img {
        width: 24px !important;
        height: 24px !important;
    }

    .chart-card .coin-name .symbol {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #fff !important;
    }

    .chart-card .coin-name .full-name {
        display: none !important;
    }

    .chart-card .price-tag {
        grid-area: price !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-align: right !important;
        color: #fff !important;
    }

    .chart-card .chart-bar-container {
        grid-area: meta !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        height: auto !important;
        gap: 2px !important;
    }

    .chart-card .chart-7d-container {
        width: 60px !important;
        height: 25px !important;
        margin-bottom: 2px !important;
    }

    .chart-card .change-tag {
        font-size: 12px !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }

    .chart-card .chart-bar-wrapper,
    .chart-card .volume-tag {
        display: none !important;
    }

    /* =============================================
       5. FOOTER — Ultra-Slim Single Line
       ============================================= */
    .terminal-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 4px 10px !important;
        padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        background: rgba(4, 8, 11, 1) !important;
        backdrop-filter: blur(10px);
        z-index: 25000 !important;
        display: flex !important;
        border-top: 1px solid rgba(0, 242, 254, 0.2) !important;
    }

    .footer-content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center;
        height: 100%;
        padding: 0 0 0 10px !important;
        /* Visual nudge right */
        width: 100% !important;
    }

    .footer-content>* {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure button internals don't add bulk */
    .footer-radio-btn {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        gap: 2px !important;
    }

    /* Hide widgets visually but keep clickable for launcher tiles */
    .footer-widgets {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        padding: 0 !important;
        margin: -1px !important;
    }

    .footer-left,
    .footer-right {
        display: contents !important;
    }

    .footer-left {
        order: 1 !important;
    }

    .footer-right {
        order: 2 !important;
    }

    .footer-logo {
        font-size: 9px !important;
        width: auto !important;
        display: inline !important;
        margin: 0 !important;
    }

    .footer-tagline,
    .footer-stats,
    .footer-divider {
        display: none !important;
    }

    .footer-link {
        font-size: 8px !important;
    }

    .footer-social {
        font-size: 9px !important;
    }

    .footer-copyright {
        font-size: 8px !important;
    }

    /* Rival Icon Mobile Specifics */
    .footer-rival-icon-mobile {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 10px !important;
    }

    /* =============================================
       6. WIDGETS AS BOTTOM SHEETS
       ============================================= */
    #terminal-widget-container,
    #trade-hub-widget,
    #connect-wallet-widget,
    #user-account-modal,
    #oracle-terminal-widget,
    #chat-widget-container {
        position: fixed !important;
        top: 86px !important;
        bottom: 28px !important;
        height: calc(100% - 114px) !important;
        /* 102px top + 28px bottom */
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 21000 !important;
    }

    .floating-window {
        position: fixed !important;
        top: 95.2px !important;
        bottom: 28px !important;
        height: calc(100% - 123.2px) !important;
        /* 95.2px top + 28px bottom */
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 21000 !important;
    }

    #accountModalOverlay .mobile-widget-header {
        position: fixed !important;
        top: 86px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #accountModalOverlay {
        position: fixed !important;
        top: 86px !important;
        bottom: 28px !important;
        height: calc(100% - 114px) !important;
        /* 86px top + 28px bottom */
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 21000 !important;
    }

    #launch-token-widget {
        position: fixed !important;
        top: 94.2px !important;
        bottom: 28px !important;
        height: calc(100% - 122.2px) !important;
        /* 94.2px top + 28px bottom */
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 21000 !important;
    }

    #live-map-wrapper {
        position: fixed !important;
        top: 86px !important;
        bottom: 28px !important;
        height: calc(100% - 123.2px) !important;
        /* 95.2px top + 28px bottom */
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 21000 !important;
    }

    /* Active State for Mobile Widgets */
    .floating-window.active,
    .floating-window.mobile-open,
    #terminal-widget-container.mobile-open,
    #trade-hub-widget.mobile-open,
    #launch-token-widget.mobile-open,
    #connect-wallet-widget.mobile-open,
    #oracle-terminal-widget.mobile-open,
    #chat-widget-container.mobile-open,
    #rival-duel-widget.mobile-open,
    #accountModalOverlay.open {
        display: flex !important;
        visibility: visible !important;
    }

    #oracle-terminal-widget.mobile-open .oracle-body {
        display: flex !important;
        overflow-y: auto !important;
        height: auto !important;
        flex-grow: 1 !important;
        margin-top: 0 !important;
        padding-bottom: 40px !important;
    }

    /* Hide Desktop Handle on Mobile */
    .oracle-header-handle,
    .terminal-header-handle {
        display: none !important;
    }

    #oracle-network-pulse {
        margin-top: 20px !important;
        margin-bottom: 0 !important;
        background: rgba(0, 0, 0, 1) !important;
        /* Opaque black */
        border-bottom: 1px solid rgba(0, 242, 254, 0.4) !important;
        flex-shrink: 0;
        display: block !important;
        /* Force display */
        color: #fff !important;
        /* Force white text */
        height: 28px !important;
        /* Fixed height */
        line-height: 28px !important;
        overflow: hidden;
        font-size: 12px !important;
        text-align: left !important;
        /* Better for marquee effect usually */
    }

    #terminal-widget-container[style*="display: flex"],
    #terminal-widget-container.mobile-open,
    #trade-hub-widget[style*="display: flex"],
    #trade-hub-widget.mobile-open,
    #connect-wallet-widget[style*="display: flex"],
    #accountModalOverlay.mobile-open,
    #launch-token-widget[style*="display: flex"],
    #launch-token-widget.mobile-open,
    #oracle-terminal-widget[style*="display: flex"],
    #oracle-terminal-widget.mobile-open,
    #chat-widget-container[style*="display: flex"],
    #chat-widget-container.mobile-open {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding-top: 5px !important;
        margin: 0 !important;
        overflow: visible !important;
        /* MAKE VISIBLE AND BRING ON SCREEN */
        visibility: visible !important;
        transform: none !important;
    }

    /* Style the Trade Hub Body Container to match Terminal */
    #trade-hub-widget .trade-hub-body {
        border: 1px solid rgba(0, 242, 254, 0.4) !important;
        border-radius: 8px !important;
        background: rgba(13, 17, 23, 0.95) !important;
        box-shadow: 0 0 30px rgba(0, 242, 254, 0.2) !important;
        padding: 12px 12px 30px 12px !important;
        /* Extra bottom padding */
        margin-top: 5px !important;
        overflow-y: auto !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #trade-hub-widget .swap-footer {
        margin-top: auto !important;
        padding-top: 15px !important;
        margin-bottom: 10px !important;
        padding-bottom: 20px !important;
    }

    #trade-hub-widget .swap-container {
        padding: 10px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #trade-hub-widget .swap-input {
        font-size: 22px !important;
        width: 45% !important;
    }

    #trade-hub-widget .token-selector-btn {
        padding: 6px 8px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    #trade-hub-widget .chain-selector-grid {
        height: auto !important;
        gap: 6px !important;
    }

    #trade-hub-widget .chain-card {
        padding: 10px 5px !important;
    }

    #trade-hub-widget .chain-icon {
        font-size: 18px !important;
    }

    #terminal-widget-container .terminal-body-container {
        height: auto !important;
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        border: 1px solid rgba(0, 255, 136, 0.4) !important;
        border-radius: 8px !important;
        background: rgba(13, 17, 23, 0.95) !important;
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.2) !important;
        margin-top: 5px !important;
    }

    #terminal-widget-container .terminal-body-scroll {
        flex: 1 !important;
        height: auto !important;
        overflow-y: auto !important;
    }

    #terminal-widget-container .terminal-input-line {
        padding-bottom: 30px !important;
        /* Ensure it's not cut off by mobile UI */
    }

    /* Scale down ASCII art for mobile fit */
    .ascii-art,
    .terminal-widget .ascii-art {
        font-size: 6px !important;
        line-height: 7px !important;
        letter-spacing: -0.2px !important;
    }

    .mobile-widget-header {
        margin-bottom: 8px !important;
    }

    /* Let clicks pass through if empty */
    #floating-windows-container {
        z-index: 10000001 !important;
        position: fixed !important;
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        pointer-events: none;
    }

    #floating-windows-container>div {
        pointer-events: auto;
        /* Re-enable pointer events for children */
    }

    /* Old mobile rules - removed in favor of full screen fixed layout */
    /*
    #chat-widget-container,
    .community-chat,
    .floating-window {
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        height: 85vh !important;
        margin: 0 !important;
    }
    */

    #chat-widget-container.mobile-open,
    #whale-radar-widget[style*="display: flex"],
    #whale-radar-widget.mobile-open,
    #oracle-terminal-widget.mobile-open {
        transform: translateY(0) !important;
        visibility: visible;
        animation: slideUpMobile 0.3s ease-out forwards;
    }

    #chat-widget-container:not(.minimized) {
        transform: translateY(0) !important;
        visibility: visible;
        animation: slideUpMobile 0.3s ease-out forwards;
    }

    #connect-wallet-widget.open,
    #connect-wallet-widget.mobile-open,
    #launch-token-widget.open,
    #launch-token-widget.mobile-open {
        transform: translateY(0) !important;
        visibility: visible;
        display: flex !important;
        z-index: 999999 !important;
    }



    @keyframes slideUpMobile {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    .trade-hub-handle,
    .wallet-widget-header,
    .launch-widget-header,
    .oracle-header-handle {
        cursor: default !important;
        touch-action: none;
        justify-content: center;
    }

    .trade-hub-title,
    .widget-title,
    .oracle-title {
        margin-left: 0 !important;
        text-align: center;
        width: 100%;
    }



    /* Specific horizontal shifts and top offset for Launch Token Header */
    #launch-token-widget .mobile-widget-header {
        position: relative !important;
        top: 0 !important;
    }

    /* Specific horizontal shifts and 3px vertical 'touch' for Live Map Header */
    #live-map-wrapper .mobile-widget-header,
    .floating-window .mobile-widget-header {
        position: relative !important;
        top: 0 !important;
    }

    #live-map-wrapper .mobile-widget-header .mobile-widget-back-btn,
    #live-map-wrapper .mobile-widget-header #mobile-back-btn,
    .floating-window .mobile-widget-header .mobile-widget-back-btn,
    .floating-window .mobile-widget-header #mobile-back-btn {
        left: 25px !important;
        top: calc(50% - 8px) !important;
    }

    #live-map-wrapper .mobile-widget-header .mobile-widget-title,
    .floating-window .mobile-widget-header .mobile-widget-title {
        align-self: flex-start !important;
        margin-top: 12px !important;
        margin-left: 20px !important;
    }

    /* =============================================
       7. LAUNCHER VISIBLE (hides when virtual page open)
       ============================================= */
    #mobile-launcher.hidden {
        display: none !important;
    }

    /* =============================================
    /* =============================================
       8. VIRTUAL PAGE NAVIGATION
       ============================================= */

    /* Back button in header - ABSOLUTE to allow centered title */
    #mobile-back-btn {
        position: absolute !important;
        /* Changed from fixed */
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: rgba(6, 13, 20, 0.9);
        border: 1px solid rgba(0, 242, 254, 0.3);
        color: var(--color-accent-cyan);
        font-size: 18px;
        padding: 4px 10px;
        border-radius: 4px;
        cursor: pointer;
        z-index: 10001;
        font-family: 'Space Mono', monospace;
        line-height: 1;
    }

    /* Page Header - Centered Title - COMPACT */
    .mobile-page-header {
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        top: 0 !important;
        left: 0;
        right: 0;
        background: rgba(6, 13, 20, 0.95);
        border-bottom: 1px solid rgba(0, 242, 254, 0.2);
        padding: 6px 15px;
        /* Compact padding */
        z-index: 9999999 !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: flex;
        justify-content: center !important;
        align-items: center;
        min-height: 40px;
        /* Ensure a minimum compact height */
    }

    #mobile-back-btn:active {
        background: rgba(0, 242, 254, 0.15);
    }

    /* When back button is visible, shift the logo */
    .site-head {
        position: relative !important;
    }

    /* Page container */
    #mobile-page-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10000000;
        /* Must be higher than account modal (999999) for pages opened from account dashboard */
        pointer-events: none;
    }

    /* Individual virtual page */
    .mobile-page {
        position: fixed;
        top: 94px !important;
        /* Flush below site header */
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(100% - 94px) !important;
        width: 100% !important;
        max-width: 100vw !important;
        background: var(--color-bg, #060d14);
        z-index: 1;
        /* JS inline style overrides this per stack depth */
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow: hidden !important;
        /* Prevent page scroll, use body scroll */
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .mobile-page.active {
        transform: translateX(0);
    }

    /* Page header */
    /* Page header */
    /* Page header */
    .mobile-page-header {
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;

        /* FIX: Flush with header */
        margin-top: 0 !important;

        background: rgba(6, 13, 20, 0.98);
        border-bottom: 1px solid rgba(0, 242, 254, 0.2);
        padding: 8px 12px;
        /* Comfortable padding */
        z-index: 9999999 !important;
        /* Force above EVERYTHING */
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    /* New In-Header Back Button */
    /* New In-Header Back Button - COMPACT */
    .mobile-page-back {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--color-accent-cyan);
        font-size: 14px;
        /* Slightly smaller */
        padding: 2px 8px;
        /* Compact padding */
        border-radius: 4px;
        cursor: pointer;
        line-height: 1;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 22px;
        /* Smaller height */
        width: 24px;
        /* Smaller width */
    }

    .mobile-page-back:active {
        background: rgba(0, 242, 254, 0.15);
        border-color: var(--color-accent-cyan);
    }

    /* Close Button for Virtual Pages */
    .mobile-page-close {
        background: none;
        border: none;
        color: var(--color-text-dim);
        font-size: 22px;
        padding: 0 5px;
        cursor: pointer;
        line-height: 1;
    }

    /* Grid Layouts for News & Market inside Virtual Page */
    .mobile-page-body .news-list,
    .mobile-page-body .crypto-grid,
    .mobile-page-body #crypto-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .mobile-page-body .news-item,
    .mobile-page-body .market-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Community Font Fixes */
    .mobile-page-body .community-post-card h2,
    .mobile-page-body .community-post-card h3 {
        font-size: 14px !important;
        line-height: 1.4;
    }

    .mobile-page-title {
        font-family: 'Space Mono', monospace;
        font-size: 12px;
        font-weight: 700;
        color: var(--color-accent-cyan);
        text-transform: uppercase;
        letter-spacing: 1px;
        flex-grow: 1;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Page body */
    .mobile-page-body {
        flex: 1;
        padding: 10px;
        /* Adjusted for smaller header */
        padding-top: 10px !important;
        /* Removed large offset */
        padding-bottom: 40px;
        margin-top: 0 !important;
        overflow-y: auto !important;
        /* Scroll ONLY here */
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* Custom Scrollbar to avoid gray bar */
    .mobile-page::-webkit-scrollbar {
        width: 4px;
    }

    .mobile-page::-webkit-scrollbar-track {
        background: transparent;
    }

    .mobile-page::-webkit-scrollbar-thumb {
        background: rgba(0, 242, 254, 0.2);
        border-radius: 2px;
    }

    /* Post detail in virtual page */
    .mobile-post-detail {
        padding: 0;
    }

    .mobile-post-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 4px;
    }

    /* Make sections display properly inside virtual pages - MOVE UP */
    .mobile-page-body .section-chart-container,
    .mobile-page-body .section-news-container,
    .mobile-page-body .section-categories-container {
        display: block !important;
        order: unset !important;
        margin-top: 0 !important;
        /* Eliminate 50px top margin */
    }

    /* =============================================
       9. COMMUNITY SECTION — Compact in Virtual Page
       ============================================= */

    /* Hide Ghost Protocol button inside community section on mobile */
    .mobile-page-body .btn-ghost-protocol,
    .mobile-page-body .ghost-protocol-btn,
    .mobile-page-body [id="openGhostTerminalBtn"],
    .mobile-page-body [id*="ghost"][class*="btn"],
    .mobile-page-body .community-header-actions .ghost-protocol-btn {
        display: none !important;
    }

    /* Compact community post cards */
    .mobile-page-body .community-post-card {
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .mobile-page-body .community-post-card h3,
    .mobile-page-body .community-post-card .post-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-page-body .community-post-card .post-excerpt,
    .mobile-page-body .community-post-card .post-content-preview {
        font-size: 11px !important;
        max-height: 32px !important;
        overflow: hidden !important;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .mobile-page-body .community-post-card .post-footer,
    .mobile-page-body .community-post-card .post-meta {
        font-size: 10px !important;
    }

    /* Community header compact */
    .mobile-page-body .section-categories-container>div:first-child,
    .mobile-page-body .community-header {
        padding: 8px !important;
    }

    .mobile-page-body .community-header h2,
    .mobile-page-body .section-categories-container h2 {
        font-size: 14px !important;
    }

    /* Category tabs compact */
    .mobile-page-body .category-tabs,
    .mobile-page-body .community-tabs {
        gap: 4px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px !important;
    }

    .mobile-page-body .category-tab,
    .mobile-page-body .community-tab {
        font-size: 10px !important;
        padding: 4px 8px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Search bar compact */
    .mobile-page-body .community-search,
    .mobile-page-body .search-container {
        margin: 6px 0 !important;
    }

    /* FIX: Ensure wrapper is positioned so absolute input is relative to IT */
    #community-search-wrapper {
        position: relative !important;
    }

    .mobile-page-body .community-search input,
    #community-search-input {
        padding: 6px 10px !important;
        font-size: 12px !important;
        position: absolute !important;
        left: 50% !important;
        top: 100% !important;
        transform: translateX(-50%) !important;
        margin-top: 10px !important;
        z-index: 4005 !important;
        /* Increased to stay above all elements */
        white-space: nowrap;
        height: 34px !important;
        background: #0b1622 !important;
        border: 1px solid var(--color-accent-cyan) !important;
        border-radius: 4px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
        box-sizing: border-box !important;

        /* FIX: Prevent blocking clicks when collapsed */
        pointer-events: none !important;
        visibility: hidden !important;
        transition: all 0.3s ease, visibility 0s 0.3s !important;
    }

    /* Target specifically when expanded via class */
    #community-search-input.expanded {
        pointer-events: auto !important;
        visibility: visible !important;
        transition: all 0.3s ease, visibility 0s 0s !important;
    }

    /* =============================================
       10. NEWS SECTION — Grid in Virtual Page
       ============================================= */
    .mobile-page-body .section-news-container .news-list,
    .mobile-page-body .section-news-container .crypto-news-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .mobile-page-body .news-item,
    .mobile-page-body .crypto-news-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(0, 242, 254, 0.1) !important;
        padding-bottom: 15px !important;
        border-radius: 0 !important;
    }

    /* Featured top article */
    .mobile-page-body .news-item:first-child {
        flex-direction: column !important;
        border-bottom: 2px solid rgba(0, 242, 254, 0.2) !important;
        margin-bottom: 5px !important;
    }

    .mobile-page-body .news-item:first-child .news-thumb {
        width: 100% !important;
        height: 200px !important;
        margin-bottom: 10px !important;
    }

    .mobile-page-body .news-item:first-child .news-article-title {
        font-size: 18px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }

    .mobile-page-body .news-item:first-child .news-source {
        font-size: 12px !important;
        opacity: 0.8 !important;
    }

    .mobile-page-body .news-item .news-thumb,
    .mobile-page-body .crypto-news-item .news-thumb {
        width: 100px !important;
        height: 70px !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        border: 1px solid rgba(0, 242, 254, 0.2) !important;
    }

    .mobile-page-body .news-item img,
    .mobile-page-body .crypto-news-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .mobile-page-body .news-item .news-article-title,
    .mobile-page-body .crypto-news-item .news-article-title,
    .mobile-page-body .news-item h3,
    .mobile-page-body .crypto-news-item h3 {
        font-size: 14px !important;
        line-height: 1.3 !important;
        color: var(--color-text-light) !important;
        margin-bottom: 4px !important;
        display: block !important;
    }

    .mobile-page-body .news-item .news-source,
    .mobile-page-body .crypto-news-item .news-source,
    .mobile-page-body .news-item .news-meta {
        font-size: 10px !important;
        color: var(--color-text-dim) !important;
    }

    /* =============================================
       11. MARKET DATA — Fit Mobile in Virtual Page
       ============================================= */
    .mobile-page-body .section-chart-container {
        overflow-x: auto !important;
    }

    .mobile-page-body .crypto-market-table {
        font-size: 11px !important;
    }

    .mobile-page-body .crypto-market-table th,
    .mobile-page-body .crypto-market-table td {
        padding: 6px 4px !important;
    }

    /* =============================================
       12. FORM & MISC FIXES
       ============================================= */
    input,
    select,
    textarea {
        font-size: 16px !important;
        /* Prevent iOS zoom */
    }

    /* =============================================
       13. COMMUNITY POST DETAIL FIXES (Mobile Fullscreen)
       ============================================= */
    #viewPostModalOverlay {
        position: fixed !important;
        top: 70px !important;
        /* Below header */
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: calc(100dvh - 70px) !important;
        /* Fit remaining space */
        z-index: 5900 !important;
        /* Below main header (6000) */
        background: #04080b !important;
        padding: 0 !important;
        display: flex !important;
        /* hidden by class, but flex when open */
    }

    /* Only show if it has the 'open' class */
    #viewPostModalOverlay:not(.open) {
        display: none !important;
    }

    #viewPostModalOverlay .modal-content-container {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        background: #04080b !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Fixed Header for Post Detail */
    #viewPostModalOverlay .modal-header {
        position: absolute !important;
        /* Stick to top of MODAL, not viewport */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        background: #04080b !important;
        /* Solid background to hide site header */
        border-bottom: 1px solid rgba(0, 242, 254, 0.2) !important;
        z-index: 10 !important;
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    /* Fix Title in Header */
    #viewPostTitle {
        font-size: 14px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 80% !important;
        color: var(--color-text-light) !important;
    }

    /* Close Button -> Back Button Style */
    #viewPostCloseBtn {
        font-size: 28px !important;
        color: var(--color-accent-cyan) !important;
        background: rgba(0, 0, 0, 0.2) !important;
        border: 1px solid var(--color-accent-cyan) !important;
        border-radius: 4px !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        margin-left: 10px !important;
    }

    /* Scrollable Content Area */
    #viewPostContentArea {
        padding-top: 70px !important;
        /* Match lowered header */
        padding-bottom: 20px !important;
        /* Clear comments section */
        overflow-y: auto !important;
        height: auto !important;
        flex: 1 !important;
    }

    /* Comments Section stuck to bottom or scrolled? Let's make it flow */
    /* Update: Current HTML structure has .post-comments-section as a sibling flex item */
    /* Let's make the content area take remaining space */

    #viewPostModalOverlay .post-comments-section {
        flex-shrink: 0 !important;
        height: auto !important;
        max-height: 40vh !important;
        padding: 10px 15px 50px 15px !important;
        /* Reduce padding, but add LOTS of bottom padding for mobile safe area */
        border-top: 1px solid rgba(0, 242, 254, 0.2) !important;
        background: #081018 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Stack Input Up Top, Button Below */
    #viewPostModalOverlay .post-comments-section>div:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        /* Smaller gap */
        width: 100% !important;
    }

    #viewPostModalOverlay #replyInput {
        width: 100% !important;
        padding: 8px 12px !important;
        /* Compact */
        font-size: 13px !important;
        height: 38px !important;
    }

    #viewPostModalOverlay #submitReplyBtn {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0 !important;
        height: 38px !important;
        line-height: 38px !important;
        font-size: 13px !important;
    }

    /* Fix Categories Cutoff */
    .post-meta-header>div {
        flex-wrap: wrap !important;
    }

    /* Event date/time + venue inputs — prevent overflow on mobile */
    #eventDateGroup,
    #locationVenue {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    #postEventDate,
    #postVenueInput,
    #postVenueManual {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        font-size: 12px !important;
    }

    /* SOLID FIX: Hide Site Header when Modal is Open */
    /* body.post-modal-open .site-head-wrapper, -- REMOVED */
    body.post-modal-open .mobile-page-header,
    body.post-modal-open #mobile-back-btn,
    body.post-modal-open .mobile-header-icon {
        display: none !important;
    }

    /* SOLID FIX: Ensure Main Header is ALWAYS Top */
    .site-head-wrapper {
        z-index: 99999999 !important;
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
    }

    /* =============================================
       9. STANDARDIZED WIDGET HEADERS (PHASE 9)
       ============================================= */

    /* The new injected header - Full Width and Fixed */
    .mobile-widget-header {
        display: flex !important;
        flex-shrink: 0 !important;
        order: -1 !important;
        position: fixed !important;
        /* Fixed at the top */
        top: 86px !important;
        /* Matches restored comfortable header stack height */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 38px !important;
        background: rgba(4, 8, 11, 0.98) !important;
        border-bottom: 1px solid rgba(0, 242, 254, 0.3) !important;
        padding: 0 15px !important;
        z-index: 100000000 !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        justify-content: center;
        align-items: center;
        box-sizing: border-box !important;
    }

    .mobile-widget-title {
        color: var(--color-accent-cyan, #00f2fe);
        font-family: 'Space Mono', monospace;
        text-transform: uppercase;
        font-size: 11px;
        /* Standardized compact size */
        letter-spacing: 1px;
        font-weight: 700;
        text-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
        text-align: center;
    }

    .mobile-widget-back-btn {
        background: rgba(6, 13, 20, 0.9);
        border: 1px solid rgba(0, 242, 254, 0.3);
        color: var(--color-accent-cyan);
        font-size: 15px;
        /* Slightly smaller to fit 36px height */
        padding: 2px 8px;
        /* Tighter padding */
        border-radius: 4px;
        cursor: pointer;
        line-height: 1;
        position: absolute;
        /* absolute positioning */
        left: 20px;
        /* stick to left */
    }

    /* Hide Close Button on Mobile Pages (we have back button now) */
    .mobile-page-close {
        display: none !important;
    }

    /* Compact Community Posts Header on Mobile - CLEAN LOOK */
    .mobile-page-body .categories-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 5px !important;
        margin-bottom: 10px !important;
        background: rgba(6, 13, 20, 0.95) !important;
        /* Standard background */
        height: 36px !important;
        /* Match standard height */
        padding: 0 15px !important;
        /* Standard padding */
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(0, 242, 254, 0.2) !important;
        /* Standard border */
    }

    /* Adjust "Local Signal" + Search Wrapper */
    .mobile-page-body .categories-header>div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        white-space: nowrap !important;
    }

    /* Adjust Buttons Group - Tighter */
    .mobile-page-body .categories-header>div:last-child {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
    }

    /* Ensure text size is small enough to fit */
    .mobile-page-body .categories-header p {
        font-size: 10px !important;
        margin: 0 !important;
    }

    .mobile-page-body #openPostModalHeaderBtn {
        font-size: 10px !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
    }

    /* Hide Ghost Button on mobile if it takes too much space, or make it icon only?
       User said "make that whole box smaller so it only contains + Post/Ad and magnifying glass"
       I will hide the Ghost button for now based on "only contains" request, or just shrink it.
       Let's shrink it to an icon if possible, or just keep it small. */
    .mobile-page-body #openGhostTerminalBtn {
        display: none !important;
        /* Hiding based on user wanting simpler box */
    }

    /* Hide Redundant Internal Titles on Mobile */
    .section-categories-container .section-title,
    .community-chat h2,
    .community-chat .chat-header-title {
        display: none !important;
    }

    /* Force Widgets to fit mobile layout below headers */
    #whale-radar-widget,
    #rival-duel-widget,
    #ghost-terminal-overlay {
        position: fixed !important;
        top: 94px !important;
        height: auto !important;
        /* Match other widget positioning */
        bottom: 28px !important;
        /* Revert to full coverage to avoid dark void */
        height: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 21000 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        /* Push window up from bottom */
        padding-top: 5px !important;
        /* Small padding for breathing room */
        padding-bottom: 60px !important;
        /* More space at bottom for input field */
        pointer-events: auto !important;
        background: rgba(4, 8, 11, 0.9) !important;
        overflow: hidden !important;
    }

    /* SPECIFIC CHAT POSITIONING - MOVED UP JUST A HAIR */
    #chat-widget-container,
    .community-chat {
        position: fixed !important;
        top: 88px !important;
        bottom: 28px !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 21000 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-top: 5px !important;
        padding-bottom: 60px !important;
        pointer-events: auto !important;
        background: rgba(4, 8, 11, 0.9) !important;
        overflow: hidden !important;
    }

    /* Terminal Hub - Mobile fixes */
    #terminal-widget-container,
    #terminal-widget-container[style*="display: flex"],
    #terminal-widget-container.mobile-open {
        border: none !important;
        padding-top: 0 !important;
    }

    #terminal-widget-container .mobile-widget-header {
        display: flex !important;
        position: relative !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        min-height: 40px !important;
        background: rgba(4, 8, 11, 0.95) !important;
        border-bottom: 1px solid var(--color-accent-cyan) !important;
        padding: 0 15px !important;
        z-index: 21001 !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        order: -1 !important;
        margin: 0 !important;
    }

    #terminal-widget-container .mobile-widget-header .mobile-widget-back-btn {
        position: absolute !important;
        left: 15px !important;
    }

    #terminal-widget-container .mobile-widget-header .mobile-widget-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        color: var(--color-accent-cyan) !important;
        margin: 0 !important;
    }

    /* Trade Hub - Mobile fixes */
    #trade-hub-widget,
    #trade-hub-widget[style*="display: flex"],
    #trade-hub-widget.mobile-open {
        border: none !important;
        padding-top: 0 !important;
    }

    #trade-hub-widget .mobile-widget-header {
        display: flex !important;
        position: relative !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        min-height: 40px !important;
        background: rgba(4, 8, 11, 0.95) !important;
        border-bottom: 1px solid var(--color-accent-cyan) !important;
        padding: 0 15px !important;
        z-index: 21001 !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        order: -1 !important;
        margin: 0 !important;
    }

    #trade-hub-widget .mobile-widget-header .mobile-widget-back-btn {
        position: absolute !important;
        left: 15px !important;
    }

    #trade-hub-widget .mobile-widget-header .mobile-widget-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        color: var(--color-accent-cyan) !important;
        margin: 0 !important;
    }

    /* Trade Hub Tabs - Mobile */
    #trade-hub-widget .trade-hub-tabs {
        display: flex !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        border-bottom: 1px solid rgba(0, 242, 254, 0.2) !important;
    }

    #trade-hub-widget .trade-hub-tab {
        flex: 1 !important;
        padding: 10px 15px !important;
        font-size: 11px !important;
    }

    #trade-hub-widget .trade-hub-tab .tab-icon {
        font-size: 12px !important;
    }

    /* Buy Tab UI - Mobile */
    #trade-hub-widget .buy-crypto-container {
        padding: 0 !important;
    }

    #trade-hub-widget .buy-intro-text {
        font-size: 11px !important;
        margin-bottom: 12px !important;
    }

    #trade-hub-widget .buy-provider-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 15px !important;
    }

    #trade-hub-widget .buy-provider-btn {
        padding: 12px 8px !important;
    }

    #trade-hub-widget .buy-provider-btn .provider-logo {
        width: 28px !important;
        height: 28px !important;
    }

    #trade-hub-widget .buy-provider-btn .provider-name {
        font-size: 12px !important;
    }

    #trade-hub-widget .buy-provider-btn .provider-tag {
        font-size: 9px !important;
    }

    #trade-hub-widget .buy-form-container {
        padding: 15px !important;
        background: transparent !important;
        border: 1px solid rgba(0, 255, 136, 0.3) !important;
    }

    #trade-hub-widget .buy-input {
        font-size: 18px !important;
        padding: 10px 12px !important;
    }

    #trade-hub-widget .buy-currency-select {
        min-width: 75px !important;
        font-size: 12px !important;
        padding: 10px !important;
    }

    #trade-hub-widget .buy-wallet-section {
        margin-bottom: 10px !important;
    }

    #trade-hub-widget .buy-wallet-toggle {
        flex-direction: row !important;
        gap: 5px !important;
    }

    #trade-hub-widget .buy-wallet-option {
        font-size: 9px !important;
        padding: 6px 8px !important;
    }

    #trade-hub-widget .buy-action-btn {
        height: 48px !important;
        font-size: 13px !important;
        margin-top: 12px !important;
    }

    #trade-hub-widget .buy-footer {
        font-size: 9px !important;
        margin-top: 10px !important;
    }

    /* Embedded Buy Widget - Mobile */
    #trade-hub-widget .buy-widget-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 200 !important;
    }

    #trade-hub-widget .buy-widget-header {
        padding: 10px 12px !important;
    }

    #trade-hub-widget .buy-widget-title {
        font-size: 11px !important;
    }

    #trade-hub-widget .buy-widget-back-btn {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }

    #trade-hub-widget .buy-widget-frame {
        padding: 5px !important;
    }

    #trade-hub-widget .buy-widget-frame iframe {
        border-radius: 4px !important;
    }

    /* Community Chat - Mobile fixes */
    #chat-widget-container,
    #chat-widget-container[style*="display: flex"],
    #chat-widget-container.mobile-open {
        border: none !important;
        padding-top: 0 !important;
    }

    #chat-widget-container .chat-header {
        display: none !important;
        /* Hide internal desktop header, replaced by mobile-widget-header */
    }

    #chat-widget-container .mobile-widget-header {
        display: flex !important;
        position: relative !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        min-height: 40px !important;
        background: rgba(4, 8, 11, 0.95) !important;
        border-bottom: 1px solid var(--color-accent-cyan) !important;
        padding: 0 15px !important;
        z-index: 21001 !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        order: -1 !important;
        margin: 0 !important;
    }

    #chat-widget-container .mobile-widget-header .mobile-widget-back-btn {
        position: absolute !important;
        left: 15px !important;
    }

    #chat-widget-container .mobile-widget-header .mobile-widget-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        color: var(--color-accent-cyan) !important;
        margin: 0 !important;
    }

    /* Live Scan (Whale Radar) - Mobile fixes */
    #whale-radar-widget {
        border: none !important;
        /* Remove widget border - header sits above content */
        padding-top: 0 !important;
    }

    #whale-radar-widget .radar-header-handle {
        display: none !important;
        /* Hide internal desktop header, replaced by mobile-widget-header */
    }

    #whale-radar-widget .mobile-widget-header {
        display: flex !important;
        position: relative !important;
        height: 40px !important;
        margin: 0 !important;
        order: -1 !important;
    }

    /* Rival Duel - Mobile fixes */
    #rival-duel-widget.mobile-open {
        position: fixed !important;
        top: 94px !important;
        bottom: 28px !important;
        left: 0 !important;
        width: 100vw !important;
        height: auto !important;
        border: none !important;
        border-radius: 0 !important;
        padding-top: 0 !important;
        background: rgba(4, 8, 11, 0.98) !important;
    }

    #rival-duel-widget.mobile-open .widget-header {
        display: none !important;
    }

    #rival-duel-widget.mobile-open .widget-body {
        flex: 1 !important;
        padding: 10px !important;
        margin-top: 0 !important;
        overflow-y: auto !important;
    }

    #rival-duel-widget .mobile-widget-header {
        display: flex !important;
        position: relative !important;
        height: 40px !important;
        min-height: 40px !important;
        justify-content: center !important;
        align-items: center !important;
        background: rgba(4, 8, 11, 0.95) !important;
        border-bottom: 1px solid var(--color-accent-cyan) !important;
        padding: 0 15px !important;
        z-index: 2000001 !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        order: -1 !important;
        margin: 0 !important;
    }

    #rival-duel-widget .mobile-widget-header .mobile-widget-back-btn {
        position: absolute !important;
        left: 15px !important;
    }

    #whale-radar-widget .mobile-widget-header .mobile-widget-back-btn {
        position: absolute !important;
        left: 15px !important;
    }

    #whale-radar-widget .mobile-widget-header .mobile-widget-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        color: var(--color-accent-cyan) !important;
        margin: 0 !important;
    }

    /* Ensure Ghost Protocol mobile header is visible and clickable */
    #ghost-terminal-overlay .mobile-widget-header {
        display: flex !important;
        pointer-events: auto !important;
        z-index: 21001 !important;
        position: relative !important;
        /* Override fixed positioning */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        order: -1 !important;
        /* Ensure it's first */
    }

    /* Live Map - Full mobile styling - override style.css height: 100vh */
    .floating-window[id^="floating-window"] {
        top: 86px !important;
        height: auto !important;
        bottom: 28px !important;
        /* Flush with footer */
        padding-top: 40px !important;
        /* Push iframe content below the 40px mobile header */
        overflow: hidden !important;
    }

    /* Position the mobile header absolutely at the top of the container */
    .floating-window[id^="floating-window"] .mobile-widget-header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
    }

    /* iframe fills all space below the header */
    .floating-window iframe.window-content {
        height: 100% !important;
        width: 100% !important;
        flex: 1 !important;
    }

    .floating-window.intel-window {
        top: 420px !important;
        z-index: 22000 !important;
        height: calc(100% - 420px) !important;
        border-top: 1px solid var(--color-accent-blue) !important;
    }

    /* Fixed: Removed Terminal and specialized widgets from here as they have their own narrow-fit logic above */
    #accountModalOverlay .mobile-widget-header {
        position: fixed !important;
        width: 100% !important;
        top: 76px !important;
    }

    #accountModalOverlay .account-modal-body {
        border: 1px solid rgba(0, 242, 254, 0.4) !important;
        border-radius: 8px !important;
        background: rgba(13, 17, 23, 0.95) !important;
        box-shadow: 0 0 30px rgba(0, 242, 254, 0.2) !important;
        padding: 15px !important;
        margin-top: 5px !important;
        flex: 1 !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        /* Stack sidebar and content */
        gap: 20px !important;
    }

    #accountModalOverlay .account-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 242, 254, 0.2) !important;
        padding: 0 0 15px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    #accountModalOverlay .account-user-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px !important;
        text-align: left !important;
        padding-bottom: 5px !important;
    }

    #accountModalOverlay .account-profile-pic {
        width: 70px !important;
        height: 70px !important;
        border-width: 2px !important;
        object-fit: cover !important;
    }

    #accountModalOverlay .account-username {
        font-size: 18px !important;
        margin: 0 !important;
    }

    #accountModalOverlay .account-member-since {
        font-size: 11px !important;
        margin: 2px 0 0 0 !important;
    }

    #accountModalOverlay .account-nav {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin: 10px 0 !important;
    }

    #accountModalOverlay .account-nav-link {
        padding: 8px 10px !important;
        font-size: 12px !important;
        text-align: center !important;
        border: 1px solid rgba(0, 242, 254, 0.2) !important;
        border-radius: 4px !important;
    }

    #accountModalOverlay .account-nav-link.active {
        background: rgba(0, 242, 254, 0.1) !important;
        border-color: var(--color-accent-cyan) !important;
    }

    #accountModalOverlay .logout-btn {
        width: 100% !important;
        margin-top: 5px !important;
    }

    #accountModalOverlay .account-content {
        width: 100% !important;
        padding: 0 !important;
        min-height: 200px !important;
    }

    /* Stack forms on mobile */
    #accountModalOverlay .form-group-inline {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    #accountModalOverlay .form-group-inline label {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    #accountModalOverlay .form-group-inline input,
    #accountModalOverlay .form-group-inline select,
    #accountModalOverlay .form-group-inline textarea {
        width: 100% !important;
    }

    #accountModalOverlay .account-content-pane h2 {
        font-size: 20px !important;
        margin-bottom: 5px !important;
    }

    #accountModalOverlay .account-content-pane p {
        font-size: 13px !important;
        margin-bottom: 15px !important;
    }

    /* Ensure they are flex when active/open for centering */
    #ghost-terminal-overlay.active,
    #ghost-terminal-overlay.open,
    .floating-window.active,
    #accountModalOverlay.open,
    #connect-wallet-widget.active,
    #connect-wallet-widget.open {
        display: flex !important;
    }

    #ghost-terminal-overlay .ghost-protocol-window {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        flex: 1 !important;
        min-height: 0 !important;
        margin-top: 20px !important;
        max-height: 90% !important;
        /* Limit height to ensure input field is visible */
        /* CRITICAL: Allow this container to be smaller than its content */
        height: auto !important;
        max-height: 100% !important;
        width: 95% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        /* Contain the scrollbar inside */
        border: 1px solid #00ff88 !important;
        box-sizing: border-box !important;
        transform: none !important;
        background: #04080b !important;
    }

    /* Explicit border for the window Area only */
    /* Override desktop centering */
    /* pointer-events: auto !important; */


    /* Hide internal desktop headers on mobile to avoid double headers */
    .chat-header,
    .trade-hub-handle,
    .wallet-widget-header,
    .launch-widget-handle,
    .oracle-header-handle,
    .terminal-header,
    #ghost-terminal-close-btn,
    .window-header,
    .window-close-btn,
    #accountModalOverlay .modal-header,
    #account-modal-close-btn,
    .connect-wallet-handle,
    .launch-token-handle,
    .radar-header-handle,
    #walletModalCloseBtn {
        display: none !important;
    }

    /* ========== MOBILE CHAT - TWO SCREEN LAYOUT ========== */
    /*
     * Screen 1: Room list (full width)
     * Screen 2: Messages + Input (full width)
     * Tap room to switch screens
     * No footer when chat is open
     */

    /* Container - full screen */
    #chat-widget-container.mobile-open {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        bottom: 28px !important;
        height: calc(100% - 118px) !important;
        align-items: stretch !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }

    /* Hide desktop header */
    #chat-widget-container.mobile-open .chat-header {
        display: none !important;
    }

    /* Chat body fills remaining space */
    #chat-widget-container.mobile-open .chat-body {
        flex: 1 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
        width: 100% !important;
        align-self: stretch !important;
    }

    /* === SCREEN 1: Room List === */
    #chat-widget-container.mobile-open .chat-rooms-sidebar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-right: none !important;
        background: transparent !important;
    }

    #chat-widget-container.mobile-open .chat-main-panel {
        display: none !important;
    }

    #chat-widget-container.mobile-open .room-list {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
    }

    #chat-widget-container.mobile-open .rooms-list-title-wrapper {
        flex-shrink: 0 !important;
        padding: 10px 15px !important;
    }

    /* === SCREEN 2: Messages (when .mobile-in-room) === */
    #chat-widget-container.mobile-open.mobile-in-room .chat-rooms-sidebar {
        display: none !important;
    }

    #chat-widget-container.mobile-open.mobile-in-room .chat-main-panel {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #chat-widget-container.mobile-open.mobile-in-room .chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
        min-height: 0 !important;
    }

    #chat-widget-container.mobile-open.mobile-in-room #chat-input-area {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 5px 8px !important;
        padding-bottom: max(5px, env(safe-area-inset-bottom)) !important;
        gap: 5px !important;
        border-top: 1px solid rgba(0, 242, 254, 0.2) !important;
        background: rgba(6, 13, 20, 0.98) !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Emoji button: fixed 26px */
    #chat-widget-container.mobile-open.mobile-in-room #chat-emoji-btn {
        flex: 0 0 26px !important;
        width: 26px !important;
        height: 26px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #chat-widget-container.mobile-open.mobile-in-room #chat-emoji-btn img,
    #chat-widget-container.mobile-open.mobile-in-room #chat-emoji-btn .emoji-icon-img {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    /* Input: takes all remaining space, fixed height to prevent growing */
    #chat-widget-container.mobile-open.mobile-in-room #chat-input,
    #chat-widget-container.mobile-open.mobile-in-room .chat-input-div {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: auto !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 4px 8px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border: 1px solid rgba(0, 242, 254, 0.3) !important;
        border-radius: 6px !important;
        color: #fff !important;
        text-align: left !important;
        direction: ltr !important;
        box-sizing: border-box !important;
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }

    /* Send button: fixed 60px wide */
    #chat-widget-container.mobile-open.mobile-in-room #chat-send-btn {
        flex: 0 0 60px !important;
        width: 60px !important;
        height: 30px !important;
        padding: 0 !important;
        font-size: 11px !important;
        line-height: 30px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Hide input on Screen 1 */
    #chat-widget-container.mobile-open #chat-input-area {
        display: none !important;
    }

    /* Hide toggle button */
    .chat-rooms-toggle {
        display: none !important;
    }

    /* Drawer close button - hide */
    .drawer-close-btn {
        display: none !important;
        flex-shrink: 0 !important;
    }

    .drawer-close-btn:active {
        color: var(--color-accent-cyan) !important;
    }

    .room-list-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--color-accent-cyan) !important;
    }

    #create-channel-btn {
        background: rgba(0, 242, 254, 0.2) !important;
        border: 1px solid var(--color-accent-cyan) !important;
        color: var(--color-accent-cyan) !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 4px !important;
        font-size: 18px !important;
        cursor: pointer !important;
    }

    .chat-room-item {
        font-size: 13px !important;
        padding: 12px 15px !important;
    }

    .chat-room-item.active {
        background: rgba(0, 242, 254, 0.15) !important;
        border-left: 3px solid var(--color-accent-cyan) !important;
    }

    /* Rooms toggle button */
    .chat-rooms-toggle {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 50 !important;
        background: rgba(0, 242, 254, 0.15) !important;
        border: 1px solid var(--color-accent-cyan) !important;
        color: var(--color-accent-cyan) !important;
        padding: 6px 10px !important;
        border-radius: 4px !important;
        font-size: 11px !important;
        font-family: 'Space Mono', monospace !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .chat-rooms-toggle:active {
        background: rgba(0, 242, 254, 0.3) !important;
    }

    /* =============================================
       14. MODAL VISIBILITY FIXES
       ============================================= */
    #createPostModalOverlay,
    #addCryptoModalOverlay,
    .modal-overlay {
        z-index: 100000001 !important;
        /* Above site header (99999999) */
        align-items: flex-start !important;
        /* Push modal content to top */
        padding-top: 80px !important;
        /* Offset for main header + persistent welcome */
    }

    #createPostModalOverlay .modal-content-container,
    #addCryptoModalOverlay .modal-content-container {
        width: 95% !important;
        max-height: 80vh !important;
        margin: 0 auto !important;
    }

    /* --- Create Post File Input Legibility --- */
    .file-input-wrapper {
        height: 42px !important;
        /* Slightly taller for better touch targeting */
    }

    .choose-file-button,
    .file-name {
        font-size: 11px !important;
        /* Fixed size instead of vw */
    }

    #titleCharCounter {
        font-size: 12px !important;
        /* Increased to 12px and used !important to override inline style */
        display: inline-block !important;
        margin-bottom: 4px !important;
    }

    html.password-gate-active,
    body.password-gate-active {
        overflow: hidden !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        width: 100vw !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        touch-action: none !important;
        background: #04080b !important;
        -webkit-overflow-scrolling: auto !important;
    }

    body.password-gate-active .terminal-footer {
        display: none !important;
    }

    /* --- Splash Screen (Guest Login) Mobile --- */
    .splash-screen {
        height: 100dvh !important;
        padding: 20px;
        justify-content: flex-start;
        /* Move up slightly to make room for footer */
        padding-top: 15dvh;
    }

    .splash-title {
        font-size: 2.8em !important;
        letter-spacing: 1px !important;
        margin-bottom: 20px !important;
    }

    .splash-text {
        font-size: 1rem !important;
        margin-bottom: 40px !important;
        padding: 0 10px;
    }

    .splash-actions {
        flex-direction: column !important;
        gap: 15px !important;
        width: 100%;
        max-width: 280px;
    }

    .splash-btn {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 1.1em !important;
    }

    .splash-divider {
        margin: 5px 0;
    }

    /* Fix footer on login screen */
    body:not(.logged-in) .terminal-footer {
        position: fixed !important;
        bottom: 0 !important;
        background: rgba(4, 8, 11, 0.9) !important;
        backdrop-filter: blur(10px);
        margin-top: 0 !important;
        padding: 10px !important;
    }

    /* Modal Mobile Fixes */
    .modal-content-container {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90dvh !important;
        height: auto !important;
        overflow-y: auto !important;
        margin: auto !important;
    }

    .ghost-terminal-title {
        display: none !important;
    }

    .drag-handle {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .drag-handle span {
        display: block !important;
        font-size: 10px !important;
        white-space: nowrap;
        color: #00ff88 !important;
    }

    #ghost-chat-output {
        flex: 1 1 auto !important;
        /* FLEX FIX: fill remaining space properly */
        min-height: 0 !important;
        height: auto !important;
        /* Do NOT use 100% here */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 15px !important;
        display: block !important;
        pointer-events: auto !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent !important;
        margin-bottom: 0 !important;
    }

    .ghost-terminal-input-area {
        flex: 0 0 auto !important;
        /* Don't shrink */
        width: 100% !important;
        background: #04080b !important;
        /* Ensure contrast against dark area */
        z-index: 10 !important;
        padding: 8px 10px !important;
        border-top: 1px solid rgba(0, 255, 136, 0.2);
        display: flex !important;
    }

    /* Professional Gray Scrollbar (Matches Website) */
    #ghost-chat-output::-webkit-scrollbar {
        width: 6px !important;
    }

    #ghost-chat-output::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    #ghost-chat-output::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 10px !important;
    }

    #ghost-chat-output::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3) !important;
    }

    .window-content-body,
    .connect-wallet-body,
    .account-modal-body,
    .modal-content-container {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
    }

    /* High-Visibility Ghost Scrollbar */
    #ghost-chat-output::-webkit-scrollbar,
    .window-content-body::-webkit-scrollbar {
        width: 6px !important;
        display: block !important;
    }

    #ghost-chat-output::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.4) !important;
    }

    #ghost-chat-output::-webkit-scrollbar-thumb,
    .window-content-body::-webkit-scrollbar-thumb {
        background: #00ff88 !important;
        /* Solid bright green */
        border-radius: 10px !important;
    }

    .register-modal-content,
    .login-modal-content {
        width: 95% !important;
        max-width: 400px !important;
        max-height: 90dvh !important;
        height: auto !important;
    }

    .modal-overlay {
        padding: 20px !important;
        align-items: center !important;
    }

    /* --- Registration Modal Mobile Overrides --- */
    .register-modal-body {
        flex-direction: column !important;
        height: auto !important;
    }

    .social-login-panel {
        width: 100% !important;
        padding: 30px 20px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 242, 254, 0.2) !important;
    }

    .full-registration-panel {
        width: 100% !important;
        padding: 25px 20px !important;
    }

    .form-two-col {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .social-btn {
        padding: 12px !important;
        font-size: 0.9em !important;
        height: auto !important;
        min-height: 48px !important;
    }

    .social-icon {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }

    .profile-pic-upload {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }

    .profile-pic-preview {
        margin-right: 0 !important;
    }

    /* Fix Toast/Modal Interference - Move to Bottom on Mobile */
    #notifyModalOverlay {
        top: auto !important;
        bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding-bottom: 30px !important;
        background: transparent !important;
        /* Don't dim whole screen if possible, or just dim bottom */
        z-index: 22000 !important;
    }

    #notifyModalOverlay .modal-content {
        margin-bottom: 20px !important;
        width: 90% !important;
        border: 1px solid var(--color-accent-cyan) !important;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important;
    }

    .modal-overlay {
        z-index: 22000 !important;
    }

    /* Create channel popup must appear above all open widgets */
    #createChannelModalOverlay.open {
        z-index: 99999 !important;
        display: flex !important;
    }

    #toast-container {
        top: auto !important;
        bottom: 20px !important;
        z-index: 22000 !important;
    }

    /* Strict Inbox Fix - FORCE FULL SCREEN CLEAN */
    #dm-inbox-window {
        position: fixed !important;
        top: 94px !important;
        /* Just below main header */
        left: 0 !important;
        right: 0 !important;
        bottom: 28px !important;
        /* Match footer spacing */
        width: 100vw !important;
        min-width: 100vw !important;
        height: auto !important;
        /* Let bottom dictate height */
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        transform: none !important;
        z-index: 21000 !important;
        display: flex !important;
        flex-direction: column !important;
        background: #04080b !important;
        box-shadow: none !important;
        padding: 0 !important;
        /* No padding - flush */
    }

    #dm-inbox-window .window-content-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding-bottom: 30px !important;
        /* Extra bottom padding */
    }

    /* Force Mobile Header styling within Inbox */
    #dm-inbox-window .mobile-widget-header {
        display: flex !important;
        position: relative !important;
        /* Relative positioning within container */
        align-items: center;
        justify-content: center !important;
        /* Center content */
        height: 40px !important;
        min-height: 40px !important;
        background: rgba(4, 8, 11, 0.95);
        border-bottom: 1px solid var(--color-accent-cyan);
        padding: 0 15px;
        z-index: 10;
        flex-shrink: 0;
        margin-top: 0 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        order: -1 !important;
    }

    #dm-inbox-window .mobile-widget-header .mobile-widget-back-btn {
        position: absolute !important;
        left: 25px !important;
        top: calc(50% - 3px) !important;
        transform: translateY(-50%) !important;
    }

    #dm-inbox-window .mobile-widget-header .mobile-widget-title {
        font-size: 13px !important;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--color-accent-cyan);
        align-self: flex-start !important;
        margin: 9.5px 0 0 20px !important;
    }

    /* DM Chat Window - Individual Conversation */
    #dm-chat-window {
        position: fixed !important;
        top: 94px !important;
        /* Match inbox positioning */
        left: 0 !important;
        right: 0 !important;
        bottom: 28px !important;
        width: 100vw !important;
        min-width: 100vw !important;
        height: auto !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        transform: none !important;
        z-index: 21000 !important;
        display: flex !important;
        flex-direction: column !important;
        background: #04080b !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    #dm-chat-window .window-content-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding-bottom: 30px !important;
    }

    #dm-chat-window .mobile-widget-header {
        display: flex !important;
        position: relative !important;
        align-items: center;
        justify-content: center !important;
        height: 40px !important;
        min-height: 40px !important;
        background: rgba(4, 8, 11, 0.95);
        border-bottom: 1px solid var(--color-accent-cyan);
        padding: 0 15px;
        z-index: 10;
        flex-shrink: 0;
        margin-top: 0 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        order: -1 !important;
    }

    #dm-chat-window .mobile-widget-header .mobile-widget-back-btn {
        position: absolute !important;
        left: 25px !important;
        top: calc(50% - 3px) !important;
        transform: translateY(-50%) !important;
    }
    
    #dm-chat-window .mobile-widget-header .mobile-widget-title {
        font-size: 13px !important;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--color-accent-cyan);
        align-self: flex-start !important;
        margin: 9.5px 0 0 20px !important;
    }

    /* Specific overrides for Oracle Widget (Ticker pushes flex center up) */
    #oracle-terminal-widget .mobile-widget-header .mobile-widget-back-btn {
        top: 9.5px !important;
        transform: none !important;
    }
    
    #oracle-terminal-widget .mobile-widget-header .mobile-widget-title {
        align-self: flex-start !important;
        margin-top: 15px !important;
    }

    /* --- FINAL MOBILE FIXES (APPENDED) --- */

    /* 1. Move Toast Notifications to Bottom */
    #notifyModalOverlay {
        top: auto !important;
        bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding-bottom: 30px !important;
        background: transparent !important;
        z-index: 22000 !important;
    }

    #notifyModalOverlay .modal-content {
        margin-bottom: 20px !important;
        width: 90% !important;
        border: 1px solid var(--color-accent-cyan) !important;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important;
    }

    /* 2. Lock Background Scrolling when Inbox is Open */
    body.mobile-widget-active {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    /* 3. Ensure Inbox is purely full screen - MOVED TO EARLIER RULE */

    /* 4. HIDE DESKTOP HEADER ON MOBILE INBOX */
    /* Standardized injected mobile header */
    .mobile-widget-header {
        display: flex !important;
        flex-shrink: 0 !important;
        order: -1 !important;
        position: relative;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        top: 0 !important;
        left: 0;
        right: 0;
        height: 36px !important;
        background: rgba(6, 13, 20, 0.95);
        border-bottom: 1px solid rgba(0, 242, 254, 0.2);
        padding: 0 15px !important;
        z-index: 999999999 !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        justify-content: center;
        align-items: center;
    }

    /* Standardized horizontal shifts for all mobile headers */
    .mobile-widget-header .mobile-widget-back-btn,
    .mobile-widget-header #mobile-back-btn {
        position: absolute !important;
        left: 25px !important;
    }

    .mobile-widget-header .mobile-widget-title {
        margin-left: 20px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        color: var(--color-accent-cyan) !important;
    }

    /* Account Modal - Override header position */
    #accountModalOverlay .mobile-widget-header {
        position: relative !important;
        top: 0 !important;
    }

    /* Suppress desktop header elements on mobile */
    .window-header,
    .window-close-btn,
    .oracle-header-handle,
    .terminal-header-handle,
    .chat-header-handle {
        display: none !important;
    }

    /* Ensure DM Inbox fills the viewport correctly */
    #dm-inbox-window {
        background: #04080b !important;
    }

    /* Hide duplicate title row in DM Inbox on mobile */
    #dm-inbox-window .window-header {
        display: none !important;
    }

    /* 5. GENERIC FLOATING WINDOW FULL SCREEN (Chat & others) */
    .floating-window {
        top: 86px !important;
        height: calc(100% - 114px) !important;
        border: none !important;
        border-radius: 0 !important;
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Ensure no internal padding pushes sub-header */
    }

    /* Ensure desktop header is hidden for ALL floating windows on mobile */
    .floating-window .window-header {
        display: none !important;
    }

    /* =============================================
       CHAT MESSAGE ACTIONS - MOBILE
       ============================================= */
    /* Hide action bar by default on mobile - show only when message is tapped */
    .chat-message-actions {
        opacity: 0 !important;
        transition: opacity 0.2s ease !important;
    }

    /* Show action bar when message is active (tapped) */
    .chat-message-bubble.mobile-active .chat-message-actions {
        opacity: 1 !important;
    }

    /* =============================================
       CONFIRM MODAL - MOBILE Z-INDEX FIX
       ============================================= */
    /* Ensure confirm modal appears above chat widget */
    #deleteConfirmModal,
    #deleteConfirmModal.open {
        z-index: 999999999 !important;
        position: fixed !important;
    }

    /* =============================================
       SYSTEM MANUAL / TERMS / PRIVACY MODALS - Z-INDEX FIX
       ============================================= */
    /* Ensure these modals appear above mobile category headers */
    .system-manual-modal,
    #systemManualModal,
    #termsModal,
    #privacyModal {
        z-index: 100000002 !important;
    }

    /* =============================================
       XP SHOP - MOBILE LAYOUT
       ============================================= */

    /* Shop pane layout */
    #pane-shop {
        padding: 15px !important;
    }

    /* XP Balance header - stack on mobile */
    .shop-balance-row {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
        padding: 15px !important;
    }

    .shop-balance-row>div {
        text-align: center !important;
    }

    /* Category filter buttons container - horizontal scroll */
    .shop-filters-row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .shop-filters-row::-webkit-scrollbar {
        display: none !important;
    }

    /* Category filter buttons */
    .shop-category-filter {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 8px 12px !important;
        font-size: 0.75em !important;
    }

    /* Shop items grid - single column */
    #shopItemsGrid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Shop item cards */
    #shopItemsGrid .shop-item {
        padding: 12px !important;
    }

    /* Avatar frame preview - smaller */
    #shopItemsGrid .shop-item div[style*="width: 80px"][style*="height: 80px"] {
        width: 60px !important;
        height: 60px !important;
    }

    /* =============================================
       CHAT COSMETICS - MOBILE
       ============================================= */

    /* Avatar frames - ensure proper display */
    .chat-avatar.neo-frame-cyan,
    .chat-avatar.neo-frame-purple,
    .chat-avatar.neo-frame-gold,
    .chat-avatar.neo-frame-rainbow {
        border-width: 2px !important;
        box-sizing: border-box !important;
    }

    /* Name colors in chat - keep colors but reduce glow for readability */
    .chat-message-bubble .sender {
        text-shadow: none !important;
    }

    /* Chat effects - reduce animation for performance */
    .chat-message-bubble.neo-effect-sparkles::before {
        animation-duration: 4s !important;
    }

    .chat-message-bubble.neo-effect-glow::after {
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.1) !important;
        animation: none !important;
        opacity: 0.5 !important;
    }

    /* User flair badges in chat - more compact */
    .chat-user-flair {
        gap: 2px !important;
        margin-left: 3px !important;
    }

    .chat-user-flair .neo-badge {
        font-size: 0.5rem !important;
        padding: 0 2px !important;
    }

    .chat-user-flair .neo-level {
        font-size: 0.45rem !important;
        padding: 0 2px !important;
        letter-spacing: 0.5px !important;
    }

    /* ============================================================
       LEGAL MODALS (Terms, Privacy, System Manual)
       ============================================================ */

    .legal-modal {
        padding: 90px 10px 40px 10px !important;
        /* Top padding to clear header, minimal bottom for footer */
        align-items: flex-start !important;
    }

    .legal-modal-content {
        max-height: 75vh !important;
        /* Taller container, almost to bottom */
    }

    /* System Manual Modal */
    #systemManualModal {
        padding: 90px 10px 40px 10px !important;
        /* Closer to footer */
        align-items: flex-start !important;
    }

    .system-manual-content {
        height: 78vh !important;
        max-height: 78vh !important;
        /* Extended closer to bottom */
    }

    /* System Manual Navigation - Fix category spacing */
    #systemManualModal .nav-items {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 4px 0 !important;
        row-gap: 4px !important;
    }

    #systemManualModal .nav-item {
        flex: 0 0 auto !important;
        padding: 4px 7px !important;
        margin: 0 !important;
        font-size: 0.6rem !important;
        white-space: nowrap !important;
        border-radius: 3px !important;
    }

    #systemManualModal .nav-section {
        margin-bottom: 4px !important;
    }

    #systemManualModal .nav-section-title {
        font-size: 0.55rem !important;
        padding: 4px 0 2px 0 !important;
        margin-bottom: 2px !important;
    }

    /* =============================================
       POST FEATURED IMAGE - MOBILE
       Show full image without cropping
       ============================================= */
    .post-featured-image {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        cursor: default !important;
        /* No zoom on mobile, image already shows full */
    }

    /* Make token badges clickable on mobile */
    .token-badge-mobile {
        cursor: pointer !important;
        transition: opacity 0.2s !important;
    }

    .token-badge-mobile:active {
        opacity: 0.7 !important;
    }

    .footer-mail-icon {
        font-size: 1.02em !important;
    }
}