/* ========================================
   CHAT ROOMS — встроенные чат-комнаты в хранилище
   BEM-префикс: .chatrooms-
   Дизайн скопирован с chat.css (мессенджер)

   Оглавление:
   1. Модальное окно (.chatrooms-modal)
   2. Левая колонка — сайдбар (.chatrooms-sidebar)
   3. Элементы комнат в сайдбаре (.chatrooms-item)
   4. Правая панель (.chatrooms-main)
   5. Шапка комнаты (.chatrooms-head)
   6. Лента сообщений (.chatrooms-messages)
   7. Пузырьки (.chatrooms-message)
   8. Форма ввода (.chatrooms-form)
   9. Пустые состояния (.chatrooms-empty)
   10. Результаты поиска (.chatrooms-search-results)
   11. Emoji пикер / реакции
   12. Бейдж в хедере
   13. Адаптивность
   ======================================== */

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

/* Само модальное окно чат-комнат — скрыто по умолчанию */
.chatrooms-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 */
}

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

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

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

/* =====================
   2. Сайдбар
   ===================== */

/* Левая панель со списком чат-комнат */
.chatrooms-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;
}

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

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

/* Кнопка закрытия (×) в шапке сайдбара — видна только на мобиле */
.chatrooms-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;
}

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

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

/* Поле ввода поиска комнат */
.chatrooms-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;
}

/* Плейсхолдер поля поиска */
.chatrooms-sidebar__search input::placeholder {
    color: #a3a3a3; /* цвет текста-подсказки (серый) */
}

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

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

/* Ширина полосы прокрутки в списке комнат */
.chatrooms-sidebar__list::-webkit-scrollbar { width: 4px; }

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

/* Нижняя секция с кнопкой «Создать комнату» */
.chatrooms-sidebar__create {
    padding: 10px 16px 12px 16px;
    border-top: 1px solid #c5dce4; /* линия над кнопкой создания */
    flex-shrink: 0;
}

/* Кнопка «+ Создать комнату» внизу сайдбара */
.chatrooms-sidebar__create-btn {
    width: 100%;
    padding: 9px 14px;
    background: rgba(26, 107, 109, 0.10); /* фон кнопки (зелёный полупрозрачный) */
    border: 1px solid rgba(26, 107, 109, 0.20); /* граница кнопки (зелёная полупрозрачная) */
    border-radius: 8px;
    color: #1a6b6d; /* цвет текста кнопки (тёмно-зелёный) */
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s, color 0.2s;
}

/* Кнопка создания комнаты при наведении */
.chatrooms-sidebar__create-btn:hover {
    background: rgba(26, 107, 109, 0.20); /* фон при наведении (насыщеннее) */
    color: #1a3d3f;
}

.chatrooms-temp-banner {
    flex-shrink: 0;
    padding: 8px 14px;
    background: rgba(255, 107, 53, 0.12);
    border-bottom: 1px solid rgba(255, 107, 53, 0.28);
    color: #c45a28;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.chatrooms-temp-banner[hidden] {
    display: none !important;
}

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

/* Одна строка-элемент комнаты в списке сайдбара */
.chatrooms-item {
    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;
}

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

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

/* Иконка комнаты в сайдбаре — квадрат со скруглёнными углами (не аватарка, а комната) */
.chatrooms-item__avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.chatrooms-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

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

/* Название комнаты в строке сайдбара */
.chatrooms-item__name {
    color: #0f2b2c;  /* цвет названия комнаты (тёмно-зелёный) */
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Значок «звезда» создателя рядом с названием комнаты */
.chatrooms-item__creator-badge {
    font-size: 10px;
    color: #ffc107; /* цвет значка создателя (золотисто-жёлтый) */
    flex-shrink: 0;
}

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

/* Мета-блок справа (время + бейдж непрочитанных) */
.chatrooms-item__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    align-self: stretch;
}

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

/* Бейдж с числом непрочитанных в строке комнаты */
.chatrooms-item__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;
}

