/* ========================================
   CHAT STYLES — Telegram-стиль: сайдбар + правая панель
   Dodzu v3.3

   Оглавление:
   1. Модальное окно чата (.chat-modal)
   2. Левая колонка — сайдбар (.chat-sidebar)
   3. Элементы диалогов в сайдбаре (.chat-dialog)
   4. Правая панель (.chat-main)
   5. Лента сообщений (.chat-messages)
   6. Пузырьки сообщений (.chat-message)
   7. Форма ввода (.chat-form)
   8. Пустые состояния (.chat-empty)
   9. Бейдж на кнопке хедера (.chat-unread-badge)
   10. Никнейм-модал (.nickname-modal)
   11. Кнопка очистки чата (admin)
   12. Триггер и пикер emoji
   13. Реакции на сообщения
   14. Адаптивность
   ======================================== */

/* =====================
   1. Модальное окно
   ===================== */

/* Само модальное окно мессенджера — скрыто по умолчанию */
.chat-modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    flex-direction: row;
    border-radius: 16px;      /* скругление углов всего окна */
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); /* GPU-слой, убирает мерцание border-radius */
}

/* Модальное окно в открытом состоянии */
.chat-modal.active {
    display: flex;
}

/* Закрытая модалка: сайдбар (~280px) не должен перехватывать клики по иконкам */
.chat-modal:not(.active) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: translateX(-120%) !important;
}

.chat-modal:not(.active) * {
    pointer-events: none !important;
}

/* =====================
   2. Левая колонка — сайдбар
   ===================== */

/* Левая панель сайдбара (список диалогов) */
.chat-sidebar {
    width: 280px;
    min-width: 280px;
    background: linear-gradient(180deg, #f0fafd 0%, #cbeffd 100%); /* фон сайдбара: градиент от светло-голубого сверху к чуть темнее снизу */
    display: flex;
    flex-direction: column;
    border-right: 1px solid #c5dce4; /* правая граница сайдбара — разделитель с основной панелью */
    flex-shrink: 0;
}

/* Шапка сайдбара (заголовок «Мессенджер» + крестик на мобиле) */
.chat-sidebar__head {
    padding: 14px 16px 14px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #c5dce4; /* линия-разделитель под шапкой сайдбара */
    flex-shrink: 0;
}

/* Текст заголовка «Мессенджер» в шапке сайдбара */
.chat-sidebar__title {
    color: #1a303f;  /* цвет текста «Мессенджер» (тёмно-зелёный) */
    font-size: 16px;
    font-weight: 600;
}

/* Кнопка закрытия (×) в шапке сайдбара — видна только на мобиле */
.chat-sidebar__close {
    background: none;
    border: none;
    color: #7a9ba3;         /* цвет иконки крестика в шапке сайдбара (серо-голубой) */
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: none;          /* скрыта на десктопе, показывается на мобиле через медиазапрос */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

/* Кнопка закрытия сайдбара при наведении */
.chat-sidebar__close:hover {
    background: rgba(43, 42, 42, 0.2); /* фон при наведении на крестик сайдбара (тёмный полупрозрачный) */
    color: #1a3d3f;                  /* цвет иконки при наведении (становится темнее) */
}

/* Строка поиска пользователей в сайдбаре */
.chat-sidebar__search {
    padding: 10px 16px;
    border-bottom: 1px solid #c5dce4;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

/* Поле ввода «Найти пользователя» в сайдбаре */
.chat-sidebar__search input {
    flex: 1;
    background: rgb(255, 255, 255);
    border: 1px solid #b0cfd8;
    border-radius: 9px;
    margin-right: 44px;
    margin-left: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 4px 12px;
    color: #1a3d3f;
    font-size: 13px;
    outline: none;
    font-family: inherit;
    transition: box-shadow 0.2s, background 0.2s;
    min-width: 0;
}

/* Плейсхолдер «Найти по никнейму...» в поле поиска */
.chat-sidebar__search input::placeholder {
    color: #a3a3a3; /* цвет текста-подсказки в поле поиска (серый) */
}

/* Поле поиска при фокусе (когда пользователь кликнул и вводит) */
.chat-sidebar__search input:focus {
    box-shadow: 0 0 0 1px #1a91c0; /* обводка поля поиска при фокусе (зелёная) */
}

/* Кнопка «Найти» (лупа) рядом с полем поиска */
.chat-find-btn {
    width: 34px;
    height: 34px;
    margin-right: 15px;
    background: rgba(26, 85, 109, 0.10); /* фон кнопки лупы (зелёный полупрозрачный) */
    border: none;
    border-radius: 50%;
    color: #1a6b6d; /* цвет иконки лупы (зелёный) */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

/* Кнопка лупы при наведении (не заблокирована) */
.chat-find-btn:hover:not(:disabled) {
    background: rgba(26, 76, 109, 0.2); /* фон кнопки лупы при наведении (насыщеннее) */
}

/* Кнопка лупы в заблокированном состоянии */
.chat-find-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Сообщение об ошибке поиска («Пользователь не найден» и т.п.) */
.chat-find-error {
    color: #d32f2f; /* цвет текста ошибки при поиске пользователя (красный) */
    font-size: 12px;
    padding: 6px 14px;
    flex-shrink: 0;
}

/* Прокручиваемый список диалогов в сайдбаре */
.chat-sidebar__list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
}

/* Полоса прокрутки списка диалогов — ширина */
.chat-sidebar__list::-webkit-scrollbar {
    width: 4px;
}

/* Полоса прокрутки списка диалогов — ползунок */
.chat-sidebar__list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15); /* цвет ползунка прокрутки в сайдбаре (тёмный полупрозрачный) */
    border-radius: 2px;
}

/* =====================
   3. Элементы диалогов в сайдбаре
   ===================== */

/* Один элемент списка диалогов (строка с аватаром и именем собеседника) */
.chat-dialog {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 25px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06); /* тонкая линия под каждым диалогом в списке */
    transition: background 0.15s;
    position: relative;
}

