/*
=====================================================================
 Вложения: размеры плеера в переписке + адаптив под любой экран
 ---------------------------------------------------------------------
 v4 (19.09.2026):
     1) размеры плеера и видео в личке:
        ПК (широкий экран)          — 512 x 288 px
        телефон и планшет (<=1024)  — 360 x 202 px
     2) аватарка в личке больше не съезжает от вложений
        (была выровнена по базовой линии строки — см. блок в конце файла).

 Пропорция 16:9 сохраняется на любом экране, и плеер никогда не
 становится шире своего сообщения (max-width: 100%): на узком
 телефоне он будет чуть меньше 360 px, но не выедет за границы.

 Подключается автоматически (движок берёт все файлы из /style/css/).
=====================================================================
*/

/* ---------- общее для вложений ---------- */
.att-media {
  display: block;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.att-media video,
.att-media iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
  border: 0;
  border-radius: 10px;
  background: #000;
}

/* ---------- видео в переписке: 512 x 288 на ПК ---------- */
.mail-message-my-form .att-media.att-video,
.mail-message-user-form .att-media.att-video {
  display: block;
  width: 512px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 6px 0;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  box-sizing: border-box;
}

/* ---------- видео в остальных местах (загруз-центр): та же логика ---------- */
.att-media.att-video {
  display: block;
  width: 100%;
  max-width: 512px;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 6px 0;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  box-sizing: border-box;
}

/* ---------- внутри коробки всё занимает её целиком ---------- */
.att-media.att-video > video,
.att-media.att-video > iframe,
.att-media.att-video .pjs-holder {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
  border: 0;
  border-radius: 10px;
  background: #000;
}

/* постер до нажатия «play» тоже по размеру коробки */
.att-media.att-video.att-video-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* ---------- плеер PlayerJS (код из админки) ---------- */
.pjs-holder {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: #000;
  border-radius: 10px;
}

/* контейнер, который создаёт код конструктора (div с id плеера) */
.pjs-holder > div {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
  border-radius: 10px;
  background: #000;
}

.pjs-holder iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
  border: 0;
  border-radius: 10px;
  background: #000;
}

.pjs-holder video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #000;
}

/* ---------- звук: не вылезает за экран, кнопки видно ---------- */
.att-audio {
  display: block;
  width: 100%;
  max-width: 340px;
  min-width: 220px;
  margin: 6px 0;
  box-sizing: border-box;
}

/* ---------- карточка файла ---------- */
.files-info,
.files-info-list {
  max-width: 100%;
  box-sizing: border-box;
}

.files-info img,
.files-info-list img {
  max-width: 100%;
  height: auto;
}

.files-info-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

/* ---------- имя файла: полностью, с переносом ---------- */
.att-name {
  display: inline-block;
  max-width: 100%;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ---------- переписка: ничего не выезжает из сообщения ---------- */
.mail-message-my-form,
.mail-message-user-form {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

.mail-message-my-form video,
.mail-message-user-form video,
.mail-message-my-form audio,
.mail-message-user-form audio,
.mail-message-my-form iframe,
.mail-message-user-form iframe {
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------- телефон и планшет: 360 x 202 ---------- */
@media (max-width: 1024px) {

  .mail-message-my-form .att-media.att-video,
  .mail-message-user-form .att-media.att-video {
    width: 360px;
  }

}

@media (max-width: 480px) {

  .att-audio { max-width: 100%; min-width: 0; }

  .mail-message-my-form .att-media.att-video,
  .mail-message-user-form .att-media.att-video,
  .att-media.att-video {
    border-radius: 8px;
  }

  .att-media video,
  .att-media iframe,
  .att-media.att-video .pjs-holder,
  .pjs-holder > div,
  .pjs-holder iframe,
  .pjs-holder video {
    border-radius: 8px;
  }

}

/*
---------------------------------------------------------------------
 Старые браузеры без aspect-ratio: держим те же размеры высотой
 (288 у 512 и 202 у 360 — это ровно 16:9)
---------------------------------------------------------------------
*/
@supports not (aspect-ratio: 16 / 9) {

  .mail-message-my-form .att-media.att-video,
  .mail-message-user-form .att-media.att-video {
    height: 288px;
  }

  .att-media.att-video { height: 288px; }

  @media (max-width: 1024px) {

    .mail-message-my-form .att-media.att-video,
    .mail-message-user-form .att-media.att-video,
    .att-media.att-video {
      height: 202px;
    }

  }

}

/* =====================================================================
   АВАТАРКА В ЛИЧКЕ — не съезжает от вложений  (v4, 19.09.2026)
   ---------------------------------------------------------------------
   Причина: аватарка выводится как <span> и по умолчанию выравнивается
   по базовой линии строки, а «пузырь» сообщения — по верху
   (vertical-align: top). Как только в сообщении появляется вложение
   (плеер, аудио), высота строки меняется и базовая линия уезжает —
   аватарку сдвигает вниз или вверх относительно текста.

   Лечим точно: аватарку ставим по верху и даём ей тот же отступ сверху,
   что у «пузыря» (10px), поэтому они всегда на одной линии — с вложением
   и без него. Значок «не прочитано» тоже выравниваем по верху.
   ================================================================= */

.mail-message-user > span:first-child {
  vertical-align: top;
  margin-top: 10px;
  flex-shrink: 0;
}

.mail-message-my > .mail-message-eye {
  vertical-align: top;
}

/* Значок «прочитано/не прочитано» не должен растягиваться */
.mail-message-eye {
  flex-shrink: 0;
}