/* Стандартные размеры для медиа-контента */
.card-media {
  padding: 15px !important;
  display: grid !important;
  grid-gap: 5px !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
  overflow: visible !important;
  background: #f8f9fa !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 1 медиа - одиночное изображение (увеличено в 2 раза) */
.card-media.media-count-1 {
  grid-template-columns: 1fr !important;
  max-width: 630px !important;
  width: 100% !important;
  min-width: auto !important;
  /* Принудительно увеличиваем размер */
  transform: scale(1) !important;
  box-sizing: border-box !important;
}

.card-media.media-count-1 > a,
.card-media.media-count-1 > .video-wrapper {
  aspect-ratio: 4/3 !important;
  height: auto !important;
  max-height: 476px !important;
  min-height: 300px !important;
  width: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
}

/* 2 медиа - два изображения рядом */
.card-media.media-count-2 {
  grid-template-columns: 1fr 1fr !important;
  max-width: 315px !important;
  grid-gap: 5px !important;
}

.card-media.media-count-2 > a,
.card-media.media-count-2 > .video-wrapper {
  aspect-ratio: 1 !important;
  max-height: 154px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
}

/* 3 медиа - одно большое сверху, два маленьких снизу */
.card-media.media-count-3 {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 2fr 1fr !important;
  max-width: 630px !important;
  max-height: 490px !important;
  display: grid !important;
  grid-gap: 5px !important;
}

.card-media.media-count-3 > a:first-child,
.card-media.media-count-3 > .video-wrapper:first-child {
  grid-column: 1 / -1 !important;
  aspect-ratio: 2/1 !important;
  max-height: 252px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
}

.card-media.media-count-3 > a:not(:first-child),
.card-media.media-count-3 > .video-wrapper:not(:first-child) {
  aspect-ratio: 1 !important;
  max-height: 154px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
}

/* 4 медиа - сетка 2x2 */
.card-media.media-count-4 {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  max-width: 560px !important;
  max-height: 490px !important;
  grid-gap: 5px !important;
}

.card-media.media-count-4 > a,
.card-media.media-count-4 > .video-wrapper {
  aspect-ratio: 1 !important;
  max-height: 238px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
}

/* 5+ медиа - автоматическая сетка */
.card-media.media-count-many {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  grid-auto-rows: 150px !important;
  max-width: 800px !important;
  gap: 5px !important;
}

.card-media.media-count-many > a,
.card-media.media-count-many > .video-wrapper {
  aspect-ratio: 1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Первые несколько элементов могут быть больше */
.card-media.media-count-many > a:first-child,
.card-media.media-count-many > .video-wrapper:first-child {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
  aspect-ratio: 1 !important;
}

/* На случай четного количества - второй элемент тоже большой */
.card-media.media-count-many > a:nth-child(2),
.card-media.media-count-many > .video-wrapper:nth-child(2) {
  grid-column: span 2 !important;
  aspect-ratio: 2/1 !important;
}

/* Общие стили для изображений */
.card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.2s ease !important;
  vertical-align: top !important;
  max-width: 100% !important;
  border-radius: 8px !important;
}

/* Общие стили для всех медиа ссылок - предотвращаем наложение */
.card-media > a {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  /* Обеспечиваем минимальное разделение */
  margin: 0 !important;
  z-index: 2 !important;
}

/* Стили для прямых детей медиа контейнера - включая video-wrapper */
.card-media > .video-wrapper {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Специальный класс для медиа изображений */
.media-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 8px !important;
}

/* Стили для видео контейнеров */
.media-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 8px !important;
  background: #000 !important;
}