/* Кнопка «Выйти из комнаты» — появляется при наведении на строку */
.chatrooms-item__leave {
    position: absolute;
    right: 8px;
    top: 8px;
    background: rgba(244, 67, 54, 0.08); /* фон кнопки выхода (красноватый прозрачный) */
    border: none;
    color: #ef9a9a;                      /* цвет иконки выхода (розовый) */
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: none;                       /* скрыта по умолчанию */
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

/* Кнопка выхода появляется при наведении на строку комнаты */
.chatrooms-item:hover .chatrooms-item__leave {
    display: flex;
}

/* Кнопка выхода из комнаты при наведении */
.chatrooms-item__leave:hover {
    background: rgba(244, 67, 54, 0.2); /* фон при наведении (ярче) */
    color: #f44336;
}

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

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

/* =====================
   5. Шапка комнаты
   ===================== */

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

/* Кнопка «Назад» в шапке — видна только на мобиле */
.chatrooms-head__back {
    background: none;
    border: none;
    color: #000;
    cursor: pointer;
    padding: 4px;
    margin-left: -4px;
    display: none; /* скрыта на десктопе */
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background 0.2s;
}

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

/* Круглый аватар комнаты в шапке */
.chatrooms-head__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
}

.chatrooms-head__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Обёртка для названия + счётчика участников (кликабельна — открывает описание) */
.chatrooms-head__title-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    justify-content: center;
    cursor: pointer;
}

/* Название комнаты в шапке */
.chatrooms-head__title {
    font-size: 15px;
    font-weight: 600;
    color: #1a2d3f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Счётчик участников под названием */
.chatrooms-head__members {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Блок с кнопками действий (поделиться, удалить и т.п.) в шапке */
.chatrooms-head__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto; /* прижать кнопки вправо */
}

/* Отдельная кнопка действия в шапке (круглая) */
.chatrooms-head__action {
    background: none;
    border: none;
    color: #999; /* цвет иконки кнопки действия (серый) */
    cursor: pointer;
    width: 34px;
    height: 34px;
    display: flex;
    margin-right: 4px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

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

/* Размер SVG-иконки внутри кнопки действия */
.chatrooms-head__action svg {
    width: 18px;
    height: 18px;
}

/* Опасная кнопка действия (удалить комнату) при наведении */
.chatrooms-head__action--danger:hover {
    color: #f44336 !important;
    background: rgba(244, 67, 54, 0.1) !important;
}

/* Шестерёнка с выпадающим меню в шапке комнаты */
.chatrooms-head__menu {
    position: relative;
    flex-shrink: 0;
}

.chatrooms-head__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;
}

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

.chatrooms-head__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;
}

.chatrooms-head__menu--open .chatrooms-head__dropdown {
    display: block;
}

.chatrooms-head__dropdown-sep {
    height: 1px;
    background: #e8eef2;
    margin: 4px 0;
}

.chatrooms-head__dropdown-label {
    padding: 6px 12px 2px;
    font-size: 11px;
    font-weight: 700;
    color: #1a6b6d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chatrooms-head__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;
}

/* Пункт с toggle-переключателем */
.chatrooms-head__dropdown-item--toggle {
    justify-content: space-between;
    cursor: default;
}

.chatrooms-head__dropdown-item:hover {
    background: #f0f9fc;
    color: #1a6b6d;
}

.chatrooms-head__dropdown-item:hover svg {
    stroke: #1a6b6d;
}

.chatrooms-head__dropdown-item--danger:hover {
    background: rgba(244, 67, 54, 0.06);
    color: #f44336;
}

.chatrooms-head__dropdown-item--danger:hover svg {
    stroke: #f44336;
}

/* Кнопка закрытия (×) всего окна чат-комнат в шапке */
.chatrooms-head__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;
}

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

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

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

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

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

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

/* Контейнер одного сообщения (чужое — по левому краю) */
.chatrooms-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 90%;
    animation: chatroomsFadeIn 0.2s ease-out; /* анимация появления */
    position: relative;
}

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

/* Поднять z-index при наведении/тапе (для пикера эмодзи) */
.chatrooms-message:hover,
.chatrooms-message--tapped {
    position: relative;
    z-index: 1;
}

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

