/**
 * assets/css/profile/lightbox_split.css
 * DROPX PRIME SYSTEM — GLOBAL HIGH-TECH MEDIA LIGHTBOX
 * Globális: Hírfolyam + Profil + Csoportok + Albumok
 */

#image-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    padding: 18px;
    box-sizing: border-box;
    background: rgba(0,0,0,.015);
    backdrop-filter: blur(.7px);
}

#image-modal-overlay.active {
    display: flex;
}

.dropx-lightbox-open {
    overflow: hidden;
}

.custom-split-lightbox-container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 360px);
    width: min(1380px, 94vw);
    height: min(850px, 91vh);
    overflow: hidden;
    border: 1px solid rgba(229, 158, 0, 0.28);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(10, 13, 18, 0.99), rgba(5, 7, 10, 0.99));
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62), 0 0 42px rgba(229, 158, 0, 0.09);
}

.lightbox-left-pane {
    position: relative;
    min-width: 0;
    background: radial-gradient(circle at center, rgba(30, 34, 42, 0.34), rgba(0, 0, 0, 0.98) 68%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lightbox-image-viewport {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 38px 54px 88px;
    box-sizing: border-box;
}

.lightbox-image-viewport img,
#image-modal-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
}

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(229, 158, 0, 0.25);
    border-radius: 50%;
    background: rgba(9, 12, 16, 0.78);
    color: var(--color-gold, #e59e00);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.lightbox-nav-btn:hover {
    transform: translateY(-50%) scale(1.07);
    border-color: rgba(229, 158, 0, 0.55);
    background: rgba(229, 158, 0, 0.1);
}

.lightbox-nav-btn.nav-prev { left: 16px; }
.lightbox-nav-btn.nav-next { right: 16px; }

.lightbox-counter {
    position: absolute;
    left: 50%;
    bottom: 77px;
    transform: translateX(-50%);
    z-index: 5;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(4, 6, 9, 0.72);
    color: rgba(255, 255, 255, 0.78);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}

.lightbox-bottom-thumbnails-bar {
    position: absolute;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 7px;
    max-width: 82%;
    padding: 7px;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: rgba(7, 10, 14, 0.84);
    scrollbar-width: none;
}

.lightbox-bottom-thumbnails-bar::-webkit-scrollbar {
    display: none;
}

.fancy-lightbox-thumb {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    opacity: 0.56;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.fancy-lightbox-thumb:hover,
.fancy-lightbox-thumb.active {
    opacity: 1;
    border-color: var(--color-gold, #e59e00);
    transform: translateY(-2px);
}

.lightbox-right-pane {
    min-width: 0;
    overflow-y: auto;
    padding: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(17, 20, 25, 0.98), rgba(10, 12, 16, 0.98));
    box-sizing: border-box;
}

.lightbox-sidebar-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.lightbox-post-detail-card {
    padding: 0;
    min-height: 100%;
    background: transparent;
}

.lightbox-post-detail-card .post-header {
    margin-bottom: 0;
}

.lightbox-post-text-wrap {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.lightbox-post-text {
    position: relative;
    max-height: 145px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.55;
}

.lightbox-post-text:not(.expanded)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: linear-gradient(180deg, transparent, rgba(15, 18, 23, 0.98));
    pointer-events: none;
}

.lightbox-post-text.expanded {
    max-height: none;
}

.lightbox-post-text.expanded::after {
    display: none;
}

.lightbox-read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 6px 9px;
    border: 1px solid rgba(229, 158, 0, 0.2);
    border-radius: 7px;
    background: rgba(229, 158, 0, 0.05);
    color: var(--color-gold, #e59e00);
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
}

.lightbox-media-focus {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(229, 158, 0, 0.14);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(229, 158, 0, 0.035), rgba(255, 255, 255, 0.015));
}

.lightbox-media-focus-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--color-gold, #e59e00);
    font-size: 0.78rem;
}