/* Элемент диалога при наведении мышью */
.chat-dialog:hover {
    background: rgba(255, 255, 255, 0.5); /* фон строки диалога при наведении (белый полупрозрачный) */
}

/* Активный (выбранный) диалог */
.chat-dialog--active {
    background: rgba(255, 255, 255, 0.6); /* фон выбранного диалога (белый чуть насыщеннее) */
}

/* Кружок-аватар собеседника в списке диалогов */
.chat-dialog__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #29b6f6; /* фон аватара (голубой — если нет фото профиля) */
    color: white;        /* цвет буквы-заглушки в аватаре */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

/* Аватар для общего чата (Dodzu) — крупнее иконка */
.chat-dialog__avatar--general {
    font-size: 20px;
}

/* Блок с именем и превью последнего сообщения */
.chat-dialog__info {
    flex: 1;
    min-width: 0;
}

/* Имя/никнейм собеседника в строке диалога */
.chat-dialog__name {
    color: #0f2b2c;  /* цвет имени собеседника в списке (тёмно-зелёный) */
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Превью последнего сообщения под именем в строке диалога */
.chat-dialog__preview {
    color: #6a8a8c;  /* цвет превью сообщения в строке диалога (серо-зелёный) */
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Мета-блок справа (бейдж сверху, время снизу) */
.chat-dialog__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    flex-shrink: 0;
    align-self: stretch;
    padding-bottom: 2px;
    gap: 2px;
}


/* Время последнего сообщения справа в строке диалога */
.chat-dialog__time {
    color: #8aabae; /* цвет времени последнего сообщения в диалоге (серо-голубой) */
    font-size: 11px;
}

/* Бейдж с числом непрочитанных сообщений — отображается над временем */
.chat-dialog__badge {
    background: #1a6b6d; /* фон бейджа непрочитанных в диалоге (тёмно-зелёный) */
    color: white;        /* цвет числа в бейдже непрочитанных */
    border-radius: 10px;
    min-width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* =====================
   4. Правая панель
   ===================== */

/* Правая панель — область переписки (основная часть чата) */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f0f9fc 0%, #e6f8ff 100%); /* фон правой панели чата: градиент светло-голубой */
    min-width: 0;
}

/* Шапка правой панели (аватар, имя собеседника, кнопка закрытия) */
.chat-main__head {
    background:  rgba(255, 255, 255, 0.6);/* фон шапки с именем собеседника (белый полупрозрачный) */
    padding: 10px 16px 8px 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    
    flex-shrink: 0;
}

/* Кнопка «Назад» в шапке (видна только на мобиле) */
.chat-main__back {
    background: none;
    border: none;
    color: #1a6b6d; /* цвет иконки стрелки «Назад» (зелёный) */
    cursor: pointer;
    padding: 4px;
    display: none; /* скрыта на десктопе */
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s;
    flex-shrink: 0;
}

/* Кнопка «Назад» при наведении */
.chat-main__back:hover {
    background: rgba(26, 107, 109, 0.08); /* фон кнопки «Назад» при наведении (зелёный прозрачный) */
}

/* Кружок-аватар собеседника в шапке правой панели */
.chat-main__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background:  #29b6f6; /* фон аватара в шапке чата  */
    color: white;        /* цвет буквы-заглушки в аватаре шапки */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* Имя собеседника в шапке правой панели */
.chat-main__name {
    font-size: 15px;
    font-weight: 600;
    color: #1a2d3f; /* цвет имени собеседника в шапке (тёмно-зелёный) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Кнопка закрытия (×) в шапке правой панели */
.chat-main__close {
    background: none;
    border: none;
    color: #999; /* цвет иконки крестика закрытия в шапке (серый) */
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

/* Кнопка закрытия при наведении */
.chat-main__close:hover {
    background: rgba(0, 0, 0, 0.06); /* фон крестика при наведении (тёмный полупрозрачный) */
    color: #555;                     /* цвет крестика при наведении (темнее) */
}

/* =====================
   5. Лента сообщений
   ===================== */

/* Прокручиваемая область с сообщениями */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overscroll-behavior: contain;
}

/* Ширина полосы прокрутки в ленте сообщений */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

/* Ползунок прокрутки в ленте сообщений */
.chat-messages::-webkit-scrollbar-thumb {
    background: #ccc; /* цвет ползунка прокрутки в ленте сообщений (светло-серый) */
    border-radius: 3px;
}

/* =====================
   6. Пузырьки сообщений
   ===================== */

/* Контейнер одного сообщения — колонка: имя, строка [аватар+пузырёк], время */
.chat-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 90%;
    animation: chatFadeIn 0.2s ease-out; /* анимация появления сообщения */
    position: relative;
}

/* Собственное сообщение — выравнивается по правому краю */
.chat-message--own {
    align-self: flex-end;
    align-items: flex-end;
}

/* Строка: аватарка + пузырёк (align-items: center — аватар по центру пузырька) */
.chat-message__bubble-row {
    display: flex;
    flex-direction: row;
    align-items: center;     /* аватар ровно по центру высоты пузырька */
    gap: 6px;
}

/* Круглая аватарка рядом с пузырьком входящего сообщения */
.chat-message__msg-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #29b6f6;     /* фон аватарки по умолчанию (голубой) */
    color: white;            /* цвет буквы */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

/* Реакции входящих — смещаем под пузырёк (аватар + gap) */
.chat-message:not(.chat-message--own) .chat-msg-reactions {
    padding-left: 32px; /* 26px аватар + 6px gap */
}

/* Анимация появления сообщения (всплывает снизу) */
@keyframes chatFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Имя автора над пузырьком чужого сообщения */
.chat-message__name {
    font-size: 12px;
    color: #1a6b6d; /* цвет имени автора над сообщением (зелёный) */
    font-weight: 600;
    margin-bottom: 3px;
    padding: 0 4px;
}

/* Пузырёк чужого сообщения (белый, скруглён слева внизу острее) */
.chat-message__bubble {
    background: rgb(255, 255, 255); /* фон пузырька чужого сообщения (белый) */
    padding: 4px 12px;
    border-radius: 16px 16px 16px 4px; /* острый угол слева внизу — «хвостик» влево */
    font-size: 14px;
    line-height: 1.5;
    color: #333;      /* цвет текста в пузырьке чужого сообщения (тёмно-серый) */
    word-break: break-word;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* тень под пузырьком */
}

/* Пузырёк собственного сообщения (голубой, острый угол справа внизу) */
.chat-message--own .chat-message__bubble {
    background: #daf6ff; /* фон пузырька своего сообщения (голубой) */
    color: #2f5a5c;      /* цвет текста в пузырьке своего сообщения (тёмно-зелёный) */
    border-radius: 16px 16px 4px 16px; /* острый угол справа внизу — «хвостик» вправо */
}

/* Ссылки внутри пузырька сообщения */
.chat-message__bubble a {
    color: inherit;         /* ссылка наследует цвет текста пузырька */
    text-decoration: underline;
    word-break: break-all;
}

/* Время внутри пузырька (float right) */
.chat-msg-meta {
    float: right;
    margin: 2px 0 0 8px;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.32);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

.chat-message--own .chat-msg-meta {
    color: rgba(47, 90, 92, 0.5);
}

/* Реакции — отдельная строка под пузырьком */
.chat-msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    padding: 0 4px;
}

