/**
 * Окно жалобы — оформление общего модуля (report.js).
 *
 * Свои имена классов, не пересекающиеся с разделами: модуль подключается
 * и на страницах, где нет ни questions.css, ни posts.css, и опираться на
 * чужие стили он не может.
 */

.report-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .45);
    /* Размытие подложки — как у прочих модальных окон сайта */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    /* Появление и уход. Класс is-open ставит report.js следующим кадром после
       вставки узла — иначе переходу не с чего считать начальное значение.
       Длительность обязана совпадать с ANIM_MS в скрипте. */
    opacity: 0;
    transition: opacity .18s ease;
}
.report-modal.is-open { opacity: 1; }

.report-modal__box {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 22px 24px 20px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    box-sizing: border-box;

    /* Окно не просто проявляется, а слегка подаётся вперёд: движение
       подсказывает, что оно поверх страницы, а не часть её. Сдвиг вниз,
       а не вверх — так оно «приходит» со стороны кнопки, а не ниоткуда. */
    transform: translateY(-12px) scale(.98);
    transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
.report-modal.is-open .report-modal__box { transform: none; }
.dark-theme .report-modal__box { background: #2b2733; color: #e5e5e5; }

.report-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #999;
    cursor: pointer;
}
.report-modal__close:hover { color: #666; }
.dark-theme .report-modal__close:hover { color: #ddd; }

.report-modal__title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    padding-right: 24px;
}

.report-modal__note {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #777;
}
.dark-theme .report-modal__note { color: #9a9aa8; }

.report-modal__field {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font: inherit;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    resize: vertical;
}
.report-modal__field:focus { outline: none; border-color: #8552d7; }
.dark-theme .report-modal__field { background: #34303f; border-color: #444; color: #e5e5e5; }

/* Счётчик подсказывает, сколько ещё нужно набрать: кнопка выключена, и без
   этого непонятно, почему. Красным — только у самого предела. */
.report-modal__counter {
    margin: 5px 2px 0;
    text-align: right;
    font-size: 12px;
    color: #888;
    font-variant-numeric: tabular-nums;
}
.report-modal__counter.is-short { color: #b1741f; }
.report-modal__counter.is-full  { color: #d64c4c; }

.report-modal__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* ---- вложения-доказательства ---- */
.report-modal__attach {
    margin-right: auto;   /* слева, отправка остаётся справа */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px dashed #b9a3e3;
    border-radius: 24px;
    background: transparent;
    color: #8552d7;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
    .report-modal__attach { transition: none; }
}
.report-modal__attach:hover { border-color: #8552d7; }
.dark-theme .report-modal__attach:hover { border-color: #8f74c4; }
.report-modal__attach:hover { background: rgba(133,82,215,.08); }
.report-modal__attach[hidden] { display: none; }
.dark-theme .report-modal__attach { border-color: #6e539d; color: #c9b8f0; }
.dark-theme .report-modal__attach:hover { background: rgba(136,101,173,.2); }

.report-modal__media {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.report-modal__media:empty { display: none; }

.report-modal__thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: #eee;
    flex: 0 0 auto;
}
.dark-theme .report-modal__thumb { background: #34303f; }
.report-modal__thumb img,
.report-modal__thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.report-modal__thumb-badge {
    position: absolute;
    left: 5px;
    bottom: 4px;
    font-size: 11px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
    pointer-events: none;
}
.report-modal__thumb-del {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    cursor: pointer;
}
/* Пока файлы грузятся, состав менять нельзя — прячем крестики и кнопку */
.report-modal.is-busy .report-modal__thumb-del,
.report-modal.is-busy .report-modal__attach { visibility: hidden; }

.report-modal__send {
    padding: 9px 22px;
    border: none;
    border-radius: 24px;
    background: #8552d7;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease, opacity .18s ease;
}
.report-modal__send:hover:not(:disabled) { background: #7442c4; }
/* Выключенная кнопка не притворяется нажимаемой: и вид, и курсор об этом
   говорят — иначе человек жмёт и не понимает, почему ничего не происходит. */
.report-modal__send:disabled { opacity: .45; cursor: not-allowed; }
.dark-theme .report-modal__send { background: #6e539d; }
.dark-theme .report-modal__send:hover:not(:disabled) { background: #7f60b3; }

@media (prefers-reduced-motion: reduce) {
    .report-modal__send { transition: none; }
}

/* Тем, кто просил меньше движения, окно появляется без сдвига — остаётся
   только смена прозрачности, которая никого не укачивает. */
@media (prefers-reduced-motion: reduce) {
    .report-modal__box { transform: none; transition: none; }
}


/* Выбранные сообщения в жалобе на переписку (dialog-report.js) */
.report-modal__msgs-note{margin:0 0 6px;font-size:13px;color:#b1741f}
.dark-theme .report-modal__msgs-note{color:#e0a14e}
.report-modal__msgs{list-style:none;margin:0 0 12px;padding:8px 10px;max-height:160px;overflow-y:auto;border-radius:12px;background:rgba(0,0,0,.04);font-size:13px;line-height:1.4}
.report-modal__msgs li{padding:3px 0;border-bottom:1px solid rgba(0,0,0,.06);word-break:break-word}
.report-modal__msgs li:last-child{border-bottom:none}
.dark-theme .report-modal__msgs{background:rgba(255,255,255,.05)}
.dark-theme .report-modal__msgs li{border-bottom-color:rgba(255,255,255,.07)}