/**
 * Раскладка пузырей в #messagesBox — единый источник (подключается после styles.css / mediamanager.css).
 * Устраняет «буквы в столбик» (flex + fit-content + % + min-width:0 + contain:layout).
 */

#messagesBox {
  --chat-text-bubble-max: min(70cqw, 420px);
  --chat-voice-bubble-width: 300px;
  /* sync chatMediaBubbleSize.ts CHAT_VIRTUAL_LIST_GAP_PX / CHAT_FEED_ABOVE_COMPOSER_GAP_PX */
  --chat-feed-row-gap: 10px;
  --chat-feed-above-composer-gap: 16px;
  /* Фиксированные медиа-пузыри (владелец — chatMediaBubbleSize.ts) */
  --chat-media-bubble-pad-x: 3px;
  --chat-media-portrait-w: 240px;
  --chat-media-portrait-h: 320px;
  --chat-media-landscape-w: 280px;
  --chat-media-landscape-h: 158px;
  /* Внутренняя ширина медиа = внешняя минус padding пузыря (.message:has(> .chat-media-wrap)) */
  --chat-media-portrait-inner-w: calc(var(--chat-media-portrait-w) - 2 * var(--chat-media-bubble-pad-x));
  --chat-media-landscape-inner-w: calc(var(--chat-media-landscape-w) - 2 * var(--chat-media-bubble-pad-x));
  --chat-media-bubble-max: var(--chat-media-landscape-w);
}

@media (max-width: 899px) {
  #messagesBox {
    --chat-text-bubble-max: min(calc(100vw - 64px), 380px);
    --chat-media-bubble-max: min(240px, calc(var(--chat-media-max-height, min(50vh, 400px)) * 9 / 16));
    /* Голосовые: не шире колонки пузыря (в группе слева ещё аватар ~46px) */
    --chat-voice-bubble-width: min(300px, 100%);
  }

  /* Группа: пузырь в оставшейся ширине, не за правый край */
  #messagesBox .group-message-row .message-swipe-slide {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
  }

  #messagesBox .group-message-row {
    --chat-text-bubble-max: min(calc(100vw - 110px), 380px);
    --chat-media-bubble-max: min(
      240px,
      calc(var(--chat-media-max-height, min(50vh, 400px)) * 9 / 16),
      calc(100% - 46px)
    );
  }
}

#messagesBox .message-swipe-slide {
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  min-width: 0;
}

#messagesBox .message-swipe-slide > .message {
  width: fit-content;
  /* min-width: 0 — иначе min-content длинной строки без пробелов > max-width и пузырь вылезает за чат */
  min-width: 0;
  max-width: var(--chat-text-bubble-max);
  contain: none;
}

/* Цитата внутри пузыря: не раздувает bubble за max-width (ответ на длинное сообщение). */
#messagesBox .message-reply {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

#messagesBox .message-reply__author {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.25;
}

#messagesBox .message-reply__text {
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

#messagesBox .message-reply__text .message-text-link {
  word-break: break-all;
}

#messagesBox .message-swipe-slide > .message.message-has-media {
  max-width: max(var(--chat-media-portrait-w), var(--chat-media-landscape-w));
  min-width: var(--chat-media-portrait-w);
}

#messagesBox .message-swipe-slide > .message.voice-only {
  max-width: var(--chat-voice-bubble-width);
}

#messagesBox .message-text {
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* Медиа: фиксированный box с первого кадра (inline style + класс ориентации) */
#messagesBox .chat-media-wrap.chat-media-image,
#messagesBox .chat-media-wrap.chat-media-video,
#messagesBox .video-tap-wrap.chat-media-wrap {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 6px;
  box-sizing: border-box;
  display: block;
  background: rgba(0, 0, 0, 0.06);
}

body.dark-theme #messagesBox .chat-media-wrap.chat-media-image,
body.dark-theme #messagesBox .chat-media-wrap.chat-media-video,
body.dark-theme #messagesBox .video-tap-wrap.chat-media-wrap {
  background: rgba(255, 255, 255, 0.06);
}

#messagesBox .chat-media-wrap--ready {
  background: transparent;
}

#messagesBox .chat-media-wrap.chat-media-image--portrait {
  width: var(--chat-media-portrait-inner-w);
  height: var(--chat-media-portrait-h);
  min-width: var(--chat-media-portrait-inner-w);
  min-height: var(--chat-media-portrait-h);
}

#messagesBox .chat-media-wrap.chat-media-image--landscape,
#messagesBox .chat-media-wrap.chat-media-video--landscape,
#messagesBox .video-tap-wrap.chat-media-video--landscape {
  width: var(--chat-media-landscape-inner-w);
  height: var(--chat-media-landscape-h);
  min-width: var(--chat-media-landscape-inner-w);
  min-height: var(--chat-media-landscape-h);
}

#messagesBox .chat-media-wrap.chat-media-image img.chat-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}

#messagesBox .chat-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

body.dark-theme #messagesBox .chat-media-placeholder {
  background: rgba(255, 255, 255, 0.06);
}

#messagesBox .message.message-has-media {
  max-width: max(var(--chat-media-portrait-w), var(--chat-media-landscape-w));
}

/* Голосовые: до 300px, но не шире колонки; кнопки не width:100% от глобального button{} */
#messagesBox .voice-message {
  width: min(300px, 100%) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

#messagesBox .group-message-row .message-swipe-slide {
  min-width: 0;
  max-width: 100%;
}

#messagesBox .voice-message button {
  width: auto;
  margin: 0;
}

#messagesBox .voice-wave-wrap {
  touch-action: none;
  cursor: pointer;
  pointer-events: auto;
}

#messagesBox .voice-waveform {
  pointer-events: none;
}

#messagesBox .voice-time-overlay {
  display: inline-flex !important;
}

