* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin:0; background:#0f172a; color:#e2e8f0; }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#111827; border-bottom:1px solid #1f2937; }
h1 { font-size:18px; margin:0; }
#me { opacity:0.85; font-size:14px; }
.card { background:#111827; padding:16px; border:1px solid #1f2937; border-radius:8px; }
#auth { padding:16px; }
#chat { display:flex; height: calc(100vh - 60px); }
.hidden { display:none; }
aside { width:280px; border-right: 1px solid #1f2937; overflow-y:auto; padding:12px; }
aside h3 { margin-top:0; }
#users { display: none; list-style:none; padding:0; margin:0; }

#users.active {
    display: block;
}

#users li {
    padding: 8px;
    border: 1px solid #1f2937;
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
}

/* Имя пользователя */
#users li > span:first-child {
    flex-grow: 1; /* Занимает все доступное пространство */
    padding-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Контейнер для статуса и счетчика */
.user-status-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

#users li.active {
  border-color:#3b82f6;
  background: none; }

#users li.active .user-content {
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
}

.badge {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid #374151;
    background: none;
    margin-left: auto; /* Выравниваем по правому краю */
    flex-shrink: 0;
}



.badge.online {
    border-color: #22c55e;
}
main { flex:1; display:flex; flex-direction:column; }
#chat-header { padding:12px; border-bottom:1px solid #1f2937; display:flex; justify-content:space-between; align-items:center; }
#messages { flex:1; padding:12px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;}
.msg { max-width:70%; padding:8px 12px; border:1px solid #1f2937; border-radius:12px; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; word-break: break-word;}
.msg.me { align-self:flex-end; background:#0b1220; border-color:#3b82f6; }
.msg.other { align-self:flex-start; background:#0b1220; }
#composer { display:flex; gap:8px; padding:12px; border-top:1px solid #1f2937; }

/* Глобальные стили для input и button */
input, button {
  padding:10px;
  border-radius:8px;
  border:1px solid #374151;
  background:#0b1220;
  color:#e2e8f0;
}

button { cursor:pointer; }
button:disabled { opacity:0.5; cursor:not-allowed; }

/* Специфичные стили для страниц авторизации */
#auth .card h2 {
  text-align: center;
  margin-bottom: 20px;
}

#auth .card input {
  display: block;
  width: 100%;
  margin: 0 auto 12px;
  padding: 10px;
}

#auth .card button {
  display: block;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: 12px;
}

#auth .auth-switch {
  margin-top: 16px;
  text-align: center;
}

/* Auth layout + user dropdown */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  padding: 40px 20px; /* Уменьшим боковые отступы на мобильных */
  max-width: 400px; /* Увеличим максимальную ширину */
  min-width: 300px; /* Добавим минимальную ширину */
  width: 90%; /* Займёт 90% ширины экрана */
  margin: 40px auto;
}

/* Обновим стили для .card внутри контейнера */
.auth-container .card {
  width: 100%; /* Карточка займёт всю ширину контейнера */
  padding: 24px; /* Увеличим внутренние отступы */
}

/* Добавим медиа-запрос для очень широких экранов */
@media (min-width: 1200px) {
  .auth-container {
    max-width: 400px; /* Шире на больших экранах, но не слишком */
  }
}

#user-menu { position: relative; display: flex; align-items: center; gap: 8px; }
.dropdown { position: relative; }
.dropdown-content { position: absolute; right: 0; top: 100%; background: #111827; border: 1px solid #1f2937; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; z-index: 1100;}
.dropdown-content.hidden { display: none; }
.dropdown-content button { border: none; background: none; color: #e2e8f0; padding: 8px; text-align: left; }
.dropdown-content button:hover { background: #1f2937; }

.auth-switch { margin-top: 12px; font-size: 14px; text-align: center; color: #94a3b8; }
.auth-switch a { color: #3b82f6; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

#remoteAudio {
  width: 100%;
  max-width: 300px;
  margin: 10px 0;
  background: #1e293b;
  border-radius: 8px;
  display: none;
}
.call-active #remoteAudio { display: block; }

/* Модальное окно */
.modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7);
  display: none; justify-content: center; align-items: center; z-index: 1000;
}
.modal.show { display: flex; }
.modal-content { background: #1e293b; padding: 20px; border-radius: 8px; text-align: center; border: 1px solid #3b82f6; }
.call-buttons { display: flex; gap: 10px; margin-top: 15px; justify-content: center; }

/* Статус звонка */
#call-status {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  background: #1e293b; padding: 10px 20px; border-radius: 20px;
  display: none; align-items: center; gap: 10px; z-index: 999; border: 1px solid #3b82f6;
}
#call-status.show { display: flex; }

/* Кнопки звонка */
.call-controls { display: flex; gap: 10px; }
#btn-call { background: #10b981; }
#btn-hangup { background: #ef4444; display: none; }
#btn-call:hover { background: #059669; }
#btn-hangup:hover { background: #dc2626; }
.call-active #btn-call { display: none; }
.call-active #btn-hangup { display: block; }

.msg-time {
  font-size: 0.7em;
  opacity: 0.7;
  text-align: right;
}

.unread-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: transparent;
    color: #e2e8f0;
    font-size: 0.7em;
    flex-shrink: 0;
}

.badge-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto; /* Выравниваем по правому краю */
}

/* Profile settings modal */
.profile-preview {
  position: relative;
  margin-bottom: 20px;
  border: 1px solid #374151;
  border-radius: 8px;
  overflow: hidden;
}

.banner-preview {
  height: 150px;
  background: #1f2937;
  background-size: cover;
  background-position: center;
}

.avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1f2937;
  border: 3px solid #111827;
  position: absolute;
  bottom: -32px;
  left: 20px;
  background-size: cover;
  background-position: center;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.file-info {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 5px;
}

.modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

/* Update user list items */
#users li {
  height: 80px; /* Увеличиваем высоту для баннеров */
  padding: 0;
  position: relative;
  overflow: hidden;
}

.user-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  display: flex;
  align-items: center;
}

.user-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  background-size: cover;
  background-position: center;
  border: 1px solid #1f2937;
}

/* Добавим в конец файла */
#avatar-upload, #banner-upload {
  width: 100%;
  padding: 8px;
  border: 1px dashed #374151;
  border-radius: 8px;
  margin-bottom: 5px;
}

.profile-preview {
  height: 200px;
  margin-bottom: 20px;
}

.banner-preview {
  height: 120px;
  background-color: #1f2937;
  background-size: cover;
  background-position: center;
  border-radius: 8px 8px 0 0;
}

.avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #1f2937;
  border: 3px solid #111827;
  margin: -40px auto 0;
  position: relative;
  background-size: cover;
  background-position: center;
}

#chat-selector {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px solid #374151;
    gap: 8px;
}

#chat-selector button {
  flex: 0 0 50px !important;   /* фиксируем ширину */
  width: 50px !important;
  height: 50px !important;     /* квадрат 60×60 */
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

#chat-selector button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

#chat-selector button.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

