/* ========================================================================
   modules/chat/chat.css — «Сообщения»

   Без !important: фон, рамка, скругление, отступы, цвет и шрифт блоков
   приходят инлайном из редактора стилей и должны его перебивать
   (claude/conventions.md, «CSS модулей и редактор стилей»).

   Тема сайта бывает и светлой, и тёмной, поэтому фоны и рамки — не
   жёсткие цвета, а полупрозрачный серый поверх того, что под ним: на
   белом он светло-серый, на тёмном — чуть светлее фона. Текст наследует
   цвет страницы. Акцент — var(--bs-primary).
   ======================================================================== */

.chat-app {
    --chat-line: rgba(127, 127, 127, .22);
    --chat-soft: rgba(127, 127, 127, .08);
    --chat-soft-2: rgba(127, 127, 127, .15);
    --chat-muted: rgba(127, 127, 127, .95);
    --chat-accent: var(--bs-primary, #0d6efd);

    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    /* Высота окна минус шапка сайта: лента прокручивается внутри, а не
       вся страница — иначе поле ввода уезжало бы под край экрана. */
    height: calc(100vh - 200px);
    height: calc(100dvh - 200px);
    min-height: 440px;
    border: 1px solid var(--chat-line);
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
}

/* ---------------------------------------------------------- гость */

.chat-app.chat-guest {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 0;
    padding: 48px 16px;
    text-align: center;
}
.chat-guest-icon,
.chat-placeholder-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 12px;
    opacity: .5;
}

/* ---------------------------------------------------------- колонка диалогов */

.chat-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--chat-line);
}

.chat-search {
    padding: 10px;
    border-bottom: 1px solid var(--chat-line);
}
.chat-search input { width: 100%; }

.chat-search-results {
    border-bottom: 1px solid var(--chat-line);
    max-height: 45%;
    overflow-y: auto;
}
.chat-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.chat-search-item:hover,
.chat-search-item:focus-visible { background: var(--chat-soft-2); outline: none; }
.chat-search-title {
    padding: 8px 12px 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--chat-muted);
}
.chat-noname {
    padding: 8px 12px;
    border-bottom: 1px solid var(--chat-line);
    background: var(--chat-soft);
    font-size: 13px;
}
.chat-search-empty {
    padding: 10px 12px;
    color: var(--chat-muted);
    font-size: 14px;
}

.chat-dialogs {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.chat-dialogs-empty {
    padding: 20px 16px;
    color: var(--chat-muted);
    font-size: 14px;
}

.chat-dlg {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--chat-soft-2);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.chat-dlg:hover { background: var(--chat-soft); }
.chat-dlg.active { background: var(--chat-soft-2); }
.chat-dlg:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: -2px; }

.chat-dlg-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.chat-dlg-top,
.chat-dlg-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.chat-dlg-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-dlg-time {
    flex: none;
    font-size: 12px;
    color: var(--chat-muted);
}
.chat-dlg-snippet {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--chat-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-dlg.unread .chat-dlg-snippet { color: inherit; }
.chat-dlg-you { opacity: .8; }

.chat-badge {
    flex: none;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--chat-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

/* ---------------------------------------------------------- аватар */

.chat-avatar {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #888;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    user-select: none;
}
/* Аватарка-картинка поверх букв (fillAvatar в chat.js). */
.chat-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bs-body-bg, #fff);
}
/* Аватарка автора у сообщений общего чата: только у первого в группе,
   у следующих место остаётся — пузыри выровнены по одной линии. */
.chat-msg-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
    align-self: flex-start;
    margin-right: 4px;
}
.chat-msg.cont .chat-msg-avatar { visibility: hidden; height: 0; }
.chat-avatar-sm {
    width: 30px;
    height: 30px;
    font-size: 12px;
}
.chat-online-dot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2fb551;
    box-shadow: 0 0 0 2px var(--bs-body-bg, #fff);
}

/* ---------------------------------------------------------- открытый диалог */

