/* ═════ Sentos · Переписка: шапка, лента, пузыри, меню сообщения и режим выбора ═════
   Перенесено из прототипа newfront/chats.css.
   Палитра и общие примитивы — в base.css и app.css. */

/* ─────────────────────── Переписка ─────────────────────── */

.chat {
  grid-area: chat;
  min-width: 0;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: calc(6px + env(safe-area-inset-top)) 8px 6px 8px;
}

.chat-peer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  transition:
    background-color 160ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}



@media (hover: hover) {
  .chat-peer:hover { background: var(--field); }
}

.chat-peer-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-peer-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.chat-peer-text span {
  color: var(--muted);
  font-size: 12px;
}

.chat-head-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

/* Лента */
.messages {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px 6px;
}

/* Лента прижата к низу пустой распоркой: в коротком чате сообщения
   стоят у поля ввода и нарастают вверх. Соблазнительное
   justify-content: flex-end так делать нельзя — при переполнении верх
   ленты становится недоступен для прокрутки. Отрицательный нижний
   отступ съедает зазор, который распорка добавила бы к первому
   сообщению. */
.messages::before {
  content: "";
  margin-top: auto;
  margin-bottom: -7px;
}

/* Пустая переписка — единственный случай, когда прижатие мешает:
   приглашение написать первым должно стоять по центру ленты.
   Отметку ставит chat.js, а не :has(): часть телефонов на iOS его
   не знает, а поведение должно быть одинаковым везде. */
.messages.is-empty { justify-content: center; }
.messages.is-empty::before { content: none; }

/* Смена собеседника — заметная пауза в ленте */
.message-row:not(.outgoing) + .message-row.outgoing,
.message-row.outgoing + .message-row:not(.outgoing) {
  margin-top: 6px;
}

.date-divider {
  align-self: center;
  margin: 8px 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  font-size: 11px;
}

.message-row {
  display: flex;
  max-width: 100%;
}

/* Запись о составе группы — плашкой, как дата, но в несколько строк:
   «Анна добавил(а) Игорь, Олег и Веру» в одну не всегда влезает. */
.message-row.system-row { justify-content: center; }

.system-note {
  max-width: min(86%, 420px);
  text-align: center;
  line-height: 1.4;
  white-space: normal;
}

.system-note b { font-weight: 600; }

.message-row.outgoing { justify-content: flex-end; }

.message-row { align-items: flex-end; }