.chat-msg-reactions:empty { display: none; }

/* Старая строка времени — оставлена для совместимости */
.chat-message__time {
    font-size: 11px;
    color: #aaa;
    margin-top: 5px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.chat-message--own .chat-message__time {
    color: #aaa;
}

/* Кнопка удаления сообщения (появляется при наведении, обычно скрыта) */
.chat-message__delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    opacity: 0;     /* скрыта по умолчанию */
    padding: 0 2px;
    display: flex;
    align-items: center;
    color: #aaa;    /* цвет иконки удаления (светло-серый, почти невидимый) */
    transition: opacity 0.2s, color 0.2s;
}

/* Кнопка удаления появляется при наведении на сообщение */
.chat-message:hover .chat-message__delete {
    opacity: 1;
}

/* Кнопка удаления при наведении мышью на саму кнопку */
.chat-message__delete:hover {
    color: #f44336; /* цвет иконки удаления при наведении (красный) */
    opacity: 1;
}

/* =====================
   7. Форма ввода
   ===================== */

/* Нижняя панель с полем ввода и кнопкой отправки */
.chat-form {
     /* фон нижней панели ввода (голубой полупрозрачный) */
    padding: 2px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
         /* линия над формой ввода (разделитель с лентой) */
}

/* Поле ввода текста сообщения */
.chat-form__input {
    flex: 1;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #a8ccd8;
    border-radius: 10px;
    padding: 10px 16px;
    margin: 10px 0;
    font-size: 14px;
    color: #1a3d3f;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
    min-width: 0;
}

