/* ================================================================
   Liberal Vibe — Desktop Layout Template
   Controla o modo de exibição do site no desktop:
     body.desktop-mode-normal  → layout padrão (3 colunas)
     body.desktop-mode-mobile  → layout mobile centralizado em 520px
   NUNCA interfere com telas reais ≤ 900px (mobile real).
   ================================================================ */

/* ── Modo Mobile no Desktop: ativa apenas em telas maiores que 900px ── */
@media (min-width: 901px) {

    body.desktop-mode-mobile {
        background: #0d0d14; /* fundo escuro neutro ao redor do "celular" */
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow-x: hidden;
    }

    /* Container principal vira coluna estreita tipo smartphone */
    body.desktop-mode-mobile .layout-container {
        display: block !important;
        width: 100%;
        max-width: 520px;
        min-height: 100vh;
        position: relative;
        box-shadow: 0 0 80px rgba(0,0,0,0.6);
        overflow-x: hidden;
    }

    /* Sidebars desaparecem — igual ao mobile real */
    body.desktop-mode-mobile .sidebar-left,
    body.desktop-mode-mobile .sidebar-right {
        display: none !important;
    }

    /* Feed ocupa 100% da largura do container */
    body.desktop-mode-mobile .feed-center {
        width: 100% !important;
        border: none !important;
        padding-bottom: calc(195px + env(safe-area-inset-bottom));
        overflow-x: hidden;
        height: 100vh;
        overflow-y: auto;
    }

    body.desktop-mode-mobile .feed-center:has(.jobs-feed-wrap.is-detail-view),
    body.desktop-mode-mobile .feed-center:has(.class-feed-wrap.is-detail-view) {
        padding-bottom: calc(132px + env(safe-area-inset-bottom));
    }

    /* Feed header estilo mobile */
    body.desktop-mode-mobile .feed-header {
        background-color: #161620 !important;
        border-bottom: none !important;
    }

    /* Desktop tabs somem → mobile tabs aparecem */
    body.desktop-mode-mobile .feed-tabs {
        display: none !important;
    }

    body.desktop-mode-mobile .mobile-new-header {
        display: flex !important;
    }

    /* Barras de tabs e sub-tabs fixas — ancoradas na largura do container */
    body.desktop-mode-mobile .feed-tabs-mobile {
        display: flex !important;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        width: 520px;
        max-width: 100vw;
        bottom: calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom));
        z-index: 199;
        background-color: #000000 !important;
        border-top: none;
        border-bottom: none;
    }

    body.desktop-mode-mobile .feed-subtabs-mobile {
        /* display controlado exclusivamente pelo JS (SexDarkRouter.navigate) */
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        width: 520px;
        max-width: 100vw;
        bottom: calc(var(--mobile-bottom-nav-h) + var(--mobile-feed-tabs-h) + env(safe-area-inset-bottom));
        z-index: 198;
        background-color: #161620;
        border-top: 1px solid rgba(255,255,255,0.05);
        border-bottom: none;
    }

    /* Mobile bottom nav (rodapé) */
    body.desktop-mode-mobile .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        width: 520px;
        max-width: 100vw;
        bottom: 0;
        z-index: 200;
        background-color: #161620 !important;
    }

    /* Tab box padding estilo mobile */
    body.desktop-mode-mobile .feed-tabs-mobile .tab-box {
        height: var(--mobile-feed-tabs-h);
        min-height: var(--mobile-feed-tabs-h);
        padding: 4px 3px 5px;
    }

    /* Mobile sidebar overlay */
    body.desktop-mode-mobile .admin-sidebar-overlay { display: none !important; }
}

/* ── Modo Normal: nenhuma regra aplicada — layout padrão funciona 100% normalmente ──
   (body.desktop-mode-normal não precisa de CSS; a ausência de regras é intencional) */

