/* DropX social composer: mentions and automatic link previews. */
.dx-mention-host { position: relative; }
.dx-mention-menu { position: absolute; z-index: 1200; inset-inline: 0; bottom: calc(100% + 7px); max-height: 280px; overflow-y: auto; padding: 6px; border: 1px solid rgba(205, 166, 70, .65); border-radius: 13px; background: var(--surface-elevated, #171717); color: var(--text-primary, #f4f0e7); box-shadow: 0 12px 34px rgba(0,0,0,.32); }
.dx-mention-option { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 9px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.dx-mention-option:hover, .dx-mention-option[aria-selected="true"] { background: rgba(205,166,70,.16); }
.dx-mention-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; overflow: hidden; border-radius: 50%; background: rgba(205,166,70,.14); }
.dx-mention-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dx-mention-label { display: grid; gap: 2px; min-width: 0; }
.dx-mention-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.dx-mention-label small { opacity: .68; font-size: .75rem; }
.dx-composer-link-previews { display: grid; gap: 8px; margin-top: 10px; }
.dx-link-preview-holder { margin-top: 10px; }
.dx-link-preview, .dx-link-preview-loading { display: flex; overflow: hidden; width: 100%; min-width: 0; border: 1px solid rgba(193, 157, 68, .38); border-radius: 12px; color: inherit; background: var(--surface-card, rgba(20,20,20,.7)); text-decoration: none; }
.dx-link-preview { align-items: stretch; transition: border-color .18s ease, transform .18s ease; }
.dx-link-preview:hover { border-color: rgba(221, 184, 88, .85); transform: translateY(-1px); }
.dx-link-preview-image { display: block; width: 32%; max-width: 190px; min-height: 110px; max-height: 170px; object-fit: cover; background: rgba(128,128,128,.12); }
.dx-link-preview-body { display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 14px; }
.dx-link-preview-title { display: -webkit-box; overflow: hidden; color: var(--text-primary, inherit); font-size: .94rem; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dx-link-preview-description { display: -webkit-box; overflow: hidden; color: var(--text-secondary, #a7a7a7); font-size: .82rem; line-height: 1.4; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.dx-link-preview-domain { overflow: hidden; color: #c9a64d; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.dx-link-preview-loading { align-items: center; padding: 14px; color: var(--text-secondary, #a7a7a7); font-size: .85rem; }
.dx-link-preview-compact .dx-link-preview-image { width: 26%; max-width: 120px; min-height: 76px; max-height: 100px; }
.dx-link-preview-compact .dx-link-preview-body { padding: 9px 11px; }
@media (max-width: 600px) { .dx-link-preview-image { width: 30%; max-width: 120px; min-height: 90px; } .dx-link-preview-description { -webkit-line-clamp: 2; } .dx-mention-menu { max-height: 240px; } }

.dx-mention-link { color: #d6b45a; font-weight: 650; text-decoration: none; border-radius: 4px; }
.dx-mention-link:hover { color: #f0d78b; text-decoration: underline; }
body:not(.theme-dark):not(.dark-mode) .dx-mention-menu { background: #f6f0e5; color: #29251e; box-shadow: 0 12px 34px rgba(62, 49, 23, .18); }
body:not(.theme-dark):not(.dark-mode) .dx-link-preview,
body:not(.theme-dark):not(.dark-mode) .dx-link-preview-loading { background: #f8f3e9; color: #29251e; border-color: rgba(170, 132, 44, .38); }
body:not(.theme-dark):not(.dark-mode) .dx-link-preview-title { color: #29251e; }
body:not(.theme-dark):not(.dark-mode) .dx-link-preview-description { color: #655e52; }
body.theme-dark .dx-mention-menu,
body.dark-mode .dx-mention-menu { background: #171717; color: #f4f0e7; }
body.theme-dark .dx-link-preview,
body.theme-dark .dx-link-preview-loading,
body.dark-mode .dx-link-preview,
body.dark-mode .dx-link-preview-loading { background: rgba(20,20,20,.92); color: #f4f0e7; }
body.theme-dark .dx-link-preview-title,
body.dark-mode .dx-link-preview-title { color: #f4f0e7; }
body.theme-dark .dx-link-preview-description,
body.dark-mode .dx-link-preview-description { color: #a7a7a7; }

/* Link preview polish: favicon, close control and stable single-card layout. */
.dx-composer-link-previews { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
.dx-composer-link-previews:empty { display: none; margin: 0; }
.dx-link-preview-wrap { position: relative; display: flex; width: 100%; min-width: 0; margin-top: 8px; box-sizing: border-box; }
.dx-link-preview-wrap .dx-link-preview { flex: 1; min-width: 0; padding-right: 30px; }
.dx-link-preview-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dx-link-preview-heading .dx-link-preview-title { flex: 1; min-width: 0; }
.dx-link-preview-favicon { display: block; width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; border-radius: 4px; background: rgba(128,128,128,.12); }
.dx-link-preview-favicon-fallback { width: 22px; height: 22px; flex: 0 0 22px; display: inline-grid; place-items: center; font-size: 17px; opacity: .7; }
.dx-link-preview-remove { position: absolute; z-index: 2; top: 6px; right: 6px; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(190,160,82,.45); border-radius: 7px; color: inherit; background: rgba(20,20,20,.72); font-size: 19px; line-height: 1; cursor: pointer; }
.dx-link-preview-remove:hover { border-color: #d9b34f; color: #f0cf70; }
.dx-link-preview-loading { box-sizing: border-box; min-height: 42px; }
.dx-mention-host { min-width: 0; }
.dx-mention-menu { box-sizing: border-box; }
@media (max-width: 600px) { .dx-link-preview-favicon, .dx-link-preview-favicon-fallback { width: 20px; height: 20px; flex-basis: 20px; } }
/* Mention suggestions remain visible while the server request is pending or has no matches. */
.dx-mention-menu:empty { display: none; }
.dx-mention-empty { padding: 10px 12px; color: var(--text-secondary, #a7a7a7); font-size: .82rem; }
.dx-mention-host { overflow: visible; }
.dx-mention-menu { min-height: 38px; }

/* V4: autocomplete is anchored to the actual @caret, not the whole composer/modal. */
/* The floating panel keeps top/left from positionMentionMenu(); avoid inset shorthands that reset those coordinates. */
.dx-mention-menu-floating { position: fixed; inset-inline: auto; right: auto; bottom: auto; z-index: 2147483000; width: min(360px, calc(100vw - 24px)); max-height: min(280px, 45vh); overflow-y: auto; overscroll-behavior: contain; }
.dx-link-preview-no-image .dx-link-preview-body { min-width: 0; }
.dx-link-preview-image { flex: 0 0 auto; }
.dx-link-preview-favicon[hidden], .dx-link-preview-favicon-fallback[hidden] { display: none; }

/* V5: the preview uses a large left-side image; no favicon badge beside the title. */
.dx-link-preview-image { flex: 0 0 32%; width: 32%; min-width: 90px; object-fit: cover; }
.dx-link-preview-image-failed { display: none; }
.dx-link-preview-body { align-items: flex-start; }
.dx-link-preview-title { margin: 0; }
@media (max-width: 600px) { .dx-link-preview-image { flex-basis: 30%; width: 30%; min-width: 76px; } }

/* V8: body-level autocomplete must remain interactive above modal layers. */
.dx-mention-menu-floating { z-index: 2147483647; pointer-events: auto; isolation: isolate; }
.dx-mention-menu-floating .dx-mention-option { pointer-events: auto; }

/* V9: stable floating autocomplete above composers and modal comment threads. */
.dx-mention-menu-floating { display: block; visibility: visible; opacity: 1; position: fixed; z-index: 2147483647; pointer-events: auto; max-height: min(280px, 45vh); overflow-y: auto; transform: none; }
.dx-mention-menu-floating .dx-mention-option { display: flex; visibility: visible; opacity: 1; pointer-events: auto; }


/* Selected mentions in the composer and avatar-bearing mentions in published text. */
.dx-selected-mentions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; margin-top: 8px; }
.dx-selected-mention { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px 4px 5px; border: 1px solid rgba(205,166,70,.55); border-radius: 999px; background: rgba(205,166,70,.12); color: inherit; font-size: .82rem; line-height: 1.2; }
.dx-selected-mention img, .dx-selected-mention-fallback { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; object-fit: cover; }
.dx-selected-mention-fallback { background: rgba(205,166,70,.18); }
.dx-selected-mention-remove { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 17px; cursor: pointer; }
.dx-selected-mention-remove:hover { background: rgba(205,166,70,.2); }
.dx-mention-inline { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; vertical-align: baseline; white-space: nowrap; }
.dx-mention-inline-avatar { display: inline-block; width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%; object-fit: cover; vertical-align: -4px; border: 1px solid rgba(205,166,70,.6); }
.comment-content .dx-mention-inline-avatar,
.comment-text .dx-mention-inline-avatar { vertical-align: -6px; }
.dx-mention-inline .dx-mention-link { display: inline; }


/* Group mentions render as compact social cards, matching the existing link-preview rhythm. */
.dx-group-mention-card { display: block; overflow: hidden; width: 100%; min-width: 0; margin: 10px 0 4px; border: 1px solid rgba(193,157,68,.45); border-radius: 12px; color: inherit; background: var(--surface-card, rgba(20,20,20,.7)); text-decoration: none; }
.dx-group-mention-cover { height: 74px; overflow: hidden; background: linear-gradient(120deg, rgba(205,166,70,.2), rgba(90,90,90,.12)); }
.dx-group-mention-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dx-group-mention-body { display: flex; align-items: center; gap: 11px; padding: 10px 12px; }
.dx-group-mention-avatar { display: block; width: 48px; height: 48px; flex: 0 0 48px; border: 1px solid rgba(205,166,70,.6); border-radius: 12px; object-fit: cover; background: rgba(128,128,128,.12); }
.dx-group-mention-info { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.dx-group-mention-info strong { overflow-wrap: anywhere; font-size: .96rem; line-height: 1.3; }
.dx-group-mention-meta, .dx-group-mention-owner { color: var(--text-secondary, #a7a7a7); font-size: .77rem; line-height: 1.35; overflow-wrap: anywhere; }
.dx-group-mention-card:hover { border-color: rgba(221,184,88,.85); }
body:not(.theme-dark):not(.dark-mode) .dx-group-mention-card { color: #29251e; background: #f8f3e9; }
body:not(.theme-dark):not(.dark-mode) .dx-group-mention-meta, body:not(.theme-dark):not(.dark-mode) .dx-group-mention-owner { color: #655e52; }
body.theme-dark .dx-group-mention-card, body.dark-mode .dx-group-mention-card { color: #f4f0e7; background: rgba(20,20,20,.92); }
@media (max-width: 600px) {
  .dx-selected-mentions { gap: 5px; }
  .dx-selected-mention { max-width: 100%; font-size: .8rem; }
  .dx-group-mention-cover { height: 62px; }
  .dx-group-mention-body { gap: 9px; padding: 9px; }
  .dx-group-mention-avatar { width: 42px; height: 42px; flex-basis: 42px; border-radius: 10px; }
  .dx-group-mention-meta, .dx-group-mention-owner { font-size: .73rem; }
}


/* Companion summary belongs in the post author header, not in the post body. */
.post-card .dx-post-companions,
.group-feed-post-card .dx-post-companions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    margin: 3px 0 1px;
    color: var(--text-secondary, #a7a7a7);
    font-size: .84rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.post-card .dx-post-companions .dx-mention-inline,
.group-feed-post-card .dx-post-companions .dx-mention-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    vertical-align: middle;
}
.post-card .dx-post-companions .dx-mention-inline-avatar,
.group-feed-post-card .dx-post-companions .dx-mention-inline-avatar {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid rgba(205, 166, 70, .72);
    border-radius: 50%;
    object-fit: cover;
}
.post-card .dx-post-companions .dx-mention-link,
.group-feed-post-card .dx-post-companions .dx-mention-link {
    font-size: inherit;
    white-space: normal;
}
body:not(.theme-dark):not(.dark-mode) .post-card .dx-post-companions,
body:not(.theme-dark):not(.dark-mode) .group-feed-post-card .dx-post-companions {
    color: #655e52;
}
@media (max-width: 600px) {
    .post-card .dx-post-companions,
    .group-feed-post-card .dx-post-companions {
        gap: 3px;
        margin-top: 4px;
        font-size: .78rem;
        line-height: 1.3;
    }
    .post-card .dx-post-companions .dx-mention-inline-avatar,
    .group-feed-post-card .dx-post-companions .dx-mention-inline-avatar {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }
}


/* Official post order: compact companion line lives inline beside the author name. */
.post-card .post-author-name .dx-post-companions,
.group-feed-post-card .author-title-line .dx-post-companions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    margin: 0 0 0 7px;
    color: var(--text-secondary, #a7a7a7);
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    vertical-align: middle;
}
.dx-post-companions-icon { display: inline-block; flex: 0 0 auto; }
.post-card .post-author-name .dx-post-companions .dx-mention-inline,
.group-feed-post-card .author-title-line .dx-post-companions .dx-mention-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
}
.post-card .post-author-name .dx-post-companions .dx-mention-inline-avatar,
.group-feed-post-card .author-title-line .dx-post-companions .dx-mention-inline-avatar {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid rgba(205,166,70,.72);
    border-radius: 50%;
    object-fit: cover;
}
.dx-group-mention-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin: 10px 0 2px;
}
.dx-group-mention-section .dx-group-mention-card { margin: 0; min-width: 0; }
.dx-group-mention-section .dx-group-mention-cover { height: 64px; }
@media (max-width: 600px) {
    .post-card .post-author-name .dx-post-companions,
    .group-feed-post-card .author-title-line .dx-post-companions {
        gap: 4px;
        margin-left: 5px;
        font-size: inherit;
        line-height: inherit;
        font-weight: inherit;
    }
    .post-card .post-author-name .dx-post-companions .dx-mention-inline-avatar,
    .group-feed-post-card .author-title-line .dx-post-companions .dx-mention-inline-avatar { width: 20px; height: 20px; flex-basis: 20px; }
    .dx-group-mention-section { gap: 7px; }
    .dx-group-mention-section .dx-group-mention-cover { height: 52px; }
    .dx-group-mention-section .dx-group-mention-body { align-items: flex-start; gap: 7px; padding: 8px; }
    .dx-group-mention-section .dx-group-mention-avatar { width: 34px; height: 34px; flex-basis: 34px; }
    .dx-group-mention-section .dx-group-mention-meta,
    .dx-group-mention-section .dx-group-mention-owner { font-size: .68rem; }
}
@media (max-width: 380px) {
    .dx-group-mention-section { grid-template-columns: minmax(0, 1fr); }
}


/* Structured group mentions use a compact two-column card grid after post media. */
.post-card .post-body-container > .dx-group-mention-section,
.post-card > .dx-group-mention-section,
.group-feed-post-card .dx-group-mention-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
    min-width: 0;
}
.dx-group-mention-section .dx-group-mention-card { margin: 0; min-width: 0; }
.dx-group-mention-section .dx-group-mention-cover { height: 62px; }
.dx-group-mention-section .dx-group-mention-body { align-items: flex-start; padding: 9px; gap: 8px; }
.dx-group-mention-section .dx-group-mention-avatar { width: 38px; height: 38px; flex-basis: 38px; }
.dx-group-mention-section .dx-group-mention-meta,
.dx-group-mention-section .dx-group-mention-owner { font-size: .72rem; }
.post-edit-container .dx-selected-mentions,
.group-post-edit-box .dx-selected-mentions { margin: 8px 0; }
.post-edit-container .dx-composer-link-previews,
.group-post-edit-box .dx-composer-link-previews { margin: 8px 0 12px; }
@media (max-width: 600px) {
    .post-card .post-body-container > .dx-group-mention-section,
    .post-card > .dx-group-mention-section,
    .group-feed-post-card .dx-group-mention-section { grid-template-columns: minmax(0, 1fr); }
}


/* DropX companion header: keep author metadata stable and status icons beside each name. */
.post-card .post-author-info,
.group-feed-post-card .post-author-info {
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
}
.post-card .post-author-text,
.group-feed-post-card .post-author-text {
    min-width: 0;
}
.post-card .post-author-name,
.group-feed-post-card .author-title-line {
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 5px;
    row-gap: 4px;
    min-width: 0;
    line-height: 1.25;
}
.post-card .dx-post-companions,
.group-feed-post-card .dx-post-companions {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 0 5px;
    color: var(--text-secondary, #a7a7a7);
    font-size: .94em;
    line-height: 1.25;
    font-weight: 600;
    vertical-align: middle;
}
.dx-post-companions-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
}
.dx-companion-person,
.dx-post-companions .dx-mention-inline {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    line-height: 1.2;
    vertical-align: middle;
}
.dx-post-companions .dx-mention-inline-avatar {
    display: block;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    margin: 0;
    vertical-align: middle;
}
.dx-post-companions .dx-mention-link {
    display: inline-block;
    font-size: inherit;
    line-height: 1.2;
    white-space: nowrap;
}
.dx-companion-status-badges {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    line-height: 1;
}
.dx-companion-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    font-size: .86em;
    line-height: 1;
    vertical-align: middle;
}
.dx-companion-status-donor { color: #e8bd45; }
.dx-companion-status-warned { color: #f0a53a; }
.dx-companion-status-banned { color: #ed6262; }
.dx-companions-more-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}
.dx-companions-more-toggle {
    display: inline;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary, #b7b7b7);
    font: inherit;
    line-height: 1.25;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: rgba(205,166,70,.5);
    text-underline-offset: 3px;
    white-space: normal;
    cursor: pointer;
}
.dx-companions-more-toggle:hover,
.dx-companions-more-toggle[aria-expanded="true"] { color: var(--color-gold, #e5b943); }
.dx-companions-more-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: max-content;
    min-width: 220px;
    max-width: min(340px, calc(100vw - 36px));
    max-height: min(300px, 45vh);
    overflow: auto;
    padding: 10px 12px;
    border: 1px solid rgba(205,166,70,.58);
    border-radius: 12px;
    background: var(--surface-elevated, #171717);
    color: var(--text-primary, #f4f0e7);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.dx-companions-more-panel[hidden] { display: none; }
.dx-companions-more-person { display: flex; align-items: center; min-width: 0; }
.dx-companions-more-person .dx-companion-person { flex-wrap: nowrap; }
.dx-companions-more-person .dx-mention-link { overflow-wrap: anywhere; white-space: normal; }
body:not(.theme-dark):not(.dark-mode) .dx-companions-more-panel {
    background: #fbf7ef;
    color: #29251e;
    border-color: rgba(151,117,40,.5);
}
body:not(.theme-dark):not(.dark-mode) .dx-companions-more-toggle { color: #5d5547; }
@media (max-width: 600px) {
    .post-card .post-author-name,
    .group-feed-post-card .author-title-line { gap: 4px; row-gap: 4px; }
    .post-card .dx-post-companions,
    .group-feed-post-card .dx-post-companions { gap: 4px; margin-left: 3px; font-size: .82em; }
    .dx-post-companions .dx-mention-inline-avatar { width: 17px; height: 17px; flex-basis: 17px; }
    .dx-companions-more-panel { min-width: min(220px, calc(100vw - 36px)); }
}


/* Megjelölt személyek: jól olvasható, egységes méret a globális és csoportposztokban. */
.post-card .dx-post-companions,
.group-feed-post-card .dx-post-companions {
    font-size: 1rem;
    line-height: 1.35;
    gap: 7px;
}
.post-card .dx-post-companions .dx-mention-inline-avatar,
.group-feed-post-card .dx-post-companions .dx-mention-inline-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
}
.post-card .dx-post-companions .dx-mention-link,
.group-feed-post-card .dx-post-companions .dx-mention-link {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}
@media (max-width: 600px) {
    .post-card .dx-post-companions,
    .group-feed-post-card .dx-post-companions { font-size: .94rem; gap: 6px; }
    .post-card .dx-post-companions .dx-mention-inline-avatar,
    .group-feed-post-card .dx-post-companions .dx-mention-inline-avatar {
        width: 25px; height: 25px; flex-basis: 25px;
    }
    .post-card .dx-post-companions .dx-mention-link,
    .group-feed-post-card .dx-post-companions .dx-mention-link { font-size: .94rem; }
}