#chat-selector button:last-child {
    flex: 0 0 40px;
    font-size: 1.2em;
}

/* Группы */
#groups {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

#groups.active {
    display: block;
}

#groups li {
    padding: 0;
    margin-bottom: 8px;
    border: 1px solid #1f2937;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.group-banner {
    height: 80px;
    background-color: #1f2937;
    background-size: cover;
    background-position: center;
}

.group-content {
    padding: 8px;
}

.group-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #1f2937;
    border: 2px solid #111827;
    float: left;
    margin-right: 8px;
    background-size: cover;
    background-position: center;
}

.group-name {
    font-weight: bold;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#groups li.active {
    border-color: #3b82f6;
}

.msg.group-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 75%;           /* не больше 75% контейнера */
    width: fit-content;
    margin-bottom: 4px;
    background: #1a243a;
    border: 1px solid #2d3748;
    border-radius: 12px;
    padding: 8px 12px;
    word-break: break-word;   /* перенос длинных слов */
    overflow-wrap: break-word;/* современный перенос слов */
}

.msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #2d3748;
    flex-shrink: 0;
    margin-right: 2px;       /* уменьшенный отступ */
}

.msg-body {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    align-items: flex-start;
}

.msg-sender-name {
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: #cbd5e1;
}

.msg-content {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 4px;
    white-space: pre-wrap;     /* сохраняем переносы */
    word-wrap: break-word;     /* старый стандарт для переносов */
    overflow-wrap: break-word; /* современный стандарт для переносов */
}

.msg-time {
    font-size: 0.75rem;
    color: #94a3b8;
    align-self: flex-end;
    margin-top: 0;             /* убрали верхний margin */
}

/* ===================== */
/* Свои сообщения в группе*/
/* ===================== */

.msg.group-msg.me {
    margin-left: auto;
    background: #0b2d4e;
    border-color: #1e4a7e;
    justify-content: flex-end;
}

.msg.group-msg.me .msg-avatar,
.msg.group-msg.me .msg-sender-name {
    display: none; /* скрываем аватар и имя у себя */
}

.msg.group-msg.me .msg-body {
    align-items: flex-start;   /* текст внутри слева */
    text-align: left;
}

.search-container {
  position: relative;
  flex-grow: 1;
  max-width: 400px;
  margin: 0 20px;
}

#search-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 20px;
  background: #1f2937;
  border: 1px solid #374151;
  color: white;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 8px;
  margin-top: 5px;
  z-index: 2000;
  max-height: 0;
  overflow: hidden; /* Всегда hidden, даже при активном состоянии */
  opacity: 0;
  transform: translateY(-10px);
  transition:
    max-height 0.3s ease-in-out,
    opacity 0.2s ease-in-out,
    transform 0.2s ease-in-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-results.active {
  max-height: 300px;
  opacity: 1;
  transform: translateY(0);
}

.search-result-item {
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-5px);
  transition:
    opacity 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.search-results.active .search-result-item {
  opacity: 1;
  transform: translateY(0);
}

/* Добавим небольшую задержку для каждого элемента */
.search-results.active .search-result-item:nth-child(1) { transition-delay: 0.05s; }
.search-results.active .search-result-item:nth-child(2) { transition-delay: 0.1s; }
.search-results.active .search-result-item:nth-child(3) { transition-delay: 0.15s; }
.search-results.active .search-result-item:nth-child(4) { transition-delay: 0.2s; }
.search-results.active .search-result-item:nth-child(5) { transition-delay: 0.25s; }

.search-result-item:hover {
  background: #1f2937;
}

.search-result-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #1f2937;
}

.search-result-info {
  flex-grow: 1;
}

.search-result-name {
  font-weight: bold;
}

.search-result-login {
  font-size: 0.8em;
  color: #94a3b8;
}

#users, #groups {
    transition:
        opacity 0.3s ease-in-out,
        transform 0.3s ease-in-out;
    will-change: opacity, transform;
}

/* Убедимся, что списки правильно позиционированы */
#users {
    position: relative;
    left: 0;
}

#groups {
    position: relative;
    left: 0;
}

/* Добавить в конец файла */
#btn-group-settings {
  background: none;
  border: none;
  padding: 0;
  margin-right: 8px;
}

#btn-group-settings img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.2s;
}

#btn-group-settings:hover img {
  opacity: 1;
}

/* Обновим стили для элементов группы */
#groups li {
  height: 80px;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.group-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.group-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

.group-name {
  font-weight: bold;
  color: white;
  margin-bottom: 4px;
}

.group-tooltip {
  position: absolute;
  width: 204px;
  background: #111827;
  border: 1px solid #3b82f6;
  border-radius: 8px;
  padding: 12px;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.group-tooltip.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.group-tooltip-banner {
  width: 180px;
  height: 120px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  background-color: #1f2937;
  overflow: hidden; /* Добавляем это свойство */
}

.group-tooltip-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: -30px auto 0;
  border: 3px solid #111827;
  background-size: cover;
  background-position: center;
  background-color: #1f2937;
  position: relative;
  z-index: 1;
}

.group-tooltip-desc {
  font-size: 0.8em;
  color: #94a3b8;
  text-align: center;
  margin-top: 8px;
}

.msg-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.msg-media-item {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain; /* ничего не обрезаем */
  border-radius: 8px;
  border: 1px solid #1f2937;
}

#btn-attach {
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 1.2em;
  color: #94a3b8;
}

#btn-attach:hover {
  color: #e2e8f0;
}

/* ------- общий контейнер медиа в сообщении ------- */
.msg-media-container {
  display: grid;
  gap: 4px;
  max-width: 100%;
}

.msg-media-wrapper {
  position: relative;
  overflow: hidden;         /* безопасно, но высоту не фиксируем */
  border-radius: 8px;
  background: #1f2937;
}

/* БАЗОВО: ничего не обрезаем, держим пропорции, высота ≤ 400px */
.msg-media-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 400px;        /* (2) ограничение по высоте */
  object-fit: contain;      /* (1) сохраняем соотношение сторон, не кадрируем */
  background: transparent;  /* не даём «полосам» проявиться */
  border-radius: 8px;
}

/* -------- базовые сетки -------- */
.msg-media-container.layout-1 { grid-template-columns: 1fr; }
.msg-media-container.layout-2 { grid-template-columns: repeat(2, 1fr); }
.msg-media-container.layout-3 { grid-template-columns: repeat(3, 1fr); }
.msg-media-container.layout-4 { grid-template-columns: repeat(2, 1fr); }
.msg-media-container.layout-6,
.msg-media-container.layout-9 { grid-template-columns: repeat(3, 1fr); }
.msg-media-container.layout-8 { grid-template-columns: repeat(4, 1fr); }