/* Строка: аватарка пользователя + тело сообщения */
.chatrooms-message__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Аватарка пользователя слева от сообщения (круглая, 32px) */
.chatrooms-message__user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: white;
    align-self: center;
}

.chatrooms-message__user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Тело сообщения (имя + пузырёк + время) */
.chatrooms-message__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

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

/* Пузырёк чужого сообщения (белый) */
.chatrooms-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); /* тень пузырька */
}

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

/* Ссылки внутри пузырьков */
.chatrooms-message__bubble a {
    color: inherit;
    text-decoration: underline;
    word-break: break-all;
}

/* Вложение (файл, ссылка) под текстом сообщения */
.chatrooms-message__attach {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.04); /* фон плашки вложения (тёмный прозрачный) */
    border-radius: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: #555;
}

/* Вложение в собственном сообщении */
.chatrooms-message--own .chatrooms-message__attach {
    background: rgba(26, 107, 109, 0.08); /* фон вложения в своём сообщении */
    color: #2f5a5c;
}

/* Время внутри пузырька (float right — прижимается к правому краю) */
.chatrooms-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;
}

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

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

/* Скрыть если нет реакций */
.chatrooms-msg-reactions:empty { display: none; }

/* Группировка: повторные сообщения от одного и того же пользователя */
.chatrooms-message--grouped {
    margin-top: 2px !important;
}

.chatrooms-message--grouped .chatrooms-message__user-avatar {
    visibility: hidden;
}

.chatrooms-message--grouped .chatrooms-message__name {
    display: none;
}

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

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

/* Кнопка удаления сообщения — скрыта, появляется при наведении/тапе */
.chatrooms-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;
}

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

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

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

/* Нижняя панель с полем ввода и кнопкой отправки */
.chatrooms-form {
    padding: 2px 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Кнопка скрепки (прикрепить файл) */
.chatrooms-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;
}

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

.chatrooms-form__attach:hover:not(:disabled) {
    color: #1a6b6d;
}

.chatrooms-form__attach:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Поле ввода текста сообщения */
.chatrooms-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;
}

/* Поле ввода при фокусе */
.chatrooms-form__input:focus {
    border-color: #1a4c6d;
    background: rgb(255, 255, 255);
}

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

/* Кнопка отправки сообщения (стрелка без фона) */
.chatrooms-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;
}

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

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

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

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

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

/* Большая иконка в состоянии «пусто» */
.chatrooms-empty__icon {
    font-size: 40px;
    opacity: 0.4;
}

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

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

/* Один найденный результат поиска комнаты */
.chatrooms-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.15s;
}

/* Результат поиска при наведении */
.chatrooms-search-result:hover {
    background: rgba(26, 107, 109, 0.06);
}

/* Иконка/аватарка комнаты в результатах поиска */
.chatrooms-search-result__avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    overflow: hidden;
    background: white;
}

.chatrooms-search-result__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* Текстовая часть результата */
.chatrooms-search-result__body {
    flex: 1;
    min-width: 0;
}

/* Название комнаты в результатах поиска */
.chatrooms-search-result__title {
    font-size: 14px;
    font-weight: 600;
    color: #1a3d3f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Описание комнаты в результатах поиска */
.chatrooms-search-result__desc {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

/* Кнопка «Закрыть» результаты поиска в шапке */
.chatrooms-head__search-close {
    background: none;
    border: 1px solid #c5dce4;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 12.5px;
    color: #1a6b6d;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.chatrooms-head__search-close:hover {
    background: rgba(26, 107, 109, 0.08);
    border-color: #1a6b6d;
}

/* Кнопка «Закрыть результат поиска» в сайдбаре */
.chatrooms-search-close-btn {
    display: block;
    width: calc(100% - 24px);
    margin: 8px 12px;
    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;
}

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

/* Мета-информация в результатах поиска */
.chatrooms-search-result__meta {
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}

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

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

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

/* Маленькая кнопка-триггер 😊 — обычно невидима */
.chatrooms-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;
}

/* Триггер 😊 появляется при наведении или тапе */
.chatrooms-message__bubble-wrap:hover .chatrooms-msg-emoji-trigger,
.chatrooms-message--tapped .chatrooms-msg-emoji-trigger {
    opacity: 1;
    pointer-events: auto;
}

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

/* Выпадающая панель с эмодзи-реакциями (над сообщением) */
.chatrooms-msg-picker {
    display: none;
    position: absolute;
    bottom: 100%;   /* появляется ВЫШЕ пузырька */
    left: 0;
    margin-bottom: 4px;
    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;
}

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

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

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

/* Кнопка выбора конкретного эмодзи в панели реакций */
.chatrooms-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;
}

