/* ---------- медиа-сообщения (только фото/видео, без текста) ----------
   Как в Telegram: картинка/видео идут "встык" с формой пузыря, без белой рамки
   вокруг из-за разных радиусов — пузырь обрезает медиа своей же формой
   (overflow:hidden + border-radius:inherit), а время/замок лежат поверх. */
.bubble.media-only{ padding:0; overflow:hidden; white-space:normal; line-height:0; }
.bubble.media-only .media-frame{
  border-radius:inherit; overflow:hidden; line-height:0;
  /* хак против старых WebKit/WebView, где overflow:hidden иногда не обрезает
     <video> по border-radius без маски — safe no-op в остальных браузерах */
  -webkit-mask-image:-webkit-radial-gradient(white, black);
}
/* Не растягиваем на 100% ширины пузыря — вместо этого даём медиа само определить
   размер в рамках width/height-лимитов (как делает Telegram: длинная сторона
   упирается в потолок, короткая тянется за ней с сохранением пропорций).
   Пузырь при этом сам обтягивает картинку/видео (см. .bubble.media-only без
   фиксированной ширины), поэтому широкие кадры остаются широкими, а высокие —
   узкими и высокими, но не выше потолка. Скрины компактнее (~0.8x), видео крупнее (~1.3x). */
.bubble.media-only .media-frame img{
  display:block; width:auto; height:auto;
  max-width:256px; max-height:320px; min-width:144px; min-height:48px;
  margin:0; border-radius:0; object-fit:cover;
}
.bubble.media-only .media-frame .video-ratio-box{
  position:relative; display:block; width:416px; max-width:100%; min-width:234px;
  margin:0; border-radius:0; overflow:hidden;
  padding-top:56.25%; /* 9/16 */
  background:var(--ink-05);
}
.bubble.media-only .media-frame .video-ratio-box video{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; object-fit:cover; object-position:center; border-radius:0;
}
.bubble.media-only .media-frame .media-loading{ display:block; padding:40px 20px; text-align:center; }

/* Плашка "нажмите, чтобы загрузить видео" — показывается вместо автозагрузки,
   когда в настройках включено "Не загружать видео автоматически" (см.
   features/profile.js, ui/chat-view.js:_loadMediaOrDeferForVideo). Использует
   ту же рамку 16:9 (.video-ratio-box), что и обычное загруженное видео — так
   это выглядит как настоящее превью видео с кнопкой Play, а не строка текста. */
.video-tap-load{ cursor:pointer; }
.video-tap-load-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.video-tap-load-play{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:rgba(0,0,0,.5); color:#fff; font-size:1.25rem;
  padding-left:4px; /* оптический центр треугольника play чуть смещён вправо */
}

/* Время/замок поверх фото или видео — без сплошной чёрной плашки (она выглядела
   грубым чёрным прямоугольником поверх кадра). Вместо фона — текстовая тень,
   как в Telegram: белый текст читается на любом фоне сам по себе. */
.bubble-time.overlay{
  position:absolute; right:10px; bottom:8px; z-index:2; margin-top:0; opacity:1;
  background:none; color:#fff; padding:0; border-radius:0;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.5);
}