/* ===== спец. раскладки для 5 и 7 =====
   ИДЕЯ:
   - Контейнер — inline-flex, чтоб ширина равнялась содержимому.
   - Верхние строки (2 фото) — inline-grid с колонками max-content:
     их собственная контентная ширина и задаёт ширину всего блока.   (3)
   - Нижняя строка (3 фото) — width:100% внутри контейнера,
     то есть она НИКОГДА не шире верхних строк.                     (4)
*/
.msg-media-container.layout-5,
.msg-media-container.layout-7 {
  display: inline-flex;      /* shrink-to-fit по содержимому */
  flex-direction: column;
  gap: 4px;
  width: fit-content;        /* (3) ширина = по верхним строкам */
  max-width: 100%;
}

/* общий ряд */
.msg-media-container.layout-5 .row,
.msg-media-container.layout-7 .row {
  gap: 4px;
}

/* ----- СТРОКА С 2 ФОТО (ЗАДАЁТ ШИРИНУ) ----- */
.row-top-2 {
  display: inline-grid;               /* строка имеет собственную контентную ширину */
  grid-auto-flow: column;
  grid-auto-columns: max-content;     /* ширина каждой колонки = ширине картинки */
  gap: 4px;
  align-items: start;
}

/* для верхней строки важно: ширина фото берётся из их собственных пропорций */
.row-top-2 .msg-media-wrapper {
  display: inline-block;
}

.row-top-2 .msg-media-img {
  width: auto;            /* ключ: не растягиваем по ширине ячейки */
  max-width: 100%;        /* но разрешаем сжиматься, если мало места */
  height: auto;
  max-height: 400px;      /* (2) макс. высота */
  object-fit: contain;    /* (1) без обрезки */
}

/* ----- СТРОКА С 3 ФОТО (ПОДСТРАИВАЕТСЯ) ----- */
.row-bottom-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;            /* (4) никогда не шире верхних строк */
  align-items: start;
}

/* в нижней строке фото занимают доступную ширину, высота уменьшается при необходимости */
.row-bottom-3 .msg-media-img {
  width: 100%;
  height: auto;
  max-height: 400px;      /* верхний предел, но может быть меньше, чтоб влезть */
  object-fit: contain;    /* (1) без обрезки */
}

/* на всякий случай выравнивание содержимого ячейки */
.row > .msg-media-wrapper {
  border-radius: 8px;
  overflow: hidden;
}


.msg-text {
    margin-top: 8px;
}

/* Стили для кнопки прикрепления */
.attach-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attach-btn:hover {
    color: #e2e8f0;
}

.attach-btn svg {
    width: 24px;
    height: 24px;
}

.format-menu {
    position: absolute;
    background: #1e293b;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    gap: 4px;
    z-index: 1100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.format-menu.hidden {
    display: none;
}

.format-menu button {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: #0f172a;
    border: 1px solid #374151;
    color: #e2e8f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.format-menu button:hover {
    background: #1e293b;
    border-color: #3b82f6;
}

.format-menu button strong,
.format-menu button em,
.format-menu button u,
.format-menu button s {
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

#msg-input[contenteditable="true"]:empty:before {
  content: attr(placeholder);
  color: gray;
}

#msg-input {
  flex: 1;                         /* занимает всю ширину в #composer */
  min-height: 40px;                /* минимальная высота */
  max-height: calc(1.4em * 8);     /* максимум примерно 8 строк */
  overflow-y: auto;                /* если больше 8 строк — скролл */
  padding: 10px 12px;
  border-radius: 20px;
  background: #1f2937;
  border: 1px solid #374151;
  color: #e2e8f0;
  outline: none;
  line-height: 1.4;
  font-size: 15px;
  white-space: pre-wrap;           /* сохраняем переносы */
  word-wrap: break-word;
}

#msg-input[contenteditable="true"]:empty:before {
  content: attr(placeholder);
  color: #94a3b8;
  pointer-events: none;
}

#media-preview-container {
  max-height: 300px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px));
  gap: 10px;
  margin: 15px 0;
}

#media-preview-container .msg-media-wrapper {
  max-width: 150px;
}

#media-caption {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

#media-preview-container {
  max-height: 300px;
  overflow-y: auto;
}

#media-preview-container .msg-media-wrapper {
  max-width: 150px;
}

#media-caption.editable {
  min-height: 60px;
  max-height: 120px;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 20px;
  background: #1f2937;
  border: 1px solid #374151;
  color: #e2e8f0;
  outline: none;
  line-height: 1.4;
  font-size: 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

#media-caption.editable:empty:before {
  content: attr(placeholder);
  color: #94a3b8;
  pointer-events: none;
}

.msg-media-grid {
  display: grid;
  gap: 4px;
  border-radius: 12px;
  overflow: hidden;
}

/* Ячейки */
.msg-media-cell {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.msg-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Раскладки под количество фото */

/* 1 фото — большое */
.msg-media-grid.layout-1 {
  grid-template-columns: 1fr;
}
.msg-media-grid.layout-1 .msg-media-cell {
  aspect-ratio: 16/12;
}

/* 2 фото — два в ряд */
.msg-media-grid.layout-2 {
  grid-template-columns: repeat(2, 1fr);
}
.msg-media-grid.layout-2 .msg-media-cell {
  aspect-ratio: 4/5;
}

/* 3 фото — один сверху + два снизу */
.msg-media-grid.layout-3 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
}
.msg-media-grid.layout-3 .msg-media-cell:first-child {
  grid-column: span 2;
  aspect-ratio: 16/9;
}
.msg-media-grid.layout-3 .msg-media-cell:nth-child(n+2) {
  aspect-ratio: 1/1;
}

/* 4 фото — один сверху + три снизу */
.msg-media-grid.layout-4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
}
.msg-media-grid.layout-4 .msg-media-cell:first-child {
  grid-column: span 2;
  aspect-ratio: 16/9;
}
.msg-media-grid.layout-4 .msg-media-cell:nth-child(n+2) {
  aspect-ratio: 1/1;
}

/* 5–9 фото — сетка 3×N */
.msg-media-grid.layout-5,
.msg-media-grid.layout-6,
.msg-media-grid.layout-7,
.msg-media-grid.layout-8,
.msg-media-grid.layout-9 {
  grid-template-columns: repeat(3, 1fr);
}
.msg-media-grid.layout-5 .msg-media-cell,
.msg-media-grid.layout-6 .msg-media-cell,
.msg-media-grid.layout-7 .msg-media-cell,
.msg-media-grid.layout-8 .msg-media-cell,
.msg-media-grid.layout-9 .msg-media-cell {
  aspect-ratio: 1/1;
}

/* ======================= */
/* Мобильная версия */
/* ======================= */
@media (orientation: portrait) {
  /* Контейнер чата вертикально */
  #chat {
    flex-direction: column;
  }

  .msg.group-msg {
    max-width: 90%;
  }

  /* aside занимает весь экран */
  aside {
    width: 100%;
    height: calc(100vh - 60px); /* 60px — высота header */
    border-right: none;
    position: absolute;
    top: 60px; /* сразу под header */
    left: 0;
    z-index: 1000;
    background: #0f172a;
    transition: transform 0.3s ease-in-out;
  }

  /* chat-selector — кнопки по центру */
  #chat-selector {
    justify-content: space-around;
    padding: 8px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #374151;
  }

  #chat-selector button {
    flex: 1;
    max-width: 80px;
  }

  /* main скрыт по умолчанию */
  main {
    display: none;
    width: 100%;
    height: calc(100vh - 60px); /* тоже под header */
  }

  /* header — без названия */
  header h1 {
    display: none;
  }
  header .search-container {
    margin: 0;
    flex: 1;
  }
  header #user-menu {
    margin-left: auto;
  }

  /* Когда открыт чат — aside скрываем, main показываем */
  body.chat-open aside {
    display: none;
  }
  body.chat-open main {
    display: flex;
  }
}