/* Новое сообщение не возникает рывком: подрастает снизу вместе с лентой */
.message-row.is-new {
  animation: message-in 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.message {
  /* Текст и время лежат в одной строке, пока помещаются: время
     прижато вправо, а когда строка кончилась — уходит под текст,
     тоже вправо. Иначе пузырь растягивается пустотой. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  position: relative;
  max-width: 78%;
  padding: 7px 11px 7px;
  border-radius: 18px;
  /* Ничто не выходит за скруглённый край: ни цитата, ни длинная ссылка */
  overflow: hidden;
  background: var(--bubble-in);
  color: var(--text);
  font-size: 15px;
  line-height: 1.36;
  word-break: break-word;
}

.outgoing .message {
  background: var(--bubble-out);
  color: var(--bubble-out-text);
}

/* Сообщение, которое не открылось, приходит общим .muted-text, а он
   серый: на своём оранжевом пузыре такой текст сливается с заливкой.
   Берём цвет пузыря и приглушаем прозрачностью — тем же приёмом,
   что у «Переслано от» и у подписи под записью звонка. */
.outgoing .message .muted-text {
  color: inherit;
  opacity: 0.8;
}

/* Время и галочки прижимаются к последней строке текста */
.message-meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  transform: translateY(2px);
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.outgoing .message-meta {
  color: inherit;
  opacity: 0.72;
}

.delivery-status {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Отметка о доставке: две иконки лежат друг на друге и перетекают одна
   в другую, поэтому «доставлено → прочитано» не мигает подменой. */
.delivery {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
}

.delivery .delivery-status {
  position: absolute;
  inset: 0;
  transition: opacity 220ms ease;
}

.delivery .check-two { opacity: 0; }
.delivery.is-read .check-one { opacity: 0; }
.delivery.is-read .check-two { opacity: 1; }

/* «Печатает…»: по тексту бесконечно проходит светлая волна. Градиент
   здесь не украшение, а сама анимация — иначе статус выглядит статичным. */
/* Рабочий код ставит класс typing, наш прототип — is-typing:
   переливание ловит оба. */
.preview.typing,
.chat-peer-text span.typing,
.chat-peer-text span.is-typing,
.typing,
.is-typing {
  /* По тексту проходит не цветная, а тёмная волна: середина уходит в
     сторону фона, то есть буквы там будто растворяются. */
  background-image: linear-gradient(
    90deg,
    var(--muted) 18%,
    color-mix(in srgb, var(--muted) 32%, var(--page)) 50%,
    var(--muted) 82%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: typing-shine 1.8s linear infinite;
}

@keyframes typing-shine {
  from { background-position: 130% 0; }
  to { background-position: -30% 0; }
}

.message-meta.on-media {
  position: absolute;
  right: 10px;
  bottom: 10px;
  margin: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  opacity: 1;
}

/* Цитата в ответе.

   Ширина — по своему тексту, а не во весь пузырь: иначе короткий ответ
   получал плашку во всю ширину, и она выпирала над самим сообщением.
   Имя автора выделено цветом, а не рамкой-полоской слева. */
.msg-reply {
  flex: 0 1 100%;
  width: fit-content;
  max-width: 100%;
  margin: 1px 0 5px;
  padding: 5px 10px 6px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.07);
  font-size: 12px;
  line-height: 1.32;
}

.dark .msg-reply { background: rgba(255, 255, 255, 0.1); }
.outgoing .msg-reply { background: rgba(0, 0, 0, 0.16); }

.msg-reply-name {
  display: block;
  color: var(--accent);
  font-weight: 600;
}

.outgoing .msg-reply-name {
  color: inherit;
  opacity: 0.9;
}

.msg-reply-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.75;
}

/* Фото. Скругление держим на самом блоке: внутрь лягут любые снимки,
   и обрезать их должен пузырь, а не картинка. */
.media-message {
  display: block;
  padding: 4px;
  max-width: 260px;
  border-radius: 24px;
}

/* Картинку в ленте описывает media.css — там её кадр, размеры и
   состояния загрузки. Здесь осталось только то, что к ним не
   относится. Прежнее правило задавало ей ещё и max-height: 320px, и
   из-за него снимок не мог заполнить свой кадр: сверху и снизу
   оставалась серая полоса подложки. */
.media-message img {
  -webkit-user-drag: none;
}

/* Голосовое */
/* Голосовое в ленте. Ширину задаёт сама дорожка: полоска у неё
   фиксированная, а число полосок зависит от длительности записи —
   поэтому длинное голосовое шире короткого, а два одинаковых по времени
   всегда одного размера. */
.voice-message {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
}

.voice-play {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--accent-fill-text);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.voice-play.is-pressed { transform: scale(0.9); }
.voice-play .icon { width: 15px; height: 15px; fill: currentColor; }

.voice-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  height: 18px;
}

.voice-wave i {
  width: 2.5px;
  flex: none;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.45;
}

.voice-wave i:nth-child(3n) { height: 60%; }
.voice-wave i:nth-child(3n + 1) { height: 90%; }
.voice-wave i:nth-child(3n + 2) { height: 35%; }

.voice-time {
  flex: none;
  font-size: 12px;
  opacity: 0.7;
}

.voice-message .message-meta { margin-left: 0; }

/* ───────────── Действия над сообщением ─────────────

   Меню открывается правой кнопкой на компьютере и долгим нажатием на
   телефоне. Свайп сообщения влево — быстрый ответ: пузырь идёт за
   пальцем, а рядом проявляется кружок со стрелкой. */

/* Свайп двигает сам пузырь, а не строку: стрелка остаётся на месте и
   ничего не сдвигает, поэтому в начале жеста нет рывка. */
.message-row {
  position: relative;
  /* Вертикальную прокрутку отдаём странице, горизонтальный жест — свайпу */
  touch-action: pan-y;
}