.chat-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.chat-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--chat-muted);
    text-align: center;
}
.chat-placeholder[hidden] { display: none; }

.chat-dialog {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.chat-dialog[hidden] { display: none; }

.chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--chat-line);
}
.chat-head-info {
    flex: 1;
    min-width: 0;
}
.chat-peer-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-peer-status {
    font-size: 12px;
    color: var(--chat-muted);
    min-height: 1em;
}
.chat-peer-status.online { color: #2fb551; }

.chat-back {
    display: none;            /* только на телефоне, см. ниже */
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px 4px 0;
    cursor: pointer;
}

.chat-block-btn {
    flex: none;
    border: 1px solid var(--chat-line);
    border-radius: 6px;
    background: transparent;
    color: var(--chat-muted);
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
}
.chat-block-btn:hover { background: var(--chat-soft); color: inherit; }

/* ---------------------------------------------------------- лента */

.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
    overscroll-behavior: contain;
}

.chat-more {
    display: block;
    margin: 0 auto 10px;
    border: 1px solid var(--chat-line);
    border-radius: 14px;
    background: transparent;
    color: var(--chat-muted);
    font-size: 13px;
    padding: 3px 12px;
    cursor: pointer;
}
.chat-more[hidden] { display: none; }

.chat-loading,
.chat-load-error,
.chat-first-hint {
    padding: 24px 8px;
    text-align: center;
    color: var(--chat-muted);
}
.chat-load-error { color: var(--bs-danger, #dc3545); }

.chat-day {
    margin: 14px 0 8px;
    text-align: center;
    font-size: 12px;
    color: var(--chat-muted);
}
.chat-day::before,
.chat-day::after {
    content: '';
    display: inline-block;
    width: 40px;
    height: 1px;
    margin: 0 8px;
    vertical-align: middle;
    background: var(--chat-line);
}

.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-top: 8px;
}
.chat-msg.cont { margin-top: 2px; }
.chat-msg.mine { flex-direction: row-reverse; }

.chat-bubble {
    max-width: min(75%, 560px);
    padding: 6px 10px 4px;
    border-radius: 14px;
    background: var(--chat-soft-2);
    /* Длинное слово или адрес без пробелов не должны раздвигать ленту. */
    overflow-wrap: anywhere;
    word-break: break-word;
}
.chat-msg.theirs .chat-bubble { border-bottom-left-radius: 4px; }
.chat-msg.mine .chat-bubble {
    background: var(--chat-accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg.cont.theirs .chat-bubble { border-top-left-radius: 4px; }
.chat-msg.cont.mine .chat-bubble { border-top-right-radius: 4px; }

.chat-sender {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 1px;
}
.chat-msg.cont .chat-sender { display: none; }
/* Имя автора в общем чате — щелчок открывает личную переписку с ним. */
.chat-sender-name {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
}
button.chat-sender-name { cursor: pointer; }
button.chat-sender-name:hover,
button.chat-sender-name:focus-visible { text-decoration: underline; outline: none; }
.chat-msg-avatar.chat-dm-link { cursor: pointer; }
.chat-msg-avatar.chat-dm-link:hover { filter: brightness(0.92); }
.chat-avatar-group { font-size: 20px; }

.chat-text {
    white-space: pre-wrap;    /* переводы строк из сообщения */
}
.chat-msg.mine .chat-text a { color: inherit; text-decoration: underline; }

.chat-meta {
    display: block;
    text-align: right;
    font-size: 11px;
    line-height: 1.4;
    opacity: .7;
    white-space: nowrap;
}
.chat-ticks { margin-left: 4px; letter-spacing: -3px; }
.chat-ticks.read { opacity: 1; font-weight: 700; }

.chat-msg.deleted .chat-bubble {
    background: transparent;
    border: 1px dashed var(--chat-line);
    color: var(--chat-muted);
}
.chat-msg.pending { opacity: .6; }

.chat-msg-more {
    flex: none;
    align-self: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--chat-muted);
    font-size: 16px;
    line-height: 26px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .1s;
}
.chat-msg:hover .chat-msg-more,
.chat-msg.menu-open .chat-msg-more,
.chat-msg-more:focus-visible { opacity: 1; }
.chat-msg-more:hover { background: var(--chat-soft-2); }
/* На сенсорном экране наведения нет — кнопка видна всегда, но блёкло.
   Системное меню долгого нажатия (iPhone) заменено своим. */
@media (hover: none) {
    .chat-msg-more { opacity: .45; }
    .chat-bubble { -webkit-touch-callout: none; }
}
.chat-msg.menu-open .chat-bubble { box-shadow: 0 0 0 2px color-mix(in srgb, var(--chat-accent) 45%, transparent); }

/* Подсветка сообщения, к которому перешли из цитаты. */
@keyframes chat-flash {
    0%, 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 55%, transparent); }
    100% { box-shadow: 0 0 0 3px transparent; }
}
.chat-msg-flash .chat-bubble { animation: chat-flash 1.6s ease-out; }