/* ------------------ FIX ДЛЯ МЕДИАГРУПП ------------------ */

/* Общие правила для медиа в сообщениях (медиагруппы) */
.msg-media-container .msg-media-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;      /* сохраняем пропорции, без обрезки */
  border-radius: 8px;
  background: transparent;
}

/* Правила для .msg-media-grid (миниатюры / сетка) */
.msg-media-grid .msg-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* обрезаем, чтобы красиво вписать в квадрат */
  display: block;
}

/* ==================== FIX ширины для layout-5 и 7 ==================== */

.msg-media-container.layout-5,
.msg-media-container.layout-7 {
  display: inline-flex;     /* shrink-to-fit */
  flex-direction: column;
  gap: 4px;
  width: fit-content;       /* ширина = ширине row-top-2 */
  max-width: 100%;          /* не вылезаем за контейнер */
}

/* Строка с двумя фото должна сама задавать ширину */
.msg-media-container.layout-5 .row-top-2,
.msg-media-container.layout-7 .row-top-2 {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 4px;
  align-items: start;
  width: fit-content;       /* важный момент */
}

/* ==================== FIX адаптивности layout-5 и 7 ==================== */

/* Контейнер: shrink-to-fit, но не шире экрана */
.msg-media-container.layout-5,
.msg-media-container.layout-7 {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;         /* теперь никогда не шире экрана */
}

/* Верхний ряд — задаёт ширину, но сжимается при необходимости */
.msg-media-container.layout-5 .row-top-2,
.msg-media-container.layout-7 .row-top-2 {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;  /* динамическая ширина колонок */
  gap: 4px;
  align-items: start;
  max-width: 100%;         /* не шире экрана */
}

/* Картинки в верхнем ряду — растягиваются пропорционально, но не обрезаются */
.row-top-2 .msg-media-img {
  width: 100%;             /* колонка сама масштабируется */
  height: auto;
  max-height: 400px;
  object-fit: contain;
}

/* Нижний ряд — ширина всегда совпадает с верхним */
.row-bottom-3 {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;   /* все три колонки одинаковые */
  gap: 4px;
  align-items: start;
  max-width: 100%;          /* не шире контейнера */
}

/* ---------- layout-5 (2 сверху, 3 снизу) ---------- */
.msg-media-container.layout-5 {
  display: inline-grid; /* shrink-to-fit по содержимому */
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6 колонок для гибкого позиционирования */
  grid-auto-rows: auto;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
}

/* позиции: верхние два занимают по 3 колонки (половину), нижние три — по 2 колонки */
.msg-media-container.layout-5 .m5-1 { grid-column: 1 / span 3; grid-row: 1; }
.msg-media-container.layout-5 .m5-2 { grid-column: 4 / span 3; grid-row: 1; }
.msg-media-container.layout-5 .m5-3 { grid-column: 1 / span 2; grid-row: 2; }
.msg-media-container.layout-5 .m5-4 { grid-column: 3 / span 2; grid-row: 2; }
.msg-media-container.layout-5 .m5-5 { grid-column: 5 / span 2; grid-row: 2; }

.msg-media-container.layout-5 .msg-media-wrapper {
  overflow: hidden;
  border-radius: 8px;
  min-width: 0;
  min-height: 0;
  display: block;
  background: #1f2937;
}

/* изображение полностью заполняет ячейку, сохраняет пропорции и не обрезается */
.msg-media-container.layout-5 .msg-media-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 400px;
  display: block;
}

/* ---------- layout-7 (2 верхних ряда по 2, 3 снизу) ---------- */
.msg-media-container.layout-7 {
  display: inline-grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
}

/* верхние 4: две в первом ряду, две во втором (каждая занимает половину) */
.msg-media-container.layout-7 .m7-1 { grid-column: 1 / span 3; grid-row: 1; }
.msg-media-container.layout-7 .m7-2 { grid-column: 4 / span 3; grid-row: 1; }
.msg-media-container.layout-7 .m7-3 { grid-column: 1 / span 3; grid-row: 2; }
.msg-media-container.layout-7 .m7-4 { grid-column: 4 / span 3; grid-row: 2; }

/* нижние 3 по 2 колонки каждая */
.msg-media-container.layout-7 .m7-5 { grid-column: 1 / span 2; grid-row: 3; }
.msg-media-container.layout-7 .m7-6 { grid-column: 3 / span 2; grid-row: 3; }
.msg-media-container.layout-7 .m7-7 { grid-column: 5 / span 2; grid-row: 3; }

.msg-media-container.layout-7 .msg-media-wrapper {
  overflow: hidden;
  border-radius: 8px;
  min-width: 0;
  min-height: 0;
  display: block;
  background: #1f2937;
}

.msg-media-container.layout-7 .msg-media-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 400px;
  display: block;
}

/* общий контейнер — shrink-to-fit по верхней строке */
.msg-media-container.layout-5,
.msg-media-container.layout-7 {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: fit-content;     /* ширина = по контенту сверху */
  max-width: 100%;        /* но не вылезаем за экран */
}

/* верхняя строка — сама задаёт ширину */
.row-top-2 {
  display: inline-flex;
  gap: 4px;
  align-items: flex-start;
}

/* фото сверху: не растягиваем, но позволяем сжиматься */
.row-top-2 .msg-media-img {
  height: auto;
  max-height: 400px;
  width: auto;        /* ширина = по натуральному размеру */
  max-width: 100%;    /* но сжимается, если окно узкое */
  object-fit: contain;
}

/* нижняя строка — ширина = ширина контейнера (т.е. верхней строки) */
.row-bottom-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;  /* равна ширине контейнера */
}

/* картинки снизу */
.row-bottom-3 .msg-media-img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
}

/* Убираем ограничения для медиа в групповых сообщениях */
.msg.group-msg .msg-media-container {
    max-width: 100% !important;
}

/* Обеспечиваем правильное отображение медиа в групповых сообщениях */
.msg.group-msg .msg-body {
    width: 100%;
    max-width: 100%;
}

.msg.group-msg .msg-media-container.layout-5,
.msg.group-msg .msg-media-container.layout-7 {
    width: 100%;
    max-width: 100%;
}

/* Убедимся, что изображения адаптивны */
.msg.group-msg .msg-media-img {
    max-width: 100%;
    height: auto;
}

