body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #000; overflow: hidden; }
#map { width: 100%; height: 100vh; z-index: 1; }

#bio-navbar {
    position: fixed; top: 0; left: 0; width: 99%; height: 60px;
    background: rgba(10, 10, 15, 0.98); border-bottom: 2px solid #d9534f;
    z-index: 2000; display: flex; align-items: center; padding: 0 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.8);
}
.nav-brand {
    font-size: 18px; font-weight: bold; color: #fff; margin-right: 20px;
    text-transform: uppercase; display: flex; flex-direction: column; line-height: 1; min-width: 180px;
}
.nav-brand span { color: #d9534f; font-size: 10px; letter-spacing: 3px; margin-top: 3px; }

.nav-group { display: flex; gap: 10px; align-items: center; border-left: 1px solid #333; padding-left: 15px; height: 40px; flex-grow: 1; }
.filter-select { background: #222; color: #eee; border: 1px solid #444; padding: 6px 8px; border-radius: 4px; font-size: 11px; min-width: 100px; }
.search-input { background: #222; color: #eee; border: 1px solid #d9534f; padding: 6px 10px; border-radius: 4px; font-size: 12px; width: 300px; transition: width 0.3s ease; }
.search-input:focus { outline: none; border-color: #fff; }
.date-input { background: #222; color: #eee; border: 1px solid #444; padding: 5px; border-radius: 4px; font-size: 11px; width: 60px; color-scheme: dark; }

/* --- DESKTOP NAVBAR CONTROLS --- */
/* This replaces the inline style we deleted */
#sidebar-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* --- MOBILE OVERRIDES --- */
@media screen and (max-width: 768px) {
    /* On mobile, we rip it out of the navbar and make it a slide-up panel */
    #sidebar-controls {
        display: none; /* Hidden by default */
        flex-direction: column; /* Stack vertically */
        align-items: stretch;
        position: fixed;
        bottom: 70px;
        left: 0;
        width: 100%;
        height: auto;
        max-height: 60vh;
        background: #1a1a1a;
        border-top: 2px solid #d9534f;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
        z-index: 3000;
        gap: 15px;
    }

    #sidebar-controls.mobile-open {
        display: flex; /* Show when toggled */
        animation: slideUp 0.3s ease-out;
    }
    
    /* Make inputs bigger on mobile for fat fingers */
    #sidebar-controls select, 
    #sidebar-controls input {
        padding: 12px;
        font-size: 16px;
        width: 100%;
    }
    
    /* Hide the desktop Scan button inside the menu (we have one on the bottom bar) */
    #sidebar-controls #scan-btn {
        display: none;
    }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.scan-btn {
    background: linear-gradient(45deg, #d9534f, #c9302c); color: white; border: none;
    padding: 8px 15px; border-radius: 4px; font-weight: bold; cursor: pointer;
    text-transform: uppercase; letter-spacing: 1px; font-size: 11px; white-space: nowrap;
}

.scan-btn:hover { background: #c9302c; transform: scale(1.05); }

.stat-label { display: block; font-size: 9px; color: #888; letter-spacing: 1px; margin-bottom: 0px; } 
/* Update these two classes in style.css */

.stat-box { 
    margin-left: auto; 
    background: #1a1a1a; 
    border: 1px solid #333; 
    padding: 5px 10px;        /* Reduced padding slightly */
    border-radius: 4px; 
    text-align: right; 
    min-width: 100px;         /* Allow it to shrink if needed */
    max-width: 140px;         /* Stop it from getting too huge */
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    white-space: nowrap;      /* Keep text on one line */
}

.stat-val { 
    font-size: 14px;          /* Reduced from 16px to fit better */
    color: #d9534f; 
    font-family: 'Consolas', 'Monaco', monospace; /* Monospace font looks cooler for data */
    font-weight: bold; 
    line-height: 1.2; 
}
/* PANELS */
#layer-panel {
    position: fixed; top: 80px; left: 20px; background: rgba(10, 10, 15, 0.95);
    padding: 15px; border-radius: 6px; border: 1px solid #333; color: #eee;
    z-index: 1999; width: 180px; box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
#layer-panel-close { display: none; }
.panel-title { color: #d9534f; font-weight: bold; border-bottom: 1px solid #444; padding-bottom: 5px; margin-bottom: 10px; font-size: 12px; }
.layer-toggles { display: flex; flex-direction: column; gap: 8px; }
.layer-check { display: flex; align-items: center; gap: 8px; color: #ccc; font-size: 12px; cursor: pointer; }
.layer-check input { accent-color: #d9534f; transform: scale(1.2); }
.control-group label { margin-bottom: 2px; font-weight: bold; color: #aaa; font-size: 10px; }

/* --- OFFENDER STATE ACCORDION --- */
.offender-state-accordion { border: none; outline: none; }
.offender-state-accordion summary { list-style: none; }
.offender-state-accordion summary::-webkit-details-marker { display: none; }
.offender-accordion-summary {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; padding: 2px 0; user-select: none;
    color: #FF6D00; font-size: 12px; font-weight: bold; letter-spacing: 1px;
}
.offender-accordion-summary:hover { opacity: 0.85; }
.accordion-caret {
    margin-left: auto; font-size: 9px; color: #FF6D00; transition: transform 0.2s ease;
}
.offender-state-accordion[open] .accordion-caret { transform: rotate(180deg); }
.offender-accordion-body {
    display: flex; flex-direction: column; gap: 5px;
    padding: 6px 0 2px 10px; border-left: 1px solid #FF6D0044;
    margin-left: 4px; margin-top: 4px;
}
.offender-state-row { font-size: 11px; color: #FF9500 !important; padding-left: 0 !important; }

/* --- Offender Tier Sub-Accordions --- */
.offender-sub-state { border: none; outline: none; margin: 3px 0; }
.offender-sub-state > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 3px 4px; color: #FF9500; font-size: 11px; border-radius: 3px; }
.offender-sub-state > summary::-webkit-details-marker { display: none; }
.offender-sub-state > summary:hover { background: rgba(255,109,0,0.12); }
.offender-sub-state[open] > summary .accordion-caret { transform: rotate(180deg); }
.offender-tier-body { padding-left: 10px; padding-top: 2px; }
.offender-tier-row { font-size: 10px !important; color: #999 !important; padding: 2px 4px !important; display: flex !important; align-items: center !important; gap: 5px !important; margin: 1px 0 !important; border-radius: 2px; }
.offender-tier-row:hover { background: rgba(255,109,0,0.08); }

.legend-offender-accordion .offender-accordion-summary { font-size: 11px; }
.legend-offender-accordion .offender-accordion-body { padding-left: 8px; }

/* --- Paywall Modal --- */
.paywall-box { background: #0d0d0d; border: 2px solid #FF6D00; border-radius: 12px; padding: 24px 28px; max-width: 400px; width: 90%; text-align: center; font-family: 'Courier New', monospace; box-shadow: 0 0 40px rgba(255,109,0,0.25); }
.paywall-title { color: #FF6D00; letter-spacing: 3px; font-size: 18px; margin: 4px 0; }
.paywall-subtitle { color: #666; font-size: 10px; letter-spacing: 1px; margin: 4px 0 16px; }
.paywall-tiers { text-align: left; margin: 12px 0 16px; display: flex; flex-direction: column; gap: 6px; }
.paywall-tier-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; font-size: 12px; color: #ccc; }
.paywall-tier-row.free { background: rgba(255,214,0,0.06); border: 1px solid rgba(255,214,0,0.15); }
.paywall-tier-row.locked { background: rgba(255,23,68,0.05); border: 1px solid rgba(255,23,68,0.12); opacity: 0.8; }
.paywall-badge { margin-left: auto; padding: 2px 8px; border-radius: 3px; font-size: 9px; font-weight: bold; letter-spacing: 1px; }
.free-badge { background: rgba(255,214,0,0.15); color: #FFD600; }
.lock-badge { background: rgba(255,23,68,0.15); color: #FF1744; font-size: 11px; padding: 2px 6px; }
.paywall-btn { background: linear-gradient(135deg, #FF6D00, #FF1744); color: #fff; border: none; padding: 12px 28px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 13px; font-weight: bold; letter-spacing: 1px; cursor: pointer; width: 100%; margin-top: 8px; transition: opacity 0.2s; }
.paywall-btn:hover:not(:disabled) { opacity: 0.85; }
.paywall-btn:disabled { opacity: 0.5; cursor: default; }
.paywall-close { background: transparent; border: 1px solid #333; color: #666; padding: 6px 16px; border-radius: 3px; cursor: pointer; margin-top: 14px; font-size: 11px; font-family: 'Courier New', monospace; transition: border-color 0.2s; }
.paywall-close:hover { border-color: #FF6D00; color: #FF6D00; }
#premium-badge { display: none; background: linear-gradient(135deg, #FF6D00, #FF1744); color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 9px; font-weight: bold; letter-spacing: 1px; align-items: center; gap: 4px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 10px 20px; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 12px; z-index: 9999; animation: toastIn 0.3s ease; }
.toast-success { background: #1a3a1a; border: 1px solid #4CAF50; color: #4CAF50; }
.toast-error { background: #3a1a1a; border: 1px solid #FF1744; color: #FF1744; }
@keyframes toastIn { from { opacity: 0; bottom: 10px; } to { opacity: 1; bottom: 24px; } }

/* --- Loading Overlay --- */
#loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 10, 15, 0.97); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.5s ease;
}
.loading-content {
    text-align: center; color: #d9534f;
    font-family: 'Courier New', monospace;
}
.loading-spinner {
    width: 50px; height: 50px; margin: 0 auto 20px;
    border: 3px solid #333; border-top: 3px solid #d9534f;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text {
    font-size: 14px; letter-spacing: 3px; margin-bottom: 15px; color: #d9534f;
}
.loading-bar-track {
    width: 280px; height: 4px; background: #222;
    border-radius: 2px; margin: 0 auto; overflow: hidden;
}
.loading-bar-fill {
    width: 0%; height: 100%; background: linear-gradient(90deg, #d9534f, #ff6b6b);
    border-radius: 2px; transition: width 0.4s ease;
}

#cross-ref-panel {
    position: fixed; top: 60px; right: -450px; width: 450px; height: calc(100% - 60px);
    background: rgba(15, 15, 20, 0.98); border-left: 2px solid #d9534f; z-index: 2000;
    transition: right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); padding: 20px;
    box-sizing: border-box; overflow-y: auto; color: #eee;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
}
#cross-ref-panel.active { right: 0; }
.xref-header { display: flex; justify-content: space-between; border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 15px; color: #d9534f; font-weight: bold; font-size: 16px; }
.xref-close { cursor: pointer; font-size: 20px; color: #888; }
.xref-btn {
    width: 100%; background: #1a1a1a; color: #d9534f; border: 1px solid #d9534f;
    padding: 10px; margin-top: 10px; font-weight: bold; cursor: pointer;
    text-transform: uppercase; letter-spacing: 1px; font-size: 12px; transition: all 0.2s;
}
.xref-btn:hover { background: #d9534f; color: white; }

/* MAP LEGEND */
#map-legend {
    position: fixed; bottom: 20px; right: 20px; background: rgba(10, 10, 15, 0.9);
    padding: 15px; border-radius: 6px; border: 1px solid #333; color: #eee;
    z-index: 1999; width: 200px; font-size: 11px; box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.legend-title { color: #d9534f; font-weight: bold; border-bottom: 1px solid #444; padding-bottom: 5px; margin-bottom: 10px; }
.legend-item { margin-bottom: 12px; }
.gradient-bar { height: 10px; width: 100%; border-radius: 2px; margin-bottom: 3px; }
.legend-scale { display: flex; justify-content: space-between; color: #666; font-size: 9px; }
.grad-telluric { background: linear-gradient(to right, blue, green, yellow, orange, red, magenta); }
.grad-gravity { background: linear-gradient(to right, darkblue, blue, cyan, green, yellow, orange, red); }

/* AUTH MODAL */
#auth-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9);
    z-index: 5000; display: flex; justify-content: center; align-items: center;
}
.auth-box {
    background: #1a1a1a; padding: 40px; border: 2px solid #d9534f; border-radius: 8px;
    text-align: center; color: white; width: 300px; box-shadow: 0 0 20px #d9534f;
}
.auth-btn {
    background: #4285f4; color: white; border: none; padding: 10px 20px;
    font-size: 14px; cursor: pointer; border-radius: 4px; margin-top: 20px; width: 100%;
}

/* POPUPS */
.profile-card { width: 320px; color: #333; }
.profile-header { background: #222; color: #d9534f; padding: 10px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.profile-body { padding: 10px; background: #f9f9f9; }
.type-badge { font-size: 10px; padding: 3px 6px; border-radius: 3px; color: white; white-space: nowrap; }
.type-missing { background: #d9534f; } 
.type-unidentified { background: #5bc0de; }
.type-reported-event { background: #f0ad4e; }
.prop-row { display: flex; border-bottom: 1px solid #eee; margin-bottom: 4px; font-size: 12px; padding: 2px 0; }
.prop-label { width: 70px; min-width: 70px; font-weight: bold; color: #666; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.profile-desc { margin-top: 8px; font-size: 11px; color: #444; max-height: 120px; overflow-y: auto; background: #eee; padding: 8px; border-radius: 3px; line-height: 1.4; }
.profile-img-wrap { text-align: center; margin-bottom: 8px; }
.profile-img { max-width: 100%; max-height: 160px; object-fit: contain; border-radius: 4px; border: 1px solid #ddd; }
.case-link-btn { display: block; text-align: center; margin-top: 8px; padding: 8px; background: #1a1a2e; color: #5bc0de; border: 1px solid #5bc0de; border-radius: 4px; font-size: 11px; font-weight: bold; text-decoration: none; letter-spacing: 1px; }
.case-link-btn:hover { background: #5bc0de; color: #000; }

.locate-btn { background: transparent; border: 1px solid #5bc0de; color: #5bc0de; padding: 2px 6px; font-size: 10px; cursor: pointer; margin-left: auto; }
.locate-btn:hover { background: #5bc0de; color: white; }
.link-btn { background: transparent; border: 1px solid #00ff00; color: #00ff00; padding: 2px 6px; font-size: 10px; cursor: pointer; margin-left: 5px; }
.link-btn:hover { background: #00ff00; color: #000; }

.fbi-card { background: #222; border: 1px solid #444; padding: 10px; margin-bottom: 10px; border-radius: 4px; color: #eee; }
.fbi-title { color: #d9534f; font-weight: bold; font-size: 13px; }
.fbi-detail { font-size: 11px; color: #aaa; }
.fbi-link { font-size: 11px; color: #fff; text-decoration: underline; display: block; margin-top: 5px;}
.fbi-empty { color: #888; font-style: italic; font-size: 12px; text-align: center; margin-top: 10px; }
/* CROSS REF DATA GRID */
.match-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 4px 10px;
    background: #111;
    padding: 8px;
    border-radius: 4px;
    margin: 8px 0;
    font-size: 11px;
}
.match-item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.match-label {
    color: #888;
    font-weight: bold;
    margin-right: 3px;
    text-transform: uppercase;
    font-size: 9px;
}
.match-val {
    color: #eee;
}

/* Floating Button */
#cabinet-btn {
    position: fixed;
    bottom: 80px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #d9534f;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    z-index: 2000;
    transition: transform 0.2s;
}
#cabinet-btn:hover {
    transform: scale(1.1);
    background: #c9302c;
}

/* Slide-out Panel */
#cabinet-panel {
    position: fixed;
    top: 60px;
    right: -400px; /* Hidden off-screen */
    width: 350px;
    height: calc(100vh - 60px);
    background: rgba(15, 15, 20, 0.95);
    border-left: 2px solid #d9534f;
    backdrop-filter: blur(10px);
    z-index: 2100;
    transition: right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: -5px 0 20px rgba(0,0,0,0.7);
}
#cabinet-panel.active {
    right: 0;
}

/* Saved Item Card */
.saved-card {
    background: #222;
    border: 1px solid #444;
    border-left: 3px solid #f0ad4e;
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
}
.saved-header {
    display: flex; 
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 5px;
    color: #aaa;
}
.saved-title {
    color: #eee;
    font-weight: bold;
    font-size: 13px;
}
.delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #d9534f;
    cursor: pointer;
    font-size: 14px;
}
.delete-btn:hover { color: red; }

/* --- ADVANCED MOBILE RESPONSIVENESS --- */
/* (Old mobile block removed — consolidated into single block below) */
@media screen and (max-width: 768px) {

    /* 1. COMPACT NAVBAR */
    #bio-navbar {
        height: auto;
        padding: 10px;
        flex-direction: column;
        gap: 10px;
    }
    .nav-brand {
        text-align: center;
        font-size: 16px;
        margin: 0;
    }
    .nav-group {
        width: 100%;
        padding: 0;
        border: none;
        overflow-x: auto;       /* Horizontal scroll for filters */
        white-space: nowrap;    /* Keep filters in one line */
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
        padding-bottom: 5px;
    }
    /* Hide scrollbar but keep functionality */
    .nav-group::-webkit-scrollbar { display: none; }
    
    .search-input { width: 140px; }
    .scan-btn { font-size: 10px; padding: 6px 10px; }

    /* 2. BOTTOM SHEET CABINET (The Modern App Feel) */
    /* Instead of sliding from right, it slides UP from bottom */
    #cabinet-panel {
        position: fixed !important;
        top: auto !important;
        bottom: -100% !important; /* Hidden below screen */
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        height: 75vh !important;
        border-right: none !important;
        border-left: none !important;
        border-top: 2px solid #d9534f !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 7000 !important;
        box-sizing: border-box !important;
        transition: bottom 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    }
    #cabinet-panel.active {
        bottom: 0 !important; /* Slide up */
    }
    
    /* Move the floating button to a convenient thumb position */
    #cabinet-btn {
        bottom: 80px !important;
        right: 12px !important;
        left: auto !important;
        width: 48px;
        height: 48px;
        font-size: 18px;
        z-index: 5500;
        box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    }

    /* 3. MINIMIZED LAYER CONTROL — Collapsed to a FAB circle */
    #layer-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 140px !important;
        right: 12px !important;
        left: auto !important;
        width: 48px !important;
        height: 48px !important;
        overflow: hidden !important;
        border-radius: 50% !important;
        padding: 0 !important;
        transition: all 0.25s ease !important;
        background: #222 !important;
        border: 2px solid #5bc0de !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5500 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important;
    }
    /* Layers icon when collapsed */
    #layer-panel::before {
        content: '\f5fd' !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        color: #5bc0de !important;
        font-size: 18px !important;
        display: block !important;
    }
    /* Hide ALL inner content when collapsed */
    #layer-panel .panel-title,
    #layer-panel .layer-toggles,
    #layer-panel .control-group {
        display: none !important;
    }

    /* EXPANDED state when tapped */
    #layer-panel.mobile-active {
        width: 220px !important;
        height: auto !important;
        max-height: 70vh !important;
        border-radius: 10px !important;
        padding: 15px !important;
        background: rgba(10, 10, 15, 0.97) !important;
        border: 1px solid #444 !important;
        overflow-y: auto !important;
        bottom: 140px !important;
        right: 12px !important;
    }
    #layer-panel.mobile-active::before { display: none !important; }
    /* Show content */
    #layer-panel.mobile-active .panel-title,
    #layer-panel.mobile-active .layer-toggles,
    #layer-panel.mobile-active .control-group {
        display: block !important;
    }

    /* 4. FULL SCREEN CROSS-REFERENCE */
    #cross-ref-panel {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        right: -100% !important;
        z-index: 4000; /* On top of everything */
        padding-top: 20px;
    }
    #cross-ref-panel.active {
        right: 0 !important;
    }

    /* 5. HIDE LEGEND & ADJUST POPUPS */
    #map-legend { display: none; }
    
    .profile-card {
        width: 280px !important;
        max-width: 80vw;
    }

    /* OVERRIDE the desktop inline styles */
    #sidebar-controls {
        display: none !important; /* Hidden by default on mobile */
        flex-direction: column !important; /* Force vertical stack */
        position: fixed !important;
        bottom: 70px !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
        background: rgba(15, 15, 20, 0.98) !important;
        border-top: 2px solid #d9534f !important;
        padding: 20px !important;
        margin: 0 !important; /* Reset desktop margins */
        overflow-y: auto !important;
        z-index: 9999 !important;
    }

    /* When the class 'mobile-open' is added by JS */
    #sidebar-controls.mobile-open {
        display: flex !important;
        animation: slideUp 0.3s ease-out;
    }

    /* Hide the 'EXIT' button on mobile to save space */
    #logout-btn { display: none !important; }
    
    /* Hide the 'SCAN' button inside the menu (since we have one on the bottom bar) */
    #sidebar-controls #scan-btn { display: none !important; }

    /* TARGET THE LEGEND CONTAINER */
    #map-legend {
        display: block !important; /* Force it to exist */
        position: fixed;
        top: 60px; /* Below Navbar */
        left: 0;
        width: 75%; /* Width of the drawer */
        height: calc(100vh - 60px); /* Full height */
        background: rgba(10, 10, 15, 0.98); /* Dark background */
        border-right: 1px solid #d9534f;
        z-index: 5000; /* High priority */
        padding: 20px;
        overflow-y: auto;
        
        /* Start Hidden (Off-screen Left) */
        transform: translateX(-120%);
        transition: transform 0.3s ease-out;
    }

    /* THE ACTIVE STATE (Slide In) */
    #map-legend.mobile-visible {
        transform: translateX(0) !important;
    }
}

.donate-btn {
    background: #28a745; /* Green */
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 11px;
    margin-left: 10px;
    border: 1px solid #218838;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.donate-btn:hover {
    background: #218838;
    transform: scale(1.05);
}

/* Mobile Fix for Donate Button */
@media screen and (max-width: 768px) {
    .donate-btn {
        padding: 6px 10px;
        font-size: 10px;
    }
}

/* EULA BOX STYLING */
.eula-container {
    background: #111;
    border: 1px solid #333;
    padding: 10px;
    height: 120px;       /* Fixed height */
    overflow-y: auto;    /* Scrollable */
    font-size: 10px;
    color: #aaa;
    text-align: left;
    margin-bottom: 10px;
    border-radius: 4px;
}

.eula-container strong {
    color: #d9534f;
}

/* CUSTOM SCROLLBAR FOR EULA */
.eula-container::-webkit-scrollbar { width: 5px; }
.eula-container::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

/* DISABLED BUTTON STATE */
.auth-btn:disabled {
    background: #333;
    color: #666;
    cursor: not-allowed;
    border: 1px solid #444;
    opacity: 0.7;
}

/* The Mystic Highlight */
.mystic-highlight {
    border: 2px solid #a463f2 !important;
    box-shadow: 0 0 15px rgba(164, 99, 242, 0.5);
    transition: all 0.5s ease;
    background: rgba(44, 14, 55, 0.4);
}

/* Pulse animation for the Deep Dive button */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
}

.acc-header {
    background: #222;
    color: #aaa;
    padding: 6px 8px;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: bold;
    display: flex; 
    justify-content: space-between;
    cursor: pointer;
    border: 1px solid #333;
    transition: all 0.2s;
}

.acc-header:hover {
    background: #333;
    color: #fff;
    border-color: #555;
}

.acc-header i {
    pointer-events: none; /* Prevents icon from blocking click */
}

/* --- MOBILE OVERHAUL --- */

/* Default: Hide Mobile Toolbar on Desktop */
#mobile-toolbar { display: none; }

/* PHONE STYLES (Max Width 768px) */
@media screen and (max-width: 768px) {

    /* 1. HIDE DESKTOP UI ELEMENTS */
    #sidebar-controls {
        display: none; /* We will toggle this differently on mobile */
        position: fixed;
        top: auto;
        bottom: 70px; /* Sit above the toolbar */
        left: 0;
        width: 100%;
        height: 60vh;
        border-right: none;
        border-top: 2px solid #d9534f;
        background: rgba(0,0,0,0.95);
        z-index: 3000;
        overflow-y: auto;
        transform: translateY(150%); /* Start hidden (slid down) */
        transition: transform 0.3s ease-out;
    }
    
    #sidebar-controls.mobile-open {
        transform: translateY(0); /* Slide up */
        display: block;
    }

    .nav-group, .nav-stats { display: none !important; } /* Hide top navbar extras */
    
    /* 2. SHOW MOBILE TOOLBAR */
    #mobile-toolbar {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #111;
        border-top: 1px solid #333;
        z-index: 4000;
        padding: 10px;
        box-sizing: border-box;
        padding-bottom: 20px; /* Safe area for iPhone home bar */
    }

    .mobile-search-container input {
        width: 100%;
        background: #222;
        border: 1px solid #444;
        color: #fff;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 10px;
        font-size: 16px; /* Prevents auto-zoom on iOS */
    }

    .mobile-actions {
        display: flex;
        gap: 10px;
        justify-content: space-between;
    }

    .mobile-actions button {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 4px;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
    }

    #mobile-filter-btn { background: #333; }
    #mobile-scan-btn { background: #d9534f; flex: 2; } /* Scan button is larger */
    #mobile-cabinet-btn { background: #333; }

    /* 3. ADJUST MAP & POPUPS */
    .leaflet-popup-content-wrapper {
        border-radius: 0;
        background: rgba(10,10,10,0.95);
        color: #eee;
    }
    
    /* Make popup buttons easier to tap */
    .xref-btn {
        padding: 12px !important; 
        font-size: 14px !important;
    }

    /* Move Leaflet controls out of the way */
    .leaflet-bottom { bottom: 90px !important; }
}

.marker-skull {
    background: transparent !important;
    border: none !important;
}

.marker-offender {
    background: transparent !important;
    border: none !important;
}

/* --- REGISTERED OFFENDER POPUP --- */
.offender-popup .leaflet-popup-content-wrapper {
    background: rgba(20, 12, 0, 0.97);
    border: 1px solid #FF6D00;
    border-radius: 6px;
    padding: 0;
    color: #eee;
    box-shadow: 0 0 20px rgba(255, 109, 0, 0.4), 0 0 60px rgba(255, 109, 0, 0.1);
}

.offender-popup .leaflet-popup-content {
    margin: 0;
    width: 300px !important;
}

.offender-popup .leaflet-popup-close-button {
    color: #FF6D00 !important;
    font-size: 18px !important;
    z-index: 10;
}

/* AUTH STYLING */
.social-btn { width: 100%; padding: 10px; margin-bottom: 8px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 10px; }
.social-btn.google { background: #fff; color: #333; }
.social-btn.apple { background: #000; color: #fff; border: 1px solid #333; }
.social-btn.facebook { background: #1877F2; color: #fff; }

.auth-input { width: 100%; padding: 10px; margin-bottom: 8px; background: #222; border: 1px solid #444; color: #fff; box-sizing: border-box; }
.action-btn { width: 100%; padding: 10px; background: #d9534f; color: #fff; border: none; font-weight: bold; cursor: pointer; }

.auth-tab { background: none; border: none; color: #666; cursor: pointer; border-bottom: 2px solid transparent; padding-bottom: 5px; }
.auth-tab.active { color: #fff; border-bottom: 2px solid #d9534f; }

/* --- MOBILE UI CLEANUP (The "Floating Title" Look) --- */ 
@media (max-width: 768px) {

    /* 1. Hide the "Cases Found" Stats */
    .nav-stats {
        display: none !important;
    }

    /* 2. Hide the Login/Logout Buttons (Optional - saves space) */
    /* If you want them, delete these lines */
    #login-btn, 
    #logout-btn,
    .nav-group {
        display: none !important;
    }

    /* 3. Optimize the Title Bar */
    #bio-navbar {
        height: 50px; /* Slightly slimmer */
        padding: 0 10px;
        justify-content: space-between; /* Space out items */
        background: none;
        border: none;
        box-shadow: none;
    }

    .nav-brand {
        font-size: 16px; /* Prevent text wrapping */
        min-width: auto; /* Allow it to shrink if needed */
    }

    .stat-box {
        margin-top: -30px;
        background: none;
        border: none;
        color: red;
    }

    .stat-label{
         color: red;
    }

    #filter-panel {
        display: block !important; /* Ensure it exists in DOM */
        position: fixed;
        top: 50px; /* Below the navbar */
        left: 0;
        width: 85%; /* Cover most of screen */
        height: calc(100vh - 120px); /* Fill vertical space */
        background: rgba(10, 10, 15, 0.98);
        border-right: 1px solid #d9534f;
        z-index: 9999;
        padding: 20px;
        overflow-y: auto;
        
        /* Animation Logic */
        transform: translateX(-110%); /* Hidden to the left */
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        box-shadow: 10px 0 30px rgba(0,0,0,0.5);
    }

    /* This class is added by app.js when you click the button */
    #filter-panel.mobile-visible {
        transform: translateX(0); /* Slide IN */
    }

    #filter-panel {
        display: block !important; /* Force Render */
        position: fixed;
        top: 60px; /* Below Navbar */
        left: 0;
        width: 85%; /* Leave a small gap on the right */
        height: calc(100vh - 60px);
        background: rgba(10, 10, 15, 0.98); /* Dark Background */
        border-right: 1px solid #d9534f;
        z-index: 5000 !important; /* Above EVERYTHING */
        padding: 20px;
        overflow-y: auto;
        
        /* Animation: Start Off-Screen Left */
        transform: translateX(-120%);
        transition: transform 0.3s ease-out;
    }

    /* JS adds this class to slide it in */
    #filter-panel.mobile-visible {
        transform: translateX(0) !important;
    }

    /* --- 2. CABINET PANEL (Bottom Sheet on Mobile) --- */
    #cabinet-panel {
        position: fixed !important;
        top: auto !important;
        bottom: -100% !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        height: 75vh !important;
        max-height: none;
        background: rgba(10, 10, 15, 0.98) !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 2px solid #d9534f !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 7000 !important;
        overflow-y: auto;
        padding: 16px;
        box-sizing: border-box;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.8);
        transition: bottom 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    }
    #cabinet-panel.active {
        bottom: 0 !important;
    }

    /* --- 3. UI TWEAKS --- */
    
    /* Move Leaflet controls lower so they don't block the top buttons */
    .leaflet-top {
        top: 70px !important;
    }

    /* Ensure the mobile toolbar stays on top */
    #mobile-toolbar {
        z-index: 6000 !important;
    }
}

/* --- LEAFLET CONTROL FIXES --- */

/* Move Zoom & Layer Controls down so they aren't covered by Navbar */
.leaflet-top {
    top: 60px !important;
}

/* Ensure they are on top of everything else */
.leaflet-control-container {
    z-index: 1500;
}
 
/* --- PREDATOR PROFILE CARDS --- */
.predator-popup .leaflet-popup-content-wrapper {
    background: rgba(15, 5, 20, 0.97);
    border: 1px solid #800080;
    border-radius: 6px;
    padding: 0;
    color: #eee;
    box-shadow: 0 0 20px rgba(128, 0, 128, 0.5), 0 0 60px rgba(128, 0, 128, 0.15);
}

.predator-popup .leaflet-popup-content {
    margin: 0;
    width: 300px !important;
}

.predator-popup .leaflet-popup-close-button {
    color: #d670d6 !important;
    font-size: 18px !important;
    z-index: 10;
}

.pred-container {
    font-family: 'Courier New', monospace;
}

.pred-header {
    background: linear-gradient(135deg, #2a0a2a, #1a0520);
    padding: 12px 14px;
    border-bottom: 2px solid #800080;
    position: relative;
}

.pred-threat-badge {
    display: inline-block;
    background: #800000;
    color: #ff4444;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1.5px;
    padding: 2px 8px;
    border-radius: 2px;
    margin-bottom: 6px;
    border: 1px solid #ff4444;
}

.pred-name {
    display: block;
    font-size: 17px;
    font-weight: bold;
    color: #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pred-location {
    display: block;
    font-size: 11px;
    color: #d670d6;
    margin-top: 4px;
}
.pred-location i {
    margin-right: 4px;
    color: #800080;
}

.pred-nick {
    display: block;
    font-size: 12px;
    color: #d670d6;
    font-style: italic;
    margin-top: 2px;
}

.pred-body {
    padding: 12px;
    font-size: 13px;
    line-height: 1.4;
}

.pred-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.pred-stat-card {
    background: rgba(128, 0, 128, 0.12);
    border: 1px solid rgba(128, 0, 128, 0.3);
    border-radius: 4px;
    padding: 8px;
    text-align: center;
}

.pred-stat-value {
    font-weight: bold;
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
}

.pred-stat-label {
    font-size: 9px;
    color: #aaa;
    letter-spacing: 0.5px;
    margin-top: 3px;
    text-transform: uppercase;
}

.pred-bio-section {
    border-top: 1px solid #333;
    padding-top: 10px;
    margin-top: 4px;
}

.pred-section-title {
    font-size: 10px;
    color: #d670d6;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.pred-section-title i {
    margin-right: 4px;
}

.pred-bio-text {
    font-size: 12px;
    color: #ccc;
    line-height: 1.5;
    font-style: italic;
    max-height: 120px;
    overflow-y: auto;
}

.pred-bio-text::-webkit-scrollbar { width: 4px; }
.pred-bio-text::-webkit-scrollbar-thumb { background: #800080; border-radius: 2px; }

.pred-coords {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #333;
    font-size: 10px;
    color: #666;
    text-align: center;
    letter-spacing: 0.5px;
}
.pred-coords i {
    color: #800080;
    margin-right: 4px;
}

.pred-investigate-btn {
    width: 100%;
    background: linear-gradient(135deg, #2a0020, #400040);
    border: 1px solid #800080;
    color: #d670d6;
    padding: 8px 12px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}
.pred-investigate-btn:hover {
    background: linear-gradient(135deg, #400040, #600060);
    color: #fff;
    border-color: #d670d6;
    box-shadow: 0 0 15px rgba(128, 0, 128, 0.4);
}
.pred-investigate-btn i {
    margin-right: 6px;
}

/* --- PREDATOR INVESTIGATION RESULTS --- */
.pred-investigation-header {
    background: linear-gradient(135deg, #1a0520, #0d0010);
    border: 1px solid #800080;
    border-radius: 4px;
    padding: 14px;
    margin-bottom: 12px;
}
.pred-inv-title {
    font-size: 14px;
    font-weight: bold;
    color: #e0e0e0;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.pred-inv-subtitle {
    font-size: 11px;
    color: #d670d6;
    margin-top: 4px;
}
.pred-inv-radius {
    font-size: 10px;
    color: #888;
    margin-top: 6px;
}
.pred-inv-radius i {
    color: #800080;
    margin-right: 4px;
}
.pred-inv-profile {
    background: rgba(128, 0, 128, 0.08);
    border: 1px solid #333;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 12px;
}
.pred-profile-tag {
    background: #2a0020;
    color: #ff4444;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid #800000;
    letter-spacing: 0.5px;
}
.pred-inv-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.pred-inv-stat-box {
    background: rgba(0,0,0,0.3);
    border: 1px solid #333;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}

/* Legacy compat */
.pred-stat {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    border-bottom: 1px solid #333;
    padding-bottom: 2px;
}

.pred-label { color: #aaa; font-size: 11px; }
.pred-val { color: #fff; font-weight: bold; }

.pred-desc {
    margin-top: 10px;
    font-size: 12px;
    color: #ccc;
    font-style: italic;
}

.pred-mugshot {
    width: 100%;
    height: 120px;
    object-fit: cover;
    object-position: top;
    display: block;
    border-bottom: 1px solid #800080;
    background-color: #000;
}

.header-missing {
    background-color: #d32f2f; /* Red for Missing */
    color: white;
    padding: 5px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
}

.header-unknown {
    background-color: #444; /* Grey for Unidentified */
    color: #ccc;
    padding: 5px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
}

.popup-grid {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.stat-box {
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 9px;
    color: #888;
}

.stat-val {
    font-weight: bold;
    font-size: 12px;
}

.popup-btn {
    display: block;
    width: 100%;
    background: #007bff;
    color: white;
    text-align: center;
    padding: 8px 0;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 5px;
    font-size: 12px;
}

/* --- INTELLIGENCE CABINET (SIDEBAR) --- */
/* (Handled by the block at line ~241 and mobile overrides above) */

/* Update this to match your HTML ID */
#cross-ref-panel {
    position: fixed;
    top: 60px;
    right: -400px; /* Hidden */
    /* ... rest of your styles ... */
    transition: right 0.4s ease;
}

#cross-ref-panel.active {
    right: 0; /* Visible */
}

#cross-ref-panel {
    position: fixed;
    top: 60px;
    right: -400px;
    width: 350px;
    height: calc(100vh - 60px);
    background: #0f0f14; /* Dark Cyberpunk Background */
    border-left: 2px solid #a463f2; /* Purple Accent */
    z-index: 2500;
    transition: right 0.4s ease;
    padding: 15px;
    overflow-y: auto;
    color: #fff;
    box-shadow: -5px 0 20px rgba(0,0,0,0.8);
}

#cross-ref-panel.active {
    right: 0;
}

.xref-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-family: 'Courier New', monospace;
    color: #d6b3ff;
    letter-spacing: 1px;
}

.xref-close {
    cursor: pointer;
    font-size: 24px;
    color: #888;
}

.xref-close:hover { color: #fff; }

/* --- MATCH ACCORDION STYLES --- */
.match-item {
    background: #1a0b2e;
    border-left: 3px solid #a463f2;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}
.match-item:hover { background: #240f3e; }

.match-header {
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.match-body {
    display: none; /* Hidden by default */
    padding: 10px;
    background: #111;
    border-top: 1px solid #333;
}
.match-body.open { display: block; animation: slideDown 0.3s ease; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Match Actions (Buttons) */
.match-actions {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}
.action-btn {
    flex: 1;
    padding: 6px;
    font-size: 10px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    border-radius: 2px;
}
.btn-save { background: #28a745; }
.btn-link { background: #17a2b8; }
.btn-loc { background: #a463f2; }

/* --- AI CHAT INPUT --- */
.ai-chat-box {
    display: flex;
    gap: 5px;
    margin-top: 10px;
    border-top: 1px solid #333;
    padding-top: 10px;
}
.ai-input {
    flex: 1;
    background: #000;
    border: 1px solid #444;
    color: #d6b3ff;
    padding: 8px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}
.ai-input:focus { outline: none; border-color: #a463f2; }
.ai-send {
    background: #a463f2;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0 10px;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}
/* --- CLUSTER GRADIENTS --- */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: rgba(0, 0, 0, 0.6); /* Dark backing */
    border-radius: 50%;
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    display: flex; /* Center the number */
    justify-content: center;
    align-items: center;
}

/* Small = Cyan/Blue */
.marker-cluster-small {
    border: 2px solid #00CCCC;
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.35);
    background: radial-gradient(circle, rgba(0, 170, 255, 0.3) 0%, rgba(0,0,0,0.7) 100%);
}
.marker-cluster-small span { text-shadow: 0 0 3px rgba(36, 175, 239, 0.5); }

/* Medium = Purple */
.marker-cluster-medium {
    border: 2px solid #9055d6;
    box-shadow: 0 0 8px rgba(164, 99, 242, 0.35);
    background: radial-gradient(circle, rgba(164,99,242,0.25) 0%, rgba(0,0,0,0.7) 100%);
}
.marker-cluster-medium span { text-shadow: 0 0 3px rgba(164, 99, 242, 0.5); }

/* Large = Red */
.marker-cluster-large {
    border: 2px solid #e63030;
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.4);
    background: radial-gradient(circle, rgba(255,51,51,0.3) 0%, rgba(0,0,0,0.7) 100%);
}
.marker-cluster-large span { text-shadow: 0 0 3px rgba(255, 51, 51, 0.5); font-size: 14px; }

/* Subtle Pulse Animation for Large Clusters */
@keyframes pulseRed {
    0% { box-shadow: 0 0 8px rgba(255, 51, 51, 0.3); }
    50% { box-shadow: 0 0 14px rgba(255, 51, 51, 0.5); }
    100% { box-shadow: 0 0 8px rgba(255, 51, 51, 0.3); }
}

/* --- OVERRIDE DEFAULT LEAFLET COLORS --- */
/* This forces the inner circle to be transparent so our gradients show through */

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: transparent !important; 
    color: inherit; /* Ensures text uses our white color */
}

/* Ensure the text is centered and white */
.marker-cluster span {
    line-height: 40px; /* Vertically center the number */
    font-family: 'Courier New', monospace; /* More technical look */
}

/* Larger cluster icons on mobile for finger tapping */
@media (max-width: 768px) {
    .marker-cluster-small,
    .marker-cluster-medium,
    .marker-cluster-large {
        width: 52px !important;
        height: 52px !important;
    }
    .marker-cluster span {
        line-height: 52px;
        font-size: 14px;
    }
}

/* --- COMMUNITY PANEL --- */
#community-panel {
    position: fixed; bottom: -600px; right: 20px;
    width: 350px; height: 500px;
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid #00FFFF;
    z-index: 3000;
    transition: bottom 0.3s ease;
    display: flex; flex-direction: column;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}
#community-panel.active { bottom: 0; }

.comm-header {
    background: #003333; padding: 10px;
    color: #00FFFF; font-weight: bold;
    display: flex; justify-content: space-between;
    border-bottom: 1px solid #00FFFF;
}

#chat-messages {
    flex: 1; overflow-y: auto; padding: 10px;
    font-family: 'Courier New', monospace;
}

.chat-input-area {
    padding: 10px; background: #000;
    display: flex; gap: 5px;
}
.chat-input-area input {
    flex: 1; background: #111; border: 1px solid #333;
    color: #fff; padding: 5px;
}

/* Bubbles */
.chat-msg { margin-bottom: 10px; max-width: 90%; }
.chat-msg.me { align-self: flex-end; margin-left: auto; text-align: right; }
.chat-msg.them { align-self: flex-start; }

.msg-sender { font-size: 9px; color: #888; margin-bottom: 2px; }
.msg-text { background: #222; padding: 8px; border-radius: 4px; color: #ddd; font-size: 12px; display: inline-block; }
.me .msg-text { background: #004444; color: #fff; border: 1px solid #00aaaa; }

/* Case Share Card */
.case-share-card {
    background: #111; border: 1px solid #f0ad4e;
    color: #f0ad4e; padding: 10px; margin-bottom: 5px;
    cursor: pointer; font-size: 11px;
    transition: all 0.2s;
}
.case-share-card:hover { background: #222; }

/* --- COMM LINK BUTTON (Spec-Ops Style) --- */
#comm-btn {
    background-color: #000000 !important;   /* Pitch Black */
    color: #00FFFF !important;              /* Electric Cyan/Blue */
    border: 1px solid #00FFFF !important;   /* Thin glowing border */
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.3); /* Subtle idle glow */
    transition: all 0.3s ease;              /* Smooth animation */
    text-transform: uppercase;
    letter-spacing: 1px;
}

#comm-btn:hover {
    background-color: #00FFFF !important;   /* Fills with light */
    color: #000000 !important;              /* Text turns black */
    box-shadow: 0 0 20px #00FFFF;           /* Bright neon flare */
    cursor: pointer;
}

/* ── AI CHAT THREAD ───────────────────────────────────────────────────────── */
#ai-thread {
    margin-top: 12px;
    border-top: 1px solid #2a1040;
    padding-top: 10px;
}

.ai-thread-header {
    font-size: 9px;
    color: #6a3fa0;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

#ai-thread-messages {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    padding-right: 2px;
}

#ai-thread-messages::-webkit-scrollbar { width: 4px; }
#ai-thread-messages::-webkit-scrollbar-track { background: #111; }
#ai-thread-messages::-webkit-scrollbar-thumb { background: #3a1a5e; border-radius: 2px; }

.chat-msg {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.5;
    padding: 8px 10px;
    border-radius: 4px;
    max-width: 95%;
    word-break: break-word;
}

.chat-msg.user {
    background: #0d1a0d;
    border-left: 3px solid #2ecc71;
    align-self: flex-end;
}

.chat-msg.ai {
    background: #1a0b2e;
    border-left: 3px solid #a463f2;
    align-self: flex-start;
}

.chat-msg.chat-typing {
    opacity: 0.7;
}

.chat-label {
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.chat-msg.user .chat-label { color: #2ecc71; }
.chat-msg.ai   .chat-label { color: #a463f2; }

.chat-text {
    color: #ddd;
    white-space: pre-wrap;
}

.chat-msg.user .chat-text { color: #aaffaa; }

.ai-chat-box {
    display: flex;
    gap: 5px;
    margin-top: 6px;
}

.ai-input {
    flex: 1;
    background: #0a0a0a;
    border: 1px solid #3a1a5e;
    color: #d6b3ff;
    padding: 8px 10px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    border-radius: 3px;
    transition: border-color 0.2s;
}

.ai-input:focus {
    outline: none;
    border-color: #a463f2;
    box-shadow: 0 0 6px rgba(164,99,242,0.25);
}

.ai-input:disabled { opacity: 0.4; }

.ai-send {
    background: #2c0e37;
    border: 1px solid #a463f2;
    color: #d6b3ff;
    cursor: pointer;
    padding: 0 12px;
    border-radius: 3px;
    font-size: 13px;
    transition: background 0.2s, box-shadow 0.2s;
}

.ai-send:hover {
    background: #a463f2;
    color: #fff;
    box-shadow: 0 0 8px rgba(164,99,242,0.5);
}

.ai-send:disabled { opacity: 0.4; cursor: not-allowed; }