/* Эмодзи-кнопка при наведении */
.chatrooms-msg-picker__btn:hover {
    transform: scale(1.25);
    background: rgba(0, 0, 0, 0.05); /* фон при наведении в пикере */
}

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

/* Один чип-реакции (эмодзи + счётчик) */
.chatrooms-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;
}

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

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

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

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

/* =====================
   12. Бейдж в хедере
   ===================== */

/* Красный бейдж с числом непрочитанных на кнопке чат-комнат в хедере */
.chatrooms-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;
}

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

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

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

    /* Правая панель скрыта пока не выбрана комната */
    .chatrooms-main {
        display: none;
        width: 100%;
    }

    /* При выборе комнаты: сайдбар скрывается */
    .chatrooms-modal.chatrooms-modal--room-open .chatrooms-sidebar {
        display: none;
    }

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

    /* Кнопка «Назад» показывается на мобиле */
    .chatrooms-head__back {
        display: flex;
    }

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

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

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

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

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

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

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

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

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

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

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

    /* ---- Гостевой режим на мобиле ---- */

    /* Оверлей никнейма: прижать карточку к верху, чтобы клавиатура не перекрывала */
    .chatrooms-guest-overlay {
        align-items: flex-start;
        overflow-y: auto;
        padding: 48px 16px 16px;
    }

    /* Карточка никнейма: на весь экран, меньше отступы */
    .chatrooms-guest-overlay__card {
        width: 100%;
        max-width: 100%;
        padding: 22px 18px 20px;
        gap: 12px;
    }

    /* iOS: 16px предотвращает авто-зум при фокусе на поле никнейма */
    .chatrooms-guest-overlay__input {
        font-size: 16px;
    }

    /* Выпадающее меню: не выходить за край экрана */
    .chatrooms-head__dropdown {
        min-width: 180px;
        max-width: calc(100vw - 24px);
    }
}

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

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

/* ---- Десктоп (от 601px) ---- */
@media (min-width: 601px) {
    /* Кнопка «Назад» скрыта на десктопе */
    .chatrooms-head__back {
        display: none !important;
    }
}

/* Гостевой режим: сайдбар скрыт, комната занимает весь экран */
/* Гостевой режим: сайдбар видим, но поиск и создание скрыты */
.chatrooms-modal.chatrooms-modal--guest .chatrooms-sidebar__search {
    display: none;
}

/* ========== Оверлей «Укажите никнейм» (гость) ========== */
.chatrooms-guest-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}
.chatrooms-guest-overlay__card {
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px 24px;
    width: min(340px, 88%);
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.chatrooms-guest-overlay__title {
    font-size: 16px;
    font-weight: 700;
    color: #1a6b6d;
    text-align: center;
}
.chatrooms-guest-overlay__subtitle {
    font-size: 13px;
    color: #777;
    text-align: center;
    margin-top: -6px;
    line-height: 1.4;
}
.chatrooms-guest-overlay__input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.chatrooms-guest-overlay__input:focus {
    border-color: #1a6b6d;
}
.chatrooms-guest-overlay__input.error {
    border-color: #f44336;
}
.chatrooms-guest-overlay__btn {
    background: #1a6b6d;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.chatrooms-guest-overlay__btn:hover:not(:disabled) {
    background: #155a5c;
}
.chatrooms-guest-overlay__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========== Бейджик «(Гость)» в сообщениях ========== */
.chatrooms-message__guest-badge {
    color: #ff6b35;
    font-size: 0.78em;
    font-weight: 600;
    margin-left: 4px;
}

/* =====================
   15. Toggle-переключатель (уведомления)
   ===================== */

.cr-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}