/* Исправление для медиа в групповых сообщениях */
.msg.group-msg .msg-content {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.msg.group-msg .msg-media-container {
    max-width: 100% !important;
}

.msg.group-msg .msg-media-img {
    max-width: 100%;
    height: auto;
}

/* Обеспечиваем правильное сжатие контейнеров */
.msg.group-msg .msg-body {
    min-width: 0;
    max-width: 100%;
}

.msg.group-msg .msg-content .msg-media-container.layout-5,
.msg.group-msg .msg-content .msg-media-container.layout-7 {
    width: 100%;
    max-width: 100%;
}

/* Стили для предпросмотра медиа */
#media-preview-container .msg-media-container {
  max-width: 100% !important;
  margin: 0 auto;
}

#media-preview-container .msg-media-img {
  max-height: 200px; /* Уменьшаем максимальную высоту для предпросмотра */
}

/* Адаптивность для предпросмотра */
#media-preview-container .msg-media-container.layout-5,
#media-preview-container .msg-media-container.layout-7 {
  width: 100%;
  max-width: 100%;
}

#media-preview-container .row-top-2,
#media-preview-container .row-bottom-3 {
  width: 100%;
  max-width: 100%;
}

/* Стили для перетаскивания медиа */
.media-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.media-preview-item {
  position: relative;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: move;
}

.media-preview-item.dragging {
  opacity: 0.5;
  border-color: #3b82f6;
}

.media-preview-item.drag-over {
  border-color: #10b981;
  transform: scale(1.05);
}

.media-preview-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
}

.media-preview-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-preview-remove:hover {
  background: #dc2626;
}

/* Увеличиваем ширину модального окна предпросмотра */
#media-preview-modal .modal-content {
  max-width: 700px !important;
  width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

/* Улучшаем отображение сетки фотографий */
.media-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px));
  gap: 12px;
  padding: 10px 8px;
  max-width: 100%;
  overflow: hidden;
}

.media-preview-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}

/* Убираем горизонтальный скролл */
#media-preview-container {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  #media-preview-modal .modal-content {
    width: 95vw;
    margin: 20px;
    padding: 15px;
  }

  .media-preview-list {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }

  .media-preview-img {
    height: 100px;
  }
}

/* Улучшаем внешний вид кнопок в модальном окне */
#media-preview-modal .modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

#media-preview-modal .modal-buttons button {
  min-width: 120px;
  padding: 10px 20px;
}

/* Увеличиваем поле для подписи */
#media-caption.editable {
  min-height: 80px;
  max-height: 150px;
  width: 100%;
  margin-top: 15px;
}

/* Гарантируем, что не будет горизонтального скролла */
#media-preview-modal * {
  box-sizing: border-box;
}

/* Улучшаем скроллбар */
#media-preview-container::-webkit-scrollbar {
  width: 6px;
}

#media-preview-container::-webkit-scrollbar-track {
  background: #1f2937;
  border-radius: 3px;
}

#media-preview-container::-webkit-scrollbar-thumb {
  background: #3b82f6;
  border-radius: 3px;
}

#media-preview-container::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #1f2937;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 5px;
  border: 2px solid #1f2937;
}

::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

::-webkit-scrollbar-thumb:active {
  background: #3b82f6;
}

::-webkit-scrollbar-corner {
  background: #1f2937;
}

/* Для Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #374151 #1f2937;
}

/* Для отдельных элементов с скроллом (если нужно особое оформление) */
.scrollable-element::-webkit-scrollbar {
  width: 8px;
}

.scrollable-element::-webkit-scrollbar-track {
  background: #111827;
  border-radius: 4px;
}

.scrollable-element::-webkit-scrollbar-thumb {
  background: #3b82f6;
  border-radius: 4px;
}

/* Для мобильных устройств - уменьшаем ширину скроллбара */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    border-width: 1px;
  }
}

/* Стили для контекстного меню */
.context-menu {
    position: fixed;
    background: #1e293b;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    padding: 8px 0;
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 150px;
}

.context-menu.hidden {
    display: none;
}

.context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    color: #e2e8f0;
    font-size: 14px;
}

.context-menu-item:hover {
    background: #3b82f6;
    color: white;
}

.context-menu-item:active {
    background: #2563eb;
}

/* Добавьте этот стиль для сообщений, чтобы они были доступны для контекстного меню */
.msg {
    cursor: context-menu;
    user-select: text;
}

.msg:hover {
    background: rgba(59, 130, 246, 0.1);
}

.msg-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* вместо stretch */
}

.msg-media-grid {
  display: inline-grid;
  max-width: 100%;
}

.msg-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.msg-time {
  align-self: flex-end; /* <- критично */
}

#image-preview-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.7);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#image-preview-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

#image-preview {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0,0,0,0.8);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

#image-preview-overlay.show #image-preview {
  transform: scale(1);
}

.image-preview-backdrop {
  position: absolute;
  inset: 0;
}

#image-download-btn {
  position: fixed;
  z-index: 2100; /* выше оверлея (2000) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(17, 24, 39, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  transition: transform .15s ease, opacity .15s ease, background .2s ease;
  cursor: pointer;
}
#image-download-btn.hidden { display: none; }
#image-download-btn:hover { transform: translateY(-1px) scale(1.03); }
#image-download-btn:active { transform: translateY(0) scale(0.98); }
#image-download-btn .download-icon {
  width: 22px;
  height: 22px;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}

#group-desc-edit.editable {
  min-height: 60px;
  max-height: 120px;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 20px;
  background: #1f2937;
  border: 1px solid #374151;
  color: #e2e8f0;
  outline: none;
  line-height: 1.4;
  font-size: 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 100%;
  margin-top: 5px;
}

#group-desc-edit.editable:empty:before {
  content: attr(placeholder);
  color: #94a3b8;
  pointer-events: none;
}

#group-desc-edit.editable:focus {
  border-color: #3b82f6;
}

/* Общие стили для всех редактируемых полей */
.editable[contenteditable="true"] {
  min-height: 60px;
  max-height: 120px;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 20px;
  background: #1f2937;
  border: 1px solid #374151;
  color: #e2e8f0;
  outline: none;
  line-height: 1.4;
  font-size: 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 100%;
  margin-top: 5px;
}

.editable[contenteditable="true"]:focus {
  border-color: #3b82f6;
}

.editable[contenteditable="true"]:empty:before {
  content: attr(placeholder);
  color: #94a3b8;
  pointer-events: none;
}

#channels {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

#channels.active { display: block; }

#channels li {
  padding: 0;
  margin-bottom: 8px;
  border: 1px solid #1f2937;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

#channels li.active { border-color: #3b82f6; }

/* переключатель Группа/Канал */
.switcher {
  display: inline-flex;
  gap: 6px;
  background: #0b1220;
  border: 1px solid #1f2937;
  border-radius: 10px;
  padding: 4px;
}
.switcher button {
  border: none;
  background: transparent;
  color: #e2e8f0;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.switcher button.active {
  background: #1f2937;
  border: 1px solid #334155;
}

/* Каналы рисуем такими же карточками, как группы */
#channels {
  list-style: none;
  margin: 0;
  padding: 0;
}