#messagesBox .message.voice-only .message-time {
  display: flex !important;
  visibility: visible;
  opacity: 1;
}

/* === Virtual list + сброс конфликтов styles.css (грузится раньше) === */
#messagesBox .messages-stack {
  min-width: 0;
}

#messagesBox .chat-messages-virtual-host {
  position: relative;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  /* Зазор до composer — chatVirtualHostHeightPx() в ChatMessagesVirtualList. */
  padding-bottom: 0;
}

#messagesBox .chat-messages-list-host {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

#messagesBox .chat-virtual-row {
  display: block;
  overflow: visible;
  contain: none;
  isolation: isolate;
  box-sizing: border-box;
  padding-bottom: var(--chat-feed-row-gap);
}

#messagesBox .chat-virtual-row .dm-message-row,
#messagesBox .chat-virtual-row .group-message-row,
#messagesBox .chat-virtual-row .outgoing-message-row,
#messagesBox .chat-virtual-row .message,
#messagesBox .chat-virtual-row .message.voice-only,
#messagesBox .chat-virtual-row .message.video-circle-only,
#messagesBox .chat-virtual-row .selection-message-wrap {
  margin-bottom: 0;
  flex-shrink: 0;
}

#messagesBox .message.message-has-media {
  display: flow-root;
  padding-bottom: 22px;
  overflow: hidden;
  box-sizing: border-box;
}

#messagesBox .message.message-has-media .message-time {
  position: static;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
  padding: 0 2px 2px;
}

/* Отмена width:auto / max-height из styles.css — фиксированные классы ориентации */
#messagesBox .message.message-has-media .chat-media-wrap,
#messagesBox .message.message-has-media .video-tap-wrap.chat-media-wrap {
  width: auto;
  max-width: none;
  min-width: 0;
  max-height: none;
  min-height: 0;
  aspect-ratio: unset;
}

#messagesBox .chat-media-wrap.chat-media-image--portrait {
  width: var(--chat-media-portrait-inner-w) !important;
  height: var(--chat-media-portrait-h) !important;
  min-width: var(--chat-media-portrait-inner-w) !important;
  min-height: var(--chat-media-portrait-h) !important;
  max-width: none !important;
  max-height: none !important;
}

#messagesBox .chat-media-wrap.chat-media-video--portrait,
#messagesBox .video-tap-wrap.chat-media-video--portrait {
  width: var(--chat-media-portrait-inner-w) !important;
  height: var(--chat-media-portrait-h) !important;
  min-width: var(--chat-media-portrait-inner-w) !important;
  min-height: var(--chat-media-portrait-h) !important;
  max-width: none !important;
  max-height: none !important;
}

#messagesBox .chat-media-wrap.chat-media-image--landscape,
#messagesBox .chat-media-wrap.chat-media-video--landscape,
#messagesBox .video-tap-wrap.chat-media-video--landscape {
  width: var(--chat-media-landscape-inner-w) !important;
  height: var(--chat-media-landscape-h) !important;
  min-width: var(--chat-media-landscape-inner-w) !important;
  min-height: var(--chat-media-landscape-h) !important;
  max-width: none !important;
  max-height: none !important;
}

#messagesBox .chat-media-wrap.chat-media-image img.chat-media,
#messagesBox .chat-media-wrap.chat-media-video .chat-video-poster {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

#messagesBox img.chat-media {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}

#messagesBox .chat-media-wrap.chat-media-video .chat-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
  opacity: 0;
  pointer-events: none;
}

#messagesBox .chat-media-wrap.chat-media-video .chat-video-poster--ready {
  opacity: 1;
}

#messagesBox .chat-media-wrap.chat-media-video .chat-video-poster--instant {
  opacity: 1;
  transition: none;
}

/* Sticky date pill while scrolling (overlay, не в virtual row). */
#messagesBox .chat-sticky-date-header {
  position: sticky;
  top: 8px;
  z-index: 6;
  display: flex;
  justify-content: center;
  pointer-events: none;
  margin-bottom: -36px;
}

#messagesBox .chat-sticky-date-header__pill {
  margin: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

#messagesBox .message-unread-divider {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #128c7e;
  margin: 12px 0;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(18, 140, 126, 0.12);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

body.dark-theme #messagesBox .message-unread-divider {
  color: #25d366;
  background: rgba(37, 211, 102, 0.14);
}

/* Idle offscreen row measurement — inside #messagesBox for selector parity. */
#messagesBox .chat-feed-pre-measure-host {
  position: fixed;
  left: -100vw;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  contain: layout style;
}

#messagesBox .chat-scroll-to-unread {
  position: sticky;
  top: 52px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 8px;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: #128c7e;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  width: fit-content;
}

#messagesBox .chat-scroll-to-unread i {
  font-size: 12px;
}

body.dark-theme #messagesBox .chat-scroll-to-unread {
  background: #25d366;
  color: #111;
}

/* Telegram-style scroll-to-bottom FAB (overlay, right above composer). */
.chat-messages-panel .chat-scroll-to-bottom {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 6;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #ffffff;
  color: #707579;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.08);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.chat-messages-panel .chat-scroll-to-bottom:hover {
  background: #f4f4f5;
}

.chat-messages-panel .chat-scroll-to-bottom i {
  font-size: 18px;
  line-height: 1;
}

.chat-messages-panel .chat-scroll-to-bottom__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #3390ec;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-theme .chat-messages-panel .chat-scroll-to-bottom {
  background: #2b2b2b;
  color: #aaaaaa;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

body.dark-theme .chat-messages-panel .chat-scroll-to-bottom:hover {
  background: #363636;
}

body.dark-theme .chat-messages-panel .chat-scroll-to-bottom__badge {
  background: #3390ec;
  color: #fff;
}