/* Шторка / окно / плашка (chates-sheet.js) */

.chs-back {
    position: fixed; inset: 0; z-index: 100070;
    background: rgba(10, 8, 20, .45);
    opacity: 0; transition: opacity .18s ease;
}
.chs-back.is-shown { opacity: 1; }

.chs-box {
    position: fixed; z-index: 100071;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    background: var(--panel-bg, #fff);
    color: var(--text, #222);
    box-shadow: 0 18px 50px rgba(20, 15, 40, .28);
    font-size: 15.5px; line-height: 1.45;
}
:root.dark-theme-root .chs-box { background: var(--panel-bg, #252330); color: var(--text, #e8e6ef); box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }

/* Компьютер — окно по центру */
.chs-dialog {
    left: 50%; top: 50%;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 22px 22px 18px;
    border-radius: 18px;
    opacity: 0;
    transform: translate(-50%, -48%) scale(.97);
    transition: opacity .16s ease, transform .16s ease;
}
.chs-dialog.is-shown { opacity: 1; transform: translate(-50%, -50%); }

/* Телефон — шторка снизу */
.chs-sheet {
    left: 0; right: 0; bottom: 0;
    max-height: 88vh;
    padding: 6px 16px calc(14px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.chs-sheet.is-shown { transform: none; }
.chs-grip { width: 40px; height: 4px; margin: 4px auto 12px; border-radius: 2px; background: rgba(0, 0, 0, .16); flex: 0 0 auto; }
:root.dark-theme-root .chs-grip { background: rgba(255, 255, 255, .22); }

.chs-title { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.chs-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; word-wrap: break-word; }
.chs-text { margin-bottom: 12px; }
.chs-input { width: 100%; }

.chs-actions { display: flex; gap: 10px; margin-top: 18px; flex: 0 0 auto; }
.chs-btn {
    flex: 1 1 0; min-height: 46px; padding: 10px 16px;
    border: 0; border-radius: 14px; cursor: pointer;
    font: inherit; font-size: 15.5px; font-weight: 600;
    transition: filter .15s, transform .1s, background-color .15s;
}
.chs-btn:active { transform: scale(.98); }
.chs-default { background: rgba(124, 92, 255, .1); color: inherit; }
.chs-default:hover { background: rgba(124, 92, 255, .16); }
.chs-primary { background: linear-gradient(135deg, #6d5bd0, #9a6fd8); color: #fff; }
.chs-danger { background: #e05252; color: #fff; }
.chs-primary:hover, .chs-danger:hover { filter: brightness(1.07); }
.chs-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(109, 91, 208, .3); }
:root.dark-theme-root .chs-default { background: rgba(160, 140, 255, .14); }
/* На телефоне главное действие — справа и под большим пальцем; кнопки крупнее */
.chs-sheet .chs-btn { min-height: 50px; font-size: 16px; }

/* Плашка-сообщение — прежние пилюли сайта (.flood-notification / .flood-error в style.css) */

@media (prefers-reduced-motion: reduce) {
    .chs-back, .chs-dialog, .chs-sheet, .chs-toast { transition: none; }
}

/* Правка сообщения в личке на телефоне (chat-dialog.js: handleEditClick) */
.chs-edit .edit-form-wrapper { margin: 0; padding: 0; background: none; box-shadow: none; max-width: 100%; min-width: 0; }
/* Область прокрутки обрезала кольцо фокуса поля (3px тени) по краям и давала
   горизонтальную прокрутку: запас под кольцо внутри, лишнее по ширине — скрыть. */
.chs-edit .chs-body { overflow-x: hidden; padding: 4px; margin: -4px; }
.chs-edit .edit-textarea {
    display: block; width: 100%; min-height: 110px; max-height: 45vh; box-sizing: border-box;
    padding: 10px 14px; border: 1.5px solid rgba(109, 91, 208, .35); border-radius: 14px;
    background: var(--field-bg, #fff); color: inherit; font: inherit; font-size: 16px; line-height: 1.45;
    outline: none; resize: none;
}
.chs-edit .edit-textarea:focus { border-color: #6d5bd0; box-shadow: 0 0 0 3px rgba(109, 91, 208, .18); }
:root.dark-theme-root .chs-edit .edit-textarea { background: var(--field-bg, #1f1b2b); border-color: rgba(159, 139, 239, .35); }
.chs-edit .edit-buttons { display: flex; flex-direction: row; align-items: center; gap: 10px; margin-top: 12px; }
.chs-edit .edit-buttons .save-edit,
.chs-edit .edit-buttons .cancel-edit {
    flex: 1 1 0; min-height: 48px; margin: 0; border: 0; border-radius: 14px;
    font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.chs-edit .edit-buttons .save-edit { order: 2; background: linear-gradient(135deg, #6d5bd0, #9a6fd8); color: #fff; }
.chs-edit .edit-buttons .save-edit:disabled { opacity: .5; }
.chs-edit .edit-buttons .cancel-edit { order: 1; background: rgba(124, 92, 255, .1); color: inherit; }
/* style.css ставит таймер абсолютно (под кнопки в пузыре) — в шторке он в ряду справа */
.chs-edit .edit-timer { position: static; order: 3; flex: 0 0 auto; min-width: 3.2em; text-align: right; font-size: 13px; color: var(--muted, #8a8794); }

/* Меню действий над сообщением (msg-actions-sheet.js) */
.chs-mas .chs-body { overflow: visible; }
.mas-react { display: flex; justify-content: space-between; gap: 4px; padding: 2px 0 12px; margin-bottom: 6px; border-bottom: 1px solid rgba(0, 0, 0, .07); }
:root.dark-theme-root .mas-react { border-bottom-color: rgba(255, 255, 255, .08); }
.mas-react button {
    flex: 1 1 0; height: 50px; border: 0; border-radius: 14px; background: rgba(124, 92, 255, .07);
    font-size: 26px; line-height: 1; cursor: pointer; transition: transform .12s, background-color .12s;
}
.mas-react button:active { transform: scale(.88); background: rgba(124, 92, 255, .16); }
/* «+» в ряду реакций и раскрывающийся список под ним */
.mas-react .mas-more { color: #7c5cff; display: flex; align-items: center; justify-content: center; }
.mas-more svg { transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
.mas-open .mas-more svg { transform: rotate(135deg); }
.mas-react .mas-more:active { transform: scale(.88); }
/* Анимируется только высота строки грида (0fr → 1fr). Отступы и линия
   живут внутри обрезаемой обёртки и не меняются при раскрытии — иначе
   они появлялись скачком и давали рывок в начале и конце. */
.mas-ext { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1); }
.mas-open .mas-ext { grid-template-rows: 1fr; }
.mas-ext-clip { overflow: hidden; min-height: 0; }
.mas-ext-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding-bottom: 10px; margin-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, .07); opacity: 0; transition: opacity .2s;
}
.mas-open .mas-ext-grid { opacity: 1; }
:root.dark-theme-root .mas-ext-grid { border-bottom-color: rgba(255, 255, 255, .08); }
.mas-ext-grid button {
    height: 44px; border: 0; border-radius: 12px; background: transparent; font-size: 24px; line-height: 1;
    cursor: pointer; transition: transform .12s, background-color .12s;
}
.mas-ext-grid button:active { transform: scale(.88); background: rgba(124, 92, 255, .16); }
.mas-react { transition: border-color .28s; }
.mas-open .mas-react { border-bottom-color: transparent; }
.mas-item {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 8px;
    border: 0; border-radius: 12px; background: none; color: inherit;
    font: inherit; font-size: 16.5px; text-align: left; cursor: pointer;
}
.mas-item svg { flex: 0 0 auto; color: var(--muted, #8a8794); }
.mas-item:active { background: rgba(124, 92, 255, .1); }
.mas-item.is-danger, .mas-item.is-danger svg { color: #d64545; }
/* Сообщение, для которого открыто меню, — подсвечено */
.mas-target { transition: filter .15s; filter: brightness(.93); }
:root.dark-theme-root .mas-target { filter: brightness(1.2); }
/* На сенсорных экранах долгое нажатие открывает меню, а не выделение текста */
@media (pointer: coarse) {
    .message-bubble[data-message-id], #messages-container .message[data-message-id] {
        -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    }
    /* Картинки, видео и ссылки — с системным меню: «Сохранить изображение»,
       «Открыть ссылку» остаются (меню сообщения на них не открывается) */
    .message-bubble[data-message-id] :is(img, video, a),
    #messages-container .message[data-message-id] :is(img, video, a) { -webkit-touch-callout: default; }
}
/* Текст сообщения для выделения */
.mas-text {
    display: block; width: 100%; box-sizing: border-box; border: 0; outline: none; resize: none;
    font-family: inherit; color: inherit; min-height: 3em;
    max-height: 55vh; overflow-y: auto; padding: 12px 14px; border-radius: 12px;
    background: rgba(124, 92, 255, .06); white-space: pre-wrap; word-wrap: break-word;
    font-size: 16px; line-height: 1.5;
    -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
:root.dark-theme-root .mas-text { background: rgba(160, 140, 255, .1); }

/* ===== Меню и всплывающие окна — шторкой на телефоне ======================
   Логику открытия и закрытия не трогаем: каждое меню открывается и
   закрывается своим скриптом, как раньше (своя кнопка, нажатие мимо, выбор
   пункта). Здесь только место и вид: внизу экрана во всю ширину, скругление
   сверху, крупные пункты, затемнение вокруг (широкая тень — отдельного слоя
   не нужно, а нажатие по затемнению — это и есть «нажатие мимо»). */
@media (max-width: 760px) {
    /* Карточка участника в общем чате (ставится скриптом по координатам) */
    .user-card-pop {
        left: 0 !important; right: 0; top: auto !important; bottom: 0;
        max-width: none !important; width: auto;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
        border-radius: 22px 22px 0 0; border: 0;
        box-shadow: 0 0 0 100vmax rgba(10, 8, 20, .45), 0 -10px 30px rgba(0, 0, 0, .2);
        transform: translateY(100%);
        transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .1s;
    }
    .user-card-pop.show { transform: none; }

    /* Меню вложений в секретном чате */
    #upload-menu[style*="block"] {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 100040;
        padding: 10px 10px calc(12px + env(safe-area-inset-bottom));
        border: 0; border-radius: 20px 20px 0 0;
        box-shadow: 0 0 0 100vmax rgba(10, 8, 20, .45);
    }
    #upload-menu .upload-menu-item { min-height: 52px; font-size: 16px; border-radius: 12px; border-bottom: 0; }

    /* Меню «⋮» момента */
    .mood-menu {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto !important;
        width: auto; max-height: 70vh;
        padding: 10px 10px calc(12px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0; border: 0;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
        font-size: 16px;
        transform-origin: bottom center;
        animation: chs-sheet-in .2s cubic-bezier(.2, .8, .2, 1);
    }
    .mood-menu button { min-height: 48px; }

    /* «Качество и субтитры» в кинозале */
    .wr-menu {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 100040;
        width: auto; max-width: none; max-height: 70vh;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
        animation: chs-sheet-in .2s cubic-bezier(.2, .8, .2, 1);
    }

    /* Колокольчик — там, где нет нижней панели (там список и так встаёт над
       ней): шторкой снизу, без уголка-указателя */
    html:not(.has-bnav) .notif-dropdown {
        top: auto; bottom: 0; left: 0; right: 0;
        max-width: none; max-height: 80vh;
        border-radius: 20px 20px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    html:not(.has-bnav) .notif-dropdown:before { display: none; }
    html:not(.has-bnav) .notif-dropdown.show { box-shadow: 0 0 0 100vmax rgba(10, 8, 20, .45); }
}
@keyframes chs-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .user-card-pop, .mood-menu, .wr-menu { transition: none; animation: none; }
}

/* Меню действий — без выделения: долгое нажатие, открывшее шторку, не должно
   продолжиться выделением эмодзи и пунктов под пальцем */
.chs-mas, .chs-mas * {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.chs-mas .mas-react button::selection, .chs-mas *::selection { background: transparent; }

/* Шторка над панелью «Мои диалоги» ставится рядом с панелью в <html>
   (chates-sheet.js), поэтому тёмная тема — через :root:has(), а шрифт задан
   самой шторке: от body она его там не наследует. */
.chs-box, .chs-back { font-family: "Fira Sans", sans-serif; }