/* «Переслано от …» и цитата в пузыре. */
.chat-fwd {
    font-size: 12px;
    opacity: .8;
    margin-bottom: 2px;
}
.chat-reply {
    --chat-reply-color: var(--chat-accent);
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 120px;
    margin: 2px 0 4px;
    padding: 3px 8px;
    border: 0;
    border-left: 3px solid var(--chat-reply-color);
    border-radius: 6px;
    background: rgba(127, 127, 127, .12);
    color: inherit;
    font: inherit;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
}
button.chat-reply { cursor: pointer; }
button.chat-reply:hover { background: rgba(127, 127, 127, .2); }
/* В своём (синем) пузыре цвет автора не читается — белым. !important
   перебивает цвет, который chat.js ставит в style. */
.chat-msg.mine .chat-reply { --chat-reply-color: #fff !important; background: rgba(255, 255, 255, .16); }
.chat-msg.mine button.chat-reply:hover { background: rgba(255, 255, 255, .26); }
.chat-reply-name { font-weight: 600; color: var(--chat-reply-color); }
.chat-reply-text,
.chat-bar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-reply-text.is-deleted { font-style: italic; opacity: .75; }
.chat-edited { margin-right: 4px; font-style: italic; }

/* Полоска «В ответ …» / «Изменение сообщения» над полем ввода. */
.chat-compose-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 0;
    border-top: 1px solid var(--chat-line);
}
.chat-compose-bar[hidden] { display: none; }
.chat-compose-bar:not([hidden]) ~ .chat-attach-tray,
.chat-compose-bar:not([hidden]) ~ .chat-compose { border-top: 0; }
.chat-bar-icon { flex: none; font-size: 18px; color: var(--chat-accent); width: 24px; text-align: center; }
.chat-bar-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 2px 8px;
    border: 0;
    border-left: 3px solid var(--chat-accent);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
}
button.chat-bar-body { cursor: pointer; }
.chat-bar-title { font-weight: 600; color: var(--chat-accent); }
.chat-bar-close {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--chat-muted);
    cursor: pointer;
}
.chat-bar-close:hover { background: var(--chat-soft-2); }
.chat-attach-btn:disabled { opacity: .35; cursor: default; background: transparent; }