#channels li {
  padding: 0;
  margin-bottom: 8px;
  border: 1px solid #1f2937;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  position: relative;

  /* критично — фиксируем высоту */
  height: 80px;
}

/* используем те же классы, что и у групп */
#channels li .group-banner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

#channels li .group-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

#channels li .group-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  color: #cbd5e1;
  background: #1f2937;
  border: 1px solid #334155;
  border-radius: 6px;
  pointer-events: none; /* чтобы не мешал клику по элементу */
}

/* === Video thumbs inside message grids === */
.msg-media-video-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #0b1220;
  cursor: pointer;
}
.msg-media-video-thumb .msg-media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-play-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: 34px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
  opacity: .9;
}

/* === Video overlay === */
#video-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}
#video-preview-overlay.show { display: block; }
#video-preview-overlay .video-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.8);
}
#video-preview-overlay .video-player-shell {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(1000px, 92vw);
  height: min(70vh, 92vh);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 20px;
}
#video-preview-el {
  width: 100%;
  height: 100%;
  background: #0b1220;
  border-radius: 12px;
  outline: none;
}

#video-preview-overlay .video-center-toggle {
  position: absolute;
  left: 50%;
  top: calc(20px + (min(70vh, 92vh) - 56px)/2);
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 0; /* символ не нужен, кнопка — круг */
  cursor: pointer;
}
#video-preview-overlay.is-playing .video-center-toggle { display: none; }

#video-preview-overlay .video-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.9);
  padding: 10px 12px;
  border-radius: 10px;
}

/* Таймлайн (range) — голубое слева, серое справа */
#video-preview-overlay .ctl-timeline {
  flex: 1 1 auto;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, #3b82f6 0%, #3b82f6 0%, #6b7280 0%, #6b7280 100%);
  outline: none;
}
#video-preview-overlay .ctl-timeline::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2px solid #3b82f6;
  margin-top: -4px;
  cursor: pointer;
}
#video-preview-overlay .ctl-timeline::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #e5e7eb; border: 2px solid #3b82f6; cursor: pointer;
}

#video-preview-overlay .ctl-volume {
  width: 100px;
}

#video-preview-overlay .ctl-download {
  text-decoration: none;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #1f2937;
  color: #e5e7eb;
}
#video-preview-overlay .ctl-download:hover { background: #374151; }

/* video thumbs inside message grids */
.msg-media-video-thumb {
  position: relative; width: 100%; height: 100%;
  border-radius: 8px; overflow: hidden; background: #0b1220; cursor: pointer;
}
.msg-media-video-thumb .msg-media-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play-badge { position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; font-size: 34px; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); opacity: .9; }

/* video overlay */
#video-preview-overlay { position: fixed; inset: 0; z-index: 2000; display: none; }
#video-preview-overlay.show { display: block; }
#video-preview-overlay .video-preview-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.8); }
#video-preview-overlay .video-player-shell {
  position: absolute; inset: 0; margin: auto; width: min(1000px, 92vw); height: min(70vh, 92vh);
  display: grid; grid-template-rows: 1fr auto; gap: 8px; padding: 20px;
}
#video-preview-el { width: 100%; height: 100%; background: #0b1220; border-radius: 12px; outline: none; }
#video-preview-overlay .video-center-toggle {
  position: absolute; left: 50%; top: calc(20px + (min(70vh, 92vh) - 56px)/2); transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 0; cursor: pointer;
}
#video-preview-overlay.is-playing .video-center-toggle { display: none; }
#video-preview-overlay .video-controls {
  display: flex; align-items: center; gap: 10px; background: rgba(15,23,42,.9); padding: 10px 12px; border-radius: 10px;
}
#video-preview-overlay .ctl-timeline {
  flex: 1 1 auto; appearance: none; height: 6px; border-radius: 999px;
  background: linear-gradient(to right, #3b82f6 0%, #3b82f6 0%, #6b7280 0%, #6b7280 100%); outline: none;
}
#video-preview-overlay .ctl-timeline::-webkit-slider-thumb {
  appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #e5e7eb; border: 2px solid #3b82f6; margin-top: -4px; cursor: pointer;
}
#video-preview-overlay .ctl-timeline::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #e5e7eb; border: 2px solid #3b82f6; cursor: pointer; }
#video-preview-overlay .ctl-volume { width: 100px; }
#video-preview-overlay .ctl-download { text-decoration: none; font-size: 18px; padding: 4px 8px; border-radius: 6px; background: #1f2937; color: #e5e7eb; }
#video-preview-overlay .ctl-download:hover { background: #374151; }

/* thumbs in media-preview modal */
.media-preview-video-wrap { position: relative; width: 120px; height: 120px; border-radius: 8px; overflow: hidden; background: #0b1220; }
.media-preview-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-preview-badge { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,.7); }

/* Базовый стиль центральной кнопки */
#video-preview-overlay .video-center-toggle{
  width: 72px; height: 72px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
}

/* Сужаем сам ползунок и выравниваем трек/ползунок */
#video-preview-overlay .ctl-timeline{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: transparent; /* фон рисуем градиентом через JS, это ок */
  height: 16px; /* общая высота области, чтобы уместился «кружок» */
  padding: 0; margin: 0 6px; cursor: pointer;
}

/* WebKit трек/ползунок */
#video-preview-overlay .ctl-timeline::-webkit-slider-runnable-track{
  height: 3px; border-radius: 999px; background: transparent;
}
#video-preview-overlay .ctl-timeline::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid #3b82f6;
  margin-top: -4.5px; /* центрируем «кружок» по тонкому треку (12/2 - 3/2) */
}

/* Firefox трек/ползунок */
#video-preview-overlay .ctl-timeline::-moz-range-track{
  height: 3px; border-radius: 999px; background: transparent;
}
#video-preview-overlay .ctl-timeline::-moz-range-thumb{
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid #3b82f6;
}

/* Сужаем панель, делаем компактнее шрифты и отступы */
#video-preview-overlay .video-controls{
  gap: 8px;
  padding: 6px 10px;
  font-size: 14px;
}
#video-preview-overlay .video-controls .ctl-time{
  font-variant-numeric: tabular-nums;
  opacity: .9;
}
#video-preview-overlay .video-controls button,
#video-preview-overlay .video-controls a{
  height: 28px; min-width: 28px;
  padding: 0 8px; border-radius: 8px;
  background: rgba(0,0,0,.35); color: #fff; border: 1px solid rgba(255,255,255,.25);
  display: inline-grid; place-items: center;
}
#video-preview-overlay .video-controls input[type="range"]{
  flex: 1 1 auto;
}

#video-preview-overlay .ctl-speed{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 4px 26px 4px 8px; border-radius: 8px;
  background: rgba(0,0,0,.35);
  color: #fff; border: 1px solid rgba(255,255,255,.25);
  line-height: 1; height: 28px;
  cursor: pointer;
  /* кастомная стрелка справа через вектор */
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg"><path d="M1 3 L5 7 L9 3" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 10px;
}
#video-preview-overlay .ctl-speed:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(59,130,246,.35);
}
/* скрываем системную стрелку IE/Edge Legacy */
#video-preview-overlay .ctl-speed::-ms-expand{ display: none; }

