/* DROPX PRIME SYSTEM — PROFILE RESPONSIVE / APP UI */

@media (max-width: 900px) {
    #profile.profile-page { padding: 10px 10px 78px; }
    .dx-profile-cover { height: 280px; }
    .dx-profile-hero-bottom { padding: 0 18px 18px; }
    .dx-profile-stats { margin: 0 18px; }
    .dx-profile-actions-row { padding: 13px 18px 17px; }
}

@media (max-width: 700px) {
    /* Mobil profil fülsáv: csak az SVG ikonok maradjanak láthatók.
       A feliratok a DOM-ban megmaradnak, így a navigáció szemantikája és JS-kezelése változatlan. */
    .profile-tabs-nav {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
        gap: 4px;
        padding: 4px;
        overflow: hidden;
    }

    .profile-tab-trigger {
        min-width: 0;
        width: 100%;
        min-height: 50px;
        padding: 5px 2px 4px;
        font-size: .58rem;
        line-height: 1.1;
        letter-spacing: 0;
        gap: 3px;
        justify-content: center;
        white-space: normal;
        text-align: center;
        flex-direction: column;
    }

    .profile-tab-trigger svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        stroke-width: 2.25;
    }

    #profile.profile-page { padding: 0 0 76px; max-width: none; }
    .profile-content-shell { margin-top: 8px; padding: 0; box-sizing: border-box; }

    .dx-profile-hero {
        border-radius: 0 0 22px 22px;
        border-left: 0;
        border-right: 0;
        border-top: 0;
    }

    .dx-profile-cover {
        height: 235px;
        border-radius: 0 0 20px 20px;
    }

    .dx-profile-top-actions { top: 10px; left: 10px; right: 10px; }
    .dx-profile-icon-action { width: 39px; height: 39px; border-radius: 12px; }

    .dx-profile-hero-bottom {
        align-items: flex-start;
        gap: 13px;
        padding: 0 14px 14px;
        margin-top: -48px;
    }

    .dx-profile-avatar-wrap {
        width: 96px;
        height: 96px;
        padding: 4px;
        box-shadow: 0 0 0 5px rgba(5,7,9,.76), 0 12px 28px rgba(0,0,0,.35);
    }

    .dx-profile-avatar-plus { width: 31px; height: 31px; border-width: 3px; right: -2px; bottom: 0; }
    .dx-profile-avatar-plus svg { width: 15px; height: 15px; }
    .dx-profile-online-dot { width: 11px; height: 11px; right: 7px; bottom: 8px; border-width: 2px; }

    .dx-profile-identity {
        padding-top: 0;
        margin-left: 0;
        padding-left: 0;
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        align-self: flex-start;
    }
    .dx-profile-name-line h1 { font-size: 1.45rem; }
    .dx-profile-handle { font-size: .68rem; margin-top: 4px; }
    .dx-profile-role { font-size: .61rem; margin-top: 5px; }
    .dx-profile-bio { font-size: .74rem; margin-top: 7px; line-height: 1.4; }

    .dx-profile-mini-stats {
        gap: 7px;
        margin-top: 8px;
    }

    .dx-profile-mini-stats span {
        font-size: .56rem;
    }

    .dx-profile-mini-stats svg {
        width: 11px;
        height: 11px;
    }

    .dx-profile-actions-row { padding: 12px 14px 15px; }
    .dx-profile-primary-action,
    .dx-profile-secondary-action { flex: 1; min-height: 38px; padding: 0 9px; font-size: .69rem; }

    .profile-tabs-nav {
        margin-bottom: 8px;
        border-radius: 13px;
    }

    .profile-tab-trigger {
        min-height: 38px;
        border-radius: 9px;
    }

    .dx-profile-feed-heading { margin: 7px 2px 9px; }
    .dx-profile-feed-heading h2 { font-size: 1rem; }
    .dx-profile-feed-count { font-size: .6rem; }
    .dx-profile-posts-stream { gap: 8px; }

    .profile-story-engine { display: block; }
}

@media (max-width: 420px) {
    .profile-tabs-nav {
        gap: 3px;
        padding: 3px;
    }

    .profile-tab-trigger {
        min-height: 46px;
        padding: 4px 1px 3px;
        font-size: .53rem;
        gap: 2px;
    }

    .profile-tab-trigger svg {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }

    .dx-profile-cover { height: 205px; }
    .dx-profile-hero-bottom { margin-top: -42px; }
    .dx-profile-avatar-wrap { width: 84px; height: 84px; }
    .dx-profile-identity { padding-top: 0; margin-left: 0; padding-left: 0; }
    .dx-profile-name-line h1 { font-size: 1.25rem; }
    .dx-profile-actions-row { gap: 6px; }
    .dx-profile-primary-action,
    .dx-profile-secondary-action { font-size: .62rem; }
}
@media (max-width:1200px){
  .profile-adatlap-wrapper{display:block}
  .profile-quick-rail,.profile-sidebar-display{display:none}
  .profile-main-data{width:100%;max-width:none}
}