/* ══════════════════════════════════════════════════════════════════
   DESKTOP-MODE-MOBILE: Confinar Popups, Modais e Overlays
   ──────────────────────────────────────────────────────────────────
   Todos os elementos position:fixed que normalmente cobrem 100vw
   ficam restritos à coluna de 520px, como num aparelho mobile real.
   Técnica: sobrescrever left + right com offsets calculados do centro
   do viewport, sem alterar top/bottom (cobre 100% da altura do container).
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {

    /* ── Variável de suporte: metade da largura do container ── */
    body.desktop-mode-mobile {
        --_hw: 260px; /* half-width = 520px / 2 */
    }

    /* ────────────────────────────────────────────────────
       1. OVERLAYS GENÉRICOS — modal-backdrop e similares
       ──────────────────────────────────────────────────── */
    body.desktop-mode-mobile .modal-backdrop,
    body.desktop-mode-mobile .post-menu-overlay,
    body.desktop-mode-mobile .cs-overlay,
    body.desktop-mode-mobile .buscado-popup-overlay,
    body.desktop-mode-mobile .sd-share-overlay,
    body.desktop-mode-mobile .centralized-popup-overlay,
    body.desktop-mode-mobile .pg-overlay {
        left:      50% !important;
        right:     auto !important;
        transform: translateX(-50%) !important;
        width:     520px !important;
        max-width: 100vw !important;
    }

    /* ────────────────────────────────────────────────────
       2. POPUPS COM ID ESPECÍFICO (inline style / JS)
       ──────────────────────────────────────────────────── */
    body.desktop-mode-mobile #regrasSiteOverlay,
    body.desktop-mode-mobile #sendGiftOverlay,
    body.desktop-mode-mobile #buyGiftOverlay,
    body.desktop-mode-mobile #buyCheckoutOverlay,
    body.desktop-mode-mobile #viewGiftOverlay,
    body.desktop-mode-mobile #checkoutModal,
    body.desktop-mode-mobile #profilePhotoLightbox,
    body.desktop-mode-mobile #csPermModal,
    body.desktop-mode-mobile #csPlanPopup,
    body.desktop-mode-mobile #_giftLightbox {
        left:      50% !important;
        right:     auto !important;
        transform: translateX(-50%) !important;
        width:     520px !important;
        max-width: 100vw !important;
    }

    /* ────────────────────────────────────────────────────
       3. MENU MOBILE (wrapper — mobileMenuPopup)
       O wrapper NÃO recebe transform: isso quebraria o
       position:fixed dos filhos (#mobileMenuOverlay e
       #mobileMenuSheet). Usar position:fixed;inset:0
       remove o elemento do fluxo flex do body sem
       alterar o comportamento dos filhos fixed.
       ──────────────────────────────────────────────────── */
    body.desktop-mode-mobile #mobileMenuPopup {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
        z-index: 9997 !important;
        transform: none !important; /* NÃO aplicar transform aqui */
    }
    /* Restaurar pointer-events nos filhos do menu */
    body.desktop-mode-mobile #mobileMenuPopup > * {
        pointer-events: auto !important;
    }

    /* ────────────────────────────────────────────────────
       4. REALTIME OVERLAYS (presentes recebidos)
       ──────────────────────────────────────────────────── */
    body.desktop-mode-mobile [id^="realtimeGift"],
    body.desktop-mode-mobile [id^="receivedGift"] {
        left:      50% !important;
        right:     auto !important;
        transform: translateX(-50%) !important;
        width:     520px !important;
        max-width: 100vw !important;
    }

    /* ────────────────────────────────────────────────────
       5. TOAST — já é centralizado, apenas limitar largura
       ──────────────────────────────────────────────────── */
    body.desktop-mode-mobile .toast-container {
        left:      50vw !important;
        transform: translate(-50%, -50%) !important;
        max-width: 480px !important;
        width:     calc(100% - 40px) !important;
    }

    /* ────────────────────────────────────────────────────
       6. LIGHTBOXES DE FOTO/VÍDEO — permanecem tela cheia
       (experiência imersiva — não confinamos)
       ──────────────────────────────────────────────────── */
    /* #photoLightbox, #videoLightbox → sem restrição intencional */

    /* ────────────────────────────────────────────────────
       7. BOTÕES FIXOS DENTRO DE OVERLAYS (ex: fechar lightbox)
       ──────────────────────────────────────────────────── */
    body.desktop-mode-mobile #regrasSiteOverlay [style*="position:fixed"],
    body.desktop-mode-mobile #sendGiftOverlay   [style*="position:fixed"],
    body.desktop-mode-mobile #viewGiftOverlay   [style*="position:fixed"],
    body.desktop-mode-mobile #buyGiftOverlay    [style*="position:fixed"],
    body.desktop-mode-mobile #buyCheckoutOverlay [style*="position:fixed"] {
        left:   calc(50vw - 260px) !important;
        right:  auto !important;
    }

    /* ────────────────────────────────────────────────────
       8. PROFILE MORE OVERLAY (backdrop transparente)
       ──────────────────────────────────────────────────── */
    body.desktop-mode-mobile .profile-more-overlay {
        left:      50% !important;
        right:     auto !important;
        transform: translateX(-50%) !important;
        width:     520px !important;
    }

    /* ────────────────────────────────────────────────────
       9. PLANOS PREMIUM — popup inline tela cheia
       ──────────────────────────────────────────────────── */
    body.desktop-mode-mobile #csPlanPopup {
        left:      50% !important;
        right:     auto !important;
        transform: translateX(-50%) !important;
        width:     520px !important;
        max-width: 100vw !important;
    }

    /* ────────────────────────────────────────────────────
       10. AD VIEWER — confinado ao container desktop-mobile
       ──────────────────────────────────────────────────── */
    body.desktop-mode-mobile #adViewerOverlay {
        position: fixed !important;
        top:       0 !important;
        left:      50% !important;
        right:     auto !important;
        transform: translateX(-50%) !important;
        width:     520px !important;
        max-width: 100vw !important;
        height:    100dvh !important;
        z-index:   999999 !important;
    }

    /* AdCommentsSheet: confinado ao mesmo container */
    body.desktop-mode-mobile #adCsOverlay {
        left:      50% !important;
        right:     auto !important;
        transform: translateX(-50%) !important;
        width:     520px !important;
        max-width: 100vw !important;
        z-index:   1000001 !important;
    }

    /* Bloqueia scroll do body enquanto o viewer está aberto */
    body.desktop-mode-mobile.ad-viewer-open {
        overflow: hidden !important;
    }
}