.message-row > .message {
  position: relative;
  z-index: 1;
  /* Два сдвига в одном свойстве: жест свайпа и отступ под галочки
     в режиме выбора. */
  transform: translateX(calc(var(--swipe, 0px) + var(--select-shift, 0px)));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Пока палец ведёт сообщение, плавность мешает — пузырь должен идти
   ровно за пальцем. Возврат и сдвиг под галочки снова плавные. */
.message-row.is-swiping > .message {
  transition: none;
}

/* Стрелка лежит поверх строки и не участвует в раскладке: появляется и
   исчезает, ничего не сдвигая. */
.swipe-hint {
  /* Лежит под пузырём и открывается по мере того, как он уезжает влево */
  position: absolute;
  z-index: 0;
  top: 50%;
  left: var(--hint-left, 0px);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: var(--field-strong);
  color: var(--accent);
  opacity: var(--hint-opacity, 0);
  transform: scale(var(--hint-scale, 0.7));
  transition: opacity 160ms ease;
  pointer-events: none;
}

.swipe-hint .icon {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* Затемнение, поднятое сообщение и меню — выше поля ввода: у того свой
   этаж 30 (short.css, над сценой записи шорта), и открытое у низа экрана
   меню уходило под поле, а поле оставалось незатемнённым. */
.message-dim {
  position: absolute;
  inset: 0;
  z-index: 32;
  background: rgba(0, 0, 0, 0.32);
  /* Фон не только темнеет, но и размывается — иначе поднятое сообщение
     читается не поднятым, а «чуть менее тёмным»: одного затемнения в
     треть для этого мало. Так же в окнах (.ui-modal-dim) и в
     приложении (blurUnder). Выделенное сообщение и меню лежат выше и
     остаются чёткими. */
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  animation: dim-in 160ms ease;
}

/* Уход: класс ставит chat.js, и только после анимации приходит hidden.
   Иначе затемнение пропадает рывком, пока меню ещё уезжает. */
.message-dim.is-closing {
  pointer-events: none;
  animation: dim-out 140ms ease both;
}

@keyframes dim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.message-menu {
  position: absolute;
  z-index: 34;
  min-width: 172px;
  padding: 5px;
  border-radius: 24px;
  background: var(--panel);
  animation: menu-in 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dark .message-menu { background: #262626; }

@keyframes menu-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

.message-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Пункт всегда в одну строку: перенос ломает ритм меню. */
  white-space: nowrap;
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 19px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  transition: background-color 140ms ease;
}

.message-menu-item .icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
  color: var(--muted);
}

.message-menu-item.is-pressed:not(:disabled) {
  transform: none;
  filter: none;
  background: var(--field);
}

@media (hover: hover) {
  .message-menu-item:hover { background: var(--field); }
}

.message-menu-item.is-danger,
.message-menu-item.is-danger .icon { color: var(--accent); }

/* Лица просмотревших — у Telegram (AvatarsDrawable, STYLE_MESSAGE_SEEN)
   кружки 24 с шагом 12 и вырезанным кольцом вокруг каждого. Кольцо у
   нас — заливкой меню: на сплошной подложке это то же самое, и теней в
   проекте нет. Первое лицо лежит поверх остальных: список по нажатию
   читается в том же порядке.

   Место под лица (51) занято всегда, даже пока сервер отвечает: иначе
   меню меняло бы ширину у человека на глазах. */
.seen-faces {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  width: 51px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 220ms ease;
}

.seen-faces.is-shown { opacity: 1; }

.seen-face {
  display: flex;
  padding: 1.5px;
  border-radius: 50%;
  background: var(--panel);
}

.seen-face + .seen-face { margin-left: -15px; }

.seen-face:nth-child(1) { z-index: 3; }
.seen-face:nth-child(2) { z-index: 2; }
.seen-face:nth-child(3) { z-index: 1; }

.seen-face .avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.dark .seen-face { background: #262626; }

/* ───────────── Выбор нескольких сообщений ───────────── */

.selection-toolbar {
  position: absolute;
  z-index: 12;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: calc(10px + env(safe-area-inset-top)) 10px 10px;
  background: var(--page);
  animation: menu-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.selection-count {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
  font-size: 15px;
  font-weight: 600;
}

.icon-btn.is-danger { color: var(--accent); }

.messages.selection-selectable .message-row { cursor: pointer; }

/* В режиме выбора место под галочки освобождают только свои сообщения:
   чужие прижаты к левому краю, и сдвигать их некуда — они просто
   уезжали за границу экрана. */
.messages.selection-selectable .message-row.outgoing {
  --select-shift: -36px;
}

.messages.selection-selectable .message-row.is-selected {
  background: var(--accent-soft);
  border-radius: 16px;
}

/* Галочка стоит у правого края строки, по центру сообщения */
.selection-check {
  position: absolute;
  right: 2px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--field-strong);
  color: transparent;
  opacity: 0;
  transform: scale(0.8);
  transition:
    background-color 160ms ease,
    color 160ms ease,
    opacity 220ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.messages.selection-selectable .selection-check {
  opacity: 1;
  transform: none;
}

.selection-check .icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.is-selected .selection-check {
  background: var(--accent-fill);
  color: var(--accent-fill-text);
}

/* ═════ Дописано при переносе ═════
   То, чего в макете не было, потому что макет показывал обычную
   переписку: правленые и удалённые сообщения, спойлеры, ссылки,
   записи о звонках и пересылку. Всё в той же палитре и геометрии. */

/* Время в подписи: отдельная величина, чтобы часы не прыгали по
   ширине от цифры к цифре. */
.message-meta .time { font-variant-numeric: tabular-nums; }

/* «изменено» — рядом со временем и той же тональности: это пометка,
   а не сообщение. */
.edited {
  margin-right: 4px;
  font-size: 10px;
  opacity: 0.75;
}

/* Удалённое сообщение остаётся в ленте пустым местом: без него
   переписка выглядела бы так, будто ничего и не было. */
.message.deleted {
  background: var(--field);
  color: var(--muted);
  font-style: italic;
}

.outgoing .message.deleted {
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
}

/* Спойлер: текст закрыт заливкой и открывается нажатием. Класс
   revealed ставит chat.js. */
.message-spoiler {
  border-radius: 6px;
  background: currentColor;
  color: inherit;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.message-spoiler:not(.revealed) { color: transparent; }
.message-spoiler.revealed { background: transparent; }

.message-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.outgoing .message-link { text-decoration-color: rgba(255, 255, 255, 0.6); }

/* Превью ссылки прямо в пузыре: полоска слева отделяет его от текста,
   как цитата в ответе. */
.message-link-preview {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 8px 6px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.07);
  color: inherit;
  text-decoration: none;
}

.dark .message-link-preview { background: rgba(255, 255, 255, 0.1); }
.outgoing .message-link-preview { background: rgba(0, 0, 0, 0.16); }

.message-link-preview img {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 9px;
  object-fit: cover;
}

.message-link-preview span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.message-link-preview small {
  color: var(--accent);
  font-size: 11px;
}

.outgoing .message-link-preview small { color: inherit; opacity: 0.85; }

.message-link-preview strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-link-preview em {
  overflow: hidden;
  font-size: 12px;
  font-style: normal;
  opacity: 0.75;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* «Переслано от …» — первая строка пузыря, как имя автора в группе. */
.forwarded-label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 100%;
  width: 0;
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.outgoing .forwarded-label { color: inherit; opacity: 0.85; }
.forwarded-label .icon { width: 14px; height: 14px; }

/* ─────────────── Запись о звонке ───────────────
   Такой же пузырь, как сообщение: свой оранжевый, чужой серый, время
   в том же углу, зазор в ленте общий. Раньше запись выпадала из
   разговора отдельной плашкой с кнопкой «Позвонить» — читалась как
   служебная строка, а не как то, что между людьми произошло.

   Цвет пузыря и время достаются от .message даром, поэтому здесь
   только внутренности. */

.message.is-call {
  gap: 10px;
  padding: 8px 12px 8px 8px;
}

.message-call {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Кружок белый в обеих темах пузыря: на оранжевом своём и на сером
   чужом он одинаково отделяет трубку от фона, и зелёный с красным
   читаются на нём одинаково. */
.message-call-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--panel);
  color: var(--online);
}

.message-call.missed .message-call-icon { color: var(--danger); }

.message-call-icon .icon { width: 18px; height: 18px; }

.message-call-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.message-call-text strong {
  font-size: 13px;
  font-weight: 500;
}

.message-call-text small {
  color: var(--muted);
  font-size: 11px;
}

/* На своём пузыре приглушённый серый не читается: берём цвет пузыря
   и приглушаем прозрачностью — тем же приёмом, что у «Переслано от». */
.outgoing .message-call-text small {
  color: inherit;
  opacity: 0.8;
}

/* ─────────────── Долгое нажатие и подсветка ─────────────── */

/* Пузырь продавливается под пальцем, пока меню ещё не открылось: так
   видно, что нажатие принято. */
.message.is-pressing { transform: scale(0.97); }

/* Сообщение, над которым открыто меню, всплывает над затемнением. */
.message-row.is-focused { position: relative; z-index: 33; }

/* Переход к сообщению из раздела вложений или поиска: коротко
   подсвечиваем, иначе непонятно, куда смотреть. */
.message-row.is-highlight .message {
  animation: message-highlight 1.6s ease;
}

@keyframes message-highlight {
  0%, 70% { box-shadow: 0 0 0 3px var(--accent-soft); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

/* Играющее голосовое: кнопка держит акцент, пока идёт звук. */
.voice-player.is-playing .voice-play { transform: scale(1.04); }

/* ─────────────────────── Обои переписки ───────────────────────
   Обои — фон самой панели, а не прокручиваемой ленты: фон ленты
   перерисовывался бы на каждом кадре прокрутки, а панель стоит на месте.
   Имя обоев ставит js/look.js атрибутом data-wallpaper; без атрибута всё
   как было. Переменные --wp-* общие с карточками выбора в настройках:
   миниатюра там рисуется этими же правилами.

   Цвета заданы для обеих тем — светлые обои слепили бы в тёмной. Узоры
   еле заметны: обои не должны спорить с сообщениями. */

:root {
  --wallpaper-bubble: #ffffff;
  --wp-dot: rgba(24, 24, 27, 0.11);
  --wp-line: rgba(24, 24, 27, 0.05);
}

:root.dark {
  --wallpaper-bubble: #262626;
  --wp-dot: rgba(255, 255, 255, 0.08);
  --wp-line: rgba(255, 255, 255, 0.045);
}

[data-wallpaper="none"] { --wp-color: var(--page); }
[data-wallpaper="sand"] { --wp-color: #efe8dd; }
[data-wallpaper="mint"] { --wp-color: #e1eee7; }
[data-wallpaper="sky"] { --wp-color: #e0e9f2; }
[data-wallpaper="lilac"] { --wp-color: #ebe4f1; }

[data-wallpaper="dots"] {
  --wp-color: #eeeef0;
  --wp-image: radial-gradient(var(--wp-dot) 1.3px, transparent 1.6px);
  --wp-size: 16px 16px;
}

[data-wallpaper="grid"] {
  --wp-color: #eeeef0;
  --wp-image:
    linear-gradient(var(--wp-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--wp-line) 1px, transparent 1px);
  --wp-size: 22px 22px;
}

[data-wallpaper="custom"] {
  --wp-color: var(--page);
  --wp-image: var(--wallpaper-photo, none);
  --wp-size: cover;
}

:root.dark [data-wallpaper="sand"] { --wp-color: #211d18; }
:root.dark [data-wallpaper="mint"] { --wp-color: #17201b; }
:root.dark [data-wallpaper="sky"] { --wp-color: #161d25; }
:root.dark [data-wallpaper="lilac"] { --wp-color: #1e1a24; }
:root.dark [data-wallpaper="dots"],
:root.dark [data-wallpaper="grid"] { --wp-color: #151515; }

/* Фото в тёмной теме приглушаем: пузыри и даты на нём должны читаться. */
:root.dark [data-wallpaper="custom"] {
  --wp-image:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    var(--wallpaper-photo, none);
}

.chat.panel[data-wallpaper] {
  --panel-bg: var(--wp-color);
  background-image: var(--wp-image, none);
  background-size: var(--wp-size, auto);
  background-position: center;
}

/* На цветном фоне серый пузырь входящего теряется — даём ему заливку,
   какой он стоит на белом. Плашки дат по той же причине. */
.chat.panel[data-wallpaper] .message-row:not(.outgoing) .message:not(.is-short),
.chat.panel[data-wallpaper] .date-divider {
  background: var(--wallpaper-bubble);
}

/* ─────────────────────── Запрет копирования ───────────────────────
   Текст не выделяется и не уносится долгим нажатием, кнопки сохранения
   медиа спрятаны. От снимка экрана это не защищает — так и сказано
   человеку, когда он включает запрет. */
.messages.is-protected {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.messages.is-protected [data-save-media] { display: none; }