/* ===== MASTER HEADER ===== */

/* Header bar */
.r-header { background: #000 !important; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #212527; }
.r-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 57px; position: relative; }

/* Left section */
.r-header-left { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; z-index: 2; }

/* Logo */
.r-logo { text-decoration: none; }
.r-logo img { height: 32px; }

/* Hamburger button */
.r-mobile-menu-btn { display: none; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #d7dadc; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; align-items: center; justify-content: center; padding: 0; }

/* PWA back button */
.r-pwa-back-btn { display: none; background: none; border: none; color: #d7dadc; padding: 4px; margin: 0; cursor: pointer; line-height: 0; }
.r-pwa-back-btn:hover { color: #fff; }
@media (display-mode: standalone) {
    .r-pwa-back-btn { display: flex; align-items: center; justify-content: center; }
}

/* Desktop search */
.r-header-center { flex: 1; max-width: 500px; margin: 0 20px; }

/* Mobile search bar */
.r-header-mobile-search { display: none !important; pointer-events: none; }
.r-header-mobile-search span { color: #818384; font-size: 14px; }

/* Right section */
.r-header-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; z-index: 2; }
.r-header-icon { color: #818384; text-decoration: none; font-size: 18px; padding: 4px; }
.r-header-icon:hover { color: #d7dadc; }
.r-header-icon.r-icon-alert { color: #CC1A5D !important; }
.r-header-avatar { display: flex; }
.r-header-avatar img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* Mobile search overlay */
.mh-search-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: 99999; padding: 12px; overflow-y: auto; }
.mh-search-overlay.active { display: block; }
.mh-search-bar { display: flex; align-items: center; gap: 10px; }
.mh-search-back { background: none; border: none; color: #d7dadc; font-size: 20px; padding: 4px; cursor: pointer; }
.mh-search-input-wrap { flex: 1; position: relative; }
.mh-search-input-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #818384; pointer-events: none; }
.mh-search-input { width: 100%; background: #1a1a1b; border: 1px solid #2a2c2d; color: #d7dadc; border-radius: 20px; padding: 10px 16px 10px 38px; font-size: 15px; box-sizing: border-box; outline: none; }

/* Mobile search results */
.ms-results { margin-top: 12px; }
.ms-section { color: #5a5955; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 12px 0 6px; }
.ms-item { display: flex; align-items: center; gap: 10px; padding: 10px 4px; text-decoration: none !important; border-bottom: 1px solid #1a1a1b; color: #d7dadc !important; }
.ms-item:link, .ms-item:visited, .ms-item:hover, .ms-item:active { text-decoration: none !important; color: #d7dadc !important; }
.ms-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ms-item-icon { width: 40px; height: 40px; border-radius: 50%; background: #1a1a1b; display: flex; align-items: center; justify-content: center; color: #818384; }
.ms-name { color: #d7dadc; font-size: 14px; font-weight: 600; }
.ms-meta { color: #818384; font-size: 12px; }
.ms-none { color: #818384; font-size: 13px; text-align: center; padding: 20px; }
.ms-item:hover { background: none; }
.ms-item:active { background: rgba(255,255,255,0.05); }

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .r-header-inner { padding: 0 13px !important; }
    .r-header-left { gap: 4px; }
    .r-header-center { display: none !important; }
    .r-mobile-menu-btn { display: flex !important; align-items: center; justify-content: center; }
    .r-logo { display: flex !important; }
    .r-header-mobile-search {
        display: none !important;
    }
    .r-header-right .r-header-icon { display: none !important; }
    .r-header-right .chat-header-btn { display: none !important; }
    .r-header-right .r-header-avatar { display: flex !important; }
    /* Pages that want the search bar add class .mobile-search-page to body */
    .mobile-search-page .r-header-mobile-search {
        display: flex !important; align-items: center; gap: 8px;
        background: #1a1a1b; border: 1px solid #2a2c2d; border-radius: 20px;
        padding: 5px 15px 5px 5px; cursor: pointer;
        position: absolute; left: 50%; transform: translateX(-50%);
        width: 60%; z-index: 3; pointer-events: auto !important;
    }
    .mobile-search-page .r-logo { display: none !important; }
}