.cr-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.cr-toggle__track {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 10px;
    transition: background 0.25s;
}

.cr-toggle input:checked + .cr-toggle__track {
    background: #1a6b6d;
}

.cr-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.cr-toggle input:checked ~ .cr-toggle__thumb {
    transform: translateX(16px);
}

/* =====================
   16. Модалка описания комнаты
   ===================== */

.cr-desc-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.cr-desc-overlay--open {
    display: flex;
}

.cr-desc-card {
    background: white;
    border-radius: 14px;
    width: 320px;
    max-width: 90%;
    max-height: 80%;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: crDescIn 0.2s ease-out;
}

@keyframes crDescIn {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.cr-desc-card__header {
    padding: 18px 18px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cr-desc-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #e8f5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #1a6b6d;
    flex-shrink: 0;
    overflow: hidden;
}

.cr-desc-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.cr-desc-card__title {
    font-size: 16px;
    font-weight: 700;
    color: #1a2d3f;
    word-break: break-word;
}

.cr-desc-card__body {
    padding: 14px 18px 18px;
}

.cr-desc-card__desc {
    font-size: 13.5px;
    color: #444;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.cr-desc-card__meta {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #888;
}

.cr-desc-card__meta-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.cr-desc-card__meta-row svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    stroke: #aaa;
}

.cr-desc-card__close {
    display: block;
    width: 100%;
    padding: 12px;
    background: none;
    border: none;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #1a6b6d;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.cr-desc-card__close:hover {
    background: #f0f9fc;
}

/* Секция участников внутри карточки описания */
.cr-desc-card__members-section {
    margin-top: 16px;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
}

.cr-desc-card__members-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.cr-desc-card__members-head svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    stroke: #aaa;
}

/* Список участников — скролл до 5 строк */
.cr-desc-card__members-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cr-desc-card__members-loading,
.cr-desc-card__members-empty {
    font-size: 12px;
    color: #aaa;
    padding: 4px 0;
}

/* Строка участника */
.cr-desc-member {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

/* Маленький круглый аватар-буква */
.cr-desc-member__av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e8f5e9;
    color: #1a6b6d;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cr-desc-member__name {
    font-size: 13px;
    color: #1a2d3f;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Пометка "(гость)" */
.cr-desc-member__guest {
    font-size: 11px;
    color: #aaa;
}

/* Пометка "создатель" */
.cr-desc-member__badge {
    font-size: 10px;
    background: #e8f5e9;
    color: #1a6b6d;
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* =====================
   17. Модалка участников / блокировка
   ===================== */

.cr-members-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.cr-members-overlay--open {
    display: flex;
}

.cr-members-card {
    background: white;
    border-radius: 14px;
    width: 340px;
    max-width: 90%;
    max-height: 80%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: crDescIn 0.2s ease-out;
}

.cr-members-card__header {
    padding: 16px 18px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    font-weight: 700;
    color: #1a2d3f;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cr-members-card__close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 18px;
    line-height: 1;
    padding: 2px 4px;
}

.cr-members-card__close-btn:hover {
    color: #333;
}

.cr-members-card__list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.cr-members-card__loading {
    padding: 24px;
    text-align: center;
    color: #aaa;
    font-size: 13px;
}

.cr-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    transition: background 0.15s;
}

.cr-member:hover {
    background: #f8fafb;
}

.cr-member__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #29b6f6;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.cr-member__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.cr-member__info {
    flex: 1;
    min-width: 0;
}

.cr-member__name {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a2d3f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-member__role {
    font-size: 11px;
    color: #1a6b6d;
    font-weight: 500;
}

.cr-member__ban-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #bbb;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.cr-member__ban-btn:hover {
    background: rgba(244, 67, 54, 0.08);
    color: #f44336;
}

