/* ---------- MESSAGES LIST / TEXT BUBBLES ---------- */
/* background-image выставляется в JS (features/profile.js:applyWallpaper) из
   сохранённых в localStorage "обоев чата" — по умолчанию (без обоев) остаётся
   обычный сплошной фон body/#chat-area. */
#messages{
  flex:1; overflow-y:auto; padding:24px 28px; display:flex; flex-direction:column; gap:4px;
  /* Свой шрифт сообщений (см. features/font-settings.js) — намеренно только
     здесь, а не на body/html, поэтому меню, сайдбар и модалки его не видят. */
  font-family:var(--chat-font-family, inherit);
  /* background-size:cover ниже — только запасной вариант на случай, если JS ещё не
     успел проставить фиксированный пиксельный размер (см. features/profile.js:
     applyWallpaperSizing). Сам JS-размер не пересчитывается при открытии
     клавиатуры специально — см. комментарий там. */
  background-size:cover; background-position:center; background-repeat:no-repeat;
  /* ВАЖНО: не "local" — тот привязывает фон к прокручиваемому СОДЕРЖИМОМУ
     элемента, и размер пересчитывался бы под полную высоту истории чата
     (которая растёт с каждым новым сообщением), поэтому обои визуально
     "растягивались"/увеличивались по мере роста переписки. Со "scroll"
     (по умолчанию) фон зафиксирован относительно рамки самого #messages —
     остаётся статичной картинкой на весь видимый блок, а сообщения просто
     скроллятся поверх неё, как и задумано. */
  background-attachment:scroll;
}
.msg-row{
  display:flex; margin-bottom:6px; position:relative;
  touch-action:pan-y; /* свайп теперь ловится по всей ширине строки, не только по пузырю */
}
.msg-row.out{ justify-content:flex-end; }
.msg-row.in{ justify-content:flex-start; }
.bubble{
  max-width:62%; padding:10px 14px; font-size:var(--chat-font-size, 0.9062rem); line-height:1.45;
  position:relative; word-wrap:break-word; white-space:pre-wrap;
  border-radius:var(--r-lg);
  transition:transform .2s ease;
  touch-action:pan-y; /* оставляем вертикальный скролл списку, горизонталь ловит свайп-обработчик */
}

/* ---------- свайп по сообщению: подсказка-иконка (features/message-swipe.js) ----------
   Свайп справа налево -> цитировать (иконка проявляется у правого края пузыря).
   Свайп слева направо -> копировать текст / скачать медиа (иконка у левого края). */
.swipe-hint{
  position:absolute; top:50%; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper); font-size:0.9375rem;
  opacity:0; transform:translateY(-50%) scale(.6); pointer-events:none; z-index:2;
}

/* ---------- блок цитаты в теле ответа (свайп-цитирование) ---------- */
.bubble .quote-block{
  border-left:3px solid var(--warn); padding:1px 0 1px 10px; margin-bottom:6px;
  font-size:calc(var(--chat-font-size, 0.9062rem) * 0.8966); line-height:1.35; opacity:.7; white-space:normal;
}
.bubble .quote-block .quote-author{
  display:block; font-weight:700; color:var(--warn); font-size:calc(var(--chat-font-size, 0.9062rem) * 0.7931); margin-bottom:1px;
}
/* лёгкий "хвостик" пузыря, как в Telegram — один угол чуть менее скруглён */
.msg-row.out .bubble{ background:var(--ink); color:var(--paper); border:1.5px solid var(--ink); border-bottom-right-radius:6px; }
.msg-row.in .bubble{ background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); border-bottom-left-radius:6px; }
.bubble-time{
  display:flex; align-items:center; gap:5px; font-size:calc(var(--chat-font-size, 0.9062rem) * 0.6897); margin-top:5px; font-family:'IBM Plex Mono',monospace;
  opacity:.55; text-align:right; justify-content:flex-end;
}
.bubble-time .lock{ font-size:calc(var(--chat-font-size, 0.9062rem) * 0.6897); }
/* Галочки "отправлено/прочитано" — только у наших исходящих сообщений.
   Одна — ушло с устройства, две — собеседник подтвердил показ (XEP-0333).
   Цвет "прочитано" берём из --ok (тот же зелёный, что у online-статуса/доверенных
   ключей), чтобы не заводить отдельный акцентный цвет только под это. */
.bubble-time .ticks{ font-size:calc(var(--chat-font-size, 0.9062rem) * 0.7586); letter-spacing:-2px; padding-right:2px; opacity:.75; }
.bubble-time .ticks.read{ color:var(--ok); opacity:1; }
/* max-height ограничивает высокие портретные скриншоты, как в Telegram:
   картинка/видео сжимаются по большей стороне, а не растягиваются во всю высоту чата.
   Скрины намеренно чуть компактнее (~0.8x), видео — чуть крупнее (~1.3x). */
.bubble img{
  display:block; width:auto; height:auto;
  max-width:min(224px, 100%); max-height:272px; min-width:96px;
  border-radius:var(--r-sm); margin-top:6px; object-fit:cover;
}
/* Видео — фиксированная рамка ровно 16:9 через классический padding-top hack:
   не полагаемся на CSS aspect-ratio (в части WebView он не поддерживается или
   работает нестабильно в паре с object-fit). Рамка сама держит пропорцию,
   видео внутри — position:absolute + object-fit:cover, полностью её заполняет
   без чёрных/белых полос независимо от реальных пропорций исходника. */
.bubble .video-ratio-box{
  position:relative; display:block; width:min(364px, 100%); min-width:156px;
  margin-top:6px; border-radius:var(--r-sm); overflow:hidden;
  padding-top:56.25%; /* 9/16 */
  background:var(--ink-05);
}
.bubble .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-embed{ margin-top:6px; }
.bubble .media-loading{ opacity:0.6; font-size:calc(var(--chat-font-size, 0.9062rem) * 0.8966); font-style:italic; }
.bubble a{ color:inherit; text-decoration:underline; }

.bubble.system{
  align-self:center; max-width:80%; text-align:center; font-family:'IBM Plex Mono',monospace;
  font-size:calc(var(--chat-font-size, 0.9062rem) * 0.7586); color:var(--ink-40); background:none; border:1px dashed var(--ink-20); border-radius:var(--r-round);
}
.day-divider{
  align-self:center; font-family:'IBM Plex Mono',monospace; font-size:calc(var(--chat-font-size, 0.9062rem) * 0.7241); text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-40); margin:18px 0 10px; padding:5px 14px; border:1px solid var(--ink-10);
  border-radius:var(--r-round);
}

/* Плашка "Непрочитанные сообщения" — ставится перед первым непрочитанным входящим
   сообщением (см. ui/chat-view.js:renderMessages). Пропадает, когда пользователь
   долистывает вниз мимо неё — IntersectionObserver в chat-view.js прячет элемент
   и помечает сообщения этого чата прочитанными. */
.unread-divider{
  align-self:center; font-family:'IBM Plex Mono',monospace; font-size:calc(var(--chat-font-size, 0.9062rem) * 0.7241); text-transform:uppercase;
  letter-spacing:.1em; color:var(--paper); background:var(--warn); margin:14px 0; padding:5px 14px;
  border-radius:var(--r-round); font-weight:600;
}