/* ==========================================================================
   XP_ADMIN.CSS — «Управление сообществом» и «Правка записи»
   (community_admin.js) в виде окон «Свойства» Windows XP
   --------------------------------------------------------------------------
   Заголовок Luna, вкладки-корешки, белый лист, рамки-группы, кнопки
   «Отмена / Сохранить» справа внизу. Состав — список «Таблица»,
   журнал — «Просмотр событий». Подключается после community_admin.css,
   поэтому правила начинаются с id окна — так они перебивают старые.
   ========================================================================== */

/* ==========================================================================
   ОКНО
   ========================================================================== */
#edit-community-modal .xpa-window,
#edit-post-modal .xpa-window {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(90vh, 760px);
    padding: 0 !important;
    background: #ece9d8 !important;
    border: 3px solid #0831d9 !important;
    border-top: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: 0 0 0 1px rgba(0, 20, 90, 0.4), 4px 8px 26px rgba(0, 0, 0, 0.45) !important;
    font: 11px Tahoma, sans-serif;
    color: #000;
    overflow: hidden;
    animation: xpa-in 0.14s ease-out;
}
#edit-community-modal .xpa-window { max-width: 560px !important; }
#edit-post-modal .xpa-window { max-width: 500px !important; }

@keyframes xpa-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

.xpa-caption {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    flex-shrink: 0;
    padding: 0 5px 0 7px;
    background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7 100%);
    border-radius: 7px 7px 0 0 / 8px 8px 0 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #fff;
    font: bold 13px "Trebuchet MS", Tahoma, sans-serif;
    text-shadow: 1px 1px 0 #0f1089;
    user-select: none;
}
.xpa-caption .xpi { width: 16px; height: 16px; flex-shrink: 0; filter: drop-shadow(1px 1px 0 rgba(0, 0, 40, 0.35)); }
.xpa-caption-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.xpa-close {
    width: 21px;
    height: 21px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid #fff;
    border-radius: 3px !important;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M6 6l9 9M15 6l-9 9' stroke='%23fff' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center / 100% 100%,
                linear-gradient(135deg, #f4a184 0%, #e3633b 38%, #d0441b 70%, #b8360f 100%);
    box-shadow: inset -1px -1px 1px rgba(0, 0, 60, 0.45), inset 1px 1px 1px rgba(255, 255, 255, 0.55);
}
.xpa-close:hover { filter: brightness(1.15); }
.xpa-close:active { filter: brightness(0.9); box-shadow: inset 1px 1px 2px rgba(0, 0, 50, 0.6); }

/* Лист свойств: вкладки + белая страница */
.xpa-sheet {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 8px 8px;
}

#edit-community-modal .comm-settings-tabs {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    padding: 0 3px;
    margin: 0;
    border: 0;
    background: transparent;
    overflow-x: auto;
    scrollbar-width: none;
    position: relative;
    z-index: 1;
}
#edit-community-modal .comm-settings-tabs::-webkit-scrollbar { display: none; }

#edit-community-modal .comm-settings-tabs .xp-tab-btn {
    flex-shrink: 0;
    margin: 0 0 -1px;
    padding: 3px 10px 3px;
    font: 11px Tahoma, sans-serif;
    color: #000;
    background: linear-gradient(180deg, #ffffff 0%, #f4f3ee 60%, #e6e4da 100%);
    border: 1px solid #919b9c;
    border-bottom: 0;
    border-radius: 3px 3px 0 0 !important;
    box-shadow: none;
    cursor: pointer;
}
#edit-community-modal .comm-settings-tabs .xp-tab-btn:hover { box-shadow: inset 0 2px 0 #ffc83c; }
#edit-community-modal .comm-settings-tabs .xp-tab-btn.active {
    padding-top: 5px;
    padding-bottom: 4px;
    margin-left: -2px;
    margin-right: -2px;
    padding-left: 12px;
    padding-right: 12px;
    background: #fcfcfe;
    box-shadow: inset 0 3px 0 #e68b2c, inset 0 2px 0 #ffc83c;
    font-weight: normal;
}
#edit-community-modal .comm-settings-tabs .xp-tab-btn:first-child.active { margin-left: 0; }

#edit-community-modal .comm-settings-body {
    flex: 1;
    min-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px;
    background: #fcfcfe;
    border: 1px solid #919b9c;
    box-shadow: 1px 1px 0 #fff inset;
    font-size: 11px;
}