/* Поле ввода в активном состоянии (когда пишут) */
.chat-form__input:focus {
    border-color: #1a4c6d;                /* граница поля ввода при фокусе (зелёная) */
    background: rgb(255, 255, 255); /* фон поля ввода при фокусе (чуть ярче) */
}

/* Поле ввода когда заблокировано (незарегистрированный пользователь) */
.chat-form__input:disabled {
    background: #f5f5f5; /* фон заблокированного поля ввода (светло-серый) */
    color: #aaa;         /* цвет текста в заблокированном поле (серый) */
    cursor: not-allowed;
}

/* Кнопка отправки сообщения (стрелка без фона) */
.chat-form__send {
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    margin-right: 4px;
    color: #52a5d9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s;
}

.chat-form__send svg {
    width: 24px;
    height: 24px;
}

.chat-form__send:hover:not(:disabled) {
    color: #3a8ec4;
}

.chat-form__send:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Таймер антиспама (показывает сколько ждать до следующего сообщения) */
.chat-form__timer {
    font-size: 12px;
    color: #999;   /* цвет текста таймера антиспама (серый) */
    text-align: center;
    padding: 4px 14px;
    background: white;           /* фон плашки таймера (белый) */
    border-top: 1px solid #f0f0f0; /* линия над плашкой таймера */
    flex-shrink: 0;
}

/* =====================
   8. Пустые состояния
   ===================== */