/* СКРЫТЬ левую кнопку play в баре (оставляем только центральную) */
#video-preview-overlay .ctl-play { display: none !important; }

/* Центральная кнопка: делаем видимым символ, а не "пустой круг" */
#video-preview-overlay .video-center-toggle {
  position: absolute;
  left: 50%;
  top: calc(20px + (min(70vh, 92vh) - 56px)/2);
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.5);
  color: #fff;
  display: grid; place-items: center;
  font-size: 32px; line-height: 1;      /* <- было font-size:0 */
  cursor: pointer;
  transition: opacity .15s ease;
}

#video-preview-overlay.is-playing .video-center-toggle { opacity: .0; pointer-events: auto; }

/* Бар управлений — компактнее */
#video-preview-overlay .video-controls {
  display: flex; align-items: center;
  gap: 8px;                               /* было 10px */
  background: rgba(15,23,42,.9);
  padding: 8px 10px;                      /* было 10px 12px */
  border-radius: 10px;
  font-size: 14px;
}

/* Таймлайн — тоньше и выровнять "точку" по центру */
#video-preview-overlay .ctl-timeline {
  flex: 1 1 auto;
  appearance: none;
  height: 4px;                            /* было 6px */
  border-radius: 999px;
  background: linear-gradient(to right, #3b82f6 0%, #3b82f6 0%, #6b7280 0%, #6b7280 100%);
  outline: none;
}
#video-preview-overlay .ctl-timeline::-webkit-slider-thumb {
  appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #e5e7eb; border: 2px solid #3b82f6;
  margin-top: -5px;                       /* было -4px */
  cursor: pointer;
}
#video-preview-overlay .ctl-timeline::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #e5e7eb; border: 2px solid #3b82f6; cursor: pointer;
}

/* ГРОМКОСТЬ — короткий слайдер и в едином стиле */
#video-preview-overlay .ctl-volume {
  flex: 0 0 90px;                         /* фиксируем базовую ширину */
  width: 90px; max-width: 90px;           /* раньше он «растягивался» */
  appearance: none; height: 4px;
  border-radius: 999px;
  background: #6b7280;
  outline: none;
}
#video-preview-overlay .ctl-volume::-webkit-slider-thumb {
  appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #e5e7eb; border: 2px solid #3b82f6;
  margin-top: -4px; cursor: pointer;
}
#video-preview-overlay .ctl-volume::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #e5e7eb; border: 2px solid #3b82f6; cursor: pointer;
}

/* Селект скорости — под общий тёмный стиль с собственной стрелкой */
#video-preview-overlay .ctl-speed {
  appearance: none;
  background: #111827;
  border: 1px solid #374151;
  color: #e5e7eb;
  padding: 6px 26px 6px 10px;
  border-radius: 8px;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23e5e7eb'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
#video-preview-overlay .ctl-speed:focus { outline: none; border-color: #3b82f6; }

/* Центральная кнопка play/pause — один источник правды */
#video-preview-overlay .video-center-toggle{
  position: absolute;
  left: 50%;
  top: calc(20px + (min(70vh, 92vh) - 56px)/2);
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff;
  display: grid; place-items: center;
  font-size: 32px; line-height: 1;     /* важное отличие от старого font-size:0 */
  cursor: pointer;
  transition: opacity .15s ease;
}
#video-preview-overlay.is-playing .video-center-toggle{ display: none; }

/* Узкий регулятор громкости */
#video-preview-overlay .ctl-volume{
  flex: 0 0 110px;   /* фиксируем ширину поверх flex:1 */
  width: 110px;
  min-width: 110px;
}

/* (опционально) сделать сам трек пониже, если он «высокий» в твоём браузере */
#video-preview-overlay .ctl-volume::-webkit-slider-runnable-track{ height:4px; border-radius:999px; }
#video-preview-overlay .ctl-volume::-webkit-slider-thumb{ margin-top:-5px; }
#video-preview-overlay .ctl-volume::-moz-range-track{ height:4px; border-radius:999px; }

#video-preview-overlay .video-center-toggle {
  transition: opacity .2s ease;
}

/* === Volume: thin track + blue filled part === */
#video-preview-overlay .ctl-volume{
  /* ширину не трогаем: у тебя уже зафиксирована выше */
  appearance: none;
  height: 4px;                       /* тонкий трек */
  border-radius: 999px;
  background: linear-gradient(to right, #3b82f6 0%, #3b82f6 0%, #6b7280 0%, #6b7280 100%);
  outline: none;
}

/* WebKit: трек делаем прозрачным, а fill рисуем фоном самого input */
#video-preview-overlay .ctl-volume::-webkit-slider-runnable-track{
  height: 4px;
  border-radius: 999px;
  background: transparent;
}
#video-preview-overlay .ctl-volume::-webkit-slider-thumb{
  appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #e5e7eb; border: 2px solid #3b82f6;
  margin-top: -4px;                  /* выравниваем по центру трека */
  cursor: pointer;
}

/* Firefox: нативный прогресс слева — синий */
#video-preview-overlay .ctl-volume::-moz-range-track{
  height: 4px; border-radius: 999px; background: #6b7280;
}
#video-preview-overlay .ctl-volume::-moz-range-progress{
  height: 4px; border-radius: 999px; background: #3b82f6;
}
#video-preview-overlay .ctl-volume::-moz-range-thumb{
  width: 12px; height: 12px; border-radius: 50%;
  background: #e5e7eb; border: 2px solid #3b82f6; cursor: pointer;
}

input[type="checkbox"] {
  /* Фолбэк на случай отключённого custom: */
  accent-color: var(--brand);

  -webkit-appearance: none;
  appearance: none;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  display: inline-grid;
  place-content: center;
  margin: 0 8px 0 0;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .05s ease;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,.0);
  vertical-align: middle;
}

input[type="checkbox"]:hover {
  border-color: #4b5563;
}

input[type="checkbox"]:active {
  transform: scale(0.98);
}

input[type="checkbox"]::after {
  /* рисуем галочку */
  content: "";
  inline-size: 10px;
  block-size: 6px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease-in-out;
}

input[type="checkbox"]:checked {
  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

/* Фокус для клавиатуры */
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.35);
}