#edit-post-modal .xpa-pane {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 8px;
    padding: 10px 12px 12px;
    background: #fcfcfe;
    border: 1px solid #919b9c;
}

/* ==========================================================================
   ЭЛЕМЕНТЫ ФОРМЫ
   ========================================================================== */
.xpa-window .input-field {
    padding: 3px 5px;
    border: 1px solid #7f9db9 !important;
    font: 11px Tahoma, sans-serif;
    background: #fff;
    min-height: 23px;
}
.xpa-window .input-field:focus { border-color: #316ac5 !important; box-shadow: 0 0 0 1px rgba(49, 106, 197, 0.2); }
.xpa-window select.input-field { padding: 2px 3px; }
.xpa-window input[type="file"].input-field { padding: 2px; min-height: 0; background: transparent; border: 0 !important; }

/* Первая строка как в «Свойствах» файла: значок + имя */
.xpa-ident {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 0 10px;
}
.xpa-ident-ava {
    width: 36px !important;
    height: 36px !important;
    max-height: none !important;
    object-fit: cover !important;
    flex-shrink: 0;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px #9db1d6, 1px 2px 3px rgba(0, 20, 80, 0.25);
}
.xpa-ident .input-field { flex: 1; min-width: 0; font-weight: bold; font-size: 12px; margin: 0 !important; }

.xpa-sep {
    height: 2px;
    margin: 0 0 10px;
    border-top: 1px solid #d0d0bf;
    border-bottom: 1px solid #fff;
}

.xpa-props {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
}
.xpa-prop-label { color: #000; font-size: 11px; }
.xpa-props .input-field { width: 100%; margin: 0 !important; }
.xpa-props .xpa-prop-label[for="comm-edit-desc"] { align-self: start; padding-top: 4px; }

.xpa-link-field { display: flex; align-items: center; gap: 4px; min-width: 0; }
.xpa-link-prefix { color: #6b6b6b; font-size: 11px; white-space: nowrap; }
.xpa-link-field .input-field { flex: 1; min-width: 0; }

.xpa-textarea { height: 78px; resize: vertical; }

.xpa-window fieldset.xpa-group {
    margin: 12px 0 0;
    padding: 6px 10px 10px;
    border: 1px solid #d0d0bf;
    border-radius: 4px !important;
    min-width: 0;
}
.xpa-window fieldset.xpa-group > legend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 4px;
    color: #0046d5;
    font: 11px Tahoma, sans-serif;
}
.xpa-window fieldset.xpa-group > legend .xpi { width: 16px; height: 16px; }

.xpa-check {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 11px;
}
.xpa-check input { margin: 0; flex-shrink: 0; }

.xpa-field-label { display: block; margin: 6px 0 3px; font-size: 11px; color: #000; }
.xpa-field-label:first-child { margin-top: 2px; }
.xpa-group-hint { margin: 2px 0 6px; font-size: 11px; color: #555; }

/* Скин группы: список + мини-окно с цветом заголовка темы */
.xpa-theme-row { display: flex; align-items: center; gap: 10px; }
.xpa-theme-row .input-field { flex: 1; min-width: 0; margin: 0 !important; }
.xpa-theme-swatch {
    position: relative;
    width: 62px;
    height: 34px;
    flex-shrink: 0;
    background: #ece9d8;
    border: 1px solid #0831d9;
    border-radius: 4px 4px 0 0 !important;
    overflow: hidden;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
}
.xpa-theme-swatch::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 10px;
    background: linear-gradient(180deg, #0997ff 0%, #0053ee 20%, #0066ff 80%, #003dd7 100%);
}
.xpa-theme-swatch i {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 15px;
    bottom: 5px;
    background: #fff;
    border: 1px solid #a5a191;
}
.xpa-theme-swatch[data-theme="homestead"] { border-color: #6f8a3a; }
.xpa-theme-swatch[data-theme="homestead"]::before { background: linear-gradient(180deg, #e3eac6 0%, #b5c57e 35%, #94ab52 80%, #7c943e 100%); }
.xpa-theme-swatch[data-theme="metallic"] { border-color: #8e8fa6; }
.xpa-theme-swatch[data-theme="metallic"]::before { background: linear-gradient(180deg, #ffffff 0%, #e2e2ec 35%, #bcbdcf 80%, #a5a6bb 100%); }
.xpa-theme-swatch[data-theme="classic"] { border: 2px outset #d4d0c8; border-radius: 0 !important; background: #d4d0c8; }
.xpa-theme-swatch[data-theme="classic"]::before { height: 9px; background: linear-gradient(90deg, #0a246a 0%, #a6caf0 100%); }
.xpa-theme-swatch[data-theme="classic"] i { top: 13px; border: 2px inset #fff; }

/* Кнопки диалога — справа внизу, как «ОК / Отмена» */
.xpa-dialog-btns {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 14px;
}
.xpa-dialog-btns .btn { min-width: 84px; margin: 0; }

/* Подсказка — жёлтая «всплывающая» плашка XP */
#edit-community-modal .comm-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 10px;
    padding: 7px 9px;
    font-size: 11px;
    line-height: 1.5;
    color: #222;
    background: #ffffe1;
    border: 1px solid #c9bf86;
}
#edit-community-modal .comm-hint .xpi { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

#edit-community-modal .comm-empty,
#edit-post-modal .comm-empty {
    padding: 18px 10px;
    text-align: center;
    font-size: 11px;
    color: #6b6b6b;
    line-height: 1.5;
}
#edit-community-modal .comm-empty .xpi { display: block; margin: 0 auto 6px; opacity: 0.8; }
#edit-community-modal .comm-empty.xpa-empty-sm { padding: 6px 4px; text-align: left; }

/* ==========================================================================
   ВКЛАДКА «ОФОРМЛЕНИЕ» — миниатюры как в «Свойствах экрана»
   ========================================================================== */
#edit-community-modal .comm-bg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
}
#edit-community-modal .comm-bg-card {
    padding: 4px 4px 3px;
    border: 1px solid transparent;
    text-align: center;
    cursor: pointer;
    background: transparent;
}
#edit-community-modal .comm-bg-card:hover { border-color: #c3d3f2; background: #f2f6fd; }
#edit-community-modal .comm-bg-card:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }
/* «Монитор»: тёмная рамка с бликом */
#edit-community-modal .comm-bg-preview {
    position: relative;
    height: 68px;
    border: 4px solid #3c3f48;
    border-bottom-width: 7px;
    box-shadow: 0 0 0 1px #1d1f24, 1px 2px 4px rgba(0, 0, 0, 0.3);
}
#edit-community-modal .comm-bg-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
}
#edit-community-modal .comm-bg-preview.comm-bg-none {
    background:
        radial-gradient(ellipse 120% 70% at 30% 120%, #3a931c 0%, #56b02c 60%, transparent 61%),
        linear-gradient(180deg, #2b6fe0 0%, #79b4f7 70%, #a9d2ff 100%);
}
#edit-community-modal .comm-bg-title {
    display: inline-block;
    max-width: 100%;
    margin-top: 4px;
    padding: 0 3px;
    font-size: 11px;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#edit-community-modal .comm-bg-card.active .comm-bg-preview { box-shadow: 0 0 0 2px #316ac5, 1px 2px 4px rgba(0, 0, 0, 0.3); }
#edit-community-modal .comm-bg-card.active .comm-bg-title { background: #316ac5; color: #fff; }

/* ==========================================================================
   ВКЛАДКА «СОСТАВ»
   ========================================================================== */
#edit-community-modal .comm-block-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 6px;
    font: 11px Tahoma, sans-serif;
    color: #0046d5;
}
#edit-community-modal .comm-block-title .xpi { width: 16px; height: 16px; }

/* Блок «Назначить из друзей» — рамка-группа с подписью на линии */
#edit-community-modal .comm-assign-box {
    position: relative;
    margin: 14px 0 8px;
    padding: 12px 10px 10px;
    background: transparent;
    border: 1px solid #d0d0bf;
    border-radius: 4px !important;
}
#edit-community-modal .comm-assign-box > .comm-block-title {
    position: absolute;
    top: -8px;
    left: 8px;
    margin: 0;
    padding: 0 4px;
    background: #fcfcfe;
}
#edit-community-modal .comm-assign-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}
#edit-community-modal .comm-assign-row .input-field { margin: 0 !important; width: 100%; }
#edit-community-modal .comm-role-legend {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.55;
    color: #444;
}

#edit-community-modal .comm-members-list {
    max-height: 340px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #7f9db9;
}
#edit-community-modal .comm-member-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    margin: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #eef0f5;
}
#edit-community-modal .comm-member-row:hover { background: #eef3fd; }
#edit-community-modal .comm-member-avatar {
    width: 28px !important;
    height: 28px !important;
    max-height: none !important;
    object-fit: cover !important;
    flex-shrink: 0;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px #b9c3d6;
}
#edit-community-modal .comm-member-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
}
#edit-community-modal .comm-member-name {
    font-weight: bold;
    font-size: 11px;
    color: #0e44b8;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}
#edit-community-modal .comm-member-name:hover { text-decoration: underline; }

#edit-community-modal .comm-role-badge {
    display: inline-block;
    padding: 0 5px;
    font-size: 10px;
    line-height: 15px;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background: linear-gradient(180deg, #a3a3a3, #7c7c7c);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}
#edit-community-modal .comm-role-badge.role-creator { background: linear-gradient(180deg, #ffd65a, #d79b00); color: #4a3000; text-shadow: none; }
#edit-community-modal .comm-role-badge.role-admin { background: linear-gradient(180deg, #f07a5c, #c43c1c); }
#edit-community-modal .comm-role-badge.role-moderator { background: linear-gradient(180deg, #6ccf5a, #2f8f22); }
#edit-community-modal .comm-role-badge.role-editor { background: linear-gradient(180deg, #6d9cf2, #2556cc); }
#edit-community-modal .comm-role-badge.role-member { background: linear-gradient(180deg, #f4f3ee, #d6d3c6); color: #333; text-shadow: none; }

#edit-community-modal .comm-member-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
#edit-community-modal .comm-role-select { width: 128px; margin: 0 !important; }

/* Плоские кнопки панели инструментов — рамка только под мышью */
.xpa-window .comm-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 23px;
    padding: 0;
    font-size: 12px;
    color: #1d3d84;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px !important;
    cursor: pointer;
}
.xpa-window .comm-mini-btn .xpi { width: 16px; height: 16px; }
.xpa-window .comm-mini-btn:hover { background: #fff; border-color: #8ea9d6; box-shadow: 0 1px 2px rgba(0, 30, 90, 0.2); }
.xpa-window .comm-mini-btn:active { background: #dbe5f6; box-shadow: inset 0 1px 2px rgba(0, 30, 90, 0.3); }
.xpa-window .comm-mini-btn:disabled { color: #2e8b2e; font-weight: bold; cursor: default; background: transparent; border-color: transparent; box-shadow: none; }
.xpa-window .comm-mini-btn.danger { color: #b3170f; }

/* ==========================================================================
   ВКЛАДКА «ЖУРНАЛ» — «Просмотр событий»
   ========================================================================== */
#edit-community-modal .comm-log-window {
    background: #fff;
    border: 1px solid #7f9db9;
    font-size: 11px;
}
#edit-community-modal .comm-log-head,
#edit-community-modal .comm-log-row {
    display: grid;
    grid-template-columns: 116px 104px 92px minmax(0, 1fr);
    align-items: start;
}
#edit-community-modal .comm-log-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(180deg, #ffffff 0%, #f1efe2 60%, #ebeadb 100%);
    border-bottom: 3px solid #d6d2c2;
    color: #000;
}
#edit-community-modal .comm-log-head > span {
    padding: 3px 6px;
    border-right: 1px solid #d6d2c2;
    box-shadow: 1px 0 0 #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#edit-community-modal .comm-log-head > span:last-child { border-right: 0; box-shadow: none; }
#edit-community-modal .comm-log-body { max-height: 360px; overflow-y: auto; }
#edit-community-modal .comm-log-row {
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
    background: transparent;
}
#edit-community-modal .comm-log-row:hover { background: #eef3fd; }
#edit-community-modal .comm-log-row > span { padding: 4px 6px; min-width: 0; overflow-wrap: anywhere; }
#edit-community-modal .comm-log-col-type { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
#edit-community-modal .comm-log-icon { width: 16px; height: 16px; flex-shrink: 0; font-style: normal; }
#edit-community-modal .comm-log-col-date { color: #333; white-space: nowrap; }
#edit-community-modal .comm-log-row .comm-log-col-src { color: #0e44b8; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#edit-community-modal .comm-log-row.level-warning .comm-log-type-text { color: #8a5a00; }
#edit-community-modal .comm-log-row.level-error .comm-log-type-text { color: #b3170f; font-weight: bold; }

/* ==========================================================================
   КНОПКИ НА ЗАПИСЯХ ГРУППЫ (лента)
   ========================================================================== */
.comm-post-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.65;
    line-height: 1;
}
.comm-post-tool:hover { opacity: 1; }
.comm-post-tool.pinned {
    opacity: 1;
    padding: 1px;
    margin: -2px 0;
    background: #fff4c4;
    border: 1px solid #e5c55a;
}

