/**
 * assets/css/components/post_mobile.css
 *
 * DROPX PRIME SYSTEM — MOBIL POSZT UI 1.0 / PHASE 1
 *
 * Közös mobil poszt-rendering réteg:
 * - Hírfolyam
 * - Profil fal
 * - Csoportok
 *
 * A geometria és a reszponzív viselkedés itt közös, ezért új témákhoz
 * nem kell külön mobil poszt-layoutot készíteni. A témák csak a saját
 * felületük színeit / változóit adják.
 */

.dx-mobile-post-summary {
    display: none;
}

.dx-mobile-post-action-buttons {
    display: contents;
}

@media (max-width: 700px) {
    /* =====================================================================
       1. KÁRTYAMENTES, TELJES MOBIL SZÉLESSÉG
       ===================================================================== */
    .post-card.dx-mobile-post {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        padding: 14px 12px 16px;
        box-sizing: border-box;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: visible;
        background: transparent;
    }

    .post-card.dx-mobile-post + .post-card.dx-mobile-post {
        border-top: 1px solid var(--dx-mobile-post-divider, rgba(255,255,255,.075));
    }

    .post-card.dx-mobile-post .post-header,
    .post-card.dx-mobile-post .post-body-container,
    .post-card.dx-mobile-post .post-edit-container,
    .post-card.dx-mobile-post .post-comments-section,
    .post-card.dx-mobile-post .best-comment-preview {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* =====================================================================
       2. SZÖVEG — NINCS HORIZONTÁLIS TÚLFUTÁS
       ===================================================================== */
    .post-card.dx-mobile-post .post-body,
    .post-card.dx-mobile-post .post-text-content,
    .post-card.dx-mobile-post .blog-system-content,
    .post-card.dx-mobile-post .blog-system-excerpt {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* =====================================================================
       3. KÉP / VIDEÓ — A MOBIL APP SZÉLESSÉGÉHEZ IGAZODIK
       ===================================================================== */
    .post-card.dx-mobile-post .post-media-content {
        width: calc(100% + 24px);
        max-width: calc(100% + 24px);
        margin: 12px -12px 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: hidden;
        box-sizing: border-box;
        min-width: 0;
    }

    .post-card.dx-mobile-post .post-media-content > *,
    .post-card.dx-mobile-post .post-media-content .post-tile-gallery,
    .post-card.dx-mobile-post .post-media-content .post-tile-grid,
    .post-card.dx-mobile-post .post-media-content .parsed-media-block,
    .post-card.dx-mobile-post .post-media-content .parsed-youtube-facade,
    .post-card.dx-mobile-post .post-media-content .parsed-youtube-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .post-card.dx-mobile-post .post-media-content img,
    .post-card.dx-mobile-post .post-media-content video,
    .post-card.dx-mobile-post .post-media-content iframe,
    .post-card.dx-mobile-post .post-media-content canvas {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .post-card.dx-mobile-post .post-media-content .post-tile-grid {
        overflow: hidden;
    }

    .post-card.dx-mobile-post .post-media-content .tile-item {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .post-card.dx-mobile-post .post-media-content .parsed-post-image {
        max-width: 100%;
        height: 100%;
    }

    .post-card.dx-mobile-post .post-media-content .parsed-youtube-facade,
    .post-card.dx-mobile-post .post-media-content .parsed-youtube-wrapper {
        aspect-ratio: 16 / 9;
        height: auto;
        margin-bottom: 0;
    }

    .post-card.dx-mobile-post .post-media-content .shared-parent-media-content {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* A rögzített magasságú 2–5 képes rácsok ne tudják kitolni a viewportot. */
    .post-card.dx-mobile-post .post-tile-grid.tiles-2 {
        height: min(76vw, 360px);
    }

    .post-card.dx-mobile-post .post-tile-grid.tiles-3,
    .post-card.dx-mobile-post .post-tile-grid.tiles-4 {
        height: min(88vw, 420px);
    }

    .post-card.dx-mobile-post .post-tile-grid.tiles-5,
    .post-card.dx-mobile-post .post-tile-grid.tiles-5-plus,
    .post-card.dx-mobile-post .post-tile-grid.tiles-5 .tile-col-left,
    .post-card.dx-mobile-post .post-tile-grid.tiles-5 .tile-col-right,
    .post-card.dx-mobile-post .post-tile-grid.tiles-5-plus .tile-col-left,
    .post-card.dx-mobile-post .post-tile-grid.tiles-5-plus .tile-col-right {
        height: min(92vw, 440px);
        max-height: min(92vw, 440px);
    }

    /* =====================================================================
       4. RÉGI REAKCIÓ-TÁBLA ELTŰNIK MOBILON
       ===================================================================== */
    .post-card.dx-mobile-post > .post-reactions-bar {
        display: none;
    }

    /* =====================================================================
       5. ÚJ NATÍV APP-SZERŰ INTERAKCIÓS SÁV
       ===================================================================== */
    .post-card.dx-mobile-post .post-actions-footer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 10px;
        padding: 7px 0 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        border-top: 1px solid var(--dx-mobile-post-divider, rgba(255,255,255,.075));
        background: transparent;
        border-radius: 0;
    }

    .post-card.dx-mobile-post .dx-mobile-post-action-buttons {
        display: flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
        gap: 2px;
    }

    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .react-btn-wrapper {
        display: inline-flex;
        min-width: 0;
    }

    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .post-action-btn {
        width: auto;
        min-width: 38px;
        min-height: 36px;
        padding: 6px 9px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--dx-mobile-post-action, var(--text-muted, #9ba4ad));
        justify-content: flex-start;
        gap: 0;
        font-size: .9rem;
        line-height: 1;
        white-space: nowrap;
    }

    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .post-action-btn:hover,
    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .post-action-btn.active {
        color: var(--color-gold, #e59e00);
        background: var(--dx-mobile-post-action-active, rgba(229,158,0,.08));
    }

    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .post-action-btn > svg,
    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .post-action-btn .react-btn-icon {
        flex: 0 0 auto;
    }

    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .react-btn-text,
    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .comment-toggle-btn > .comment-toggle-label,
    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .share-btn > span,
    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .disabled-action-btn > span {
        display: none;
    }

    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .comment-toggle-btn .dx-mobile-comment-count {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        margin-left: 2px;
        color: currentColor;
        font-size: .72rem;
        line-height: 1;
        font-weight: 700;
    }

    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .react-btn-icon svg,
    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .comment-toggle-btn svg,
    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .share-btn svg,
    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .disabled-action-btn svg {
        width: 19px;
        height: 19px;
    }

    .post-card.dx-mobile-post .dx-mobile-post-summary {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 48%;
        margin-left: auto;
        gap: 7px;
        color: var(--dx-mobile-post-stat, var(--text-muted, #9ba4ad));
        font-size: .72rem;
        line-height: 1;
    }

    .post-card.dx-mobile-post .dx-mobile-reactions-preview {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        max-width: 100%;
        gap: 0;
        cursor: pointer;
        white-space: nowrap;
    }

    .post-card.dx-mobile-post .dx-mobile-reactions-preview .reaction-preview-emoji {
        position: relative;
        z-index: 1;
        margin-left: -3px;
        font-size: .86rem;
        line-height: 1;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    }

    .post-card.dx-mobile-post .dx-mobile-reactions-preview .reaction-preview-emoji:first-child {
        margin-left: 0;
    }

    .post-card.dx-mobile-post .dx-mobile-reactions-preview .reactions-total-count {
        margin-left: 4px;
        color: inherit;
        font-size: .7rem;
        font-weight: 700;
    }

    .post-card.dx-mobile-post .dx-mobile-share-summary {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        flex: 0 0 auto;
        cursor: pointer;
        color: inherit;
        font-size: .7rem;
    }

    /* =====================================================================
       6. KOMMENT BLOKK — KÁRTYA HELYETT FOLYAM
       ===================================================================== */
    .post-card.dx-mobile-post .post-comments-section {
        margin: 10px 0 0;
        padding: 10px 0 0;
        border-top: 1px solid var(--dx-mobile-post-divider, rgba(255,255,255,.075));
        background: transparent;
        border-radius: 0;
    }

    .post-card.dx-mobile-post .comment-bubble-box {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* =====================================================================
       7. MEGOSZTOTT POSZT — UGYANEZ A MOBIL MÉDIA-SZABÁLY
       ===================================================================== */
    .post-card.dx-mobile-post .shared-parent-post-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 12px 0 0;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 10px;
        overflow: hidden;
    }

    .post-card.dx-mobile-post .shared-parent-post-card .post-media-content {
        width: calc(100% + 20px);
        max-width: calc(100% + 20px);
        margin-left: -10px;
        margin-right: -10px;
    }

    /* =====================================================================
       8. 420px ALATT IS STABIL MARAD
       ===================================================================== */
    .post-card.dx-mobile-post .post-header {
        margin-bottom: 10px;
    }

    .post-card.dx-mobile-post .post-avatar {
        width: 40px;
        height: 40px;
    }

    .post-card.dx-mobile-post .post-author-info {
        min-width: 0;
    }

    .post-card.dx-mobile-post .post-author-text {
        min-width: 0;
    }
}

@media (max-width: 380px) {
    .post-card.dx-mobile-post {
        padding-left: 10px;
        padding-right: 10px;
    }

    .post-card.dx-mobile-post .post-media-content {
        width: calc(100% + 20px);
        max-width: calc(100% + 20px);
        margin-left: -10px;
    }

    .post-card.dx-mobile-post .dx-mobile-post-action-buttons .post-action-btn {
        min-width: 34px;
        padding-left: 7px;
        padding-right: 7px;
    }

    .post-card.dx-mobile-post .dx-mobile-post-summary {
        gap: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-card.dx-mobile-post * {
        scroll-behavior: auto;
    }
}

/* ============================================================================
   HÍRFOLYAM KOMPATIBILITÁSI ZÁR
   A korábbi home.mobile.css #home-feed specifikus szabályai után ez a réteg
   kapja meg az egységes Post UI elsőbbségét. A többi nézetet nem módosítja.
   ============================================================================ */
@media (max-width: 700px) {
    #home-feed #profile-posts-stream > .post-card.dx-mobile-post {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 14px 12px 16px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: transparent;
    }

    #home-feed .post-card.dx-mobile-post {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 14px 12px 16px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: transparent;
    }

    #home-feed .post-card.dx-mobile-post .post-media-content {
        width: calc(100% + 24px);
        max-width: calc(100% + 24px);
        margin: 12px -12px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: hidden;
    }

    #home-feed .post-card.dx-mobile-post .post-actions-footer {
        display: flex;
        width: 100%;
        max-width: 100%;
        margin-top: 10px;
        padding: 7px 0 0;
        gap: 8px;
        border-top: 1px solid var(--dx-mobile-post-divider, rgba(255,255,255,.075));
        background: transparent;
        border-radius: 0;
        align-items: center;
        justify-content: space-between;
    }

    #home-feed .post-card.dx-mobile-post .dx-mobile-post-action-buttons {
        display: flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
        gap: 2px;
    }

    #home-feed .post-card.dx-mobile-post .dx-mobile-post-action-buttons .post-action-btn {
        width: auto;
        min-width: 38px;
        min-height: 36px;
        padding: 6px 9px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        justify-content: flex-start;
        gap: 0;
    }

    #home-feed .post-card.dx-mobile-post .dx-mobile-post-action-buttons .react-btn-text,
    #home-feed .post-card.dx-mobile-post .dx-mobile-post-action-buttons .comment-toggle-btn > span:not(.dx-mobile-comment-count),
    #home-feed .post-card.dx-mobile-post .dx-mobile-post-action-buttons .share-btn > span,
    #home-feed .post-card.dx-mobile-post .dx-mobile-post-action-buttons .disabled-action-btn > span {
        display: none;
    }

    #home-feed .post-card.dx-mobile-post .dx-mobile-post-summary {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 1 auto;
        max-width: 48%;
        min-width: 0;
        margin-left: auto;
    }

    #home-feed .post-card.dx-mobile-post > .post-reactions-bar {
        display: none;
    }
}