/* Контекстное меню сообщения. */
.chat-menu {
    position: fixed;
    z-index: 2100;
    min-width: 210px;
    padding: 4px;
    border: 1px solid var(--chat-line);
    border-radius: 10px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
    font-size: 14px;
}
.chat-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 12px 7px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}
.chat-menu-item:hover,
.chat-menu-item:focus-visible { background: var(--chat-soft-2); outline: none; }
.chat-menu-item.danger { color: var(--bs-danger, #dc3545); }
.chat-menu-icon { width: 20px; text-align: center; flex: none; opacity: .8; }
.chat-menu-sep { height: 1px; margin: 4px 6px; background: var(--chat-line); }

/* Всплывающее «Скопировано». */
.chat-toast {
    position: absolute;
    left: 50%;
    bottom: 76px;
    z-index: 6;
    max-width: calc(100% - 32px);
    padding: 7px 14px;
    border-radius: 16px;
    background: rgba(33, 37, 41, .9);
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity .15s, transform .15s;
}
.chat-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Окно «Переслать». */
.chat-picker {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .45);
}
.chat-picker-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    max-height: min(560px, 100%);
    border-radius: 12px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    overflow: hidden;
}
.chat-picker.busy .chat-picker-card { opacity: .7; pointer-events: none; }
.chat-picker-head { display: flex; align-items: center; padding: 12px 12px 4px 16px; }
.chat-picker-title { flex: 1; font-weight: 600; font-size: 16px; }
.chat-picker-close {
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--chat-muted); cursor: pointer;
}
.chat-picker-close:hover { background: var(--chat-soft-2); }
.chat-picker-preview {
    margin: 0 16px 8px;
    padding: 2px 8px;
    border-left: 3px solid var(--chat-accent);
    color: var(--chat-muted);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-picker-search { margin: 0 12px 8px; width: auto; }
.chat-picker-list { flex: 1; overflow-y: auto; padding: 0 6px 8px; min-height: 120px; }
.chat-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.chat-picker-item:hover,
.chat-picker-item:focus-visible { background: var(--chat-soft-2); outline: none; }
.chat-picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-picker-empty { padding: 16px; text-align: center; color: var(--chat-muted); font-size: 13px; }
.chat-picker-error { padding: 0 16px 12px; color: var(--bs-danger, #dc3545); font-size: 13px; }

/* ---------------------------------------------------------- ввод */

.chat-blocked-note {
    padding: 10px 14px;
    border-top: 1px solid var(--chat-line);
    color: var(--chat-muted);
    font-size: 14px;
    text-align: center;
}

.chat-compose {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--chat-line);
}
.chat-compose[hidden] { display: none; }
/* Поле ввода с кнопкой смайликов в правом краю: кнопка лежит поверх поля,
   поэтому справа у поля запас под неё — текст под кнопку не заезжает. */
.chat-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
}
.chat-input {
    flex: 1;
    resize: none;
    min-height: 40px;
    max-height: 180px;
    line-height: 1.4;
    padding-right: 42px;
}
.chat-emoji-btn {
    position: absolute;
    right: 6px;
    bottom: 5px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 20px;
    line-height: 30px;
    cursor: pointer;
    opacity: .75;
    filter: grayscale(.4);
    transition: opacity .1s, filter .1s;
}
.chat-emoji-btn:hover,
.chat-emoji-btn:focus-visible,
.chat-emoji-btn[aria-expanded="true"] {
    opacity: 1;
    filter: none;
    background: var(--chat-soft-2);
    outline: none;
}

/* ---------------------------------------------------------- смайлики
   Панель ПОД полем ввода, внутри колонки диалога: лента сообщений над ней
   просто становится ниже (она flex: 1), ничего не перекрывается. */
.chat-emoji-panel {
    flex: none;
    border-top: 1px solid var(--chat-line);
}
.chat-emoji-panel[hidden] { display: none; }
.chat-emoji-tabs {
    display: flex;
    gap: 2px;
    padding: 4px 8px 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--chat-soft-2);
}
.chat-emoji-tab {
    flex: none;
    width: 36px;
    height: 32px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    opacity: .6;
}
.chat-emoji-tab:hover { opacity: 1; }
.chat-emoji-tab[aria-selected="true"] {
    opacity: 1;
    border-bottom-color: var(--chat-accent);
}
.chat-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 2px;
    max-height: 196px;
    overflow-y: auto;
    padding: 6px 8px 8px;
    overscroll-behavior: contain;
}
/* Системная подсветка касания на телефоне закрашивала смайлик синим. */
.chat-emoji,
.chat-emoji-tab,
.chat-emoji-btn { -webkit-tap-highlight-color: transparent; }
.chat-emoji {
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 24px;
    line-height: 38px;
    cursor: pointer;
}
.chat-emoji:hover,
.chat-emoji:focus-visible {
    background: var(--chat-soft-2);
    outline: none;
}
.chat-emoji-empty {
    grid-column: 1 / -1;
    padding: 16px 8px;
    color: var(--chat-muted);
    font-size: 13px;
    text-align: center;
}
/* ---------------------------------------------------------- вложения
   Скрепка — слева от поля; лоток с тем, что уйдёт со следующим сообщением, —
   над полем; в ленте — превью картинок и строки файлов. */
