/* =========================================
   FUGAZI TERMINAL STYLESHEET - V.FINAL_FIXED_UI
   ========================================= */

/* --- 1. RESET & VARIABLES --- */
:root {
    --header-height: 50px;
    --ticker-height: 30px; 
    --sidebar-left-width: 300px;
    --sidebar-right-width: 350px;
    --border-color: #333;
    --bg-dark: #000;
    --font-mono: 'JetBrains Mono', monospace;
    --accent-orange: #ff9500;
    --accent-blue: #00a8e8;
    --signal-green: #00ff41;
    --signal-red: #ff3b30;
    --term-gold: #f0b90b;
}

* { box-sizing: border-box; } /* PENTING: Agar padding tidak menambah lebar/tinggi */

body { 
    overflow: hidden; 
    margin: 0;
    background: var(--bg-dark);
    font-family: var(--font-mono);
    color: #e0e0e0;
}

/* --- 2. WRAPPER UTAMA (FLEX COLUMN) --- */
/* Ini kunci agar footer tidak terpotong */
.community-page-wrapper {
    position: fixed;
    top: 50px; /* Tinggi Navbar */
    left: 0;
    width: 100vw;
    height: calc(100vh - 50px); /* Sisa tinggi layar pas */
    background: var(--bg-dark);
    z-index: 10;
    
    display: flex; 
    flex-direction: column; /* Susun ke bawah: Main Area -> Footer */
}

/* --- 3. AREA TENGAH (GRID SYSTEM) --- */
.vip-area {
    /* Flex 1: Ambil semua ruang sisa, JANGAN height: 100% */
    flex: 1; 
    min-height: 0; /* PENTING: Mencegah overflow flex child */
    
    display: grid;
    grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width);
    width: 100%;
    overflow: hidden;
    
    opacity: 0; 
    transition: opacity 0.5s ease;
}

.vip-area.active-session, .vip-area.fade-in { opacity: 1; }

/* --- 4. SIDEBAR STYLING --- */
.sidebar {
    background: #050505;
    height: 100%;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--border-color);
    overflow: hidden; 
}

.sidebar-right {
    border-right: none;
    border-left: 1px solid var(--border-color);
}

/* Header Panel (News / Scanner) */
.panel-header {
    height: 36px;
    padding: 0 15px; 
    background: #111; 
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid #222; /* Tambahan border atas biar tegas */
    
    font-family: var(--font-mono); 
    font-size: 0.7rem; 
    font-weight: bold; 
    color: var(--accent-orange);
    
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    user-select: none;
    flex-shrink: 0; /* Jangan mengecil */
}

/* Scrollable Content (List Berita) */
.sidebar-panel-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Custom Scrollbar CSS */
    scrollbar-width: thin;
    scrollbar-color: #333 #000;
}

/* Custom Scrollbar Webkit (Chrome/Safari) */
.sidebar-panel-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-panel-scroll::-webkit-scrollbar-track { background: #000; }
.sidebar-panel-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.sidebar-panel-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent-orange); }

/* --- 5. NEWS FEED UI --- */
.dex-item {
    padding: 12px 15px; 
    border-bottom: 1px solid #1a1a1a;
    display: flex; 
    align-items: flex-start;
    gap: 12px;
    cursor: pointer; 
    transition: all 0.2s; 
    background: #050505;
}
.dex-item:hover { 
    background: #0f0f0f; 
    border-left: 2px solid var(--accent-orange); /* Indikator hover */
    padding-left: 13px; /* Kompensasi border */
}

/* Gambar Berita */
.news-thumb {
    width: 45px; 
    height: 45px; 
    border-radius: 4px; 
    object-fit: cover; 
    border: 1px solid #333;
    opacity: 0.8;
}

.news-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-meta {
    display: flex; justify-content: space-between; margin-bottom: 4px;
    font-size: 0.6rem; color: #666;
}

.news-title {
    color: #ddd; 
    font-size: 0.7rem; 
    line-height: 1.3; 
    font-weight: 500;
    /* Limit 2 baris */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 6. CENTER AREA (MAIN DISPLAY) --- */
.vip-chat-container {
    background-color: #030303;
    /* Efek Grid Halus di Background */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    
    height: 100%;
    display: flex; 
    flex-direction: column;
    position: relative; 
    overflow: hidden;
}

/* Placeholder Tengah */
.center-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    user-select: none;
}
.blink-slow { animation: blinker 2s linear infinite; }
@keyframes blinker { 50% { opacity: 0.5; } }