/* ══════════════════════════════════════════════════════
   LIGHT MODE no modo Desktop Mobile
   Usa body.light-mode.desktop-mode-mobile para ter
   especificidade maior que body.desktop-mode-mobile e
   vencer as cores hardcoded (#161620) com !important.
   ══════════════════════════════════════════════════════ */
@media (min-width: 901px) {

    /* Fundo ao redor do "celular" */
    body.light-mode.desktop-mode-mobile {
        background: #e0e7ef !important;
    }

    /* Container: sombra mais suave no light */
    body.light-mode.desktop-mode-mobile .layout-container {
        box-shadow: 0 0 60px rgba(0,0,0,0.15) !important;
    }

    /* Feed header mobile */
    body.light-mode.desktop-mode-mobile .feed-header {
        background-color: var(--bg-main) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    /* Mobile new header (logo + wallet) */
    body.light-mode.desktop-mode-mobile .mobile-new-header {
        background-color: var(--bg-main) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    /* Abas principais (Classificados, Jobs, Lives, Vídeos, Feeds) */
    body.light-mode.desktop-mode-mobile .feed-tabs-mobile {
        background-color: var(--bg-main) !important;
        border-top: 1px solid var(--border-color) !important;
    }

    /* Sub-filtros (Seguidores, Seguindo, Online, Novos) */
    body.light-mode.desktop-mode-mobile .feed-subtabs-mobile {
        background-color: var(--bg-main) !important;
        border-top: 1px solid var(--border-color) !important;
    }

    /* Rodapé de navegação (Perfil, Notif, Postar, Procurar, Menu) */
    body.light-mode.desktop-mode-mobile .mobile-bottom-nav {
        background-color: var(--bg-main) !important;
        border-top: 1px solid var(--border-color) !important;
    }

    /* Itens do rodapé */
    body.light-mode.desktop-mode-mobile .mobile-bottom-nav .nav-item {
        color: var(--text-secondary) !important;
    }
    body.light-mode.desktop-mode-mobile .mobile-bottom-nav .nav-item.active {
        color: var(--btn-pink) !important;
    }

    /* Tab boxes */
    body.light-mode.desktop-mode-mobile .tab-box {
        background: rgba(0,0,0,0.04) !important;
        color: var(--text-secondary) !important;
        border-color: var(--border-color) !important;
    }
    body.light-mode.desktop-mode-mobile .tab-box .tab-label {
        color: var(--text-primary) !important;
    }
    body.light-mode.desktop-mode-mobile .tab-box.active {
        background: var(--btn-pink) !important;
        color: #fff !important;
    }

    /* Sub-tab pills */
    body.light-mode.desktop-mode-mobile .sub-tab-pill {
        background-color: #e8ecef !important;
        color: #536471 !important;
        border-color: #d1d9dd !important;
    }
    body.light-mode.desktop-mode-mobile .sub-tab-pill.active {
        background-color: #e8f5e9 !important;
        color: #2e7d32 !important;
        border-color: #66bb6a !important;
    }
    body.light-mode.desktop-mode-mobile .sub-tab-pill::before {
        background-color: #b0bec5 !important;
    }
    body.light-mode.desktop-mode-mobile .sub-tab-pill.active::before {
        background-color: #66bb6a !important;
        box-shadow: none !important;
    }

    /* Feed central */
    body.light-mode.desktop-mode-mobile .feed-center {
        background: var(--bg-feed) !important;
    }

    /* Post cards */
    body.light-mode.desktop-mode-mobile .post-card {
        background: #ffffff !important;
        border-color: rgba(0,0,0,0.10) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
    }
}