/* ==========================================================================
   ОКНО «РЕДАКТИРОВАНИЕ ЗАПИСИ»
   ========================================================================== */
#edit-post-modal .comm-edit-textarea {
    width: 100%;
    height: 110px;
    resize: vertical;
    margin: 0 !important;
    font-size: 12px;
    line-height: 1.45;
}

#edit-post-modal .comm-edit-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, 72px);
    gap: 6px;
    margin-bottom: 4px;
}
#edit-post-modal .comm-edit-photo {
    position: relative;
    width: 72px;
    height: 72px;
    padding: 2px;
    background: #fff;
    border: 1px solid #b4b4b4;
    cursor: pointer;
    overflow: hidden;
}
#edit-post-modal .comm-edit-photo:hover { border-color: #7f9db9; }
#edit-post-modal .comm-edit-photo img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
}
#edit-post-modal .comm-edit-photo-stub {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 10px;
    color: #666;
    background: #f1efe7;
}
/* Крестик рисуем CSS-ом: на снятом фото он виден всегда, иначе — под мышью */
#edit-post-modal .comm-edit-photo-x {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border: 1px solid #fff;
    border-radius: 3px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 5l8 8M13 5l-8 8' stroke='%23fff' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center,
                linear-gradient(135deg, #f4a184 0%, #e3633b 38%, #d0441b 70%, #b8360f 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.12s;
}
#edit-post-modal .comm-edit-photo:hover .comm-edit-photo-x,
#edit-post-modal .comm-edit-photo.removed .comm-edit-photo-x { opacity: 1; }
#edit-post-modal .comm-edit-photo.removed { border-color: #c43c1c; }
#edit-post-modal .comm-edit-photo.removed img,
#edit-post-modal .comm-edit-photo.removed .comm-edit-photo-stub { opacity: 0.3; filter: grayscale(1); }