.lightbox-media-focus-head > div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lightbox-media-focus-head span {
    color: var(--text-muted, #9d978f);
}

.lightbox-media-reactions-summary {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 25px;
    color: var(--text-light, #fff);
}

.lightbox-media-reactions-summary small {
    margin-left: 5px;
    color: var(--text-muted, #9d978f);
}

.dx-lightbox-reaction-control {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.lightbox-media-reaction-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    background: rgba(255,255,255,.02);
    color: var(--text-light,#f2f4f6);
    cursor: pointer;
    font-weight: 700;
    font-size: .72rem;
}

.lightbox-media-reaction-trigger:hover,
.lightbox-media-reaction-trigger:focus-visible {
    border-color: rgba(229,158,0,.32);
    color: var(--color-gold,#e59e00);
    outline: none;
}

.lightbox-media-reaction-options {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 5px;
    border: 1px solid rgba(229,158,0,.22);
    border-radius: 10px;
    background: rgba(9,12,16,.98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .14s ease, visibility .14s ease, transform .14s ease;
    z-index: 20;
}

.dx-lightbox-reaction-control:hover .lightbox-media-reaction-options,
.dx-lightbox-reaction-control:focus-within .lightbox-media-reaction-options,
.lightbox-media-reaction-options.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.lightbox-media-reaction {
    width: 32px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.lightbox-media-reaction:hover,
.lightbox-media-reaction.active {
    transform: translateY(-1px);
    border-color: rgba(229, 158, 0, 0.42);
    background: rgba(229, 158, 0, 0.08);
}

.lightbox-media-comments-stream{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;gap:7px;max-height:none;overflow-y:auto;scrollbar-gutter:stable}

.lightbox-media-comment {
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.022);
}

.lightbox-media-comment-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lightbox-media-comment-head img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(229, 158, 0, 0.2);
}

.lightbox-media-comment-head div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lightbox-media-comment-head strong {
    color: var(--text-light, #fff);
    font-size: 0.78rem;
}

.lightbox-media-comment-head span {
    color: var(--text-muted, #9d978f);
    font-size: 0.68rem;
}

.lightbox-media-comment-body {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
    line-height: 1.45;
}

.lightbox-media-comment-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 6px;
}

.lightbox-media-comment-input input {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    outline: none;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-light, #fff);
    box-sizing: border-box;
}

.lightbox-media-comment-input input:focus {
    border-color: rgba(229, 158, 0, 0.4);
}

.lightbox-media-comment-input button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(229, 158, 0, 0.3);
    border-radius: 8px;
    background: rgba(229, 158, 0, 0.07);
    color: var(--color-gold, #e59e00);
    cursor: pointer;
}

#image-modal-overlay {
    position: fixed;
}

#image-modal-overlay .modal-close-btn {
    top: 14px;
    right: 14px;
}

.modal-close-btn {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 2147483648;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(9, 12, 16, 0.82);
    color: var(--text-light, #fff);
    cursor: pointer;
}

.modal-close-btn:hover {
    border-color: rgba(229, 158, 0, 0.42);
    color: var(--color-gold, #e59e00);
}

@media (max-width: 992px) {
    #image-modal-overlay {
        padding: 10px;
    }

    .dropx-lightbox-open {
    overflow: hidden;
}

.custom-split-lightbox-container {
        grid-template-columns: 1fr;
        width: 96vw;
        height: 94vh;
    }

    .lightbox-left-pane {
        min-height: 48%;
    }

    .lightbox-right-pane {
        min-height: 52%;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        border-left: 0;
    }
}

@media (max-width: 620px) {
    .lightbox-image-viewport {
        padding: 28px 30px 78px;
    }

    .lightbox-nav-btn {
        width: 36px;
        height: 36px;
    }

    .lightbox-nav-btn.nav-prev { left: 8px; }
    .lightbox-nav-btn.nav-next { right: 8px; }

    .lightbox-bottom-thumbnails-bar {
        max-width: 90%;
    }
}

.dx-media-reaction-users-modal{position:fixed;inset:0;z-index:2147483646;display:grid;place-items:center;padding:20px;background:transparent;backdrop-filter:blur(.7px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s ease}
.dx-media-reaction-users-modal.active{opacity:1;visibility:visible;pointer-events:auto}
.dx-media-reaction-users-card{width:min(430px,100%);max-height:70vh;overflow:auto;border:1px solid rgba(214,165,43,.28);border-radius:16px;background:#0b0e11;box-shadow:none}
.dx-media-reaction-users-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.07);color:#f2f5f7;font:800 .9rem 'Chakra Petch',sans-serif}
.dx-media-reaction-users-head button{border:0;background:transparent;color:#aeb7c2;font-size:1.35rem;cursor:pointer}
.dx-media-reaction-users-list{padding:8px}
.dx-media-reaction-users-list a{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;color:#dce2e8;text-decoration:none;font:700 .72rem 'Chakra Petch',sans-serif}
.dx-media-reaction-users-list a:hover{background:rgba(214,165,43,.08)}
.dx-media-reaction-users-list img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid rgba(214,165,43,.22)}
.dx-media-reaction-users-list b{margin-left:auto;font-size:1rem}
.lightbox-media-reactions-summary{cursor:pointer}
.dx-media-privacy-control{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin:8px 0;color:#7f8994;font:700 .62rem 'Chakra Petch',sans-serif}
.dx-media-privacy-control select{border:1px solid rgba(214,165,43,.2);border-radius:7px;background:#0b0e11;color:#e7ebef;padding:5px 8px;font:600 .62rem 'Chakra Petch',sans-serif}
.dx-media-interaction-lock{margin:6px 0 9px;padding:7px 9px;border:1px solid rgba(214,165,43,.16);border-radius:8px;background:rgba(214,165,43,.05);color:#aeb7c2;font:600 .62rem/1.4 'Chakra Petch',sans-serif}
.lightbox-media-reaction:disabled{opacity:.35;cursor:not-allowed}
.lightbox-media-comment-input input:disabled{opacity:.45;cursor:not-allowed}

/* Képszintű kommentek — ugyanaz a threaded/interakciós nyelv, mint a normál kommenteknél. */
.lightbox-media-comment.is-reply {
    margin-left: 24px;
    margin-top: 6px;
    border-left-color: rgba(229, 158, 0, 0.18);
}

.lightbox-media-comment-replies {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 7px;
}

.lightbox-media-comment-reply-target {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 5px 2px;
    color: rgba(229, 158, 0, 0.72);
    font-size: 0.62rem;
    line-height: 1.25;
}

.lightbox-media-comment-reply-target svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.lightbox-media-comment-reply-target strong {
    color: rgba(242, 220, 171, 0.9);
    font-weight: 700;
}

.lightbox-media-comment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.dx-media-comment-reaction-control,
.dx-album-comment-reaction-control {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.dx-media-comment-react-trigger,
.dx-album-comment-react-trigger {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #9d978f);
    cursor: pointer;
    font-size: .78rem;
}

.dx-media-comment-react-trigger:hover,
.dx-album-comment-react-trigger:hover {
    background: rgba(229,158,0,.08);
}

.dx-media-comment-reactions {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity .14s ease, visibility .14s ease, transform .14s ease;
}

.dx-media-comment-reaction-control:hover .dx-media-comment-reactions,
.dx-media-comment-reaction-control:focus-within .dx-media-comment-reactions,
.dx-media-comment-reaction-control.is-open .dx-media-comment-reactions,
.dx-media-comment-reactions.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.dx-media-comment-reaction,
.dx-media-comment-reply {
    border: 0;
    background: transparent;
    color: var(--text-muted, #9d978f);
    cursor: pointer;
    border-radius: 6px;
}

.dx-media-comment-reaction {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    opacity: .72;
}

.dx-media-comment-reaction:hover,
.dx-media-comment-reaction.active {
    opacity: 1;
    background: rgba(229, 158, 0, .1);
}

.dx-media-comment-reply {
    padding: 3px 6px;
    font-size: .65rem;
}

.dx-media-comment-reply:hover {
    color: var(--color-gold, #e59e00);
    background: rgba(229, 158, 0, .08);
}

.dx-media-comment-reaction-count {
    color: var(--text-muted, #9d978f);
    font-size: .64rem;
}

/* ========================================================================
   DROPX SOCIAL CORE — UNIFIED LIGHTBOX / ALBUM / COMMENT UI
   A Kiemelt Album, Feed, Profil és Csoport ugyanazt a vizuális komponenst kapja.
   ======================================================================== */
#image-modal-overlay {
    background: transparent;
    backdrop-filter: blur(.7px);
}

.custom-split-lightbox-container {
    border-color: rgba(229, 158, 0, .30);
    box-shadow: none;
}

.lightbox-image-viewport img,
.lightbox-image-viewport #image-modal-img {
    box-shadow: none;
}

.lightbox-right-pane {
    background: linear-gradient(180deg, rgba(12, 15, 19, .98), rgba(8, 10, 13, .98));
}

.lightbox-album-detail-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.lightbox-album-detail-card .post-header {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.lightbox-album-detail-card .post-author-name,
.lightbox-comment-author-link,
.dx-album-comment-author {
    color: var(--text-light, #f4f6f8);
    text-decoration: none;
    font-weight: 800;
}

.lightbox-album-detail-card .post-author-name:hover,
.lightbox-comment-author-link:hover,
.dx-album-comment-author:hover {
    color: var(--color-gold, #e59e00);
}

.lightbox-album-interaction-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.lightbox-comment-count {
    color: var(--text-muted, #8e98a3);
    font-size: .76rem;
    font-weight: 700;
}

.lightbox-album-actions {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.lightbox-album-reaction-options {
    position: absolute;
    left: 4px;
    bottom: calc(100% + 5px);
    display: flex;
    gap: 3px;
    padding: 6px;
    border: 1px solid rgba(229,158,0,.28);
    border-radius: 10px;
    background: rgba(10,13,17,.98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

.lightbox-album-reaction-options.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.lightbox-album-reaction-options button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    font-size: 1.05rem;
}

.lightbox-album-reaction-options button:hover {
    background: rgba(229,158,0,.10);
    transform: translateY(-1px);
}

.lightbox-album-comments-section {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    border-top: 0;
    margin-top: 0;
}

.lightbox-album-comments-section .comments-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow: auto;
    min-height: 0;
    padding: 10px 2px;
}

.dx-lightbox-empty {
    margin: 20px 0;
    color: var(--text-muted, #87919b);
    text-align: center;
    font-size: .78rem;
}

.dx-album-comment {
    padding: 9px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 10px;
    background: rgba(255,255,255,.018);
}

.dx-album-comment.is-reply {
    margin: 7px 0 0 34px;
    border-left: 2px solid rgba(229,158,0,.30);
    border-radius: 0 9px 9px 0;
}

.dx-album-comment-main {
    display: flex;
    gap: 8px;
}

.dx-album-comment-avatar,
.lightbox-media-comment-head img {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(229,158,0,.22);
}

.dx-album-comment-content {
    min-width: 0;
    flex: 1;
}

.dx-album-comment-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dx-album-comment-head span {
    color: var(--text-muted, #7f8994);
    font-size: .62rem;
}

.dx-album-comment-text {
    margin-top: 3px;
    color: var(--color-silver, #c7cbd0);
    font-size: .78rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.dx-album-comment-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.dx-album-comment-reactions {
    display: flex;
    gap: 1px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease, visibility .14s ease;
}

.dx-album-comment-reaction-control:hover .dx-album-comment-reactions,
.dx-album-comment-reaction-control:focus-within .dx-album-comment-reactions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dx-album-comment-reaction {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    opacity: .62;
    font-size: .8rem;
}

.dx-album-comment-reaction:hover,
.dx-album-comment-reaction.active {
    opacity: 1;
    background: rgba(229,158,0,.08);
}

.dx-album-comment-reaction-count,
.dx-album-reply-trigger {
    color: var(--text-muted, #8d97a1);
    font-size: .65rem;
    font-weight: 700;
}

.dx-album-reply-trigger {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.dx-album-reply-trigger:hover {
    color: var(--color-gold, #e59e00);
}

.dx-album-reply-box {
    display: flex;
    gap: 6px;
    margin-top: 7px;
}

.dx-album-reply-box[hidden] { display: none; }
.dx-album-reply-input {
    min-width: 0;
    flex: 1;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(0,0,0,.24);
    color: #fff;
}
.dx-album-reply-submit {
    border: 1px solid rgba(229,158,0,.25);
    border-radius: 8px;
    background: rgba(229,158,0,.08);
    color: var(--color-gold,#e59e00);
    cursor: pointer;
}

.lightbox-media-comment-head a:first-child { display: flex; }
.lightbox-comment-author-link { display: block; font-size: .76rem; }
.lightbox-media-comment-head > div span { display:block; }

@media (max-width: 900px) {
    .custom-split-lightbox-container {
        grid-template-columns: 1fr;
        width: min(96vw, 720px);
        height: min(94vh, 900px);
    }
    .lightbox-left-pane { min-height: 48vh; }
    .lightbox-right-pane { min-height: 42vh; border-left: 0; border-top: 1px solid rgba(255,255,255,.06); }
}


.dx-media-comment-reaction-control .dx-media-comment-reactions,
.dx-album-comment-reaction-control .dx-album-comment-reactions {
    position: absolute;
    left: 0;
    bottom: calc(100% - 1px);
    padding: 4px;
    border: 1px solid rgba(229,158,0,.20);
    border-radius: 9px;
    background: rgba(9,12,16,.98);
    gap: 2px;
    z-index: 30;
}

.dx-media-comment-reaction-control .dx-media-comment-reaction,
.dx-album-comment-reaction-control .dx-album-comment-reaction {
    flex: 0 0 auto;
}


/* ========================================================================
   DROPX COMMENT REACTION FIXES
   - A reakciósáv a triggerhez tapad, így hover közben nem tud bezáródni.
   - A komment reakciószám kattintható.
   - A kommentmező nagy, a küldés gomb kompakt.
   ======================================================================== */
.dx-album-comment-reaction-control,
.dx-media-comment-reaction-control {
    z-index: 40;
}

.dx-album-comment-reaction-control::after,
.dx-media-comment-reaction-control::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: 8px;
    pointer-events: auto;
}

.dx-album-comment-reaction-count {
    border: 0;
    padding: 3px 5px;
    background: transparent;
    cursor: pointer;
}

.dx-album-comment-reaction-count:hover {
    color: var(--color-gold, #e59e00);
}

.dx-album-comment-react-trigger.has-reaction {
    color: var(--color-gold, #e59e00);
    opacity: 1;
}

/* A kiemelt album kommentmezője: nagy mező + kis küldésgomb. */
.lightbox-album-comments-section .comment-publisher-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    padding: 8px 0 0;
    box-sizing: border-box;
}

.lightbox-album-comments-section .root-comment-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    object-fit: cover;
}

.lightbox-album-comments-section .comment-input-box-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: stretch;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.lightbox-album-comments-section .root-comment-input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 9px;
    background: rgba(0,0,0,.34);
    color: #f2f4f6;
}

.lightbox-album-comments-section #lightbox-album-comment-submit {
    width: 42px;
    min-width: 42px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 9px;
}

/* A media kommentmező ugyanilyen arányú legyen. */
.lightbox-media-comment-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: stretch;
    gap: 6px;
}

.lightbox-media-comment-input input {
    min-height: 40px;
    height: 40px;
}

.lightbox-media-comment-input button {
    width: 42px;
    min-width: 42px;
    height: 40px;
}


/* ========================================================================
   DROPX GLOBAL SOCIAL UI — FINAL STABILITY PATCH
   ======================================================================== */

/* A Lightbox körül nincs sárga glow / erős shadow. */
.custom-split-lightbox-container {
    box-shadow: none;
}

/* A háttér nem sötétedik. A blur szándékosan minimális. */
#image-modal-overlay {
    background: transparent;
    backdrop-filter: blur(.7px);
    -webkit-backdrop-filter: blur(.7px);
}

/* A fő reakció-picker és a komment reakció-picker között nincs hover-szakadék. */
.lightbox-album-actions::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 180px;
    height: 8px;
    pointer-events: auto;
}

.lightbox-album-reaction-options::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 8px;
    pointer-events: auto;
}

/* A globális reakciólista soha nem sötétíti / blurözi a mögöttes Lightboxot. */
.dx-global-reaction-users-modal,
.dx-global-reaction-users-modal .dx-global-reaction-backdrop,
.dx-reactions-modal,
.dx-reactions-modal .dx-reactions-backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Reakciós modal: finom keret, glow nélkül. */
.dx-global-reaction-card,
.dx-reactions-card {
    box-shadow: none;
}

/* Kapcsolati állapotok jól elkülönítve, de nem agresszívan. */
.dx-reaction-relation-status {
    white-space: nowrap;
}

/* Komment reakciószám egyértelműen interaktív. */
.dx-album-comment-reaction-count,
.comment-reactions-count-link {
    cursor: pointer;
}


/* Light theme: a bezáró gomb ne sötét blokk legyen a bézs felületen. */
body.light-mode .modal-close-btn,
html[data-dx-theme="light"] .modal-close-btn {
    border-color: rgba(121, 91, 55, .28);
    background: rgba(246, 237, 224, .94);
    color: #4a392a;
    box-shadow: 0 8px 24px rgba(55, 39, 25, .16), inset 0 1px 0 rgba(255,255,255,.75);
}

body.light-mode .modal-close-btn:hover,
html[data-dx-theme="light"] .modal-close-btn:hover {
    border-color: rgba(149, 102, 28, .55);
    background: rgba(255, 248, 237, .98);
    color: #8e5f18;
}

.lightbox-site-logo{position:fixed;top:18px;left:20px;z-index:2147483647;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(229,158,0,.28);border-radius:12px;background:rgba(8,10,14,.72);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.lightbox-site-logo img{width:27px;height:27px;object-fit:contain}.lightbox-site-logo:hover{border-color:rgba(229,158,0,.62);transform:translateY(-1px)}
.lightbox-post-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.lightbox-post-text.expanded{display:block;-webkit-line-clamp:unset}
.lightbox-read-more-btn{margin-top:4px;padding:0;border:0;background:transparent;color:var(--color-gold,#e59e00);font:700 .68rem 'Chakra Petch',sans-serif;cursor:pointer}
.lightbox-post-actions{display:flex;align-items:center;gap:4px;min-height:42px;border-bottom:1px solid rgba(255,255,255,.07)}
.lightbox-post-action{width:36px;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:4px;border:0;background:transparent;color:#8e98a3;cursor:pointer;border-radius:7px}.lightbox-post-action:hover{color:#e6ebef;background:rgba(255,255,255,.035)}.lightbox-post-action.is-reacted{color:var(--color-gold,#e59e00)}.lightbox-post-action svg{width:18px;height:18px}.lightbox-post-action span{font-size:.68rem;font-weight:800}
.lightbox-post-reaction-control{position:relative;display:inline-flex}.lightbox-post-reaction-picker{position:absolute;left:0;bottom:calc(100% + 6px);display:flex;gap:3px;padding:5px 6px;border:1px solid rgba(229,158,0,.28);border-radius:18px;background:rgba(9,12,16,.98);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(4px);transition:opacity .14s ease,visibility .14s ease,transform .14s ease;z-index:40}.lightbox-post-reaction-control:hover .lightbox-post-reaction-picker,.lightbox-post-reaction-picker.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.lightbox-post-reaction-control::after,.dx-lightbox-reaction-control::after{content:'';position:absolute;left:0;right:0;bottom:100%;height:12px}.lightbox-post-reaction-picker button{width:30px;height:30px;border:0;border-radius:50%;background:transparent;cursor:pointer;font-size:1rem}.lightbox-post-reaction-picker button:hover,.lightbox-post-reaction-picker button.active{background:rgba(229,158,0,.1);transform:translateY(-1px)}
.lightbox-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);margin:3px 0}

/* ========================================================================
   DROPX MEDIA LIGHTBOX — FULLSCREEN PRESENTATION
   A referencia-képek szerinti elrendezés:
   - PC: teljes viewport, bal oldalon a kép, jobb oldalon az interakciós panel.
   - Mobil: a kép valóban teljes képernyős; az interakciók alsó felnyíló sheetként
     jelennek meg, nem veszik el a képet alapállapotban.
   - A poszt alsó "Reakció / Hozzászólás / Megosztás" sávja nem része a Lightboxnak.
   ======================================================================== */

#image-modal-overlay.active {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}

#image-modal-overlay .custom-split-lightbox-container {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    grid-template-columns: minmax(0, 1fr) 360px;
}

#image-modal-overlay .lightbox-left-pane {
    min-height: 0;
    height: 100vh;
}

#image-modal-overlay .lightbox-image-viewport {
    padding: 32px 58px 96px;
}

#image-modal-overlay .lightbox-image-viewport img,
#image-modal-overlay #image-modal-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#image-modal-overlay .lightbox-right-pane{height:100vh;min-height:0;display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.08);border-top:0}
#image-modal-overlay .lightbox-sidebar-card{min-height:0;height:100%;display:flex;flex-direction:column}
#image-modal-overlay .lightbox-media-focus{flex:1;min-height:0}

.lightbox-mobile-comments-toggle {
    display: none;
}

@media (max-width: 900px) {
    .lightbox-site-logo{top:max(12px,env(safe-area-inset-top));left:12px;width:38px;height:38px}.lightbox-site-logo img{width:24px;height:24px}
    #image-modal-overlay.active {
        padding: 0;
    }

    #image-modal-overlay .custom-split-lightbox-container {
        position: relative;
        display: block;
        width: 100vw;
        height: 100vh;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        overflow: hidden;
    }

    #image-modal-overlay .lightbox-left-pane {
        width: 100vw;
        height: 100vh;
        min-height: 100vh;
    }

    #image-modal-overlay .lightbox-image-viewport {
        width: 100vw;
        height: 100vh;
        padding: 54px 12px 82px;
    }

    #image-modal-overlay .lightbox-image-viewport img,
    #image-modal-overlay #image-modal-img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 0;
        box-shadow: none;
    }

    #image-modal-overlay .lightbox-right-pane {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        width: 100%;
        height: auto;
        height:min(76vh,760px);
        max-height:min(76vh,760px);
        padding: 14px 14px max(14px, env(safe-area-inset-bottom));
        border: 0;
        border-top: 1px solid rgba(229,158,0,.20);
        border-radius: 18px 18px 0 0;
        background: linear-gradient(180deg, rgba(10,13,18,.98), rgba(5,7,10,.99));
        box-shadow: 0 -18px 55px rgba(0,0,0,.55);
        transform:translateY(calc(100% - 56px));
        display:flex;
        transition: transform .22s ease;
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-right-pane{transform:translateY(0)}
    #image-modal-overlay .lightbox-sidebar-card{height:100%}
    #image-modal-overlay .lightbox-media-focus{overflow:hidden}
    #image-modal-overlay .lightbox-media-comments-stream{flex:1 1 auto;min-height:0;max-height:none}
    #image-modal-overlay .lightbox-post-actions{flex:0 0 auto}

    .lightbox-mobile-comments-toggle {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 22;
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 8px 16px;
        border: 0;
        border-top: 1px solid rgba(229,158,0,.16);
        border-radius: 18px 18px 0 0;
        background: rgba(8,10,14,.96);
        color: #e8edf2;
        cursor: pointer;
        font: 800 .76rem 'Chakra Petch', sans-serif;
        letter-spacing: .02em;
    }

    .lightbox-mobile-comments-toggle:active {
        background: rgba(20,23,29,.98);
    }

    .lightbox-mobile-comments-handle {
        position: absolute;
        top: 7px;
        left: 50%;
        width: 38px;
        height: 4px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: rgba(255,255,255,.24);
    }

    .lightbox-mobile-comments-toggle svg {
        width: 16px;
        height: 16px;
        color: var(--color-gold,#e59e00);
        transition: transform .2s ease;
    }

    .lightbox-mobile-comments-toggle svg.is-open {
        transform: rotate(180deg);
    }

    #image-modal-overlay .lightbox-bottom-thumbnails-bar {
        bottom: 14px;
        max-width: 92vw;
    }

    #image-modal-overlay .lightbox-counter {
        bottom: 72px;
    }
}

@media (max-width: 520px) {
    #image-modal-overlay .lightbox-image-viewport {
        padding: 48px 4px 72px;
    }

    #image-modal-overlay .lightbox-nav-btn {
        width: 38px;
        height: 38px;
    }

    #image-modal-overlay .lightbox-nav-btn.nav-prev { left: 7px; }
    #image-modal-overlay .lightbox-nav-btn.nav-next { right: 7px; }

    #image-modal-overlay .lightbox-bottom-thumbnails-bar {
        bottom: 10px;
        padding: 5px;
        gap: 5px;
    }

    #image-modal-overlay .fancy-lightbox-thumb {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}

/* Referencia-stílus: a jobb panel ne táblázatos kártyahalmaz legyen, hanem vékony elválasztó vonalakból épüljön. */
#image-modal-overlay .lightbox-media-focus{border:0;background:transparent;padding:10px 0}
#image-modal-overlay .lightbox-media-comment{border:0;border-radius:0;background:transparent;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
#image-modal-overlay .lightbox-media-comment:last-child{border-bottom:0}
#image-modal-overlay .lightbox-post-actions{border-top:1px solid rgba(255,255,255,.07)}

/* ========================================================================
   DROPX SOCIAL REFINEMENT — 2026.10
   ======================================================================== */
.lightbox-post-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    max-height: none;
    overflow: hidden;
}
.lightbox-post-text.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.lightbox-read-more-btn {
    margin-top: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-gold, #e59e00);
    font: 700 .72rem 'Chakra Petch', sans-serif;
    cursor: pointer;
}
.lightbox-read-more-btn:hover { color: #fff; }

.lightbox-post-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 42px;
    padding: 0 2px;
    border-top: 1px solid rgba(255,255,255,.075);
    border-bottom: 1px solid rgba(255,255,255,.075);
}
.lightbox-post-action {
    min-width: 38px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: #8e98a3;
    cursor: pointer;
    border-radius: 7px;
}
.lightbox-post-action:hover { color: #e8edf1; background: rgba(255,255,255,.035); }
.lightbox-post-action.is-reacted { color: #e74b57; }
.lightbox-post-action svg { width: 17px; height: 17px; }
.lightbox-post-action span { font-size: .68rem; font-weight: 800; }

/* A hover picker ne essen ki a másodpercek alatt: a gomb és a picker közötti
   láthatatlan híd megakadályozza a véletlen bezáródást. */
.lightbox-post-reaction-control::after,
.dx-lightbox-reaction-control::after {
    content: '';
    position: absolute;
    left: -6px;
    right: -6px;
    bottom: 100%;
    height: 18px;
}
.lightbox-post-reaction-picker {
    bottom: calc(100% + 7px);
}

/* Mobil: a komment/interakció sheet tetején maradjon a nyitó fogantyú. */
@media (max-width: 700px) {
    #image-modal-overlay.active {
        padding: 0;
        align-items: stretch;
    }

    .custom-split-lightbox-container {
        --lightbox-sheet-height: min(72vh, 680px);
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border: 0;
        border-radius: 0;
        display: block;
        background: #000;
    }

    .lightbox-left-pane {
        width: 100%;
        height: 100%;
        min-height: 100%;
        background: #000;
    }

    .lightbox-image-viewport {
        width: 100%;
        height: 100%;
        padding: 72px 6px 70px;
    }

    .lightbox-image-viewport img,
    .lightbox-image-viewport #image-modal-img {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .lightbox-right-pane {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2147483645;
        width: 100vw;
        height: var(--lightbox-sheet-height);
        max-height: var(--lightbox-sheet-height);
        min-height: 0;
        padding: 16px 14px 18px;
        border: 0;
        border-top: 1px solid rgba(229,158,0,.22);
        border-radius: 18px 18px 0 0;
        background: linear-gradient(180deg, rgba(12,15,19,.985), rgba(6,8,11,.995));
        box-shadow: 0 -18px 60px rgba(0,0,0,.48);
        transform: translateY(calc(100% + 22px));
        transition: transform .22s ease;
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-right-pane {
        transform: translateY(0);
    }

    .lightbox-mobile-comments-toggle {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2147483646;
        width: 100vw;
        min-height: 52px;
        border: 1px solid rgba(229,158,0,.18);
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
        background: rgba(7,9,12,.96);
        color: #e9edf1;
        transition: bottom .22s ease;
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-mobile-comments-toggle {
        bottom: var(--lightbox-sheet-height);
    }

    .lightbox-mobile-comments-toggle .lightbox-mobile-comments-handle {
        display: block;
        width: 42px;
        height: 4px;
        margin: 0 auto 4px;
        border-radius: 99px;
        background: rgba(255,255,255,.32);
    }

    .lightbox-mobile-comments-toggle svg { transition: transform .2s ease; }
    .lightbox-mobile-comments-toggle svg.is-open { transform: rotate(180deg); }

    .lightbox-post-detail-card,
    .lightbox-media-focus {
        min-height: 0;
    }

    .lightbox-right-pane .lightbox-post-detail-card {
        height: 100%;
        overflow-y: auto;
        padding-bottom: 14px;
    }

    .lightbox-post-text-wrap {
        padding: 10px 0;
        border: 0;
        background: transparent;
    }

    .lightbox-post-actions {
        margin: 0;
    }

    .lightbox-media-focus {
        border: 0;
        border-radius: 0;
        padding: 10px 0 0;
        background: transparent;
    }

    .lightbox-media-comments-stream {
        max-height: none;
        flex: 1 1 auto;
    }
}

/* ========================================================================
   LIGHTBOX — REFERENCIAHŰ POSZT / MOBIL SHEET
   ======================================================================== */
.lightbox-post-text {
    -webkit-line-clamp: 3;
    max-height: calc(1.55em * 3);
}

.lightbox-post-text.expanded {
    max-height: none;
}

.lightbox-post-actions {
    justify-content: flex-start;
    gap: 2px;
}

@media (max-width: 700px) {
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-left-pane,
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport {
        height: calc(100vh - var(--lightbox-sheet-height));
        min-height: calc(100vh - var(--lightbox-sheet-height));
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport {
        padding-bottom: 18px;
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport img,
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport #image-modal-img {
        max-height: 100%;
    }

    #image-modal-overlay .lightbox-right-pane {
        overflow: hidden;
    }

    #image-modal-overlay .lightbox-sidebar-card {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    #image-modal-overlay .lightbox-media-comments-stream,
    #image-modal-overlay .lightbox-album-comments-section .comments-list {
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

/* ========================================================================
   LIGHTBOX — REFERENCIAHŰ POSZT / MOBIL SHEET
   ======================================================================== */
.lightbox-post-text { -webkit-line-clamp:3; max-height:calc(1.55em * 3); }
.lightbox-post-text.expanded { max-height:none; }
.lightbox-post-actions { justify-content:flex-start; gap:2px; }
@media (max-width:700px) {
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-left-pane,
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport { height:calc(100vh - var(--lightbox-sheet-height)); min-height:calc(100vh - var(--lightbox-sheet-height)); }
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport { padding-bottom:18px; }
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport img,
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport #image-modal-img { max-height:100%; }
    #image-modal-overlay .lightbox-right-pane { overflow:hidden; }
    #image-modal-overlay .lightbox-sidebar-card { width:100%; min-width:0; overflow:hidden; }
    #image-modal-overlay .lightbox-media-comments-stream,
    #image-modal-overlay .lightbox-album-comments-section .comments-list { min-height:0; overflow-y:auto; scrollbar-width:thin; }
}

/* ========================================================================
   ETAP 9 — MOBIL LIGHTBOX SHEET: NINCS TAKARÁS / NINCS „KÉP INTERAKCIÓK” CÍM
   ======================================================================== */
.lightbox-media-focus-spacer { flex: 1 1 auto; min-width: 1px; }

@media (max-width: 700px) {
    #image-modal-overlay .lightbox-right-pane {
        padding-top: 46px;
        box-sizing: border-box;
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-right-pane {
        transform: translateY(0);
    }

    #image-modal-overlay .lightbox-right-pane .lightbox-post-detail-card {
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    #image-modal-overlay .lightbox-mobile-comments-toggle {
        height: 34px;
        min-height: 34px;
        padding: 5px 12px;
        border-radius: 14px 14px 0 0;
    }

    #image-modal-overlay .lightbox-mobile-comments-toggle .lightbox-mobile-comments-handle {
        position: static;
        width: 38px;
        height: 4px;
        transform: none;
        margin: 0;
    }

    #image-modal-overlay .lightbox-mobile-comments-toggle .lightbox-mobile-comments-label,
    #image-modal-overlay .lightbox-mobile-comments-toggle > svg {
        display: none;
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-mobile-comments-toggle {
        bottom: var(--lightbox-sheet-height);
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport {
        height: calc(100vh - var(--lightbox-sheet-height) - 2px);
        min-height: calc(100vh - var(--lightbox-sheet-height) - 2px);
        padding-bottom: 16px;
        box-sizing: border-box;
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport img,
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport #image-modal-img {
        max-height: 100%;
    }

    #image-modal-overlay .lightbox-post-text {
        -webkit-line-clamp: 3;
        max-height: calc(1.55em * 3);
        overflow: hidden;
    }

    #image-modal-overlay .lightbox-post-text.expanded {
        max-height: none;
        overflow: visible;
    }

    #image-modal-overlay .lightbox-post-read-more,
    #image-modal-overlay .lightbox-read-more-btn {
        font-size: .78rem;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--color-gold,#e59e00);
    }
}

/* ========================================================================
   ETAP 10 — LIGHTBOX POSZTADAT + KOMMENT SHEET
   ======================================================================== */
.lightbox-post-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lightbox-post-info .post-header {
    margin-bottom: 0;
}

.lightbox-post-info .post-author-text {
    min-width: 0;
}

.lightbox-post-info .post-author-name,
.lightbox-post-info .post-meta-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lightbox-post-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.lightbox-post-action {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #8d97a1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}

.lightbox-post-action:hover,
.lightbox-post-action.is-reacted {
    color: #e9edf1;
    background: rgba(255,255,255,.035);
}

.lightbox-post-reaction-trigger.is-reacted {
    color: #e74b57;
}

.lightbox-post-action svg {
    width: 18px;
    height: 18px;
}

.lightbox-post-reaction-control {
    position: relative;
    display: inline-flex;
}

.lightbox-post-reaction-picker {
    position: absolute;
    left: 0;
    bottom: calc(100% + 5px);
    display: flex;
    gap: 3px;
    padding: 5px;
    border: 1px solid rgba(229,158,0,.2);
    border-radius: 10px;
    background: rgba(8,11,15,.98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    z-index: 50;
}

.lightbox-post-reaction-control:hover .lightbox-post-reaction-picker,
.lightbox-post-reaction-picker:hover,
.lightbox-post-reaction-control:focus-within .lightbox-post-reaction-picker,
.lightbox-post-reaction-picker.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.lightbox-post-reaction-option {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
}

.lightbox-post-reaction-option:hover,
.lightbox-post-reaction-option.active {
    background: rgba(229,158,0,.09);
}

.lightbox-post-comments-only {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.lightbox-comments-only-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0 8px;
    color: #e59e00;
    font-weight: 700;
    font-size: .82rem;
}

.lightbox-comments-only-head span:last-child {
    color: #8d97a1;
    font-weight: 600;
}

.lightbox-post-comments-only .lightbox-media-comments-stream {
    flex: 1 1 auto;
    max-height: none;
}

.lightbox-post-comments-only .lightbox-media-comment-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dx-media-comment-react-trigger,
.dx-media-comment-reply,
.dx-media-comment-edit,
.dx-media-comment-delete,
.dx-media-comment-reaction-count {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #8d97a1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dx-media-comment-react-trigger:hover,
.dx-media-comment-reply:hover,
.dx-media-comment-edit:hover,
.dx-media-comment-delete:hover,
.dx-media-comment-reaction-count:hover {
    color: #e59e00;
    background: rgba(229,158,0,.06);
}

.dx-media-comment-delete:hover { color: #ef4444; background: rgba(239,68,68,.07); }

.dx-media-comment-react-trigger svg,
.dx-media-comment-reply svg,
.dx-media-comment-edit svg,
.dx-media-comment-delete svg {
    width: 16px;
    height: 16px;
}

.dx-media-comment-edit-box {
    margin-top: 7px;
}

.dx-media-comment-edit-input {
    width: 100%;
    min-height: 58px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid rgba(229,158,0,.28);
    border-radius: 7px;
    background: rgba(0,0,0,.28);
    color: #fff;
    resize: vertical;
}

.dx-media-comment-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 5px;
}

.dx-media-comment-edit-save,
.dx-media-comment-edit-cancel {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: rgba(255,255,255,.04);
    color: #aeb6be;
    cursor: pointer;
}

.dx-media-comment-edit-save:hover { color: #e59e00; }
.dx-media-comment-edit-cancel:hover { color: #ef4444; }

@media (max-width:700px) {
    #image-modal-overlay .custom-split-lightbox-container {
        --lightbox-sheet-height: min(72vh, 680px);
    }

    /* A poszt metaadatai látszódjanak alapból; a kép maradjon a háttérben, ne takarja ki őket. */
    #image-modal-overlay .lightbox-right-pane {
        transform: translateY(0);
        height: min(38vh, 360px);
        max-height: min(38vh, 360px);
        padding: 40px 14px 12px;
        overflow: hidden;
    }

    #image-modal-overlay .lightbox-right-pane .lightbox-post-detail-card {
        overflow: hidden;
    }

    #image-modal-overlay .lightbox-post-info {
        gap: 6px;
    }

    #image-modal-overlay .lightbox-post-text-wrap {
        padding: 6px 0;
    }

    #image-modal-overlay .lightbox-post-actions {
        padding: 4px 0;
    }

    #image-modal-overlay .lightbox-post-comments-only {
        display: none;
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-right-pane {
        height: var(--lightbox-sheet-height);
        max-height: var(--lightbox-sheet-height);
        padding-top: 40px;
        overflow: hidden;
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-post-info {
        display: none;
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-post-comments-only {
        display: flex;
        height: 100%;
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport,
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-left-pane {
        height: calc(100vh - var(--lightbox-sheet-height));
        min-height: calc(100vh - var(--lightbox-sheet-height));
    }

    #image-modal-overlay .lightbox-mobile-comments-toggle {
        bottom: min(38vh, 360px);
        z-index: 2147483646;
        height: 34px;
        min-height: 34px;
        border-radius: 14px 14px 0 0;
        background: rgba(7,9,12,.97);
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-mobile-comments-toggle {
        bottom: var(--lightbox-sheet-height);
    }

    #image-modal-overlay .lightbox-mobile-comments-toggle .lightbox-mobile-comments-handle {
        margin: 0 auto;
    }
}


/* ========================================================================
   ETAP 11 — LIGHTBOX MOBIL KOMMENT SHEET + POSZT INTERAKCIÓS SÁV
   A korábbi, egymásra rakódó Lightbox szabályok fölé kerülő végső állapot.
   ======================================================================== */
.lightbox-post-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; }
.lightbox-post-actions-left,
.lightbox-post-actions-right { display:flex; align-items:center; gap:2px; min-width:0; }
.lightbox-post-actions-right { margin-left:auto; }
.lightbox-post-reactions-summary-trigger { max-width:180px; }
.lightbox-post-reactions-summary-trigger .dx-post-reactions-summary,
.lightbox-post-reactions-summary-trigger .reaction-preview-emoji { display:inline-flex; align-items:center; }
.lightbox-post-reactions-summary-trigger .reactions-total-count { margin-left:3px; white-space:nowrap; }
.lightbox-post-shares-count-trigger { white-space:nowrap; }
.lightbox-post-shares-count-trigger .lightbox-post-share-count { min-width:10px; text-align:left; }
.lightbox-reply-context { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px; padding:6px 10px; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); color:#9ea7b1; font-size:.76rem; }
.lightbox-reply-context strong { color:#e8edf1; }
.lightbox-reply-context button { width:28px; height:28px; border:0; background:transparent; color:#9ea7b1; cursor:pointer; display:grid; place-items:center; }
.lightbox-reply-context button:hover { color:#e59e00; }
.lightbox-media-comment-actions { display:flex; align-items:center; justify-content:flex-start; gap:8px; }
.lightbox-media-comment-actions > button,
.dx-media-comment-reaction-control > button { width:30px; height:30px; padding:0; border:0; background:transparent; color:#89939e; display:grid; place-items:center; border-radius:6px; cursor:pointer; }
.lightbox-media-comment-actions > button:hover,
.dx-media-comment-reaction-control > button:hover { color:#e59e00; background:rgba(229,158,0,.08); }
.lightbox-media-comment-actions svg,
.dx-media-comment-reaction-control svg { width:16px; height:16px; }
.dx-media-comment-reactions { position:absolute; left:0; bottom:calc(100% + 5px); z-index:60; opacity:0; visibility:hidden; pointer-events:none; }
.dx-media-comment-reaction-control { position:relative; }
.dx-media-comment-reaction-control.is-open .dx-media-comment-reactions { opacity:1; visibility:visible; pointer-events:auto; }
.lightbox-media-comment-input { flex:0 0 auto; }

@media (max-width:700px) {
    #image-modal-overlay .custom-split-lightbox-container { --lightbox-info-height:min(36vh, 330px); --lightbox-comments-height:min(78vh, 760px); }

    /* Alapállapot: a kép fölött megmarad a rövid poszt-meta panel. */
    #image-modal-overlay .lightbox-left-pane { height:calc(100vh - var(--lightbox-info-height)); min-height:calc(100vh - var(--lightbox-info-height)); }
    #image-modal-overlay .lightbox-image-viewport { height:calc(100vh - var(--lightbox-info-height)); min-height:calc(100vh - var(--lightbox-info-height)); padding:60px 6px 54px; }
    #image-modal-overlay .lightbox-right-pane { position:fixed; left:0; right:0; bottom:0; width:100%; height:var(--lightbox-info-height); max-height:var(--lightbox-info-height); padding:34px 14px 10px; transform:translateY(0); border:0; border-top:1px solid rgba(229,158,0,.16); border-radius:18px 18px 0 0; background:linear-gradient(180deg,rgba(8,11,15,.985),rgba(4,6,9,.995)); z-index:2147483644; overflow:hidden; }
    #image-modal-overlay .lightbox-right-pane .lightbox-post-detail-card { height:100%; max-height:100%; overflow:hidden; padding-bottom:0; }
    #image-modal-overlay .lightbox-post-info { overflow:hidden; }
    #image-modal-overlay .lightbox-post-text { -webkit-line-clamp:3; max-height:calc(1.55em * 3); overflow:hidden; }
    #image-modal-overlay .lightbox-post-actions { flex:0 0 auto; }

    #image-modal-overlay .lightbox-mobile-comments-toggle { position:fixed !important; left:0; right:0; bottom:0; width:100%; height:34px; min-height:34px; padding:5px 12px; border:1px solid rgba(229,158,0,.16); border-bottom:0; border-radius:14px 14px 0 0; background:rgba(7,9,12,.98); z-index:2147483646; display:grid; place-items:center; }
    #image-modal-overlay .lightbox-mobile-comments-toggle .lightbox-mobile-comments-handle { width:38px; height:4px; margin:0; background:rgba(255,255,255,.34); }
    #image-modal-overlay .lightbox-mobile-comments-toggle .lightbox-mobile-comments-label,
    #image-modal-overlay .lightbox-mobile-comments-toggle > svg { display:none !important; }

    /* Komment ikon vagy az alsó fogantyú -> csak a komment sheet jön fel. */
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-left-pane,
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport { height:calc(100vh - var(--lightbox-comments-height)); min-height:calc(100vh - var(--lightbox-comments-height)); }
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport { padding-bottom:18px; }
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport img,
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-image-viewport #image-modal-img { max-height:100%; }
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-right-pane { height:var(--lightbox-comments-height); max-height:var(--lightbox-comments-height); padding:34px 14px 10px; }
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-post-info { display:none !important; }
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-post-comments-only { display:flex !important; flex-direction:column; height:100%; min-height:0; }
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-media-comments-stream { flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; }
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-mobile-comments-toggle { bottom:var(--lightbox-comments-height); }
    #image-modal-overlay .lightbox-post-comments-only { min-height:0; }
    #image-modal-overlay .lightbox-comments-only-head { flex:0 0 auto; }
    #image-modal-overlay .lightbox-media-comment-input { flex:0 0 auto; padding-top:8px; }
}


/* ETAP 12 — MOBIL SHEET: natív lehúzás támogatása */
@media (max-width:700px) {
    #image-modal-overlay .lightbox-mobile-comments-toggle {
        touch-action: pan-y;
        cursor: grab;
    }
    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-mobile-comments-toggle:active {
        cursor: grabbing;
    }
}

/* ========================================================================
   ETAP 21 — MOBIL LIGHTBOX GESZTUSOK + POSZTLEÍRÁS KIBŐVÍTÉS
   - egyujjas bal/jobb lapozás a képen
   - kétujjas pinch-zoom + nagyított kép pásztázása
   - egyujjas lefelé húzás -> teljes Lightbox bezárása
   - „Tovább olvasom” -> a teljes posztpanel felnyílik, saját scrollal
   ======================================================================== */
@media (max-width:700px) {
    #image-modal-overlay .lightbox-image-viewport {
        touch-action: none;
        overscroll-behavior: none;
        user-select: none;
        -webkit-user-select: none;
    }

    #image-modal-overlay .lightbox-image-viewport img,
    #image-modal-overlay #image-modal-img {
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        will-change: transform;
        transform-origin: center center;
    }

    /* A „Tovább olvasom” nem tolja le többé az alsó ikon-sort:
       a teljes információs panel felnyílik, és a tartalom saját maga görgethető. */
    #image-modal-overlay.lightbox-post-expanded .lightbox-right-pane {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        width: 100vw;
        height: calc(100vh - 34px);
        max-height: calc(100vh - 34px);
        padding: 46px 14px 18px;
        overflow: hidden;
        transform: translateY(0);
        border-radius: 18px 18px 0 0;
        z-index: 2147483644;
    }

    #image-modal-overlay.lightbox-post-expanded .lightbox-right-pane .lightbox-post-detail-card {
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(229,158,0,.55) transparent;
        padding: 0 2px 54px;
    }

    #image-modal-overlay.lightbox-post-expanded .lightbox-post-info {
        overflow: visible;
    }

    #image-modal-overlay.lightbox-post-expanded .lightbox-post-text {
        max-height: none;
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    #image-modal-overlay.lightbox-post-expanded .lightbox-post-comments-only {
        display: none;
    }

    #image-modal-overlay.lightbox-post-expanded .lightbox-mobile-comments-toggle {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2147483646;
    }
}

/* ========================================================================
   ETAP 22 — RESPONSIVE MOBILE VIEWPORT + FINGER-FOLLOWING GESTURES
   Végleges felülírás az összes korábbi mobil Lightbox szabály fölött.
   - nincs háttéroldal-görgetés a Lightbox alatt
   - minden viewport-méretnél a teljes posztpanel hozzáférhető
   - a „Tovább olvasom” saját, teljes magasságú görgethető felületet kap
   - a kép lapozás közben ténylegesen követi az ujjat
   ======================================================================== */
html.dropx-lightbox-open,
body.dropx-lightbox-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

@media (max-width: 700px) {
    #image-modal-overlay {
        width: 100%;
        height: 100%;
        min-height: 100%;
        padding: 0;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
    }

    #image-modal-overlay .custom-split-lightbox-container {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        max-width: none;
        max-height: none;
        overflow: hidden;
        display: block;
        --lightbox-info-height: clamp(245px, 43dvh, 380px);
        --lightbox-comments-height: min(78dvh, 760px);
    }

    #image-modal-overlay .lightbox-left-pane {
        width: 100vw;
        height: calc(100dvh - var(--lightbox-info-height));
        min-height: calc(100dvh - var(--lightbox-info-height));
        overflow: hidden;
    }

    #image-modal-overlay .lightbox-image-viewport {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 58px 8px 76px;
        overflow: hidden;
        touch-action: none;
        overscroll-behavior: none;
    }

    #image-modal-overlay .lightbox-image-viewport img,
    #image-modal-overlay #image-modal-img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        will-change: transform;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
    }

    /* A rövid posztpanel semmilyen készülékméreten ne vágja le a saját tartalmát. */
    #image-modal-overlay .lightbox-right-pane {
        will-change: transform;
        touch-action: pan-y;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: var(--lightbox-info-height);
        max-height: var(--lightbox-info-height);
        min-height: 0;
        padding: 30px 14px calc(12px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        overflow: hidden;
        z-index: 2147483644;
        border: 0;
        border-top: 1px solid rgba(229,158,0,.18);
        border-radius: 18px 18px 0 0;
        transform: translateY(0);
        transition: transform .24s cubic-bezier(.22,.61,.36,1);
        background: linear-gradient(180deg, rgba(8,11,15,.985), rgba(4,6,9,.995));
        box-shadow: 0 -16px 50px rgba(0,0,0,.38);
    }

    #image-modal-overlay .lightbox-right-pane .lightbox-post-detail-card {
        width: 100%;
        height: 100%;
        max-height: none;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(229,158,0,.55) transparent;
        padding: 0 2px calc(24px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    #image-modal-overlay .lightbox-right-pane .lightbox-post-detail-card::-webkit-scrollbar {
        width: 4px;
    }

    #image-modal-overlay .lightbox-right-pane .lightbox-post-detail-card::-webkit-scrollbar-thumb {
        background: rgba(229,158,0,.55);
        border-radius: 99px;
    }

    #image-modal-overlay .lightbox-post-info {
        overflow: visible;
        min-width: 0;
    }

    #image-modal-overlay .lightbox-post-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        max-height: calc(1.55em * 3);
        overflow: hidden;
    }

    #image-modal-overlay .lightbox-post-text.expanded {
        display: block;
        max-height: none;
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    #image-modal-overlay .lightbox-post-text-wrap {
        min-width: 0;
    }

    #image-modal-overlay .lightbox-post-actions {
        width: 100%;
        flex: 0 0 auto;
    }

    #image-modal-overlay.lightbox-post-expanded .lightbox-left-pane,
    #image-modal-overlay.lightbox-post-expanded .lightbox-image-viewport {
        height: 0;
        min-height: 0;
        pointer-events: none;
    }

    #image-modal-overlay.lightbox-post-expanded .lightbox-right-pane {
        top: 0;
        bottom: 0;
        height: 100dvh;
        max-height: 100dvh;
        padding-top: calc(48px + env(safe-area-inset-top));
        padding-bottom: env(safe-area-inset-bottom);
        border-radius: 18px 18px 0 0;
    }

    #image-modal-overlay.lightbox-post-expanded .lightbox-right-pane .lightbox-post-detail-card {
        height: 100%;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }

    #image-modal-overlay .lightbox-mobile-comments-toggle {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 34px;
        min-height: 34px;
        padding: 5px 12px;
        box-sizing: border-box;
        z-index: 2147483646;
        border: 1px solid rgba(229,158,0,.16);
        border-bottom: 0;
        border-radius: 14px 14px 0 0;
        background: rgba(7,9,12,.98);
        transition: bottom .24s cubic-bezier(.22,.61,.36,1), transform .24s cubic-bezier(.22,.61,.36,1);
        touch-action: none;
    }

    #image-modal-overlay.lightbox-mobile-comments-open .lightbox-mobile-comments-toggle {
        bottom: var(--lightbox-comments-height);
    }

    #image-modal-overlay.lightbox-post-expanded .lightbox-mobile-comments-toggle {
        bottom: 0;
    }

}