/* Заглушка когда переписка пуста или диалог не выбран */
.chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #bbb; /* цвет текста-заглушки «пусто» (светло-серый) */
    gap: 10px;
    padding: 24px;
    text-align: center;
}

/* Большая иконка-эмодзи в состоянии «пусто» */
.chat-empty__icon {
    font-size: 40px;
    opacity: 0.4; /* прозрачность иконки-заглушки (приглушённая) */
}

/* Текст под иконкой в состоянии «пусто» */
.chat-empty__text {
    font-size: 14px;
}

/* =====================
   9. Бейдж на кнопке хедера
   ===================== */

/* Красный бейдж с числом непрочитанных на кнопке мессенджера в хедере */
.chat-unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff4444; /* фон бейджа непрочитанных на кнопке хедера (красный) */
    color: white;        /* цвет числа в бейдже (белый) */
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
    line-height: 1;
}

/* =====================
   10. Никнейм-модал
   ===================== */

/* Затемнённый оверлей при показе модалки выбора никнейма */
.nickname-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* цвет затемнения фона при запросе никнейма (чёрный полупрозрачный) */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

/* Модалка никнейма в открытом состоянии */
.nickname-modal.active {
    display: flex;
}

/* Белый блок-карточка модалки с полем ввода никнейма */
.nickname-modal__content {
    background: white; /* фон карточки модалки никнейма (белый) */
    padding: 32px;
    border-radius: 16px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3); /* тень карточки модалки никнейма */
}

/* Заголовок «Придумайте никнейм» в модалке */
.nickname-modal__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #1a3d3f; /* цвет заголовка в модалке никнейма (тёмно-зелёный) */
}

/* Описательный текст под заголовком в модалке никнейма */
.nickname-modal__desc {
    font-size: 14px;
    color: #666; /* цвет описания в модалке никнейма (серый) */
    margin: 0 0 20px;
}

/* Поле ввода никнейма */
.nickname-modal__input {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid #ddd; /* граница поля ввода никнейма (светло-серая) */
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    margin-bottom: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
}

/* Поле ввода никнейма при фокусе */
.nickname-modal__input:focus {
    border-color: #1a6b6d; /* граница поля никнейма при фокусе (зелёная) */
}