#edit-post-modal .comm-edit-audios {
    background: #fff;
    border: 1px solid #7f9db9;
    margin-bottom: 8px;
}
#edit-post-modal .comm-edit-audio {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 8px;
    border-bottom: 1px solid #eef0f5;
    font-size: 11px;
}
#edit-post-modal .comm-edit-audio:last-child { border-bottom: 0; }
#edit-post-modal .comm-edit-audio-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#edit-post-modal .comm-edit-audio.removed .comm-edit-audio-name { text-decoration: line-through; color: #999; }
#edit-post-modal .comm-edit-audio.removed .comm-mini-btn { color: #2e8b2e; }

#edit-post-modal .comm-edit-audio-adder .btn { display: inline-flex; align-items: center; gap: 5px; }
#edit-post-modal .comm-edit-audio-adder .btn .xpi { width: 16px; height: 16px; }
#edit-post-modal #edit-post-audio-picker { margin-top: 6px; }
#edit-post-modal .comm-edit-picker-list {
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #7f9db9;
}
#edit-post-modal .comm-edit-picker-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 2px 8px;
    border-bottom: 1px solid #eef0f5;
    font-size: 11px;
}
#edit-post-modal .comm-edit-picker-row:hover { background: #eef3fd; }
#edit-post-modal .comm-edit-picker-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