.cr-member__ban-btn--banned {
    color: #f44336;
}

.cr-member__ban-btn--banned:hover {
    background: rgba(76, 175, 80, 0.08);
    color: #4caf50;
}

/* =====================
   18. Превью вложений в сообщениях
   ===================== */

/* Общий контейнер вложения */
.cr-attach {
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 4px;
    transition: opacity 0.15s;
}

.cr-attach:hover {
    opacity: 0.88;
}

/* Изображение — большое превью */
.cr-attach--image {
    max-width: 260px;
}

.cr-attach__img {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

/* Файл-карточка (документ, аудио, архив и т.д.) */
.cr-attach--file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    min-width: 180px;
    max-width: 280px;
}

.chatrooms-message--own .cr-attach--file {
    background: rgba(26, 107, 109, 0.08);
}

.cr-attach__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 6px;
}

.cr-attach__info {
    flex: 1;
    min-width: 0;
}

.cr-attach__name {
    font-size: 13px;
    font-weight: 600;
    color: #1a2d3f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chatrooms-message--own .cr-attach__name {
    color: #1a5c5e;
}

.cr-attach__size {
    font-size: 11px;
    color: #888;
    margin-top: 1px;
}

.cr-attach__dl {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border-radius: 50%;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.cr-attach__dl:hover {
    color: #1a6b6d;
    background: rgba(26, 107, 109, 0.1);
}

/* =====================
   19. Файловый пикер (модалка выбора файлов)
   ===================== */

.cr-filepicker-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.cr-filepicker-overlay--open {
    display: flex;
}

.cr-filepicker {
    background: white;
    border-radius: 14px;
    width: 380px;
    max-width: 95%;
    max-height: 85%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: crDescIn 0.2s ease-out;
}

.cr-filepicker__header {
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    font-weight: 700;
    color: #1a2d3f;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cr-filepicker__close {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 20px;
    line-height: 1;
    padding: 2px 6px;
}

.cr-filepicker__close:hover {
    color: #333;
}

/* Вкладки по типам файлов */
.cr-filepicker__tabs {
    display: flex;
    gap: 0;
    padding: 0 12px;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    flex-shrink: 0;
}

.cr-filepicker__tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 12px;
    font-size: 12.5px;
    color: #888;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.cr-filepicker__tab:hover {
    color: #1a6b6d;
}

.cr-filepicker__tab--active {
    color: #1a6b6d;
    font-weight: 600;
    border-bottom-color: #1a6b6d;
}

/* Сетка файлов */
.cr-filepicker__grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    min-height: 120px;
    max-height: 340px;
    align-content: start;
}

.cr-filepicker__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 30px 0;
}

/* Один файл в сетке */
.cr-filepicker__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.cr-filepicker__item:hover {
    background: rgba(26, 107, 109, 0.06);
}

.cr-filepicker__item-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cr-filepicker__item-icon img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
}

.cr-filepicker__item-icon--img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
}

.cr-filepicker__item-icon--img img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
}

.cr-filepicker__item-name {
    font-size: 11px;
    color: #555;
    text-align: center;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Футер с кнопкой загрузки */
.cr-filepicker__footer {
    padding: 12px 18px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: center;
}

.cr-filepicker__upload-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: #f0f9fc;
    border: 1px solid #c5dce4;
    border-radius: 10px;
    color: #1a6b6d;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.cr-filepicker__upload-btn:hover:not(:disabled) {
    background: #e0f2f6;
    border-color: #1a6b6d;
}

.cr-filepicker__upload-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Уведомление о загрузке в хранилище */
.cr-filepicker__notice {
    padding: 8px 18px;
    font-size: 11.5px;
    color: #888;
    text-align: center;
    line-height: 1.4;
    border-top: 1px solid #eee;
}

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

/* Кнопка ответа (появляется при ховере) */
.chatrooms-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;
}

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

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

/* Кнопка копирования текста (рядом с ответом) */
.chatrooms-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;
}

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

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

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

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

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

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

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

.chatrooms-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;
}

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

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

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

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

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

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

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