/* Кнопка «Сохранить» в модалке никнейма */
.nickname-modal__button {
    width: 100%;
    padding: 13px;
    background: #1a6b6d; /* фон кнопки «Сохранить» никнейм (тёмно-зелёный) */
    color: white;        /* цвет текста кнопки (белый) */
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

/* Кнопка «Сохранить» при наведении */
.nickname-modal__button:hover {
    background: #145456; /* фон кнопки «Сохранить» при наведении (темнее) */
}

/* =====================
   11. Меню-шестерёнка в шапке правой панели
   ===================== */

.chat-head__info-btn {
    background: none;
    border: 1.5px solid #ccc;
    color: #999;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    padding: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.chat-head__info-btn:hover {
    background: rgba(26, 107, 109, 0.08);
    border-color: #1a6b6d;
    color: #1a6b6d;
}

/* Контейнер шестерёнки + выпадающего меню */
.chat-main__menu {
    position: relative;
    flex-shrink: 0;
}

/* Кнопка-шестерёнка */
.chat-main__menu-btn {
    background: none;
    border: 1.5px solid #ccc;
    color: #999;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.chat-main__menu-btn:hover,
.chat-main__menu--open .chat-main__menu-btn {
    background: rgba(26, 107, 109, 0.08);
    border-color: #1a6b6d;
    color: #1a6b6d;
}

/* Выпадающее меню */
.chat-main__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: white;
    border: 1px solid #c5dce4;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 195px;
    z-index: 100;
    padding: 4px 0;
    overflow: hidden;
}

.chat-main__menu--open .chat-main__dropdown {
    display: block;
}

/* Пункт меню: иконка слева + текст справа */
.chat-main__dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #1a2d3f;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

.chat-main__dropdown-item:hover {
    background: #f0f9fc;
    color: #1a6b6d;
}

.chat-main__dropdown-item:hover svg {
    stroke: #1a6b6d;
}

/* Опасный пункт (удалить, заблокировать) — становится красным */
.chat-main__dropdown-item--danger:hover {
    background: rgba(244, 67, 54, 0.06);
    color: #f44336;
}

.chat-main__dropdown-item--danger:hover svg {
    stroke: #f44336;
}

/* =====================
   12. Триггер и пикер emoji
   ===================== */

/* Обёртка: пузырёк сообщения + кнопка-триггер 😊 в одну строку */
.chat-message__bubble-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

/* В своём сообщении — триггер 😊 стоит СЛЕВА от пузырька */
.chat-message--own .chat-message__bubble-wrap {
    flex-direction: row-reverse;
}

/* Маленькая кнопка-триггер 😊 (открывает список реакций) — обычно невидима */
.chat-msg-emoji-trigger {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: white;          /* фон кнопки-триггера 😊 (белый) */
    border: 1px solid #e0e0e0;  /* граница кнопки-триггера (светло-серая) */
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* тень кнопки-триггера реакций */
    z-index: 2;
    opacity: 0;           /* скрыта по умолчанию */
    pointer-events: none;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

/* Триггер 😊 показывается при наведении на пузырёк (десктоп) или тапе (мобиле) */
.chat-message__bubble-wrap:hover .chat-msg-emoji-trigger,
.chat-message--tapped .chat-msg-emoji-trigger {
    opacity: 1;
    pointer-events: auto;
}

/* Триггер 😊 при наведении — немного увеличивается */
.chat-msg-emoji-trigger:hover {
    transform: scale(1.15);
}

/* Выпадающий список с эмодзи-реакциями (открывается над сообщением) */
.chat-msg-picker {
    display: none;
    position: absolute;
    bottom: 100%;   /* появляется ВЫШЕ пузырька */
    left: 0;
    margin-bottom: 4px;
    margin-top: 0;
    flex-direction: row;
    gap: 1px;
    padding: 4px 6px;
    background: white;                             /* фон панели выбора реакции (белый) */
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);   /* тень панели выбора реакции */
    z-index: 10;
    width: max-content;
}

/* Для своих сообщений — панель реакций прижата к правому краю */
.chat-message--own .chat-msg-picker {
    left: auto;
    right: 0;
}

/* Панель реакций в открытом состоянии */
.chat-msg-picker.chat-msg-picker--open {
    display: flex;
}

/* Для верхних сообщений — панель реакций открывается ВНИЗ */
.chat-msg-picker.chat-msg-picker--below {
    bottom: auto;
    top: 100%;      /* появляется НИЖЕ пузырька */
    margin-bottom: 0;
    margin-top: 4px;
}

/* Кнопка выбора конкретного эмодзи в панели реакций */
.chat-msg-picker__btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 17px;
    padding: 2px 4px;
    border-radius: 10px;
    line-height: 1;
    transition: transform 0.1s;
}

/* Эмодзи-кнопка при наведении — увеличивается и получает фон */
.chat-msg-picker__btn:hover {
    transform: scale(1.25);
    background: rgba(0, 0, 0, 0.05); /* фон эмодзи при наведении в пикере (тёмный прозрачный) */
}

/* =====================
   13. Реакции — на строке времени
   ===================== */

/* (дубль убран — стили перенесены выше) */

/* Один чип-реакции (эмодзи + счётчик), чужая реакция */
.chat-msg-reaction {
    background: rgba(0, 0, 0, 0.06); /* фон чипа реакции (тёмный полупрозрачный, нейтральный) */
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 1px 5px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transition: background 0.15s;
    line-height: 1.3;
    vertical-align: middle;
}

/* Счётчик числа реакций внутри чипа */
.chat-msg-reaction span {
    font-size: 10px;
    font-weight: 600;
    color: #666; /* цвет числа в чипе чужой реакции (тёмно-серый) */
}

/* Чип реакции, которую поставил сам текущий пользователь (выделенный) */
.chat-msg-reaction--own {
    background: rgba(26, 107, 109, 0.12); /* фон своей реакции (зелёный полупрозрачный) */
    border-color: rgba(26, 107, 109, 0.3); /* граница своей реакции (зелёная полупрозрачная) */
}