#edit-post-modal .comm-edit-actions { margin-top: 14px; }

/* ==========================================================================
   ТЕЛЕФОН
   ========================================================================== */
@media screen and (max-width: 768px) {
    #edit-community-modal,
    #edit-post-modal { padding: 0 !important; align-items: stretch !important; }

    #edit-community-modal .xpa-window,
    #edit-post-modal .xpa-window {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        animation: none;
    }
    .xpa-caption { height: 40px; border-radius: 0 !important; font-size: 14px; }
    .xpa-close { width: 32px; height: 32px; }

    .xpa-sheet { padding: 8px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
    #edit-community-modal .comm-settings-tabs .xp-tab-btn { padding: 7px 12px 6px; font-size: 13px; }
    #edit-community-modal .comm-settings-tabs .xp-tab-btn.active { padding-top: 9px; }
    #edit-community-modal .comm-settings-body { padding: 12px 10px; font-size: 13px; }
    #edit-post-modal .xpa-pane { margin: 6px; padding: 10px; }

    /* Поля 16px — иначе iOS увеличивает страницу при фокусе */
    .xpa-window .input-field,
    .xpa-window select.input-field,
    #edit-post-modal .comm-edit-textarea { font-size: 16px; min-height: 36px; }
    .xpa-ident .input-field { font-size: 16px; }

    .xpa-props { grid-template-columns: 1fr; gap: 4px; }
    .xpa-prop-label { margin-top: 6px; font-size: 12px; }
    .xpa-props .xpa-prop-label[for="comm-edit-desc"] { padding-top: 0; }
    .xpa-check { font-size: 13px; padding: 4px 0; }
    .xpa-check input { width: 18px; height: 18px; }
    .xpa-field-label,
    .xpa-group-hint,
    .xpa-window fieldset.xpa-group > legend { font-size: 12px; }

    .xpa-dialog-btns {
        position: sticky;
        bottom: -12px;
        margin: 14px -10px -12px;
        padding: 8px 10px;
        background: #ece9d8;
        border-top: 1px solid #c5c2b2;
    }
    #edit-post-modal .xpa-dialog-btns { bottom: -10px; margin: 14px -10px -10px; }
    /* Короткая форма — кнопки всё равно внизу экрана, а не посередине */
    #edit-community-modal .xpa-form,
    #edit-post-modal .xpa-pane { display: flex; flex-direction: column; }
    #edit-community-modal .xpa-form { min-height: 100%; }
    #edit-community-modal .xpa-form > *,
    #edit-post-modal .xpa-pane > * { min-width: 0; flex-shrink: 0; }
    #edit-community-modal .xpa-form > .xpa-dialog-btns,
    #edit-post-modal .xpa-pane > .xpa-dialog-btns { margin-top: auto; }
    .xpa-dialog-btns .btn { flex: 1; min-height: 40px; font-size: 14px; }

    #edit-community-modal .comm-hint { font-size: 12px; }
    #edit-community-modal .comm-bg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #edit-community-modal .comm-bg-title { font-size: 12px; }

    #edit-community-modal .comm-assign-row { grid-template-columns: 1fr; }
    #edit-community-modal .comm-assign-row .btn { min-height: 38px; }
    #edit-community-modal .comm-role-legend { font-size: 12px; }

    #edit-community-modal .comm-members-list { max-height: none; }
    #edit-community-modal .comm-member-row { flex-wrap: wrap; padding: 8px; }
    #edit-community-modal .comm-member-avatar { width: 36px !important; height: 36px !important; }
    #edit-community-modal .comm-member-name { font-size: 13px; }
    #edit-community-modal .comm-member-tools { width: 100%; padding-left: 44px; }
    #edit-community-modal .comm-role-select { flex: 1; width: auto; }
    .xpa-window .comm-mini-btn { width: 38px; height: 36px; border-color: #d4dbe8; background: #f7f9fd; }
    .xpa-window .comm-mini-btn .xpi { width: 18px; height: 18px; }

    /* Журнал: строка события — две строчки вместо четырёх колонок */
    #edit-community-modal .comm-log-head { display: none; }
    #edit-community-modal .comm-log-body { max-height: none; }
    #edit-community-modal .comm-log-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "type src date" "msg msg msg";
        padding: 6px 4px;
        font-size: 12px;
    }
    #edit-community-modal .comm-log-row > span { padding: 1px 4px; }
    #edit-community-modal .comm-log-col-type { grid-area: type; }
    #edit-community-modal .comm-log-col-src { grid-area: src; }
    #edit-community-modal .comm-log-col-date { grid-area: date; color: #777; font-size: 11px; }
    #edit-community-modal .comm-log-col-msg { grid-area: msg; padding-top: 3px; }

    #edit-post-modal .comm-edit-photos { grid-template-columns: repeat(auto-fill, 84px); }
    #edit-post-modal .comm-edit-photo { width: 84px; height: 84px; }
    #edit-post-modal .comm-edit-photo-x { opacity: 1; width: 22px; height: 22px; }
    #edit-post-modal .comm-edit-audio,
    #edit-post-modal .comm-edit-picker-row { font-size: 13px; padding: 4px 4px 4px 8px; }
    #edit-post-modal .comm-edit-picker-list { max-height: 40vh; }
}

@media (prefers-reduced-motion: reduce) {
    #edit-community-modal .xpa-window,
    #edit-post-modal .xpa-window { animation: none; }
}