.chat-attach-btn {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--chat-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.chat-attach-btn:hover,
.chat-attach-btn:focus-visible {
    background: var(--chat-soft-2);
    color: var(--chat-accent);
    outline: none;
}
.chat-attach-btn svg { transform: rotate(45deg); }

.chat-attach-tray {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 168px;
    overflow-y: auto;
    padding: 10px 12px 0;
    border-top: 1px solid var(--chat-line);
}
.chat-attach-tray[hidden] { display: none; }
/* Лоток уже провёл черту — у поля ввода под ним своя не нужна. */
.chat-attach-tray:not([hidden]) + .chat-compose { border-top: 0; }
.chat-attach-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    height: 64px;
    padding: 6px 30px 6px 8px;
    border: 1px solid var(--chat-line);
    border-radius: 10px;
    background: var(--chat-soft);
    font-size: 13px;
}
.chat-attach-item.is-image {
    width: 64px;
    padding: 0;
    overflow: hidden;
}
.chat-attach-item.is-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.chat-attach-icon { font-size: 24px; flex: none; }
.chat-attach-info { display: flex; flex-direction: column; min-width: 0; }
.chat-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attach-size { color: var(--chat-muted); font-size: 12px; }
.chat-attach-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 11px;
    line-height: 22px;
    cursor: pointer;
}
.chat-attach-remove:hover,
.chat-attach-remove:focus-visible { background: rgba(0, 0, 0, .8); outline: none; }

/* Файлы, перетаскиваемые в диалог: рамка-подсказка «бросайте сюда». */
.chat-dialog { position: relative; }
.chat-dialog.chat-drop::after {
    content: attr(data-drop-label);
    position: absolute;
    inset: 8px;
    border: 2px dashed var(--chat-accent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--chat-accent) 8%, transparent);
    pointer-events: none;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chat-accent);
    font-size: 16px;
    font-weight: 600;
}

.chat-files {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    margin: 2px 0 4px;
}
.chat-file-image {
    display: block;
    line-height: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--chat-soft-2);
    cursor: zoom-in;
    max-width: 100%;
}
.chat-file-image img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}
.chat-file-image-unsized { max-width: 280px !important; max-height: 280px; }
.chat-file-image.broken {
    line-height: 1.4;
    padding: 6px 8px;
    font-size: 13px;
    cursor: default;
}
/* Файл — отдельной строкой под картинками, а не плиткой рядом с ними. */
.chat-file {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    padding: 6px 10px 6px 6px;
    border-radius: 10px;
    background: rgba(127, 127, 127, .12);
    color: inherit;
    text-decoration: none;
}
.chat-msg.mine .chat-file { background: rgba(255, 255, 255, .18); }
a.chat-file:hover { text-decoration: none; background: rgba(127, 127, 127, .2); color: inherit; }
.chat-msg.mine a.chat-file:hover { background: rgba(255, 255, 255, .28); }
.chat-file-icon { font-size: 22px; flex: none; }
.chat-file-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.chat-file-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-size { font-size: 12px; opacity: .75; }
/* Картинка без текста: пузырь по размеру картинки. */
.chat-bubble-media { padding: 4px 4px 2px; }
.chat-bubble-media .chat-files { margin: 0; }
.chat-bubble-media .chat-meta { padding: 0 6px; }
.chat-progress { margin-left: 6px; font-weight: 600; }