/* Счётчик в своём чипе реакции */
.chat-msg-reaction--own span {
    color: #1a6b6d; /* цвет числа в своей реакции (зелёный) */
}

/* Чип реакции при наведении */
.chat-msg-reaction:hover {
    background: rgba(0, 0, 0, 0.1); /* фон чипа реакции при наведении (темнее) */
}

/* =====================
   14. Адаптивность
   ===================== */

/* Поднять z-index сообщения при hover/tapped чтобы пикер не перекрывался соседями */
.chat-message:hover,
.chat-message--tapped {
    position: relative;
    z-index: 1;
}

/* На тачскрине: кнопка удаления появляется при тапе на сообщение */
.chat-message--tapped .chat-message__delete {
    opacity: 1;
}

/* ---- Мобильная версия (до 600px) ---- */
@media (max-width: 600px) {
    /* Fullscreen: от хедера до низа экрана, без скруглений */
    .chat-modal {
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        z-index: 8000;
        flex-direction: column;
        min-height: 0;
    }

    /* Сайдбар на весь экран */
    .chat-sidebar {
        width: 100%;
        min-width: 100%;
        flex: 1;
        min-height: 0;
    }

    /* Панель чата скрыта пока не выбран диалог */
    .chat-main {
        display: none;
        width: 100%;
    }

    /* При выборе диалога: сайдбар скрывается */
    .chat-modal.chat-modal--dialog-open .chat-sidebar {
        display: none;
    }

    /* При выборе диалога: панель чата показывается */
    .chat-modal.chat-modal--dialog-open .chat-main {
        display: flex;
        flex: 1;
        min-height: 0;
    }

    /* Кнопка «Назад» */
    .chat-main__back {
        display: flex;
    }

    /* Кнопка закрытия сайдбара */
    .chat-sidebar__close {
        display: flex;
    }

    /* iOS: 16px предотвращает авто-зум */
    .chat-form__input {
        font-size: 16px;
    }

    .chat-sidebar__search input {
        font-size: 16px;
    }

    /* Уменьшаем padding ленты сообщений на мобильных */
    .chat-messages {
        padding: 8px;
    }

    /* Пузырьки шире на мобиле */
    .chat-message {
        max-width: 95%;
    }

    /* Эмодзи крупнее для тапа */
    .chat-msg-picker__btn {
        font-size: 20px;
        padding: 4px 6px;
    }

    /* Шапка без скруглений */
    .chat-sidebar__head {
        border-radius: 0;
    }

    /* Форма — минимальные отступы */
    .chat-form {
        padding: 2px 4px;
        padding-bottom: env(safe-area-inset-bottom, 4px);
        gap: 2px;
    }

    .chat-form__input {
        padding: 10px 12px;
        margin: 6px 0;
    }

    .chat-form__attach {
        width: 38px;
        height: 38px;
        margin-left: 2px;
    }

    .chat-form__send {
        width: 38px;
        height: 38px;
        margin-right: 2px;
    }
}

/* Мелкие телефоны — header меньше */
@media (max-width: 490px) {
    .chat-modal {
        top: 48px;
    }
}

/* ---- Планшеты (601-880px) ---- */
@media (min-width: 601px) and (max-width: 880px) {
    .chat-modal {
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        z-index: 8000;
    }
}

/* ---- Десктоп (от 881px) ---- */
@media (min-width: 601px) {
    .chat-main__back {
        display: none !important;
    }
}

/* =====================
   Кнопка скрепки (прикрепить файл)
   ===================== */

.chat-form__attach {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 4px;
    transition: color 0.2s;
}

.chat-form__attach svg {
    width: 24px;
    height: 24px;
}

.chat-form__attach:hover {
    color: #1a6b6d;
}

/* =====================
   Результаты поиска пользователей
   ===================== */

.chat-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.15s;
}

.chat-search-result:hover {
    background: rgba(26, 107, 109, 0.06);
}

.chat-search-result__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #29b6f6;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.chat-search-result__name {
    font-size: 14px;
    font-weight: 600;
    color: #1a3d3f;
}