/* DROPX APP PROFILE — MOBILE POST CONTAINMENT
 * A profilfal minden belső elemének a mobil viewporton belül kell maradnia.
 * Desktop elrendezést ez a blokk nem érint.
 */
@media (max-width: 700px) {
    #profile .profile-main-data,
    #profile .profile-tab-content,
    #profile .profile-wall-list,
    #profile .post-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    #profile .profile-wall-list {
        overflow-x: hidden;
    }

    #profile .post-card {
        overflow: hidden;
    }

    #profile .post-card .post-header,
    #profile .post-card .post-author-info,
    #profile .post-card .post-body-container,
    #profile .post-card .post-body,
    #profile .post-card .post-media-content,
    #profile .post-card .post-tile-gallery,
    #profile .post-card .post-tile-grid,
    #profile .post-card .post-reactions-bar,
    #profile .post-card .post-actions-footer {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    #profile .post-card .post-tile-grid {
        overflow: hidden;
    }

    #profile .post-card .parsed-post-image,
    #profile .post-card .post-media-content img,
    #profile .post-card .post-media-content video,
    #profile .post-card iframe {
        display: block;
        max-width: 100%;
        box-sizing: border-box;
    }
}


/* DROPX APP — KÖZPONTI POSZT FAL SZÉLESSÉG
 * A profilfal a saját tartalomkonténerének 100%-át használja.
 * Nincs viewport-szélességű (100vw) pozicionálás, így minden készülékméreten
 * a tényleges szülőkonténerhez igazodik.
 */
@media (max-width: 700px) {
    #profile .profile-content-shell,
    #profile .profile-main-data,
    #profile .profile-tab-content,
    #profile .profile-wall-list {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-inline: 0;
        padding-inline: 0;
        box-sizing: border-box;
    }

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

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


/* MOBIL APP — PROFIL FAL KÖZPONTI KONTÉNER
 * A posztfolyam nem lép ki a szülőből, hanem annak teljes szélességét használja.
 */
@media (max-width: 700px) {
    #profile .profile-content-shell,
    #profile .profile-main-data,
    #profile .profile-tab-content,
    #profile .profile-wall-list {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

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


/* DROPX APP — PROFIL ROOT CONTÉNER
 * A profil ugyanazt a mobil viewport-szélességű tartalmi teret használja, mint
 * a Hírfolyam. Nincs fix px-es szélesség, nincs 100vw és nincs margin-offset.
 */
@media (max-width: 700px) {
    #profile.content-section {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 0 76px;
        box-sizing: border-box;
    }

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

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


/* ============================================================================
   PROFILE WALL — SAME MOBILE SURFACE AS THE FEED
   A Light Theme régi globális szabálya .profile-tab-content-ra kártyát festett.
   A Fal azonban a Post Component folyama, ezért csak ezt az egy fület oldjuk fel.
   ============================================================================ */
@media (max-width: 700px) {
    #profile.content-section {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 0 76px;
        box-sizing: border-box;
    }

    #profile .profile-adatlap-wrapper {
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #profile .profile-main-data {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #profile .wall-tab {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        box-sizing: border-box;
    }

    body.light-mode #profile .wall-tab,
    body.light-mode #profile .wall-tab.active {
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    #profile .profile-wall-list {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        box-sizing: border-box;
        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;
        box-sizing: border-box;
    }
}


/* PROFILE MOBILE — KAPCSOLATI GOMBOK ÉS FÜL TARTALOM
 * A mobil nézetben a kapcsolati műveletek mindig teljes szélességben,
 * olvasható felirattal jelenjenek meg. A fülpanelek aktív állapota explicit,
 * hogy más, régi profile.css szabály ne tudja elrejteni a tartalmat.
 */
@media (max-width: 700px) {
    #profile .dx-profile-actions-row {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        box-sizing: border-box;
        gap: 7px;
    }

    #profile .dx-profile-actions-row .dx-profile-relation-form {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }

    #profile .dx-profile-actions-row .dx-profile-relation-button {
        width: 100%;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #profile .profile-main-data > .profile-tab-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #profile .profile-main-data > .profile-tab-content:not(.active) {
        display: none;
    }

    #profile .profile-main-data > .profile-tab-content.active {
        display: block;
        visibility: visible;
        opacity: 1;
    }

    #profile .relations-tab.active {
        width: 100%;
        min-width: 0;
    }

    #profile .relations-sub-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        scrollbar-width: none;
    }

    #profile .relations-sub-nav::-webkit-scrollbar {
        display: none;
    }

    #profile .about-sub-tab-content.active {
        display: block;
    }
}