/* ============================================================================
   PHASE 2 PREP — PROFIL / CSOPORT KERETEK + MOBIL KOMMENT UI
   A közös Post UI réteg marad theme-neutral; a Light/Dark csak színezést ad.
   ============================================================================ */
@media (max-width: 700px) {
    /* Profil fal: a külső shell 8px-es belső paddingját a posztfolyam
       teljes viewport-szélességűre nyitása felülírja. */
    .profile-wall-list,
    .dx-profile-posts-stream,
    .profile-posts-stream {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        min-width: 0;
        box-sizing: border-box;
        gap: 0;
    }

    .profile-wall-list > .post-card.dx-mobile-post,
    .profile-posts-stream > .post-card.dx-mobile-post {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Csoport fal: a központi tartalomoszlop paddingjától független edge-to-edge stream. */
    .group-content-col .group-posts-stream {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        min-width: 0;
        box-sizing: border-box;
        gap: 0;
    }

    .group-content-col .group-posts-stream > .post-card.dx-mobile-post {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* A három műveleti ikon balra marad, a reakciók és megosztás jobbra. */
    .post-card.dx-mobile-post .dx-mobile-post-action-buttons {
        flex: 0 0 auto;
    }

    .post-card.dx-mobile-post .dx-mobile-post-summary {
        flex: 1 1 auto;
        max-width: none;
        justify-content: flex-end;
    }

    .post-card.dx-mobile-post .dx-mobile-comment-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        margin-left: -2px;
        border-radius: 9px;
        color: var(--dx-mobile-post-stat, var(--text-muted, #9ba4ad));
        font-size: .68rem;
        font-weight: 700;
        line-height: 1;
    }

    /* A jelenlegi desktopos komment-formázó eszköztár mobilon nem része az app UI-nak. */
    .post-card.dx-mobile-post .comment-mini-formatting-toolbar,
    .post-card.dx-mobile-post .comment-emoji-gif-trigger {
        display: none;
    }

    /* Hivatalosabb, nagyobb mobil kommentmező. */
    .post-card.dx-mobile-post .comment-publisher-wrapper,
    .post-card.dx-mobile-post .reply-input-box-wrapper {
        width: 100%;
        box-sizing: border-box;
        margin-top: 14px;
    }

    .post-card.dx-mobile-post .comment-publisher-row,
    .post-card.dx-mobile-post .reply-publisher-row {
        width: 100%;
        min-width: 0;
        align-items: flex-start;
    }

    .post-card.dx-mobile-post .comment-input-box-container {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        padding: 0;
        border: 1px solid var(--dx-mobile-comment-border, rgba(214,165,43,.36));
        border-radius: 12px;
        background: var(--dx-mobile-comment-bg, rgba(10,13,17,.94));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 24px rgba(0,0,0,.16);
        overflow: hidden;
    }

    .post-card.dx-mobile-post .root-comment-input,
    .post-card.dx-mobile-post .reply-comment-input {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 88px;
        box-sizing: border-box;
        resize: vertical;
        border: 0;
        border-radius: 0;
        padding: 13px 14px;
        background: transparent;
        color: var(--dx-mobile-comment-text, var(--text-light, #edf1f4));
        font-size: 1rem;
        line-height: 1.5;
        font-family: var(--theme-font-body, 'Chakra Petch', sans-serif);
        outline: none;
    }

    .post-card.dx-mobile-post .root-comment-input::placeholder,
    .post-card.dx-mobile-post .reply-comment-input::placeholder {
        color: var(--dx-mobile-comment-placeholder, var(--text-muted, #7f8993));
        opacity: 1;
    }

    .post-card.dx-mobile-post .comment-tools-bottom-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 44px;
        padding: 5px 7px;
        border-top: 1px solid var(--dx-mobile-comment-divider, rgba(255,255,255,.065));
    }

    .post-card.dx-mobile-post .comment-tool-actions {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .post-card.dx-mobile-post .comment-tool-btn {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--dx-mobile-comment-icon, var(--text-muted, #9ba4ad));
    }

    .post-card.dx-mobile-post .comment-tool-btn:hover {
        color: var(--color-gold, #d6a52b);
        background: rgba(214,165,43,.07);
    }

    .post-card.dx-mobile-post .submit-root-comment-btn,
    .post-card.dx-mobile-post .submit-reply-comment-btn {
        width: 42px;
        height: 36px;
        min-width: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 9px;
    }

    /* Komment tartalom: ne maradjon desktopos, túl szűk „buborék” érzet. */
    .post-card.dx-mobile-post .comment-bubble-box {
        width: 100%;
        padding: 11px 12px;
        border-radius: 10px;
    }

    .post-card.dx-mobile-post .comment-content {
        font-size: .95rem;
        line-height: 1.52;
    }
}

/* Light téma: ugyanaz a geometria, csak saját felületi színek. */
@media (max-width: 700px) {
    body.light-mode .post-card.dx-mobile-post .comment-input-box-container {
        --dx-mobile-comment-bg: rgba(239,228,211,.92);
        --dx-mobile-comment-border: rgba(130,91,36,.34);
        --dx-mobile-comment-text: #34291f;
        --dx-mobile-comment-placeholder: #756657;
        --dx-mobile-comment-divider: rgba(88,67,47,.14);
        --dx-mobile-comment-icon: #665748;
    }
}


/* DROPX APP — VÉGLEGES KÖZPONTI POSZT GEOMETRIA
 * Minden mobil nézet ugyanazt a post-card szélességlogikát használja.
 * A szélesség mindig a tényleges szülőkonténerből származik; nincs 100vw-s
 * margin-offset, amely eltérő készülékeken eltolhatja a kártyát.
 */
@media (max-width: 700px) {
    .post-card.dx-mobile-post {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-inline: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    .post-card.dx-mobile-post .post-media-content {
        width: calc(100% + 24px);
        max-width: none;
        margin-left: -12px;
        margin-right: -12px;
        box-sizing: border-box;
    }

    .post-card.dx-mobile-post .post-actions-footer {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    .post-card.dx-mobile-post .post-hover-reaction-picker {
        left: 0;
        right: auto;
        max-width: min(calc(100vw - 20px), 360px);
        overflow-x: auto;
        overflow-y: hidden;
        box-sizing: border-box;
    }

    .post-card.dx-mobile-post .react-btn-wrapper:hover .post-hover-reaction-picker,
    .post-card.dx-mobile-post .post-hover-reaction-picker:hover {
        transform: translateY(0) scale(1);
    }

    .post-card.dx-mobile-post .react-btn-wrapper:hover .post-hover-reaction-picker.dx-reaction-picker-closing,
    .post-card.dx-mobile-post .post-hover-reaction-picker.dx-reaction-picker-closing,
    .post-card.dx-mobile-post .post-hover-reaction-picker.dx-reaction-picker-closing:hover {
        opacity: 0;
        pointer-events: none;
        transform: translateY(6px) scale(.95);
    }
}


/* VÉGLEGES KÖZPONTI MOBIL POSZT GEOMETRIA
 * A Post Component mindig a tényleges szülőkonténer szélességét használja.
 * Nincs 100vw-alapú balra tolás, így a Profil, Hírfolyam és Csoport ugyanazt
 * a geometriát kapja bármilyen készülékszélességen.
 */
@media (max-width: 700px) {
    .post-card.dx-mobile-post {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    .post-card.dx-mobile-post .post-media-content {
        width: calc(100% + 24px);
        max-width: none;
        margin-left: -12px;
        margin-right: -12px;
        box-sizing: border-box;
    }
}


/* ============================================================================
   PROFILE APP EDGE-TO-EDGE + MOBILE REACTION PICKER
   A profil nem kap külön poszt-geometriát: a szülőkonténer teljes szélessége
   a mérvadó. A reakciópicker érintés után kényszerített zárt állapotot kap,
   így a mobil hover-szimuláció sem tudja visszanyitni.
   ============================================================================ */
@media (max-width: 700px) {
    #profile.profile-page.content-section {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 0 76px;
        box-sizing: border-box;
    }

    #profile.profile-page .profile-adatlap-wrapper,
    #profile.profile-page .profile-main-data,
    #profile.profile-page .profile-tab-content,
    #profile.profile-page .profile-wall-list {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    #profile.profile-page .profile-adatlap-wrapper {
        gap: 0;
    }

    #profile.profile-page .profile-wall-list > .post-card.dx-mobile-post {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .post-card.dx-mobile-post .post-hover-reaction-picker.dx-reaction-picker-closing,
    .post-card.dx-mobile-post .react-btn-wrapper[data-dx-reaction-picker-closed="1"] .post-hover-reaction-picker {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transform: translateY(6px) scale(.95);
    }

    .post-card.dx-mobile-post .post-hover-reaction-picker {
        left: 0;
        right: auto;
        max-width: calc(100% - 8px);
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
    }
}


/* ============================================================================
   MOBIL REAKCIÓPICKER — KÖZPONTOS, VIEWPORT-BIZTOS
   ============================================================================ */
@media (max-width: 700px) {
    .post-card.dx-mobile-post .post-hover-reaction-picker {
        left: 50%;
        right: auto;
        width: max-content;
        max-width: calc(100vw - 16px);
        transform: translate(-50%, 6px) scale(.95);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
    }

    .post-card.dx-mobile-post .react-btn-wrapper:hover .post-hover-reaction-picker,
    .post-card.dx-mobile-post .post-hover-reaction-picker:hover,
    .post-card.dx-mobile-post .react-btn-wrapper[data-dx-reaction-picker-open="1"] .post-hover-reaction-picker {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translate(-50%, 0) scale(1);
    }

    .post-card.dx-mobile-post .react-btn-wrapper[data-dx-reaction-picker-closed="1"] .post-hover-reaction-picker,
    .post-card.dx-mobile-post .post-hover-reaction-picker.dx-reaction-picker-closing,
    .post-card.dx-mobile-post .post-hover-reaction-picker.dx-reaction-picker-closing:hover {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transform: translate(-50%, 6px) scale(.95);
    }
}


/* ============================================================================
   DROPX MOBILE APP — UNIFIED POST GEOMETRY / PROFILE WALL
   A közös Post Component mindig a tényleges szülő szélességét használja.
   A profil Fal nem kap külön kártya/tábla felületet: ugyanaz a folyam, mint a
   Hírfolyam. Nincs viewport-alapú pozicionálás.
   ============================================================================ */
@media (max-width: 700px) {
    #profile.content-section,
    #profile .profile-adatlap-wrapper,
    #profile .profile-main-data,
    #profile .wall-tab,
    #profile .profile-wall-list {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    #profile.content-section {
        padding: 0 0 76px;
        overflow-x: clip;
    }

    #profile .profile-adatlap-wrapper {
        display: block;
        margin-top: 0;
    }

    #profile .profile-main-data {
        padding: 0;
    }

    /* A profil Fal maga nem kártya. A többi profilfül maradhat saját felület. */
    #profile .wall-tab {
        display: block;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    #profile .wall-tab .profile-feed-heading {
        margin-left: 12px;
        margin-right: 12px;
    }

    #profile .profile-wall-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow-x: clip;
    }

    #profile .profile-wall-list > .post-card.dx-mobile-post {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    /* A közös komponens saját 12px belső ritmusát használja; a média edge-to-edge. */
    #profile .profile-wall-list > .post-card.dx-mobile-post .post-media-content {
        width: calc(100% + 24px);
        max-width: none;
        margin-left: -12px;
        margin-right: -12px;
    }
}

/* Mobil reakciópicker: JS által nyitott állapot, nem :hover-függő. */
@media (max-width: 700px) {
    .post-card.dx-mobile-post .react-btn-wrapper.dx-reaction-picker-open .post-hover-reaction-picker,
    .post-card.dx-mobile-post .react-btn-wrapper[data-dx-reaction-picker-open="1"] .post-hover-reaction-picker {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0) scale(1);
    }

    .post-card.dx-mobile-post .post-hover-reaction-picker.dx-reaction-picker-closing,
    .post-card.dx-mobile-post .react-btn-wrapper[data-dx-reaction-picker-closed="1"] .post-hover-reaction-picker {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, 6px) scale(.95);
    }
}


/* ============================================================================
   REAKCIÓ PICKER — KÖZÖS, WRAPPER-ALAPÚ POZICIONÁLÁS
   Nem viewport-pozicionált és nem 50%-os középre húzás: a JS a tényleges
   reakciógombhoz viszonyított lokális koordinátát adja meg.
   ============================================================================ */
@media (max-width: 700px) {
    .post-card.dx-mobile-post .post-hover-reaction-picker {
        left: var(--dx-reaction-picker-left, 0px);
        top: var(--dx-reaction-picker-top, auto);
        right: auto;
        bottom: auto;
        width: max-content;
        max-width: calc(100vw - 16px);
        transform: translateY(6px) scale(.95);
        overflow-x: auto;
        overflow-y: hidden;
        box-sizing: border-box;
    }

    .post-card.dx-mobile-post .react-btn-wrapper.dx-reaction-picker-open .post-hover-reaction-picker {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .post-card.dx-mobile-post .react-btn-wrapper[data-dx-reaction-picker-closed="1"] .post-hover-reaction-picker,
    .post-card.dx-mobile-post .react-btn-wrapper[data-dx-reaction-picker-closed="1"] .post-hover-reaction-picker:hover,
    .post-card.dx-mobile-post .post-hover-reaction-picker.dx-reaction-picker-closing {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(6px) scale(.95);
    }
}

@media (hover: none) and (pointer: coarse) {
    .post-card.dx-mobile-post .react-btn-wrapper:hover .post-hover-reaction-picker,
    .post-card.dx-mobile-post .post-hover-reaction-picker:hover {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(6px) scale(.95);
    }

    .post-card.dx-mobile-post .react-btn-wrapper.dx-reaction-picker-open .post-hover-reaction-picker {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .post-card.dx-mobile-post .react-btn-wrapper[data-dx-reaction-picker-closed="1"] .post-hover-reaction-picker,
    .post-card.dx-mobile-post .react-btn-wrapper[data-dx-reaction-picker-closed="1"] .post-hover-reaction-picker:hover,
    .post-card.dx-mobile-post .post-hover-reaction-picker.dx-reaction-picker-closing {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(6px) scale(.95);
    }
}


/* ETAP 13 — mobil social sáv: bal oldali műveletek, jobb oldali statisztikák */
@media (max-width:700px) {
  .post-card.dx-mobile-post .post-actions-footer {
    display:flex; flex-direction:row; align-items:center; justify-content:space-between;
    width:100%; min-height:42px; padding:4px 2px; gap:8px;
  }
  .post-card.dx-mobile-post .post-actions-footer .dx-post-actions-left,
  .post-card.dx-mobile-post .post-actions-footer .dx-post-actions-right {
    display:flex; flex:0 0 auto; align-items:center; justify-content:flex-start; gap:8px; height:34px;
  }
  .post-card.dx-mobile-post .post-actions-footer .dx-post-actions-right { margin-left:auto; gap:6px; }
  .post-card.dx-mobile-post .post-actions-footer .post-action-btn,
  .post-card.dx-mobile-post .post-actions-footer .dx-post-reactions-summary,
  .post-card.dx-mobile-post .post-actions-footer .dx-post-share-summary {
    display:inline-flex; align-items:center; justify-content:center; height:34px; min-height:34px; min-width:30px; padding:0 5px; line-height:1;
  }
  .post-card.dx-mobile-post .post-actions-footer .react-btn-icon,
  .post-card.dx-mobile-post .post-actions-footer svg {
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; vertical-align:middle;
  }
  .post-card.dx-mobile-post .post-actions-footer .dx-post-action-number,
  .post-card.dx-mobile-post .post-actions-footer .reactions-total-count,
  .post-card.dx-mobile-post .post-actions-footer .dx-post-share-summary span {
    display:inline-flex; align-items:center; line-height:1; vertical-align:middle;
  }
}