/* Отключённое состояние */
input[type="checkbox"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Поддержка контрастности и снижения анимаций */
@media (prefers-contrast: more) {
  input[type="checkbox"] { border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"], input[type="checkbox"]::after { transition: none !important; }
}

/* Утилита для ровного выравнивания чекбокса и подписи (можно навесить на родительский div) */
.checkbox-row { display: flex; align-items: center; gap: 10px; }

/* ====== 2) ТУМБЛЕР (опционально): добавить класс .switch на input ====== */
input[type="checkbox"].switch {
  inline-size: 42px;
  block-size: 24px;
  border-radius: 999px;
  background: #111827;
  border-color: #1f2937;
  position: relative;
}

input[type="checkbox"].switch::after {
  /* ползунок */
  content: "";
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: #e5e7eb;
  border: none;
  transform: translateX(0);
  transition: transform .18s ease, background-color .18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05) inset;
}

input[type="checkbox"].switch:checked {
  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
  border-color: #2563eb;
}

input[type="checkbox"].switch:checked::after {
  background: #fff;
  transform: translateX(18px);
}

input[type="checkbox"].switch:focus-visible {
  box-shadow: 0 0 0 4px rgba(59,130,246,.35);
}

/* === SWITCH (видимый всегда, с бегунком) === */
input[type="checkbox"].switch {
  /* фолбэк */
  accent-color: #10b981;

  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;

  width: 44px;
  height: 24px;
  border-radius: 999px;

  background: #111827;              /* тёмная «дорожка» */
  border: 1px solid #273244;        /* тонкая окантовка */
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0);

  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* сам кружок-бегунок — ВСЕГДА виден */
input[type="checkbox"].switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;

  width: 20px;
  height: 20px;
  border-radius: 50%;

  background: #e5e7eb;             /* светлый кружок */
  box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;

  transform: translateX(0);         /* слева */
  transition: transform .22s cubic-bezier(.2,.85,.32,1), background .2s ease;
}

/* hover/active/focus */
input[type="checkbox"].switch:hover    { border-color: #334155; }
input[type="checkbox"].switch:active   { transform: translateY(0); }
input[type="checkbox"].switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16,185,129,.25);
}

/* включено — зелёный фон и кружок вправо */
input[type="checkbox"].switch:checked {
  background: linear-gradient(180deg, #10b981, #059669);
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
input[type="checkbox"].switch:checked::after {
  background: #fff;
  transform: translateX(20px); /* 44 - 20 - 2*2 = 20 */
}

/* disabled */
input[type="checkbox"].switch:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* предпочтение «меньше анимаций» */
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"].switch,
  input[type="checkbox"].switch::after {
    transition: none !important;
  }
}

input[type="checkbox"].switch {
  box-sizing: border-box;
  width: 44px !important;
  height: 24px !important;
  min-width: 44px;
  max-width: 44px;
  min-height: 24px;
  max-height: 24px;
  padding: 0;           /* на случай глобальных паддингов */
  flex: 0 0 44px;       /* в flex-рядках не растягивать */
  overflow: hidden;     /* чтобы фон не вылезал за скругление */
}

/* Центровка бегунка по высоте */
input[type="checkbox"].switch {
  position: relative;
  line-height: 0; /* чтобы inline-метрики не влияли */
}

input[type="checkbox"].switch::after {
  top: 50%;
  left: 2px;
  transform: translate(0, -50%);               /* идеально по центру */
}

/* при включении — учтём смещение вправо и центровку по Y */
input[type="checkbox"].switch:checked::after {
  transform: translate(20px, -50%);            /* 44 - 20 - 2*2 = 20 */
}

input[type="checkbox"].switch::after {
  left: 1px;                          /* было 2px */
}

input[type="checkbox"].switch:checked::after {
  transform: translate(20px, -50%);   /* было 20px; формула: 44 - 20 - 2 = 22 */
  /* ширина свитча 44, диаметр бегунка 20, двойной отступ 2*1px */
}

/* Комментарии: капсула в стиле Telegram, но в вашей теме */
.btn-comments {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #0b1220;           /* в палитре интерфейса */
  border: 1px solid #334155;     /* тонкая обводка как в .badge/.msg */
  color: #e2e8f0;
  cursor: pointer;
  line-height: 1;
  font-size: 13px;
  transition: background .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease;
}

.btn-comments:hover {
  background: #1f2937;
  border-color: #3b82f6;         /* лёгкий намёк на синий акцент */
}

.btn-comments:active {
  transform: translateY(1px);
}

.btn-comments.is-active {
  background: rgba(59,130,246,0.12);
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15) inset;
}

/* Иконка «бабл» (чистый CSS, без внешних SVG) */
.btn-comments .cmnt-ic {
  position: relative;
  width: 14px;
  height: 11px;
  display: inline-block;
}
.btn-comments .cmnt-ic::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 6px;
  background: transparent;
  opacity: .9;
}
.btn-comments .cmnt-ic::after {
  content: '';
  position: absolute;
  left: 4px;
  bottom: -3px;
  width: 6px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  background: transparent;
  opacity: .9;
}

/* Счётчик — моноширинный намёк, стабильная ширина цифр */
.btn-comments .cmnt-count {
  font-variant-numeric: tabular-nums;
  opacity: .95;
}

/* Контейнер действий */
.msg-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Базовая капсула (заимствуем из кнопки комментариев) */
.btn-reaction,
.btn-comments {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #0b1220;
  border: 1px solid #334155;
  color: #e2e8f0;
  cursor: pointer;
  line-height: 1;
  font-size: 13px;
  transition: background .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease;
}
.btn-reaction:hover,
.btn-comments:hover {
  background: #1f2937;
  border-color: #3b82f6;
}
.btn-reaction:active,
.btn-comments:active {
  transform: translateY(1px);
}
.btn-reaction.is-active {
  background: rgba(59,130,246,0.12);
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15) inset;
}
.rc-count,
.cmnt-count {
  font-variant-numeric: tabular-nums;
  opacity: .95;
}

/* Иконки реакций: чистый CSS */
.rc-ic {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-block;
}
.rc-like::before,
.rc-dislike::before {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  border: 2px solid currentColor;
  border-radius: 3px;
  transform: rotate(45deg);
  opacity: .9;
}
.rc-like::after,
.rc-dislike::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 8px;
  background: currentColor;
  left: 6px;
  top: -2px;
  border-radius: 1px;
  opacity: .9;
}
/* Дизлайк — поворот палки вниз */
.btn-dislike .rc-dislike::after {
  top: auto;
  bottom: -2px;
}

.msg:has(.msg-media-container.layout-1) {
  width: fit-content;   /* схлопываем до контента */
  max-width: 70%;       /* но не шире обычного лимита */
}

.msg-media-container.layout-1 {
  display: inline-block; /* чтобы ширина равнялась самому медиа */
}

/* на всякий случай: внутренности не выходят за пределы медиа */
.msg:has(.msg-media-container.layout-1) .msg-text,
.msg:has(.msg-media-container.layout-1) .msg-time,
.msg:has(.msg-media-container.layout-1) .msg-actions {
  max-width: 100%;
}

/* --- Чтобы в #chat-header кнопки не уезжали за край на мобильных --- */
#chat-header {
  gap: 8px; /* чутка воздуха между заголовком и кнопками */
}
#chat-with {
  flex: 1 1 auto;
  min-width: 0;               /* важно для ellipsis во flex-контейнере */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#chat-header .call-controls {
  flex: 0 0 auto;             /* кнопки не сжимаем */
  display: flex;
  align-items: center;
  gap: 8px;
}
#btn-notify-channel img {
  display: block;
  width: 100%;
  height: 100%;
}