/* Toggle-пункт в dropdown */
.chat-main__dropdown-item--toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    font-size: 13px;
    color: #1a2d3f;
    cursor: default;
}

.chat-search-close {
    display: block;
    width: calc(100% - 32px);
    margin: 8px 16px;
    padding: 8px;
    background: none;
    border: 1px solid #c5dce4;
    border-radius: 8px;
    font-size: 12.5px;
    color: #1a6b6d;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}

.chat-search-close:hover {
    background: rgba(26, 107, 109, 0.08);
}

/* =====================================================================
   Ответ на сообщение
   ===================================================================== */

/* Кнопка ответа (появляется при ховере рядом с emoji-триггером) */
.chat-msg-reply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: #5b8a8c;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.chat-message__bubble-wrap:hover .chat-msg-reply-btn,
.chat-message--tapped .chat-msg-reply-btn {
    opacity: 1;
    pointer-events: auto;
}

.chat-msg-reply-btn:hover {
    background: rgba(26, 107, 109, 0.12);
    color: #1a6b6d;
}

/* Кнопка копирования текста (рядом с ответом) */
.chat-msg-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: #5b8a8c;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.chat-message__bubble-wrap:hover .chat-msg-copy-btn,
.chat-message--tapped .chat-msg-copy-btn {
    opacity: 1;
    pointer-events: auto;
}

.chat-msg-copy-btn:hover {
    background: rgba(26, 107, 109, 0.12);
    color: #1a6b6d;
}

/* Панель ответа над полем ввода */
.chat-reply-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f0f9fc;
    border-top: 1px solid #c5dce4;
    border-bottom: 1px solid #c5dce4;
    min-height: 44px;
}

.chat-reply-bar__line {
    width: 3px;
    min-height: 28px;
    background: #1a6b6d;
    border-radius: 2px;
    flex-shrink: 0;
}

.chat-reply-bar__body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.chat-reply-bar__author {
    font-size: 11.5px;
    font-weight: 700;
    color: #1a6b6d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-reply-bar__text {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-reply-bar__cancel {
    background: none;
    border: none;
    font-size: 15px;
    color: #888;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}

.chat-reply-bar__cancel:hover {
    color: #333;
}

/* ========================================
   ГОСТЕВОЙ РЕЖИМ
   ======================================== */

.chat-guest-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: chatFadeIn 0.2s ease-out;
}

.chat-guest-overlay__card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.chat-guest-overlay__title {
    font-size: 20px;
    font-weight: 700;
    color: #1a6b6d;
    margin-bottom: 8px;
}

.chat-guest-overlay__subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
    line-height: 1.5;
}

.chat-guest-overlay__input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 16px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.chat-guest-overlay__input:focus {
    outline: none;
    border-color: #667eea;
}

.chat-guest-overlay__btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.chat-guest-overlay__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.chat-guest-overlay__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* На мобильных */
@media (max-width: 600px) {
    .chat-guest-overlay__card {
        padding: 24px;
        max-width: 95%;
    }
    
    .chat-guest-overlay__title {
        font-size: 18px;
    }
    
    .chat-guest-overlay__subtitle {
        font-size: 13px;
    }
    
    .chat-guest-overlay__input {
        font-size: 16px; /* iOS zoom fix */
    }
}

/* Блок цитаты внутри пузырька */
.chat-msg-quote {
    padding: 5px 8px;
    margin-bottom: 5px;
    border-left: 3px solid #1a6b6d;
    background: rgba(26, 107, 109, 0.07);
    border-radius: 4px;
}

.chat-message--own .chat-msg-quote {
    border-left-color: rgba(26, 107, 109, 0.5);
    background: rgba(26, 107, 109, 0.08);
}

.chat-msg-quote__author {
    font-size: 11px;
    font-weight: 700;
    color: #1a6b6d;
    margin-bottom: 2px;
}

.chat-message--own .chat-msg-quote__author {
    color: #1a6b6d;
}

.chat-msg-quote__text {
    font-size: 12px;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.chat-message--own .chat-msg-quote__text {
    color: #2f5a5c;
}