/* Картинка во весь экран. */
.chat-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .86);
    padding: 52px 16px 16px;
}
.chat-lightbox[hidden] { display: none; }
.chat-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}
.chat-lightbox-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: #fff;
}
.chat-lightbox-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.chat-lightbox-btn {
    flex: none;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.chat-lightbox-btn:hover { background: rgba(255, 255, 255, .15); color: #fff; }
html.chat-lightbox-open { overflow: hidden; }

.chat-send {
    flex: none;
    width: 44px;
    height: 40px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}
.chat-compose-error {
    padding: 0 12px 8px;
    color: var(--bs-danger, #dc3545);
    font-size: 13px;
}

/* ---------------------------------------------------------- телефон
   Одна колонка: список диалогов, а по нажатию — диалог во весь экран
   с кнопкой «назад». Какая колонка видна, решает класс chat-app--dialog
   (его ставит chat.js при открытии диалога). */

@media (max-width: 767.98px) {
    .chat-app {
        grid-template-columns: 1fr;
        height: calc(100vh - 140px);
        height: calc(100dvh - 140px);
        min-height: 380px;
        border-radius: 8px;
    }
    .chat-app .chat-main { display: none; }
    .chat-app.chat-app--dialog .chat-side { display: none; }
    .chat-app.chat-app--dialog .chat-main { display: flex; }
    .chat-back { display: block; }
    .chat-bubble { max-width: 85%; }
    .chat-block-btn { font-size: 11px; padding: 3px 6px; }
    .chat-emoji-grid { max-height: 168px; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
    .chat-compose { gap: 6px; padding: 8px; }
    .chat-attach-btn { width: 36px; }
}

/* ------------------------------------------------------------ реакции (2026-10-08) */

/* Строка популярных смайликов над пунктами меню сообщения. */
.chat-react-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 2px 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--chat-line);
}
.chat-react-pick {
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 21px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.chat-react-pick:hover,
.chat-react-pick:focus-visible { background: var(--chat-soft-2); transform: scale(1.18); outline: none; }
.chat-react-pick.mine { background: color-mix(in srgb, var(--chat-accent) 22%, transparent); }
.chat-react-more {
    margin-left: auto;
    font-size: 17px;
    color: var(--chat-muted);
}
.chat-react-more[aria-expanded="true"] { background: var(--chat-soft-2); transform: rotate(45deg); }
.chat-react-pick.small { width: 32px; height: 32px; font-size: 19px; line-height: 32px; }

/* «＋» — весь набор прямо в меню. */
.chat-react-all {
    max-height: 220px;
    max-width: 290px;
    overflow-y: auto;
    padding: 0 2px 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--chat-line);
    overscroll-behavior: contain;
}
.chat-react-all-title {
    position: sticky;
    top: 0;
    padding: 4px 4px 2px;
    font-size: 11px;
    color: var(--chat-muted);
    background: var(--bs-body-bg, #fff);
}
.chat-react-all-grid { display: flex; flex-wrap: wrap; }

/* Плашки «👍 2» под текстом сообщения. */
.chat-reacts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 5px 0 1px;
}
.chat-react {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 1px 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: rgba(127, 127, 127, .14);
    color: inherit;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.chat-react-emoji { font-size: 15px; }
.chat-react-count { font-size: 12px; font-weight: 600; }
.chat-react:hover:not(:disabled) { filter: brightness(.95); }
.chat-react:disabled { cursor: default; }
.chat-react.mine {
    border-color: var(--chat-accent);
    background: color-mix(in srgb, var(--chat-accent) 16%, transparent);
}
/* В своём (синем) пузыре — светлые плашки. */
.chat-msg.mine .chat-react { background: rgba(255, 255, 255, .2); }
.chat-msg.mine .chat-react.mine { background: rgba(255, 255, 255, .38); border-color: rgba(255, 255, 255, .85); }
.chat-msg.mine .chat-react:hover:not(:disabled) { filter: brightness(1.08); }