/* Nagyon alacsony kijelző: kisebb belső hézagok, de semmi nem tűnik el. */
@media (max-width: 700px) and (max-height: 650px) {
    #image-modal-overlay .custom-split-lightbox-container {
        --lightbox-info-height: clamp(225px, 45dvh, 300px);
    }

    #image-modal-overlay .lightbox-right-pane {
        padding-top: 26px;
    }

    #image-modal-overlay .lightbox-image-viewport {
        padding-top: 48px;
        padding-bottom: 64px;
    }
}

@media (max-width: 360px) {
    #image-modal-overlay .custom-split-lightbox-container {
        --lightbox-info-height: clamp(235px, 45dvh, 340px);
    }

    #image-modal-overlay .lightbox-right-pane {
        padding-left: 10px;
        padding-right: 10px;
    }

    #image-modal-overlay .lightbox-post-text-wrap {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    #image-modal-overlay .lightbox-post-actions {
        min-height: 38px;
    }
}


/* =========================================================================
   DROPX MEDIA COMMENTS — V2 THREAD PRESENTATION
   A 2026-10-09-i aktív komment API lapos parent_id-listájához igazítva.
   Nem a korábbi Lightboxot cseréli le; csak a kommentfa megjelenítését bővíti.
   ========================================================================= */