/* --- 7. SCANNER UI (KANAN) --- */
.scanner-wrapper {
    padding: 0;
    display: flex; flex-direction: column; height: 100%;
}
.scan-tabs {
    display: flex; background: #111; border-bottom: 1px solid #333;
}
.tab-sm {
    flex: 1; background: transparent; border: none; color: #666;
    font-family: var(--font-mono); font-size: 0.65rem; padding: 10px 0;
    cursor: pointer; border-right: 1px solid #222; transition: 0.2s;
}
.tab-sm:hover { color: white; background: #1a1a1a; }
.tab-sm.active { color: var(--accent-orange); background: #151515; font-weight: bold; border-bottom: 2px solid var(--accent-orange); }

.scan-input-box {
    padding: 10px; border-bottom: 1px solid #333; display: flex;
}
.cmd-input {
    flex: 1; background: #000; border: 1px solid #333; color: var(--accent-orange);
    padding: 8px; font-family: var(--font-mono); font-size: 0.75rem; outline: none;
}
.cmd-btn {
    background: #222; border: 1px solid #333; color: white; padding: 0 15px;
    cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; margin-left: -1px;
}
.cmd-btn:hover { background: var(--accent-blue); color: black; border-color: var(--accent-blue); }

.scan-monitor {
    flex: 1; background: #080808; overflow-y: auto;
    border-top: 1px solid #222;
}

/* --- 8. FOOTER MARKET SENTIMENT (FIXED) --- */
.sentiment-bar {
    height: 30px; /* Tinggi Fix */
    flex-shrink: 0; /* JANGAN MENGECIL */
    
    background: #000; 
    border-top: 1px solid var(--border-color);
    display: flex; 
    z-index: 20; 
    overflow: hidden;
}

.sentiment-title {
    background: var(--accent-blue); color: black; 
    font-weight: bold; padding: 0 15px; 
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; z-index: 2; width: 140px;
}

.sentiment-wrap {
    flex: 1; overflow: hidden; white-space: nowrap; position: relative;
    display: flex; align-items: center;
    mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
}

.sentiment-ticker {
    display: inline-block; white-space: nowrap;
    animation: sentiment-scroll 40s linear infinite;
    font-size: 0.75rem; color: #ccc;
    padding-left: 100%;
}
@keyframes sentiment-scroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* --- 9. MOBILE RESPONSIVE --- */
.mobile-tabs { display: none; }

@media (max-width: 900px) {
    .community-page-wrapper {
        top: 100px !important; /* Header HP lebih tinggi */
        height: calc(100vh - 100px) !important;
    }
    .vip-area {
        display: block !important;
        grid-template-columns: none !important;
        /* Di HP juga gunakan flex agar footer aman */
        flex: 1 !important; height: auto !important;
    }
    
    /* Tabs Mobile Nav */
    .mobile-tabs { 
        display: flex; flex-shrink: 0; height: 40px; background: #111; border-bottom: 1px solid #333;
    }
    .tab-btn { flex: 1; border: none; background: transparent; color: #666; font-family: var(--font-mono); font-size: 0.7rem; border-right: 1px solid #222; }
    .tab-btn.active { color: var(--accent-orange); background: #1a1a1a; }
    
    /* Hide logic */
    .sidebar, .vip-chat-container { display: none !important; width: 100% !important; height: 100% !important; }
    .mobile-visible { display: flex !important; }
}


/* =========================================
   FUGAZI TERMINAL STYLESHEET - V.4_COLUMNS
   ========================================= */

/* --- 1. RESET & VARIABLES --- */
:root {
    --header-height: 50px;
    --footer-height: 30px; 
    --sidebar-left: 300px;  /* Lebar Sidebar Kiri */
    --sidebar-right: 350px; /* Lebar Sidebar Kanan */
    
    /* Warna */
    --border-color: #333;
    --bg-dark: #000;
    --bg-panel: #050505;
    --font-mono: 'JetBrains Mono', monospace;
    --accent-orange: #ff9500;
    --accent-blue: #00a8e8;
    --signal-green: #00ff41;
    --signal-red: #ff3b30;
}

* { box-sizing: border-box; }

body { 
    overflow: hidden; 
    margin: 0;
    background: var(--bg-dark);
    font-family: var(--font-mono);
    color: #e0e0e0;
}

/* --- 2. WRAPPER UTAMA --- */
.community-page-wrapper {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100vw;
    height: calc(100vh - var(--header-height)); /* Tinggi Layar dikurangi Header */
    background: var(--bg-dark);
    z-index: 10;
    display: flex; 
    flex-direction: column; /* Susun Vertikal */
}

/* --- 3. GRID SYSTEM (4 KOLOM) --- */
.vip-area {
    flex: 1; /* Mengisi sisa ruang vertikal */
    min-height: 0; /* Mencegah overflow */
    
    display: grid;
    /* KIRI | TENGAH 1 | TENGAH 2 | KANAN */
    grid-template-columns: var(--sidebar-left) 1fr 1fr var(--sidebar-right);
    width: 100%;
    overflow: hidden;
    
    opacity: 0; transition: opacity 0.5s ease;
}

.vip-area.active-session, .vip-area.fade-in { opacity: 1; }

/* --- 4. KOLOM & PANEL --- */
.column-panel {
    background: var(--bg-panel);
    height: 100%;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--border-color);
    overflow: hidden; 
    position: relative;
}

/* Hapus border kanan untuk kolom terakhir */
.column-panel:last-child { border-right: none; }

/* HEADER JUDUL PER KOLOM */
.panel-header {
    height: 36px; min-height: 36px;
    padding: 0 15px; 
    background: #111; 
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid #222;
    
    font-size: 0.7rem; 
    font-weight: bold; 
    color: var(--accent-orange);
    font-family: var(--font-mono);
    
    display: flex; justify-content: space-between; align-items: center; 
    user-select: none;
    flex-shrink: 0;
}

/* AREA KONTEN YANG BISA DI-SCROLL */
.panel-scroll-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #333 #000;
}

/* Styling Scrollbar Chrome */
.panel-scroll-content::-webkit-scrollbar { width: 5px; }
.panel-scroll-content::-webkit-scrollbar-track { background: #000; }
.panel-scroll-content::-webkit-scrollbar-thumb { background: #333; }

/* --- 5. NEWS FEED UI (FIXED GAMBAR BESAR) --- */
.news-item {
    display: flex;
    align-items: flex-start; /* Gambar & Teks rata atas */
    padding: 12px 15px;
    border-bottom: 1px solid #1a1a1a;
    cursor: pointer;
    transition: background 0.2s;
    gap: 12px;
}
.news-item:hover { background: #111; border-left: 2px solid var(--accent-orange); padding-left: 13px; }

/* Pengaturan Gambar Berita agar KECIL & RAPI */
.news-img-box {
    width: 50px;
    height: 50px;
    flex-shrink: 0; /* Mencegah gambar mengecil/gepeng */
    background: #000;
    border: 1px solid #333;
    overflow: hidden;
    border-radius: 4px;
}

.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop gambar agar pas kotak */
    display: block;
}

.news-text {
    flex: 1;
    display: flex; flex-direction: column; gap: 4px;
}

.news-source {
    font-size: 0.6rem; color: var(--accent-blue); font-weight: bold;
    display: flex; justify-content: space-between;
}

.news-title {
    color: #ddd; font-size: 0.75rem; line-height: 1.3;
    /* Limit 3 baris teks */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- 6. PLACEHOLDER UNTUK KOLOM TENGAH --- */
.empty-state {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0.3;
    color: #666;
    background-image: radial-gradient(#1a1a1a 1px, transparent 1px);
    background-size: 20px 20px;
}

/* --- 7. SCANNER UI (KANAN) --- */
.scanner-wrapper { display: flex; flex-direction: column; height: 100%; }
.scan-tabs { display: flex; background: #080808; border-bottom: 1px solid #333; }
.tab-sm { flex: 1; background: transparent; border: none; color: #666; padding: 10px 0; font-family: var(--font-mono); font-size: 0.65rem; cursor: pointer; border-right: 1px solid #222; }
.tab-sm:hover { color: #fff; background: #111; }
.tab-sm.active { color: var(--accent-orange); background: #151515; font-weight: bold; border-bottom: 2px solid var(--accent-orange); }

.scan-input-row { display: flex; border-bottom: 1px solid #333; }
.cmd-input { flex: 1; background: #000; border: none; color: var(--accent-orange); padding: 10px; font-family: var(--font-mono); font-size: 0.75rem; outline: none; }
.cmd-btn { background: #1a1a1a; border: none; border-left: 1px solid #333; color: var(--accent-blue); padding: 0 15px; cursor: pointer; font-family: var(--font-mono); font-weight: bold; font-size: 0.7rem; }
.cmd-btn:hover { background: var(--accent-blue); color: black; }

/* --- 8. FOOTER SENTIMENT (FIXED) --- */
.sentiment-bar {
    height: var(--footer-height); /* 30px Fix */
    flex-shrink: 0; /* Jangan biarkan mengecil */
    background: #000; 
    border-top: 1px solid var(--border-color);
    display: flex; 
    z-index: 20; 
    overflow: hidden;
}
.sentiment-title {
    background: var(--accent-blue); color: black; font-weight: bold; 
    padding: 0 15px; display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; width: 140px; z-index: 2;
}
.sentiment-wrap {
    flex: 1; overflow: hidden; position: relative;
    display: flex; align-items: center;
    mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
}
.sentiment-ticker {
    display: inline-block; white-space: nowrap;
    animation: sentiment-scroll 40s linear infinite;
    font-size: 0.75rem; color: #ccc; padding-left: 100%;
}
@keyframes sentiment-scroll { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

/* --- 9. MOBILE RESPONSIVE --- */
.mobile-tabs { display: none; }
@media (max-width: 900px) {
    .community-page-wrapper { top: 100px !important; height: calc(100vh - 100px) !important; }
    .vip-area { display: block !important; grid-template-columns: none !important; }
    .mobile-tabs { display: flex; height: 40px; background: #111; border-bottom: 1px solid #333; flex-shrink: 0; }
    .tab-btn { flex: 1; border: none; background: transparent; color: #666; border-right: 1px solid #222; }
    .tab-btn.active { color: var(--accent-orange); background: #1a1a1a; }
    
    .column-panel { display: none !important; width: 100% !important; height: 100% !important; border: none !important; }
    .mobile-visible { display: flex !important; }
}

/* Helpers */
.blink { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

/* --- MODAL OVERLAY FIX --- */
.modal-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background: rgba(0, 0, 0, 0.85); 
    
    /* Z-INDEX SANGAT TINGGI AGAR DI ATAS SEMUANYA */
    z-index: 99999 !important; 
    
    display: none; /* Default hidden */
    justify-content: center; 
    align-items: center;
    backdrop-filter: blur(5px);
}


/* =========================================
   FX: CRT SCANLINES & GLOW
   ========================================= */

/* Lapisan Garis Scanline */
body::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    z-index: 9999; /* Di atas segalanya tapi di bawah modal */
    background-size: 100% 3px, 3px 100%;
    pointer-events: none; /* Klik tembus ke bawah */
}

/* Efek Tombol Interaktif */
.dex-item:active, .cmd-btn:active, .btn-vip-nav:active {
    transform: scale(0.98);
    filter: brightness(1.2);
}

/* Animasi Glitch Teks */
@keyframes glitch-skew {
    0% { transform: skew(0deg); }
    20% { transform: skew(-2deg); }
    40% { transform: skew(2deg); }
    60% { transform: skew(-1deg); }
    80% { transform: skew(1deg); }
    100% { transform: skew(0deg); }
}

.glitch-hover:hover {
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    color: var(--signal-green);
    text-shadow: 2px 0 var(--signal-red), -2px 0 var(--accent-blue);
}

/* Scrollbar Keren */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-orange); }

/* =========================================
   FIX: SIDEBAR SCANNER RESULT UI
   ========================================= */

/* --- 1. TOKEN SCANNER HEADER --- */
.scan-header-card {
    padding: 15px;
    background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgba(5,5,5,1) 100%);
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.token-info-left {
    flex: 1;
    overflow: hidden; /* Mencegah teks panjang merusak layout */
}

.token-title {
    font-family: var(--font-mono);
    font-size: 1.1rem; /* Ukuran font pas */
    font-weight: 900;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Titik-titik jika kepanjangan */
    margin-bottom: 4px;
}

.token-ca {
    font-size: 0.65rem;
    color: #666;
    font-family: monospace;
    background: #111;
    padding: 2px 4px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid #222;
}

.score-box {
    text-align: center;
    background: #111;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #333;
    min-width: 60px;
}

.score-val {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
}

.score-lbl {
    font-size: 0.5rem;
    color: #666;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 2. METRICS GRID (2 KOLOM) --- */
.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* WAJIB 2 KOLOM DI SIDEBAR */
    gap: 1px;
    background: #222; /* Warna border antar cell */
    border-bottom: 1px solid #333;
}

.metric-cell {
    background: #080808;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.metric-lbl {
    font-size: 0.6rem;
    color: #555;
    font-weight: bold;
    margin-bottom: 2px;
    display: flex; 
    justify-content: space-between;
}

.metric-val {
    font-size: 0.9rem;
    font-weight: bold;
    color: #e0e0e0;
    font-family: var(--font-mono);
}

/* --- 3. SECURITY & REPORT SECTION --- */
.sec-section {
    padding: 15px;
    border-bottom: 1px dashed #222;
}

.sec-title {
    font-size: 0.7rem; 
    font-weight: bold; 
    color: var(--accent-orange); 
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}

.sec-grid {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 8px; 
}

.sec-item {
    background: #111; 
    padding: 8px; 
    border: 1px solid #222;
    text-align: center;
}
.sec-lbl { font-size: 0.55rem; color: #666; margin-bottom: 3px; }
.sec-stat { font-size: 0.7rem; font-weight: bold; }

/* --- 4. WALLET SCANNER UI --- */
.wallet-header {
    display: flex; 
    flex-direction: column; /* Tumpuk vertikal agar muat */
    background: #080808;
    border-bottom: 1px solid #333;
}

.wh-row {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1a1a1a;
}
.wh-row:last-child { border-bottom: none; }

.holding-item {
    padding: 10px 15px;
    border-bottom: 1px solid #1a1a1a;
    display: flex; 
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}
.holding-item:hover { background: #111; }

.h-img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #333; }
.h-info { margin-left: 10px; display: flex; flex-direction: column; }
.h-sym { font-size: 0.8rem; font-weight: bold; color: white; }
.h-amt { font-size: 0.65rem; color: #666; }

/* --- HOLDER BADGES (TOKEN SCANNER) --- */
.holder-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.holder-badge {
    background: #111;
    border: 1px solid #333;
    color: #888;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    position: relative;
}

.holder-badge:hover {
    border-color: var(--accent-orange);
    color: white;
    background: rgba(255, 149, 0, 0.1);
}

.holder-badge:active {
    transform: scale(0.95);
}

/* --- SOLSCAN LINK (WALLET SCANNER) --- */
.btn-solscan {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #151515;
    border: 1px solid #333;
    color: #888;
    text-decoration: none;
    font-size: 0.6rem;
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 8px;
    transition: 0.2s;
}
.btn-solscan:hover {
    border-color: var(--accent-blue);
    color: white;
}

/* --- UPDATE: RESPONSIVE MOBILE (VERTICAL STACK MODE) --- */
@media (max-width: 900px) {
    
    /* 1. Reset Grid Layout Desktop */
    .vip-area {
        display: flex !important;
        flex-direction: column !important; /* Susun ke bawah */
        width: 100% !important;
        height: auto !important; /* Biarkan tinggi otomatis mengikuti isi */
        overflow-y: auto !important; /* Aktifkan scroll vertikal utama */
        padding-bottom: 60px !important; /* Ruang untuk scroll paling bawah */
    }

    /* 2. Reset Wrapper agar bisa discroll */
    .community-page-wrapper {
        position: relative !important; /* Bukan fixed lagi */
        top: 55px !important; 
        height: auto !important;
        min-height: calc(100vh - 55px);
        overflow-y: visible !important;
    }

    /* 3. Tampilkan SEMUA Kolom secara Vertikal */
    .sidebar, 
    .column-panel, 
    .vip-chat-container,
    #colLeft, #colMid1, #colMid2, #colRight {
        display: flex !important; /* Paksa muncul */
        width: 100% !important;
        height: auto !important; /* Tinggi menyesuaikan isi */
        min-height: 400px; /* Minimal tinggi per kolom agar nyaman */
        border-right: none !important;
        border-bottom: 1px solid #333 !important; /* Garis pemisah antar kolom */
        flex-shrink: 0 !important;
    }

    /* 4. Sembunyikan Tab Mobile (Karena sudah tidak butuh) */
    .mobile-tabs {
        display: none !important;
    }

    /* 5. Scanner UI Fix (Kolom Terakhir) */
    .scanner-wrapper {
        height: 500px !important; /* Beri tinggi fix khusus scanner agar scroll dalam tetap jalan */
    }

    /* 6. Footer Tetap di Bawah */
    .sentiment-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 100;
    }
}

/* --- GLOBAL CHAT STYLES --- */
.chat-msg {
    font-size: 0.75rem;
    word-wrap: break-word;
    line-height: 1.4;
    padding: 4px 0;
    border-bottom: 1px solid #111;
}

.chat-msg .c-time {
    color: #555;
    font-size: 0.65rem;
    margin-right: 5px;
}

.chat-msg .c-name {
    font-weight: bold;
    margin-right: 5px;
}

.chat-msg .c-text {
    color: #ccc;
}

/* Warna khusus untuk nama user sendiri */
.chat-msg.self .c-name {
    color: var(--signal-green);
}

.chat-msg.self .c-text {
    color: white;
}

/* Warna acak untuk user lain (default accent) */
.chat-msg.other .c-name {
    color: var(--accent-blue);
}

/* --- TETRIS GAME STYLES --- */
.t-btn {
    background: #111;
    border: 1px solid #333;
    color: #ccc;
    padding: 8px 0;
    font-family: var(--font-mono);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.1s;
    font-size: 0.8rem;
    user-select: none; /* Biar gak ke-select pas tap cepet */
}

.t-btn:active {
    background: #222;
    transform: translateY(2px);
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

/* Efek Glitch saat Game Over (Opsional) */
.game-over-text {
    animation: glitch-skew 0.5s infinite linear;
    color: var(--signal-red) !important;
}

/* =========================================
   MOBILE RESPONSIVENESS FIXES (CHAT & GAME)
   ========================================= */

@media (max-width: 900px) {

    /* --- 1. FIX TETRIS (LIQUIDITY STACKER) --- */
    
    /* Agar Canvas tidak melebar keluar layar */
    #tetrisCanvas {
        width: 100% !important;      /* Lebar mengikuti container */
        max-width: 240px !important; /* Batas maksimal agar tidak terlalu besar */
        height: auto !important;     /* Tinggi menyesuaikan proporsi (aspek rasio) */
    }

    /* Agar tombol kontrol pas dengan lebar canvas */
    .tetris-controls {
        width: 100% !important;
        max-width: 240px !important;
        gap: 8px !important; /* Jarak antar tombol lebih renggang */
    }

    /* Tombol lebih besar (Thumb Friendly) */
    .t-btn {
        padding: 15px 0 !important; /* Area sentuh lebih luas */
        font-size: 1.2rem !important; /* Ikon panah lebih besar */
        touch-action: manipulation; /* Mencegah zoom saat tap cepat */
    }

    /* Container game di tengah */
    #colMid1 .panel-scroll-content, 
    #colMid1 > div {
        align-items: center !important;
        justify-content: flex-start !important; /* Mulai dari atas */
        padding-top: 20px !important;
    }


    /* --- 2. FIX GLOBAL CHAT (UPLINK) --- */

    /* Input Chat Mobile */
    .chat-input-box {
        padding: 15px 10px !important; /* Padding lebih besar */
        background: #111 !important;
        position: static; /* Pastikan tidak melayang aneh */
    }

    /* Font Input lebih besar (Mencegah Zoom otomatis di iPhone) */
    #chatMessageInput {
        font-size: 16px !important; 
        height: 30px;
    }

    /* Tombol Send lebih jelas */
    #btnSendChat {
        padding: 0 10px !important;
        font-size: 0.9rem !important;
    }

    /* Area Chat History */
    #globalChatContainer {
        height: 300px !important; /* Beri tinggi tetap agar bisa discroll di HP */
        flex: none !important;    /* Matikan flex grow agar tidak menimpa elemen lain */
    }
}