/*
 * LUMINA Mobile Premium Layer
 * Stabilny, dotykowy interfejs dla Androida bez zmiany układu desktopowego.
 */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 768px) {
    /* SMCC & ICC: Pancerne kółko awatara czatu i ikona profilu bez tekstu na mobile */
    .messenger-dual-pane-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .messenger-chat-column,
    #dmChatRoomView,
    #dmActiveConversationBox {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
    }
    .chat-header-bar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 8px !important;
        min-height: 56px !important;
    }
    .lumina-smart-bar-container,
    .messenger-quick-emojis-bar {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    .chat-header-profile-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .chat-header-profile-btn .chat-header-profile-text {
        display: none !important;
    }
    #activeChatAvatar {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        display: block !important;
    }

    :root {
        --lumina-mobile-target: 44px;
        --lumina-mobile-gutter: max(12px, env(safe-area-inset-left));
    }

    html {
        overflow-x: hidden;
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-height: 100%;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    }

    body.shorts-body,
    body:has(#shortsShell),
    body:has(.shorts-app-shell) {
        padding-bottom: 0 !important;
    }

    .lumina-nav {
        min-height: 60px;
        padding-left: var(--lumina-mobile-gutter) !important;
        padding-right: var(--lumina-mobile-gutter) !important;
    }

    .lumina-nav .nav-links,
    .lumina-nav .nav-actions,
    .lumina-nav .lumina-nav-actions {
        gap: 4px !important;
    }

    .user-nav-avatar {
        width: var(--lumina-mobile-target) !important;
        height: var(--lumina-mobile-target) !important;
        min-width: var(--lumina-mobile-target) !important;
        flex: 0 0 var(--lumina-mobile-target) !important;
    }

    .nav-logo-text,
    .nav-circle-btn,
    .nav-radio-btn,
    .nav-menu-btn,
    .btn-nav-support,
    .btn-nav-more,
    .notif-bell-btn,
    .filter-chip,
    .btn-devotional-read,
    .header-btn,
    .chip-btn,
    .sort-tab-btn,
    .post-action-btn,
    .comment-submit-btn,
    .btn-carousel-follow-pulse,
    .card-badge-chat,
    .card-badge-envelope,
    .card-heart,
    .card-sound-btn,
    .mobile-auth-btn {
        min-height: var(--lumina-mobile-target) !important;
    }

    /* Własne profile miały wariant Menu bez klasy tekstu; na telefonie
       pozostaje sama ikona, bez kolizji z sąsiednimi przyciskami. */
    .profile-navbar .nav-menu-btn > span,
    .profile-navbar .nav-menu-btn .nav-btn-chevron {
        display: none !important;
    }
    .profile-navbar .nav-menu-btn {
        width: var(--lumina-mobile-target) !important;
        min-width: var(--lumina-mobile-target) !important;
        height: var(--lumina-mobile-target) !important;
        padding: 0 !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    .nav-circle-btn,
    .nav-menu-btn,
    .btn-nav-support,
    .btn-nav-more,
    .notif-bell-btn,
    .header-btn,
    .comment-submit-btn,
    .card-badge-chat,
    .card-heart,
    .card-sound-btn {
        width: var(--lumina-mobile-target) !important;
        height: var(--lumina-mobile-target) !important;
        min-width: var(--lumina-mobile-target) !important;
        max-width: var(--lumina-mobile-target) !important;
        min-height: var(--lumina-mobile-target) !important;
        max-height: var(--lumina-mobile-target) !important;
    }

    .post-action-btn,
    .btn-daypart-radio,
    .reflection-smart-link,
    .post-author-box,
    .btn-campaign-cta,
    .official-sponsor-banner-card a,
    .mini-radio-play-btn,
    .mini-radio-popup,
    .mini-radio-close,
    .lumina-legal-close-btn,
    .lumina-share-link-input,
    .lumina-share-copy-btn,
    .lumina-push-accept,
    .lumina-push-dismiss {
        min-width: var(--lumina-mobile-target) !important;
        min-height: var(--lumina-mobile-target) !important;
        box-sizing: border-box !important;
    }

    .footer-links-row a,
    .footer-social a,
    button[title="Zamknij"],
    button[aria-label="Zamknij"] {
        min-width: var(--lumina-mobile-target) !important;
        min-height: var(--lumina-mobile-target) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .nav-radio-btn {
        flex: 0 0 var(--lumina-mobile-target) !important;
    }

    /* ══════════════════════════════════════════════════════════════════════════
     * MOBILE ICON-ONLY PROFILE DOCTRINE (< 768px)
     * Profil na urządzeniach mobilnych ogranicza przyciski akcji i zakładki WYŁĄCZNIE do ikon
     * ══════════════════════════════════════════════════════════════════════════ */
    .head-actions,
    .head-actions-row,
    .profile-head-card .head-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
        padding: 0 !important;
        overflow-x: visible !important;
        scrollbar-width: none !important;
    }
    .head-actions::-webkit-scrollbar { display: none !important; }

    .head-actions > button,
    .head-actions > a,
    .head-actions-row > button,
    .head-actions-row > a,
    .profile-head-card .head-actions > button,
    .profile-head-card .head-actions > a {
        width: var(--lumina-mobile-target) !important;
        height: var(--lumina-mobile-target) !important;
        min-width: var(--lumina-mobile-target) !important;
        min-height: var(--lumina-mobile-target) !important;
        max-width: var(--lumina-mobile-target) !important;
        max-height: var(--lumina-mobile-target) !important;
        border-radius: 50% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 var(--lumina-mobile-target) !important;
        font-size: 0 !important;
        color: transparent !important;
        box-sizing: border-box !important;
        position: relative !important;
        text-decoration: none !important;
    }

    .head-actions button i,
    .head-actions a i,
    .head-actions-row button i,
    .head-actions-row a i,
    .profile-head-card .head-actions button i,
    .profile-head-card .head-actions a i {
        font-size: 1.15rem !important;
        color: #ffffff !important;
        line-height: 1 !important;
        margin: 0 !important;
        display: inline-block !important;
    }

    .head-actions .btn-text,
    .head-actions span:not(.profile-msg-badge),
    .head-actions-row .btn-text,
    .head-actions-row span:not(.profile-msg-badge),
    .profile-head-card .head-actions .btn-text,
    .profile-head-card .head-actions span:not(.profile-msg-badge),
    #followBtnText,
    #followCountBadge,
    #heartBtnText,
    #heartCountBadge,
    .btn-divider {
        display: none !important;
    }

    .head-actions .profile-msg-badge {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        display: flex !important;
        min-width: 16px !important;
        height: 16px !important;
        border-radius: 8px !important;
        font-size: 0.65rem !important;
        color: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Zakładki profilu wyłącznie z ikonami */
    .profile-tabs-nav,
    .profile-nav-tabs,
    .profile-tabs-wrap {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 4px !important;
        margin-top: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .profile-tabs-nav::-webkit-scrollbar,
    .profile-nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .profile-tabs-nav .tab-btn,
    .profile-nav-tabs .tab-btn,
    .profile-tab-btn,
    .profile-nav-tabs button,
    .profile-tabs-nav button {
        width: var(--lumina-mobile-target) !important;
        height: var(--lumina-mobile-target) !important;
        min-width: var(--lumina-mobile-target) !important;
        min-height: var(--lumina-mobile-target) !important;
        max-width: var(--lumina-mobile-target) !important;
        max-height: var(--lumina-mobile-target) !important;
        border-radius: 14px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 var(--lumina-mobile-target) !important;
        font-size: 0 !important;
        color: transparent !important;
        box-sizing: border-box !important;
    }

    .profile-tabs-nav .tab-btn i,
    .profile-nav-tabs .tab-btn i,
    .profile-tab-btn i,
    .profile-nav-tabs button i,
    .profile-tabs-nav button i {
        font-size: 1.2rem !important;
        color: #94a3b8 !important;
        margin: 0 !important;
        display: inline-block !important;
        line-height: 1 !important;
    }

    .profile-tabs-nav .tab-btn.active i,
    .profile-nav-tabs .tab-btn.active i,
    .profile-tab-btn.active i,
    .profile-nav-tabs button.active i,
    .profile-tabs-nav button.active i {
        color: #facc15 !important;
    }

    .profile-tabs-nav .tab-text,
    .profile-nav-tabs .tab-text,
    .profile-tab-btn .tab-text,
    .tab-btn .tab-text,
    .profile-nav-tabs span,
    .profile-tabs-nav span {
        display: none !important;
    }

    .profile-navbar {
        min-height: 56px !important;
        height: 56px !important;
        padding: 0 var(--lumina-mobile-gutter) !important;
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }
    .profile-navbar .nav-brand-title {
        font-size: 1.15rem !important;
        letter-spacing: 1px !important;
    }
    .profile-navbar .nav-logo-badge {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    .profile-navbar .nav-center-links {
        gap: 8px !important;
    }
    .profile-navbar .nav-center-links .nav-link-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
    }
    .profile-navbar .nav-center-links .nav-link-btn i {
        font-size: 1rem !important;
        margin: 0 !important;
    }

    .btn-nav-back span,
    .profile-nav-back span {
        display: none !important;
    }
    .btn-nav-back,
    .profile-nav-back {
        width: var(--lumina-mobile-target) !important;
        height: var(--lumina-mobile-target) !important;
        min-width: var(--lumina-mobile-target) !important;
        min-height: var(--lumina-mobile-target) !important;
        max-width: var(--lumina-mobile-target) !important;
        max-height: var(--lumina-mobile-target) !important;
        border-radius: 50% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 var(--lumina-mobile-target) !important;
        font-size: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    .btn-nav-back i,
    .profile-nav-back i {
        font-size: 1.15rem !important;
        margin: 0 auto !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* PANCERNA ZASADA: na mobile przyciski akcji = TYLKO IKONY, zero tekstu */
    .post-action-btn .btn-text,
    .post-act-btn .btn-text,
    .post-action-btn span:not(.count):not(.amen-count):not(.sound-toggle-label),
    .btn-lumina-replace-action span,
    .action-icon-only .btn-text {
        display: none !important;
    }

    .chip-btn,
    .sort-tab-btn,
    .filter-chip {
        font-size: 0.8rem !important;
    }

    .feed-sort-row {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 10px !important;
    }

    /* ══════════ POST ACTIONS BAR & BUTTONS UNIFICATION (MOBILE) ══════════ */
    .post-actions-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .post-actions-bar > div {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .post-action-btn {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        min-width: 38px !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 12px !important;
        gap: 6px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #cbd5e1 !important;
        text-decoration: none !important;
        touch-action: manipulation !important;
    }

    /* Icon-only action buttons: perfect 38x38 circle */
    .post-action-btn.action-icon-only {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        flex: 0 0 38px !important;
    }

    /* Icon centering and normalization */
    .post-action-btn i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        font-size: 0.92rem !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    /* Counter typography & baseline alignment */
    .post-action-btn .count,
    .post-action-btn .amen-count {
        display: inline-block !important;
        line-height: 1 !important;
        font-size: 0.82rem !important;
        font-variant-numeric: tabular-nums !important;
        font-weight: 700 !important;
        vertical-align: middle !important;
    }

    .post-action-btn:hover,
    .post-action-btn:active {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #fff !important;
    }

    .post-action-btn.action-story {
        color: #facc15 !important;
    }

    .post-action-btn.liked {
        background: rgba(244, 63, 94, 0.18) !important;
        border-color: rgba(244, 63, 94, 0.45) !important;
        color: #fb7185 !important;
    }

    .post-action-btn.amen-active {
        background: rgba(245, 158, 11, 0.18) !important;
        border-color: rgba(245, 158, 11, 0.45) !important;
        color: #fbbf24 !important;
    }

    .media-container-1x1,
    .campaign-media-container,
    .broadcast-preview-wrap,
    .video-container {
        /* Stabilny render GPU bez migania warstw */
    }

    .media-img-1x1,
    .campaign-img-full,
    .broadcast-preview-img,
    .video-container > img,
    .video-container > video,
    .video-container > iframe {
        display: block;
        width: 100%;
    }

    /* Profile carousel on homepage has custom JS touch drag handlers that dispatch vertical scrolling. */
    #profilesCarousel,
    #missionCarousel {
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        touch-action: pan-y pinch-zoom;
    }

    /* Horizontal swipe tracks must allow native horizontal pan-x alongside vertical page scrolling */
    .stories-scroll-track,
    .filter-chips-row,
    .smart-sort-bar {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        overscroll-behavior-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
    }

    /* ══════════ SMCC & MOBILE-FIRST TABLICA COMPACT SPACING ══════════ */
    .board-container {
        padding: 6px 4px 80px 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    .feed-center-column {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .board-top-switcher-dock {
        margin: 4px auto 8px auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .lumina-stories-bar {
        margin: 0 0 8px 0 !important;
        padding: 8px 6px !important;
        border-radius: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: rgba(11, 24, 56, 0.75) !important;
    }

    .stories-scroll-track {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 2px 2px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        scrollbar-width: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .stories-scroll-track .fb-story-card {
        flex-shrink: 0 !important;
        touch-action: pan-x pan-y !important;
        -webkit-user-drag: none !important;
        user-drag: none !important;
    }
    .stories-scroll-track img,
    .stories-scroll-track a {
        -webkit-user-drag: none !important;
        user-drag: none !important;
    }

    .smart-sort-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 6px 8px !important;
        margin: 0 0 8px 0 !important;
        border-radius: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .smart-sort-bar::-webkit-scrollbar {
        display: none !important;
    }

    .smart-sort-bar > * {
        flex-shrink: 0 !important;
    }

    .sort-tabs-group {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overscroll-behavior: auto !important;
        overscroll-behavior-x: auto !important;
        touch-action: pan-x pan-y !important;
    }

    .sort-tab-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        touch-action: pan-x pan-y !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-user-drag: none !important;
        user-drag: none !important;
    }

    .feed-stream {
        gap: 10px !important;
    }

    .post-card-1x1,
    .post-card {
        border-radius: 14px !important;
        margin-bottom: 0 !important;
    }

    .feed-stream,
    .post-card-1x1,
    .board-header {
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Enlarged/raised cards were clipped by the carousel's scroll port. */
    #profilesCarousel .profile-card,
    #profilesCarousel .profile-card.featured,
    #profilesCarousel .profile-card.active-center-card,
    #missionCarousel .profile-card,
    #missionCarousel .profile-card.featured,
    #missionCarousel .profile-card.active-center-card {
        transform: none !important;
    }

    /* Android browser controls and gesture navigation must not cover metadata. */
    .shorts-scroll-container .slide-info-box {
        bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    }

    .feed-load-more-wrap {
        display: grid;
        place-items: center;
        padding: 8px 0 24px;
    }

    .feed-load-more-btn {
        min-height: 48px;
        width: min(100%, 360px);
        padding: 12px 18px;
        border: 1px solid rgba(212, 169, 74, 0.5);
        border-radius: 14px;
        background: linear-gradient(135deg, #D4A94A, #E8C97A);
        color: #0A0A0F;
        font: 800 0.9rem/1.2 var(--cc-font-sans, "Manrope", sans-serif);
        box-shadow: 0 8px 24px rgba(212, 169, 74, 0.22);
        cursor: pointer;
    }

    .feed-load-more-btn:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 3px;
    }

    #lumina-cookie-banner,
    #luminaCookieConsentBanner {
        left: max(10px, env(safe-area-inset-left)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        padding: 12px !important;
        gap: 8px !important;
    }

    #lumina-cookie-banner button,
    #lumina-cookie-banner a,
    #luminaCookieConsentBanner button,
    #luminaCookieConsentBanner a {
        min-height: var(--lumina-mobile-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            scroll-behavior: auto !important;
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

@media (max-width: 380px) {
    /* Ustawienia pozostają dostępne w szufladzie nawigacji. */
    .lumina-nav .btn-nav-more {
        display: none !important;
    }

    /* Zachowaj wszystkie akcje Rolek bez obcinania sterowania dźwiękiem. */
    .shorts-header .header-title-box {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .fb-story-card {
        width: 104px !important;
        min-width: 104px !important;
        height: 168px !important;
        border-radius: 12px !important;
    }
    .fb-story-create-top {
        height: 114px !important;
    }
    .fb-story-create-btn {
        width: 32px !important;
        height: 32px !important;
        bottom: -16px !important;
        font-size: 0.82rem !important;
    }
    .fb-story-create-bottom {
        height: 54px !important;
        padding-bottom: 6px !important;
    }
    .fb-story-create-label {
        font-size: 0.72rem !important;
    }
}