.lightbox-media-comment-main {
    min-width: 0;
}

.lightbox-media-comment.is-reply {
    position: relative;
    margin-left: calc(12px + (var(--comment-depth, 1) - 1) * 10px);
    border-left: 1px solid rgba(229, 158, 0, .18);
}

.lightbox-media-comment.is-reply::before {
    content: '';
    position: absolute;
    left: -11px;
    top: 25px;
    width: 9px;
    border-top: 1px solid rgba(229, 158, 0, .22);
}

.lightbox-media-comment-thread {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 7px 0 0 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(229, 158, 0, .18);
}

.lightbox-media-comment-replies-extra[hidden] {
    display: none;
}

.lightbox-media-replies-toggle {
    align-self: flex-start;
    border: 0;
    padding: 3px 4px;
    background: transparent;
    color: var(--color-gold, #e59e00);
    font: 800 .66rem 'Rajdhani', sans-serif;
    cursor: pointer;
}

.lightbox-media-replies-toggle:hover {
    text-decoration: underline;
}

/* A műveleti sáv legyen láthatóan a kommenthez tartozó, enyhébb alsó réteg. */
.lightbox-media-comment-actions {
    width: calc(100% - 12px);
    margin: 6px auto 0;
    min-height: 27px;
    padding: 3px 6px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 7px;
    background: rgba(255,255,255,.018);
}

.lightbox-media-comment-reply-target {
    margin: 0 0 5px 2px;
}

@media (max-width: 620px) {
    .lightbox-media-comment.is-reply {
        margin-left: calc(8px + (var(--comment-depth, 1) - 1) * 7px);
    }

    .lightbox-media-comment-thread {
        margin-left: 6px;
        padding-left: 7px;
    }

    .lightbox-media-comment-actions {
        width: calc(100% - 6px);
    }
}

/* ========================================================================
   DROPX COMMENT THREAD V33 — reply context + inline reply composer
   ======================================================================== */
.custom-split-lightbox-container {
    grid-template-columns: minmax(0, 1fr) minmax(345px, 378px);
}

.dx-media-comment-reply-target {
    flex-wrap: wrap;
}

.dx-media-comment-reply-target small {
    flex-basis: 100%;
    display: block;
    margin-left: 18px;
    margin-top: 2px;
    color: rgba(164,170,178,.70);
    font-size: .61rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dx-media-comment-active-reaction {
    display: inline-grid;
    min-width: 18px;
    min-height: 18px;
    place-items: center;
    font-size: 15px;
    line-height: 1;
}

.dx-media-comment-react-trigger.is-reacted {
    color: #f04a62;
}

.dx-media-comment-reply-box {
    margin: 6px 0 2px 14px;
    padding: 7px;
    border: 1px solid rgba(229,158,0,.16);
    border-radius: 8px;
    background: rgba(229,158,0,.025);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.dx-media-comment-reply-box[hidden] {
    display: none;
}

.dx-media-comment-reply-box-target {
    margin: 0 0 5px 2px;
    color: rgba(229,158,0,.88);
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.3;
}

.dx-media-comment-reply-box-target small {
    display: block;
    margin-top: 2px;
    color: rgba(164,170,178,.68);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dx-media-comment-reply-editor {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dx-media-comment-reply-input {
    min-width: 0;
    flex: 1 1 auto;
    height: 32px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 7px;
    outline: none;
    background: rgba(0,0,0,.24);
    color: var(--text-light,#f4f6f8);
    font: inherit;
    font-size: .72rem;
}

.dx-media-comment-reply-input:focus {
    border-color: rgba(229,158,0,.52);
    box-shadow: 0 0 0 2px rgba(229,158,0,.06);
}

.dx-media-comment-reply-submit {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(229,158,0,.28);
    border-radius: 7px;
    background: rgba(229,158,0,.08);
    color: var(--color-gold,#e59e00);
    cursor: pointer;
}

.dx-media-comment-reply-submit:hover {
    background: rgba(229,158,0,.14);
}

@media (max-width: 900px) {
    .custom-split-lightbox-container {
        grid-template-columns: 1fr;
    }
}


/* DROPX 2026-10-09: a Lightbox jobb oldali panelje desktopon 5%-kal szélesebb.
   Mobilon az egyoszlopos elrendezést nem módosítjuk. */
@media (min-width: 901px) {
    #image-modal-overlay .custom-split-lightbox-container {
        grid-template-columns: minmax(0, 1fr) minmax(362px, 397px);
    }
}

/* Az aktív külön ablaké a billentyűzetes lapozás; a háttér feed ne lapozzon. */
body.dropx-lightbox-open .post-feed,
body.dropx-lightbox-open .profile-posts,
body.dropx-lightbox-open .feed-pagination,
body.dropx-lightbox-open .post-navigation-arrows {
    pointer-events: none;
}