/* Обёртка для видео - обеспечивает правильные размеры в гриде */
.video-wrapper {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  /* Обеспечиваем минимальную высоту для видимости */
  min-height: 100px !important;
  min-width: 100px !important;
  /* Принудительно устанавливаем размеры для работы в Grid */
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Контейнер для видео с кнопкой плей - наследует размеры родителя */
.video-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  background: #000 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  /* Обеспечиваем минимальную высоту для видимости */
  min-height: 100px !important;
  min-width: 100px !important;
  /* Обеспечиваем видимость */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Кнопка плей для видео */
.video-play-button {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 60px !important;
  height: 60px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  z-index: 10 !important;
  /* Адаптивный размер кнопки */
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  /* Автоскрытие кнопки */
  opacity: 0 !important;
  visibility: hidden !important;
}

.video-play-button:hover {
  background: rgba(255, 255, 255, 1) !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}

/* Унифицированная иконка play - Bootstrap Icons */
.video-play-button::before {
  content: '\f4f4' !important; /* Bootstrap Icons play-fill */
  font-family: 'bootstrap-icons' !important;
  font-size: 20px !important;
  color: #333 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Стили для кнопки паузы */
.video-pause-button,
.pause-button {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 60px !important;
  height: 60px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  z-index: 10 !important;
  /* Адаптивный размер кнопки */
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  /* Автоскрытие кнопки */
  opacity: 0 !important;
  visibility: hidden !important;
}

.video-pause-button:hover,
.pause-button:hover {
  background: rgba(255, 255, 255, 1) !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}

/* Унифицированная иконка pause - Bootstrap Icons */
.video-pause-button::before,
.pause-button::before {
  content: '\f4c3' !important; /* Bootstrap Icons pause-fill */
  font-family: 'bootstrap-icons' !important;
  font-size: 20px !important;
  color: #333 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.video-pause-button::after,
.pause-button::after {
  content: none !important;
}

/* Превью видео (thumbnail) - заполняет весь контейнер */
.video-thumbnail {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 8px !important;
  z-index: 4 !important;
  /* Обеспечиваем видимость */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Альтернативный режим для contain */
.video-thumbnail.contain-mode {
  object-fit: contain !important;
  background: #000 !important;
}

/* Видео без thumbnail - черный экран */
.video-no-thumbnail {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  z-index: 2 !important;
  /* Показывается только если нет миниатюры */
}

/* Иконка видео по умолчанию */
.video-no-thumbnail::before {
  content: '🎥' !important;
  font-size: 2em !important;
  color: #666 !important;
}

/* Hover эффекты */
.card-media a:hover img {
  transform: scale(1.02) !important;
}

.card-media a:hover .video-thumbnail {
  transform: scale(1.02) !important;
}

/* Счетчик дополнительных медиа */
.media-count-overlay {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: white !important;
  padding: 6px 10px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  z-index: 20 !important;
}

/* Индикатор длительности видео */
.video-duration {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: white !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  z-index: 20 !important;
}

/* Адаптация для экранов средней ширины (1025-1121px) - промежуточное состояние */
@media (max-width: 1121px) and (min-width: 1025px) {
  .card-media {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 15px !important;
    grid-gap: 6px !important;
    overflow: visible !important;
  }
  
  /* Одиночное медиа - адаптируем под контейнер */
  .card-media.media-count-1 {
    max-width: 600px !important;
    width: 100% !important;
    min-width: auto !important;
  }
  
  .card-media.media-count-1 > a,
  .card-media.media-count-1 > .video-wrapper {
    width: 100% !important;
    height: auto !important;
    min-height: 350px !important;
    max-height: 450px !important;
    aspect-ratio: 16/9 !important;
  }
  
  /* 2 медиа - увеличиваем промежутки */
  .card-media.media-count-2 {
    max-width: 100% !important;
    grid-gap: 8px !important;
    grid-template-columns: 1fr 1fr !important;
  }
  
  .card-media.media-count-2 > a,
  .card-media.media-count-2 > .video-wrapper {
    max-height: 200px !important;
    aspect-ratio: 1 !important;
  }
  
  /* 3 медиа - корректируем размеры и промежутки */
  .card-media.media-count-3 {
    max-width: 100% !important;
    grid-gap: 6px !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
  }
  
  .card-media.media-count-3 > a:first-child,
  .card-media.media-count-3 > .video-wrapper:first-child {
    max-height: 200px !important;
    grid-column: 1 / -1 !important;
    aspect-ratio: 16/9 !important;
  }
  
  .card-media.media-count-3 > a:not(:first-child),
  .card-media.media-count-3 > .video-wrapper:not(:first-child) {
    max-height: 130px !important;
    aspect-ratio: 1 !important;
  }
  
  /* 4 медиа - сетка 2x2 с увеличенными промежутками */
  .card-media.media-count-4 {
    max-width: 100% !important;
    grid-gap: 6px !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
  }
  
  .card-media.media-count-4 > a,
  .card-media.media-count-4 > .video-wrapper {
    max-height: 160px !important;
    aspect-ratio: 1 !important;
  }
  
  /* Много медиа - ограничиваем ширину и увеличиваем промежутки */
  .card-media.media-count-many {
    max-width: 100% !important;
    width: 100% !important;
    grid-gap: 5px !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    grid-auto-rows: 130px !important;
  }
  
  .card-media.media-count-many > a,
  .card-media.media-count-many > .video-wrapper {
    aspect-ratio: 1 !important;
    max-height: 130px !important;
  }
  
  /* Отключаем специальные размеры больших элементов */
  .card-media.media-count-many > a:first-child,
  .card-media.media-count-many > a:nth-child(2) {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    aspect-ratio: 1 !important;
  }
}

/* Автопоказ кнопок при наведении или касании */
.video-container:hover .video-play-button,
.video-container:hover .pause-button,
.video-container.show-controls .video-play-button,
.video-container.show-controls .pause-button {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Показ кнопок на мобильных при касании */
@media (max-width: 768px) {
  .video-container.touched .video-play-button,
  .video-container.touched .pause-button {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Мобильная адаптация для планшетов и маленьких ноутбуков */
@media (max-width: 1024px) {
  .card-media {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    grid-gap: 8px !important;
    overflow: visible !important;
  }
  
  /* Одиночное медиа - адаптируем под ширину экрана */
  .card-media.media-count-1 {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  
  .card-media.media-count-1 > a,
  .card-media.media-count-1 > .video-wrapper {
    width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
    max-height: 400px !important;
    aspect-ratio: 16/9 !important;
  }
  
  /* 2 медиа - сохраняем 2 колонки но увеличиваем промежутки */
  .card-media.media-count-2 {
    max-width: 100% !important;
    grid-gap: 10px !important;
    grid-template-columns: 1fr 1fr !important;
  }
  
  .card-media.media-count-2 > a {
    max-height: 220px !important;
    aspect-ratio: 1 !important;
  }
  
  /* 3 медиа - увеличиваем промежутки и корректируем размеры */
  .card-media.media-count-3 {
    max-width: 100% !important;
    grid-gap: 8px !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
  }
  
  .card-media.media-count-3 > a:first-child {
    max-height: 220px !important;
    grid-column: 1 / -1 !important;
    aspect-ratio: 16/9 !important;
  }
  
  .card-media.media-count-3 > a:not(:first-child) {
    max-height: 140px !important;
    aspect-ratio: 1 !important;
  }
  
  /* 4 медиа - сетка 2x2 с достаточными промежутками */
  .card-media.media-count-4 {
    max-width: 100% !important;
    grid-gap: 8px !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
  }
  
  .card-media.media-count-4 > a {
    max-height: 180px !important;
    aspect-ratio: 1 !important;
  }
  
  /* Много медиа - сетка с адекватными промежутками */
  .card-media.media-count-many {
    max-width: 100% !important;
    grid-gap: 6px !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    grid-auto-rows: 120px !important;
  }
  
  .card-media.media-count-many > a {
    aspect-ratio: 1 !important;
    max-height: 120px !important;
  }
  
  /* Отключаем специальные размеры больших элементов на планшетах */
  .card-media.media-count-many > a:first-child,
  .card-media.media-count-many > a:nth-child(2) {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    aspect-ratio: 1 !important;
  }
}

/* Мобильная адаптация для video_message на всех экранах */
@media (max-width: 1024px) {
  .video-message-circle {
    width: 100px;
    height: 100px;
  }
  
  .video-message-play-button {
    width: 32px;
    height: 32px;
  }
  
  .video-message-duration {
    font-size: 11px;
    padding: 1px 4px;
  }
  
  /* Адаптация контролов для мобильных устройств */
  .video-message-player::-webkit-media-controls-current-time-display,
  .video-message-player::-webkit-media-controls-time-remaining-display {
    font-size: 10px;
  }
}

@media (max-width: 768px) {
  .video-message-circle {
    width: 90px;
    height: 90px;
  }
  
  .video-message-play-button {
    width: 28px;
    height: 28px;
  }
  
  .video-message-duration {
    font-size: 10px;
    padding: 1px 3px;
  }
}

@media (max-width: 480px) {
  .video-message-circle {
    width: 80px;
    height: 80px;
  }
  
  .video-message-play-button {
    width: 24px;
    height: 24px;
  }
}

/* Мобильная адаптация для смартфонов */
@media (max-width: 768px) {
  .card-media {
    padding: 10px ;
    max-width: 100% ;
    margin: 0 ;
    grid-gap: 6px ;
  }
  
  /* Одиночное медиа - полная ширина с оптимальной высотой */
  .card-media.media-count-1 {
    width: 100% ;
    min-width: 100% ;
    max-width: 100% ;
    grid-template-columns: 1fr ;
  }
  
  .card-media.media-count-1 > a {
    width: 100% ;
    height: auto ;
    min-height: 250px ;
    max-height: 350px ;
    aspect-ratio: 16/9 ;
  }
  
  /* 2 медиа - 2 колонки на мобильных */
  .card-media.media-count-2 {
    grid-template-columns: 1fr 1fr ;
    max-width: 100% ;
    grid-gap: 4px ;
  }
  
  .card-media.media-count-2 > a {
    aspect-ratio: 1 ;
    max-height: 180px ;
  }
  
  /* 3 медиа - 1 сверху, 2 снизу (адаптивно) */
  .card-media.media-count-3 {
    grid-template-columns: 1fr 1fr ;
    /* grid-template-rows: 1fr auto ; */
    max-width: 100% ;
    grid-gap: 4px ;
  }
  
  .card-media.media-count-3 > a:first-child {
    grid-column: 1 / -1 ;
    aspect-ratio: 16/9 ;
    max-height: 200px ;
  }
  
  .card-media.media-count-3 > a:not(:first-child) {
    aspect-ratio: 1 ;
    max-height: 120px ;
  }
  
  /* 4+ медиа - сетка 2x2 */
  .card-media.media-count-4,
  .card-media.media-count-many {
    grid-template-columns: 1fr 1fr ;
    /* grid-template-rows: auto ; */
    max-width: 100% ;
    grid-gap: 4px ;
    max-height: none ;
  }
  
  .card-media.media-count-4 > a,
  .card-media.media-count-many > a {
    aspect-ratio: 1 ;
    max-height: 200px ;
    grid-column: span 1 ;
    grid-row: span 1 ;
  }
  
  /* Отключаем специальные размеры для первых элементов в many */
  .card-media.media-count-many > a:first-child,
  .card-media.media-count-many > a:nth-child(2) {
    grid-column: span 1 ;
    grid-row: span 1 ;
    aspect-ratio: 1 ;
  }
  
  /* Общие стили для медиа на мобильных */
  .card-media img,
  .video-thumbnail {
    object-fit: cover ;
  }
  
  /* Отключаем hover эффекты на мобильных */
  .card-media a:hover img,
  .card-media a:hover .video-thumbnail {
    transform: none ;
  }
  
  /* Адаптивная кнопка плей */
  .video-play-button {
    width: 50px ;
    height: 50px ;
    min-width: 45px ;
    min-height: 45px ;
  }
  
  .video-play-button::before {
    font-size: 16px ;
  }
  
  /* Уменьшаем кнопку полноэкранного режима */
  .video-fullscreen-button {
    width: 32px ;
    height: 32px ;
    bottom: 6px ;
    right: 6px ;
    font-size: 14px ;
  }
  
  /* Адаптивные индикаторы */
  .video-duration {
    font-size: 11px ;
    padding: 3px 6px ;
    bottom: 6px ;
    left: 6px ;
  }
  
  .media-count-overlay {
    font-size: 12px ;
    padding: 4px 8px ;
    bottom: 6px ;
    right: 6px ;
  }
}

/* Адаптация для очень маленьких экранов (телефоны в портретной ориентации) */
@media (max-width: 480px) {
  .card-media {
    padding: 8px ;
    grid-gap: 4px ;
  }
  
  /* Одиночное медиа - оптимизируем для маленьких экранов */
  .card-media.media-count-1 > a {
    min-height: 200px ;
    max-height: 280px ;
  }
  
  /* 2 медиа - можем оставить 2 колонки или переключить на 1 */
  .card-media.media-count-2 > a {
    max-height: 140px ;
  }
  
  /* 3+ медиа - уменьшаем размеры */
  .card-media.media-count-3 > a:first-child {
    max-height: 160px ;
  }
  
  .card-media.media-count-3 > a:not(:first-child),
  .card-media.media-count-4 > a,
  .card-media.media-count-many > a {
    max-height: 120px ;
  }

  /* Еще меньше кнопка плей */
  .video-play-button {
    width: 40px ;
    height: 40px ;
    min-width: 35px ;
    min-height: 35px ;
  }
  
  .video-play-button::before {
    font-size: 12px ;
  }
  
  /* Минимальные размеры для индикаторов */
  .video-fullscreen-button {
    width: 28px ;
    height: 28px ;
    font-size: 12px ;
  }
  
  .video-duration {
    font-size: 10px ;
    padding: 2px 4px ;
  }
  
  .media-count-overlay {
    font-size: 11px ;
    padding: 3px 6px ;
  }
}

/* Адаптация для очень широких но низких экранов (landscape телефоны) */
@media (max-width: 768px) and (orientation: landscape) {
  .card-media.media-count-1 > a {
    aspect-ratio: 16/9 ;
    max-height: 250px ;
  }
  
  /* В ландшафте можем показать больше медиа в ряд */
  .card-media.media-count-many {
    grid-template-columns: repeat(3, 1fr) ;
  }
  
  .card-media.media-count-many > a {
    max-height: 120px ;
  }
}

/* Особая адаптация для крошечных экранов */
@media (max-width: 320px) {
  .card-media {
    padding: 6px ;
    grid-gap: 2px ;
  }
  
  .card-media.media-count-1 > a {
    min-height: 180px ;
    max-height: 240px ;
  }
  
  /* На очень маленьких экранах все медиа в одну колонку кроме одиночных */
  .card-media.media-count-2,
  .card-media.media-count-3,
  .card-media.media-count-4,
  .card-media.media-count-many {
    grid-template-columns: 1fr ;
  }
  
  .card-media.media-count-2 > a,
  .card-media.media-count-3 > a,
  .card-media.media-count-4 > a,
  .card-media.media-count-many > a {
    aspect-ratio: 16/9 ;
    max-height: 160px ;
    grid-column: 1 ;
  }
  
  .card-media.media-count-3 > a:first-child {
    grid-column: 1 ;
  }
  
  .video-play-button {
    width: 35px ;
    height: 35px ;
  }
  
  .video-play-button::before {
    font-size: 10px ;
  }
}

/* Дополнительные утилиты */
.video-container.aspect-16-9 {
  aspect-ratio: 16/9 ;
}

.video-container.aspect-4-3 {
  aspect-ratio: 4/3 ;
}

.video-container.aspect-1-1 {
  aspect-ratio: 1/1 ;
}

/* HTML5 видео плеер
.video-player {
  width: 100% ;
  height: 100% ;
  object-fit: contain ;
  display: block ;
  border-radius: 8px ;
  background: #000 ;
} */

/* Стили для video_message (видеосообщений) */
.video-message-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

.video-message-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  cursor: pointer;
}

.video-message-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.video-message-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.video-message-no-thumbnail {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #000;
}

.video-message-play-button {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-message-play-button:hover {
  background: rgba(255, 255, 255, 1);
  transform: translate(-50%, -50%) scale(1.1);
}

.video-message-play-button::before {
  content: '\f4f4'; /* Bootstrap Icons play-fill */
  font-family: 'bootstrap-icons';
  font-size: 18px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-message-duration {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 5px;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  z-index: 15;
}

/* Стили для активного видео плеера в video message */
.video-message-player {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  background: #000;
}

/* Стилизуем контролы для круглых видео */
.video-message-player::-webkit-media-controls-panel {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50px;
}

.video-message-player::-webkit-media-controls-play-button,
.video-message-player::-webkit-media-controls-pause-button {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  margin: 5px;
}

.video-message-player::-webkit-media-controls-timeline {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  margin: 0 10px;
}

.video-message-player::-webkit-media-controls-current-time-display,
.video-message-player::-webkit-media-controls-time-remaining-display {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  font-size: 11px;
}

/* При клике на видео сообщение показываем курсор pointer */
.video-message-link[data-video-src] {
  cursor: pointer;
}

/* === Стили для голосовых сообщений (Voice Messages) === */

.voice-message-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0;
  max-width: 100%;
  width: 100%;
}

.voice-message-content {
  display: flex;
  align-items: center;
  background: #f0f2f5;
  border-radius: 18px;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-width: 280px;
  max-width: 450px;
  width: fit-content;
}

.voice-message-content:hover {
  background: #e4e6ea;
}

.voice-message-content.playing {
  background: #d1e7dd;
}

/* Кнопка воспроизведения */
.voice-message-play-button {
  width: 32px;
  height: 32px;
  background: #0084ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.voice-message-content:hover .voice-message-play-button {
  background: #0066cc;
}

.voice-message-content.playing .voice-message-play-button {
  background: #dc3545;
}

/* Иконка плей/пауза - Bootstrap Icons */
.voice-play-icon {
  font-family: 'bootstrap-icons';
  font-size: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.voice-play-icon::before {
  content: '\f4f4'; /* Bootstrap Icons play-fill */
}

.voice-message-content.playing .voice-play-icon::before {
  content: '\f4c3'; /* Bootstrap Icons pause-fill */
}

/* Область волновой формы */
.voice-message-waveform {
  flex: 1;
  position: relative;
  height: 20px;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

/* Полоски волновой формы */
.voice-waveform-bars {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 1px;
  width: 100%;
}

.voice-bar {
  width: 2px;
  background: #8e8e93;
  border-radius: 1px;
  transition: all 0.3s ease;
  min-height: 2px;
}

.voice-bar.active {
  background: #0084ff;
}

.voice-message-content.playing .voice-bar.played {
  background: #0084ff;
}

/* Полоса прогресса */
.voice-progress-bar {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  background: #0084ff;
  border-radius: 1px;
  transform: translateY(-50%);
  width: 0%;
  transition: width 0.1s linear;
  z-index: 2;
}

/* Показатель времени */
.voice-message-duration {
  font-size: 13px;
  color: #8e8e93;
  font-weight: 400;
  flex-shrink: 0;
  min-width: 35px;
  text-align: right;
}

.voice-message-content.playing .voice-message-duration {
  color: #0084ff;
}

/* Скрытый аудио плеер */
.voice-message-player {
  display: none;
}

/* === Стили для аудио плеера (Audio Player) === */

.audio-player-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0;
  max-width: 100%;
  width: 100%;
}

.audio-player-content {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-width: 320px;
  max-width: 500px;
  width: fit-content;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.audio-player-content:hover {
  background: #f8f9fa;
  border-color: #d0d7de;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.audio-player-content.playing {
  background: #e8f5e8;
  border-color: #28a745;
}

/* Кнопка воспроизведения аудио */
.audio-player-play-button {
  width: 40px;
  height: 40px;
  background: #007bff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.audio-player-content:hover .audio-player-play-button {
  background: #0056b3;
}

.audio-player-content.playing .audio-player-play-button {
  background: #dc3545;
}

/* Иконка плей/пауза для аудио - Bootstrap Icons */
.audio-play-icon {
  font-family: 'bootstrap-icons';
  font-size: 12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.audio-play-icon::before {
  content: '\f4f4'; /* Bootstrap Icons play-fill */
}

.audio-player-content.playing .audio-play-icon::before {
  content: '\f4c3'; /* Bootstrap Icons pause-fill */
}

/* Информация о треке */
.audio-player-info {
  flex: 1;
  min-width: 0;
  margin-right: 12px;
}

.audio-track-title {
  font-size: 14px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.audio-track-artist {
  font-size: 12px;
  color: #65676b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Контролы плеера */
.audio-player-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

.audio-progress-container {
  position: relative;
  width: 80px;
  height: 4px;
  background: #e4e6ea;
  border-radius: 2px;
  cursor: pointer;
}

.audio-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #007bff;
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}

.audio-player-content.playing .audio-progress-bar {
  background: #28a745;
}

.audio-progress-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  background: #007bff;
  border: 2px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.audio-player-content.playing .audio-progress-handle {
  background: #28a745;
  opacity: 1;
}

.audio-progress-container:hover .audio-progress-handle {
  opacity: 1;
}

/* Регулятор громкости */
.audio-volume-control {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}

.audio-volume-icon {
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.audio-volume-icon:hover {
  opacity: 1;
}

.audio-volume-slider {
  position: relative;
  width: 50px;
  height: 4px;
  cursor: pointer;
}

.audio-volume-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e4e6ea;
  border-radius: 2px;
}

.audio-volume-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #007bff;
  border-radius: 2px;
  width: 80%; /* Начальная громкость 80% */
  transition: background 0.2s ease;
}

.audio-player-content.playing .audio-volume-fill {
  background: #28a745;
}

.audio-volume-handle {
  position: absolute;
  top: 50%;
  left: 80%; /* Соответствует начальной громкости */
  width: 10px;
  height: 10px;
  background: #007bff;
  border: 2px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.audio-volume-slider:hover .audio-volume-handle {
  opacity: 1;
}

.audio-player-content.playing .audio-volume-handle {
  background: #28a745;
}

/* Длительность трека */
.audio-track-duration {
  font-size: 12px;
  color: #65676b;
  font-weight: 500;
  min-width: 35px;
  text-align: right;
}

.audio-player-content.playing .audio-track-duration {
  color: #28a745;
}

/* Скрытый аудио элемент */
.audio-track-player {
  display: none;
}

/* Мобильная адаптация для аудио плеера */
@media (max-width: 768px) {
  .audio-player-container {
    max-width: 300px;
  }
  
  .audio-player-content {
    max-width: 300px;
    min-width: 250px;
    padding: 10px 12px;
  }
  
  .audio-player-play-button {
    width: 36px;
    height: 36px;
    margin-right: 10px;
  }
  
  .audio-play-icon {
    border-left: 10px solid white;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin-left: 1px;
  }
  
  .audio-player-content.playing .audio-play-icon::before,
  .audio-player-content.playing .audio-play-icon::after {
    width: 2px;
    height: 8px;
  }
  
  .audio-track-title {
    font-size: 13px;
  }
  
  .audio-track-artist {
    font-size: 11px;
  }
  
  .audio-progress-container {
    width: 60px;
  }
  
  .audio-volume-slider {
    width: 40px;
  }
  
  .audio-volume-icon {
    font-size: 12px;
  }
  
  .audio-track-duration {
    font-size: 11px;
    min-width: 30px;
  }
}

/* === Стили для документов (Document Display) === */

.document-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0;
  max-width: 100%;
  width: 100%;
}

.document-content {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-width: 300px;
  max-width: 500px;
  width: fit-content;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.document-content:hover {
  background: #f8f9fa;
  border-color: #d0d7de;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Иконка документа */
.document-icon {
  font-size: 2.2em;
  margin-right: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Информация о документе */
.document-info {
  flex: 1;
  min-width: 0;
  margin-right: 12px;
}

.document-name {
  font-size: 14px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.document-size {
  font-size: 12px;
  color: #65676b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Кнопка скачивания */
.document-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #007bff;
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-size: 1.2em;
  flex-shrink: 0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.document-download-button:hover {
  background: #0056b3;
  color: white;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}

.document-download-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 123, 255, 0.2);
}

/* Мобильная адаптация для документов */
@media (max-width: 768px) {
  .document-container {
    max-width: 300px;
  }
  
  .document-content {
    max-width: 300px;
    min-width: 250px;
    padding: 10px 12px;
  }
  
  .document-icon {
    font-size: 2em;
    margin-right: 10px;
  }
  
  .document-name {
    font-size: 13px;
  }
  
  .document-size {
    font-size: 11px;
  }
  
  .document-download-button {
    width: 32px;
    height: 32px;
    font-size: 1.1em;
  }
}

@media (max-width: 480px) {
  .document-container {
    max-width: 280px;
  }
  
  .document-content {
    max-width: 280px;
    min-width: 220px;
    padding: 8px 10px;
  }
  
  .document-icon {
    font-size: 1.8em;
    margin-right: 8px;
  }
  
  .document-name {
    font-size: 12px;
  }
  
  .document-size {
    font-size: 10px;
  }
  
  .document-download-button {
    width: 28px;
    height: 28px;
    font-size: 1em;
  }
}

@media (max-width: 480px) {
  .audio-player-container {
    max-width: 280px;
  }
  
  .audio-player-content {
    max-width: 280px;
    min-width: 220px;
    padding: 8px 10px;
  }
  
  .audio-player-play-button {
    width: 32px;
    height: 32px;
    margin-right: 8px;
  }
  
  .audio-play-icon {
    border-left: 8px solid white;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
  
  .audio-player-content.playing .audio-play-icon::before,
  .audio-player-content.playing .audio-play-icon::after {
    width: 2px;
    height: 6px;
  }
  
  .audio-track-title {
    font-size: 12px;
  }
  
  .audio-track-artist {
    font-size: 10px;
  }
  
  .audio-progress-container {
    width: 50px;
  }
  
  .audio-volume-slider {
    width: 35px;
  }
  
  .audio-volume-icon {
    font-size: 11px;
  }
  
  .audio-track-duration {
    font-size: 10px;
    min-width: 28px;
  }
}

/* Мобильная адаптация для голосовых сообщений */
@media (max-width: 768px) {
  .voice-message-container {
    max-width: 280px;
  }
  
  .voice-message-content {
    max-width: 280px;
    min-width: 180px;
    padding: 6px 10px;
  }
  
  .voice-message-play-button {
    width: 28px;
    height: 28px;
    margin-right: 8px;
  }
  
  .voice-play-icon {
    border-left: 8px solid white;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-left: 1px;
  }
  
  .voice-message-content.playing .voice-play-icon::before,
  .voice-message-content.playing .voice-play-icon::after {
    width: 2px;
    height: 6px;
  }
  
  .voice-message-waveform {
    height: 16px;
    margin-right: 8px;
  }
  
  .voice-message-duration {
    font-size: 12px;
    min-width: 30px;
  }
}

@media (max-width: 480px) {
  .voice-message-container {
    max-width: 240px;
  }
  
  .voice-message-content {
    max-width: 240px;
    min-width: 160px;
    padding: 6px 8px;
  }
  
  .voice-message-play-button {
    width: 24px;
    height: 24px;
    margin-right: 6px;
  }
  
  .voice-play-icon {
    border-left: 6px solid white;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  
  .voice-message-content.playing .voice-play-icon::before,
  .voice-message-content.playing .voice-play-icon::after {
    width: 2px;
    height: 5px;
  }
  
  .voice-message-waveform {
    height: 14px;
    margin-right: 6px;
  }
  
  .voice-bar {
    width: 1.5px;
  }
  
  .voice-message-duration {
    font-size: 11px;
    min-width: 28px;
  }
}

/* Контейнер для видео плеера с кнопками управления */
.video-player-container {
  position: relative ;
  width: 100% ;
  height: 100% ;
  display: block ;
  border-radius: 8px ;
  overflow: hidden ;
}

/* Кнопка полноэкранного режима */
.video-fullscreen-button {
  position: absolute ;
  bottom: 8px ;
  right: 8px ;
  width: 36px ;
  height: 36px ;
  background: rgba(0, 0, 0, 0.7) ;
  border: none ;
  border-radius: 6px ;
  color: white ;
  cursor: pointer ;
  transition: all 0.3s ease ;
  z-index: 20 ;
  display: flex ;
  align-items: center ;
  justify-content: center ;
  font-size: 16px ;
  opacity: 0.8 ;
}

.video-fullscreen-button:hover {
  background: rgba(0, 0, 0, 0.9) ;
  transform: scale(1.1) ;
  opacity: 1 ;
}

.video-fullscreen-button::before {
  content: '⛶' ;
  font-size: 16px ;
  line-height: 1 ;
}

/* Показать кнопку полноэкранного режима при наведении */
.video-player-container:hover .video-fullscreen-button {
  opacity: 1 ;
}

/* НЕ скрывать кнопку плей когда видео воспроизводится - она превращается в кнопку паузы */
/* .video-container.playing .video-play-button {
  display: none ;
} */

/* Скрыть thumbnail когда видео воспроизводится */
.video-container.playing .video-thumbnail,
.video-container.playing .video-no-thumbnail {
  display: none !important;
}

/* Специальные стили для полноэкранного режима */
.video-player:fullscreen {
  width: 100vw ;
  height: 100vh ;
  object-fit: contain ;
  background: #000 ;
  border-radius: 0 ;
  max-width: none ;
  max-height: none ;
}

.video-player:-webkit-full-screen {
  width: 100vw ;
  height: 100vh ;
  object-fit: contain ;
  background: #000 ;
  border-radius: 0 ;
  max-width: none ;
  max-height: none ;
}

.video-player:-moz-full-screen {
  width: 100vw ;
  height: 100vh ;
  object-fit: contain ;
  background: #000 ;
  border-radius: 0 ;
  max-width: none ;
  max-height: none ;
}

.video-player:-ms-fullscreen {
  width: 100vw ;
  height: 100vh ;
  object-fit: contain ;
  background: #000 ;
  border-radius: 0 ;
  max-width: none ;
  max-height: none ;
}

/* Убрать кнопку полноэкранного режима в полном экране */
.video-player-container:fullscreen .video-fullscreen-button,
.video-player-container:-webkit-full-screen .video-fullscreen-button,
.video-player-container:-moz-full-screen .video-fullscreen-button {
  display: none ;
}


/* Спиннер загрузки */
.loading-spinner {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 15 !important;
}

.spinner {
  width: 40px !important;
  height: 40px !important;
  border: 4px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  border-top-color: #fff !important;
  animation: spin 1s ease-in-out infinite !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Сообщение об ошибке */
.error-message {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(220, 53, 69, 0.9) !important;
  color: white !important;
  padding: 12px 20px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  text-align: center !important;
  z-index: 20 !important;
  max-width: 80% !important;
}

/* Стили для видеоплеера */
.video-player {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Изменено с cover на contain */
  border-radius: 8px !important;
  background: #000 !important;
  z-index: 2 !important;
}

/* По умолчанию видеоплеер скрыт */
.video-container .video-player {
  display: none;
}

/* Показываем видеоплеер когда он активен */
.video-container.playing .video-player {
  display: block !important;
  z-index: 5 !important; /* Поверх миниатюры при воспроизведении */
}

/* Убеждаемся, что миниатюра не скрыта при загрузке */
.video-thumbnail:not([src]) {
  display: none !important;
}

/* Показать альтернативу если миниатюра не загрузилась */
.video-thumbnail[src=""],
.video-thumbnail[src*="undefined"],
.video-thumbnail[src*="null"] {
  display: none !important;
}

/* Скрыть миниатюру при ошибке загрузки */
.video-thumbnail.error {
  display: none !important;
}

/* Показать fallback при ошибке миниатюры */
.video-thumbnail.error + .video-no-thumbnail {
  display: flex !important;
}