/* ==========================================================================
   c-msg 2 — оформление в духе Telegram (тёмная тема)
   ========================================================================== */

:root {
  --bg:          #0e1621;
  --panel:       #17212b;
  --panel-2:     #1c2733;
  --header:      #17212b;
  --bubble-in:   #182533;
  --bubble-out:  #2b5278;

  --accent:      #5288c1;
  --accent-2:    #64b5ef;

  --text:        #ffffff;
  --text-dim:    #7f91a4;
  --text-mute:   #5c6b7a;

  --border:      #0b131b;
  --hover:       #202b36;
  --active:      #2b5278;

  --field-bg:     #0e1621;
  --field-border: #253340;
  --chip:         #1d2a37e6;

  --danger:      #e05c5c;
  --ok:          #4fae6a;

  --radius:      10px;

  /* Размеры панели чатов.
     Полная ширина подстраивается под окно, минимум — свёрнутая рейка
     с одними аватарами. Ниже 170px список сам переходит в режим аватаров. */
  --sidebar-w:   380px;
  --sidebar-rail: 74px;
  --chat-min:    360px;

  /* Нижний предел, до которого интерфейс ужимается. Уже него окно сжать
     можно, но сам интерфейс перестаёт сжиматься и появляется прокрутка —
     это ближайший аналог того, что нативное окно Telegram просто не даёт
     себя уменьшить меньше предела. */
  --app-min:     380px;

  /* волнистый узор на фоне переписки */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.4'%3E%3Cpath d='M0 16q18-16 36 0t36 0'/%3E%3Cpath d='M-36 46q18-16 36 0t36 0'/%3E%3C/g%3E%3C/svg%3E");
  --wave-size: 72px 60px;
}

:root[data-theme="light"] {
  --bg:          #ffffff;
  --panel:       #eef1f6;
  --panel-2:     #ffffff;
  --header:      #ffffff;
  --bubble-in:   #ffffff;
  --bubble-out:  #d7e7ff;

  --accent:      #3b7ddd;
  --accent-2:    #3b7ddd;

  --text:        #131a22;
  --text-dim:    #6b7683;
  --text-mute:   #98a2ad;

  --border:      #e3e8ef;
  --hover:       #f1f5f9;
  --active:      #dbe8f8;

  --field-bg:     #f2f5f8;
  --field-border: #dde3ea;
  --chip:         #ffffffd9;

  --danger:      #d64545;
  --ok:          #2f9e5b;

  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='60'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='.055' stroke-width='1.4'%3E%3Cpath d='M0 16q18-16 36 0t36 0'/%3E%3Cpath d='M-36 46q18-16 36 0t36 0'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* overflow: auto нужен, чтобы ниже нижнего предела появлялась горизонтальная
   прокрутка. position: relative делает body контейнером для экранов, иначе
   абсолютно позиционированный экран не попадёт в область прокрутки. */
body { overflow: auto; position: relative; }

.hidden { display: none !important; }

button { font: inherit; cursor: pointer; }

/* ───────────────────────────── общие экраны ───────────────────────────── */

/* Нижний предел ширины — ТОЛЬКО для настольных окон.
   На телефоне он только вредил: экран часто уже 380 точек, страница вылезала
   за край, и браузер показывал её уменьшенной, как обычный сайт. */
.screen { position: absolute; inset: 0; }

@media (min-width: 761px) {
  .screen { min-width: var(--app-min); }
}

/* Экран по центру. Выравниваем НЕ через align-items, а через margin: auto
   у карточки: при align-items: center карточка выше экрана обрезается
   сверху и снизу, и до нижних кнопок (и до сообщения об ошибке) не добраться.
   С margin: auto такого не бывает — при нехватке места карточка просто
   начинается сверху, и её можно прокрутить. */
.screen.center {
  display: flex;
  padding: 20px;
  overflow-y: auto;
  background:
    radial-gradient(1200px 600px at 20% 0%, #1a2b3d 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 100%, #16283a 0%, transparent 60%),
    var(--bg);
}

.screen.center > .card { margin: auto; }

.card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid #00000040;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 18px 60px #00000060;
}

.auth-card { max-width: 420px; }

/* Логотип — настоящая иконка первой версии c-msg */
.logo {
  width: 76px; height: 76px;
  margin: 0 auto 14px;
  border-radius: 19px;
  overflow: hidden;
  box-shadow: 0 8px 26px #00000024;
}

.logo img { width: 100%; height: 100%; display: block; }

/* Экран загрузки. Виден, пока приложение не решило, что показать, и служит
   витриной для сообщения, если запуск сорвался. */
.boot { text-align: center; max-width: 420px; }

.boot-title { font-size: 16px; color: var(--text-dim); }

.boot-note { margin-top: 10px; font-size: 14px; color: var(--text-dim); }

.boot-error {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #7a1c1c;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 40vh;
  overflow: auto;
}

/* Ссылка на страницу проверки — на экране входа */
.diag-link {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
}

.diag-link:hover { color: var(--accent); text-decoration: underline; }

.card h1 {
  margin: 0 0 6px;
  font-size: 22px;
  text-align: center;
  font-weight: 600;
}

.card p {
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
  margin: 8px 0;
}

.card code {
  background: var(--field-bg);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--accent-2);
}

/* вкладки вход / регистрация */

.tabs {
  display: flex;
  gap: 4px;
  background: var(--field-bg);
  padding: 4px;
  border-radius: 10px;
  margin: 18px 0;
}

.tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  padding: 9px 8px;
  border-radius: 7px;
  font-size: 14px;
  transition: background .15s, color .15s;
}

.tab:hover { color: var(--text); }
.tab.active { background: var(--accent); color: #fff; }

/* поля */

form.pane { display: flex; flex-direction: column; gap: 12px; }

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
}

input, textarea {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  padding: 11px 12px;
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color .15s;
  resize: none;
}

input:focus, textarea:focus { border-color: var(--accent); }

input::placeholder, textarea::placeholder { color: var(--text-mute); }

/* кнопки */

.btn {
  border: 0;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  transition: filter .15s, background .15s;
}

.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.12); }
.btn.primary:disabled { opacity: .55; cursor: default; filter: none; }

.btn.link {
  background: transparent;
  color: var(--accent-2);
  padding: 4px;
  font-size: 13px;
}

.btn.link:hover { text-decoration: underline; }

.btn.ghost {
  background: transparent;
  border: 1px solid #2b3a49;
  color: var(--text);
}

.btn.ghost:hover { background: var(--hover); }

.btn.danger { background: #3a2029; color: #ff9c9c; }
.btn.danger:hover { background: #4a2731; }

.icon-btn {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: background .15s, color .15s;
}

.icon-btn:hover { background: var(--hover); color: var(--text); }

.error {
  margin-top: 14px;
  background: #3a2029;
  color: #ffb3b3;
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
}

.hint { font-size: 12px; color: var(--text-mute); text-align: center; margin: 4px 0 0; }

/* ───────────────────────────── приложение ───────────────────────────── */

.app { display: flex; }

/* боковая панель */

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  position: relative;   /* нужно для тянущейся границы */

  /* Панель объявляем контейнером: по её ширине (а не по ширине окна)
     ужимается список чатов — см. @container ниже. */
  container-type: inline-size;
  container-name: side;
}

.side-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  height: 56px;
  background: var(--header);
  border-bottom: 1px solid var(--border);
}

.side-title { flex: 1; font-weight: 600; font-size: 17px; }

.side-actions { display: flex; gap: 2px; }

.side-search { padding: 8px 10px; background: var(--header); }

.side-search input {
  background: var(--field-bg);
  border: 0;
  border-radius: 18px;
  padding: 9px 14px;
  font-size: 14px;
}

/* список чатов */

.chat-list { flex: 1; overflow-y: auto; min-height: 0; }

.chat-item {
  display: flex;
  gap: 11px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background .12s;
  align-items: center;
}

.chat-item:hover { background: var(--hover); }
.chat-item.active { background: var(--active); }

.chat-item .meta { flex: 1; min-width: 0; }

.chat-item .top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.chat-item .who {
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.chat-item .when { font-size: 12px; color: var(--text-dim); flex: 0 0 auto; }
.chat-item.active .when { color: #cfe3f7; }

.chat-item .last {
  font-size: 13.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.chat-item.active .last { color: #d5e6f7; }

.chat-item .last .me { color: var(--text-mute); }
.chat-item.active .last .me { color: #b7d3ec; }

/* ═══════════ ужимание списка чатов по ширине панели (как в Telegram) ═══════════
   Считаем не по ширине окна, а по фактической ширине панели — поэтому работает
   и когда панель тянут руками, и когда она подстраивается под окно.
   Второстепенное уходит по очереди, а имя остаётся читаемым до последнего. */

@container side (max-width: 300px) {
  .chat-item .last { display: none; }          /* убираем превью сообщения */
  .chat-item .top { gap: 6px; }
}

@container side (max-width: 250px) {
  .chat-item .when { display: none; }          /* убираем время */
  .chat-item { gap: 9px; padding: 9px 10px; }
}

@container side (max-width: 205px) {
  .side-search { display: none; }              /* прячем поиск */
  .chat-item { padding: 8px 8px; }
}

@container side (max-width: 290px) {
  .side-actions #btn-theme { display: none; }  /* тема уходит первой */
}

@container side (max-width: 210px) {
  .side-title { display: none; }               /* потом название */
  .side-header { gap: 4px; padding: 8px 6px; }
  .side-header .icon-btn { width: 34px; height: 34px; }
}

@container side (max-width: 170px) {
  .chat-item .meta { display: none; }          /* остаются одни аватары */
  .chat-item { justify-content: center; gap: 0; padding: 7px 0; }
  .avatar { width: 38px; height: 38px; font-size: 14px; }
}

.unread {
  min-width: 20px; height: 20px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
  margin-left: 6px;
}

.unread-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent-2);
  flex: 0 0 auto;
  margin-left: 6px;
  box-shadow: 0 0 0 2px var(--bg);
}

.list-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1.6;
}

.demo-badge {
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: .06em;
  text-align: center;
  color: #ffd08a;
  background: #3a2f1a;
  border-top: 1px solid #4a3c22;
}

/* аватары */

.avatar {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 0;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  overflow: hidden;
}

.avatar.sm { width: 38px; height: 38px; font-size: 15px; }
.avatar.xs { width: 34px; height: 34px; font-size: 14px; }

/* основная область */

.main { flex: 1; position: relative; min-width: 0; background: var(--panel); }

.empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  background-color: var(--panel);
  background-image: var(--wave);
  background-size: var(--wave-size);
}

.empty-inner { text-align: center; }

.empty-icon {
  width: 88px; height: 88px;
  margin: 0 auto 14px;
  border-radius: 22px;
  overflow: hidden;
  opacity: .9;
  box-shadow: 0 8px 26px #00000018;
}

.empty-icon img { width: 100%; height: 100%; display: block; }
.empty-inner p { margin: 0; font-size: 14px; }

.chat { position: absolute; inset: 0; display: flex; flex-direction: column; }

.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 12px;
  background: var(--header);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.chat-title { flex: 1; min-width: 0; }
.chat-title .name { font-weight: 600; font-size: 15.5px; }
.chat-title .sub { font-size: 12.5px; color: var(--text-dim); }

/* По имени открывается профиль — показываем, что тут можно нажать */
.chat-title[role="button"] { cursor: pointer; border-radius: 8px; }
.chat-title[role="button"]:hover .name { color: var(--accent); }
.chat-title[role="button"]:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.chat-header .back { display: none; }

/* лента сообщений */

.messages {
  flex: 1;
  overflow-y: auto;
  /* По ширине лента не прокручивается никогда: сообщение обязано укладываться
     в неё. Когда задана вертикальная прокрутка, браузер сам включает и
     горизонтальную — достаточно пары лишних точек внутри. */
  overflow-x: hidden;
  padding: 14px clamp(10px, 4vw, 40px) 10px;
  min-height: 0;
  background-color: var(--panel);
  background-image: var(--wave);
  background-size: var(--wave-size);
}

/* Ничто внутри пузыря не может быть шире самого пузыря */
.bubble > * { max-width: 100%; }

.day-sep {
  text-align: center;
  margin: 14px 0 10px;
}

.day-sep span {
  background: var(--chip);
  color: var(--text-dim);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
}

.message { display: flex; align-items: flex-end; margin-bottom: 3px; }
.message.out { justify-content: flex-end; }
.message + .message.in .bubble { border-top-left-radius: 6px; }
.message + .message.out .bubble { border-top-right-radius: 6px; }
.message.first .bubble { border-top-left-radius: 14px; border-top-right-radius: 14px; }

/* Пузырь и реакции друг под другом. Ограничение ширины переехало сюда:
   иначе проценты считались бы от этой обёртки, а не от строки ленты. */
.msg-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: min(70%, 560px);
}

.message.out .msg-col { align-items: flex-end; }

.bubble {
  max-width: 100%;
  padding: 7px 11px 6px;
  border-radius: 14px;
  background: var(--bubble-in);
  position: relative;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: 14.5px;
}

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

.bubble .time {
  float: right;
  font-size: 11px;
  opacity: .6;
  margin: 6px -2px 0 8px;
  user-select: none;
  white-space: nowrap;
}

/* галочки: одна — ушло, две — прочитано */
.ticks {
  display: inline-block;
  margin-left: 3px;
  font-size: 11px;
  letter-spacing: -2px;
  padding-right: 2px;
  opacity: .85;
}

.ticks.read { color: var(--accent-2); opacity: 1; }
.ticks.pending { opacity: .45; }

/* большое эмодзи вместо пузыря, как в мессенджерах */
.bubble.big {
  background: transparent !important;
  font-size: 40px;
  line-height: 1.15;
  padding: 2px 4px;
}

.bubble.big .time,
.bubble.big .author { font-size: 11px; }

.bubble .author {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-2);
  margin-bottom: 2px;
}

/* поле ввода */

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px clamp(10px, 4vw, 40px) 14px;
  background: var(--header);
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}

.composer textarea {
  flex: 1;
  /* Без этого поле не даёт себя сжать: у flex-элемента ширина по умолчанию
     не меньше его содержимого. Именно из-за этого строка ввода распирала
     экран и появлялся горизонтальный бегунок. */
  min-width: 0;
  background: var(--panel-2);
  border: 0;
  border-radius: 18px;
  padding: 11px 15px;
  max-height: 140px;
  overflow-y: auto;
  line-height: 1.35;
}

/* Кнопки строки ввода не сжимаются и не растягиваются */
.composer .icon-btn { flex: 0 0 auto; }

/* На узких экранах кнопок много (скрепка, эмодзи, стикеры, микрофон, камера),
   поэтому ужимаем отступы и сами кнопки — тогда всё помещается без бегунка */
@media (max-width: 620px) {
  .composer { gap: 2px; padding: 8px 8px 12px; }
  .composer .icon-btn { width: 34px; height: 34px; font-size: 18px; }
  .composer #btn-emoji { font-size: 17px; }
  .composer textarea { padding: 10px 13px; }
}

@media (max-width: 380px) {
  .composer { gap: 0; padding: 8px 6px 10px; }
  .composer .icon-btn { width: 32px; height: 32px; }
}

.composer .send { color: var(--accent-2); flex: 0 0 auto; }
.composer .send:hover { background: var(--hover); }

.composer #btn-emoji,
.composer #btn-stickers { flex: 0 0 auto; }

.composer #btn-emoji { font-size: 19px; }

/* кнопка той панели, которая сейчас открыта */
.composer #btn-emoji.active,
.composer #btn-stickers.active {
  color: var(--accent-2);
  background: var(--hover);
}

/* полоса закреплённого сообщения */

.pin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: var(--header);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  cursor: pointer;      /* нажатие переносит к закреплённому сообщению */
}

.pin-bar:hover { background: var(--hover); }

.pin-bar .pin-ico { font-size: 15px; flex: 0 0 auto; }
.pin-bar .pin-body { flex: 1; min-width: 0; }
.pin-bar .pin-who {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pin-bar .pin-text {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Листание между закреплёнными: показывается, только если их больше одного */
.pin-nav {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
}

.pin-nav .icon-btn {
  width: 28px;
  height: 28px;
  font-size: 19px;
  line-height: 1;
}

.pin-count {
  font-size: 12px;
  color: var(--text-mute);
  white-space: nowrap;
  min-width: 36px;
  text-align: center;
}

/* ─────────────── полоса синхронизации переписки ─────────────── */

.sync-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--active);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.sync-bar .sync-ico { font-size: 16px; flex: 0 0 auto; }

.sync-bar .sync-text {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.35;
}

.sync-bar .sync-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.sync-bar .sync-btn {
  width: auto;
  padding: 6px 13px;
  font-size: 13px;
}

/* Недоступный пункт меню: например синхронизация, когда восстанавливать нечего */
.act[disabled] {
  opacity: .45;
  cursor: default;
}

.act[disabled]:hover { background: transparent; }

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

/* Стрелка «в конец переписки» — появляется, когда пролистали вверх */
.btn-down {
  position: absolute;
  right: 20px;
  bottom: 84px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px #00000038;
  transition: background .15s, color .15s, transform .15s;
}

.btn-down:hover {
  background: var(--hover);
  color: var(--text);
  transform: translateY(-2px);
}

/* панель ввода: эмодзи и стикеры */

.emoji-panel {
  flex: 0 0 auto;
  background: var(--header);
  border-top: 1px solid var(--border);
}

.panel-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.panel-tabs button {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.panel-tabs button:hover { background: var(--hover); color: var(--text); }
.panel-tabs button.active { background: var(--accent); color: #fff; }

.panel-body {
  padding: 2px 10px 10px;
  max-height: 170px;
  overflow-y: auto;
}

.panel-body.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 2px;
}

.panel-body.emoji-grid button {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  padding: 5px 0;
  border-radius: 8px;
  cursor: pointer;
}

.panel-body.emoji-grid button:hover { background: var(--hover); }

.panel-body.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 6px;
}

.panel-body.sticker-grid button {
  border: 0;
  background: transparent;
  padding: 4px;
  border-radius: 10px;
  cursor: pointer;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-body.sticker-grid button:hover { background: var(--hover); }
.panel-body.sticker-grid img { max-width: 100%; max-height: 100%; display: block; }

/* стикер в ленте сообщений */

.bubble.has-sticker {
  background: transparent !important;
  padding: 0;
}

.sticker {
  width: 136px;
  height: auto;
  display: block;
}

.bubble.has-sticker .time {
  float: none;
  display: block;
  text-align: right;
  margin: 2px 0 0;
}

/* ───────────────────────────── модальные окна ───────────────────────────── */

.modal-root {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}

/* ───────────── просмотр аватарки во весь экран (фотоальбом) ───────────── */

/* Лежит поверх модальных окон: смотришь фото — окно под ним остаётся открытым */
.lightbox {
  position: fixed; inset: 0;
  z-index: 120;
  background: #0b0f14f0;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
}

.lb-img {
  max-width: min(92vw, 900px);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 60px #000000a6;
  object-fit: contain;
  background: #ffffff12;
}

.lb-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: #ffffff1c;
  color: #fff;
  font-size: 26px; line-height: 1;
  cursor: pointer;
  transition: background .15s;
}

.lb-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: #ffffff1c;
  color: #fff;
  font-size: 30px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
}

.lb-close:hover, .lb-nav:hover { background: #ffffff33; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

.lb-bar {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #fff; font-size: 14px;
  pointer-events: none;
  text-align: center;
  padding: 0 16px;
}

.lb-who { font-weight: 600; }
.lb-count { color: #ffffffa8; font-size: 13px; }

/* ─────────────── фото в переписке и перетаскивание файлов ─────────────── */

.bubble .photo {
  display: block;
  max-width: 100%;
  max-height: 380px;
  width: auto;
  height: auto;
  border-radius: 9px;
  cursor: zoom-in;
  background: var(--field-bg);
}

.bubble .photo-caption {
  display: block;
  margin-top: 7px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─────────────── видео ─────────────── */

/* Плашка видео в ленте: обложка, кнопка воспроизведения и длительность.
   Сам файл не грузится — только обложка, пока не нажмут. */
.bubble .video-thumb {
  position: relative;
  display: block;
  border: 0;
  padding: 0;
  width: 100%;
  max-width: 320px;
  border-radius: 9px;
  overflow: hidden;
  line-height: 0;
  background: var(--field-bg);
  cursor: pointer;
}

.bubble .video-thumb img {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
}

.bubble .video-blank {
  display: block;
  width: 100%;
  height: 180px;
  background: var(--field-bg);
}

/* Кнопка воспроизведения по центру */
.bubble .video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  background: #00000073;
  color: #fff;
  font-size: 21px;
  line-height: 1;
  transition: transform .12s, background .12s;
}

.bubble .video-thumb:hover .video-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #000000a6;
}

/* Длительность в уголке */
.bubble .video-dur {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 1px 6px;
  border-radius: 7px;
  background: #0000008c;
  color: #fff;
  font-size: 11.5px;
  line-height: 1.6;
}

/* Проигрыватель в окне */
.video-box { margin-top: 12px; }

.video-player {
  display: block;
  width: 100%;
  max-height: 62vh;
  border-radius: 12px;
  background: #000;
}

/* Полоска хода загрузки — и при отправке, и при просмотре */
.up-bar {
  height: 6px;
  border-radius: 4px;
  background: var(--field-bg);
  overflow: hidden;
  margin-top: 12px;
}

.up-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .18s ease;
}

/* Ничего не должно вылезать за экран по ширине: приложение занимает ровно
   экран, и горизонтальный бегунок здесь — всегда ошибка вёрстки, а не норма.
   Вертикальная прокрутка при этом остаётся свободной. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* То же для всех крупных блоков: любой из них может стать виновником
   бегунка, если внутри что-то окажется шире самого блока */
.sidebar, .main, .chat, .chat-header, .composer, .messages {
  max-width: 100%;
  overflow-x: hidden;
}

/* Живой предпросмотр кружочка тоже не должен быть шире экрана */

/* Волна при записи: на узком экране полосок меньше — ужимаются сами */
.rec-wave { flex-wrap: nowrap; max-width: 100%; }

/* Строка ввода: всё, что в ней лежит, не выходит за её пределы */
.composer { max-width: 100%; overflow: hidden; }

/* ─────────────── кружочки ─────────────── */

/* Круглая плашка в ленте */
.bubble .video-thumb.round {
  /* Круг всегда вписывается в пузырь: ширина не больше него, высота — по ней же */
  width: min(200px, 100%);
  max-width: 200px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: 0 auto;
}

.bubble .video-thumb.round img,
.bubble .video-thumb.round .video-blank {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* Обводка, как у непрочитанного кружочка в Telegram */
.bubble .video-thumb.round::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--accent);
  pointer-events: none;
}

/* Живой предпросмотр при записи */
.circle-stage {
  display: flex;
  justify-content: center;
  margin: 14px 0 6px;
}

.circle-preview {
  /* Не шире экрана: на телефоне 240 точек могли не помещаться */
  width: min(240px, 68vw);
  height: min(240px, 68vw);
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  box-shadow: 0 10px 30px #00000055;
  /* Своё отражение — как в зеркале, иначе непривычно */
  transform: scaleX(-1);
}

/* Кружочек при просмотре */
.video-player.round {
  /* Не шире экрана: на телефоне 300 точек могли не помещаться */
  width: min(300px, 72vw);
  height: min(300px, 72vw);
  max-height: 62vh;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
}

/* ─────────────── голосовые сообщения ─────────────── */

/* Плашка голосового в ленте: кнопка, волна, длительность */
.bubble .voice-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  /* min() — потому что просто 190 точек были бы шире узкого пузыря
     и вылезали за край вместе с горизонтальным бегунком */
  width: 100%;
  min-width: min(190px, 100%);
  max-width: 300px;
  color: inherit;
  cursor: pointer;
}

.bubble .voice-play {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  transition: transform .12s;
}

.bubble .voice-msg:hover .voice-play { transform: scale(1.07); }

/* Волна: высоты задаются при отрисовке, поэтому у каждого своя */
.bubble .voice-bars {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  min-width: min(60px, 30%);
  /* Полоски не должны распирать плашку на узком экране */
  overflow: hidden;
}

.bubble .voice-bars i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .55;
}

.bubble .voice-dur {
  flex: 0 0 auto;
  font-size: 12px;
  opacity: .7;
}

/* Проигрыватель голосового */
.voice-box { margin-top: 12px; }

.voice-player {
  display: block;
  width: 100%;
  margin-top: 4px;
}

/* ─────────────── часы записи ─────────────── */

/* Крупно и с пульсирующей точкой: сразу видно, что запись идёт */
.rec-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 4px;
  font-size: 30px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.rec-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e04b4b;
  animation: rec-pulse 1.1s ease-in-out infinite;
}

@keyframes rec-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .25; transform: scale(.82); }
}

/* Волна во время записи — дышит, значит пишем */
.rec-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 66px;
  margin: 12px 0 4px;
}

.rec-wave i {
  width: 4px;
  height: 30%;
  border-radius: 2px;
  background: var(--accent);
  transition: height .18s ease;
}

/* Накладка, пока файл тащат на чат. pointer-events выключены намеренно:
   иначе она перехватит само событие drop, а оно должно дойти до окна. */
.drop-zone {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #0b0f14a8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.drop-card {
  background: var(--panel);
  border: 2px dashed var(--accent);
  border-radius: 16px;
  padding: 26px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  box-shadow: 0 12px 40px #00000060;
}

.drop-ico { font-size: 34px; line-height: 1; }
.drop-title { font-weight: 600; font-size: 16px; }
.drop-sub { color: var(--text-dim); font-size: 13px; }

/* Предпросмотр перед отправкой */
.photo-preview {
  margin: 12px 0;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--field-bg);
  border-radius: 10px;
  overflow: hidden;
}

.photo-preview-img {
  display: block;
  max-width: 100%;
  max-height: 320px;
}

.modal-backdrop { position: absolute; inset: 0; background: #000000a8; }

.modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--panel);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 24px 70px #00000090;
  margin: 16px;
}

.modal h2 { margin: 0 0 4px; font-size: 19px; font-weight: 600; }
.modal .sub { color: var(--text-dim); font-size: 13px; margin-bottom: 16px; }
.modal form { display: flex; flex-direction: column; gap: 12px; }
.modal .row { display: flex; gap: 8px; }
.modal .row .btn { flex: 1; }
.modal .close-x {
  position: absolute; top: 10px; right: 10px;
  border: 0; background: transparent; color: var(--text-dim);
  font-size: 22px; width: 34px; height: 34px; border-radius: 50%;
}
.modal .close-x:hover { background: var(--hover); color: var(--text); }

.profile-head {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.profile-head .avatar { width: 84px; height: 84px; font-size: 32px; }
.profile-head .name { font-size: 18px; font-weight: 600; }
.profile-head .handle { color: var(--accent-2); font-size: 14px; }

/* ─────────────── профиль собеседника ─────────────── */

.p-name { font-size: 18px; font-weight: 600; text-align: center; }
.p-user { color: var(--accent-2); font-size: 14px; text-align: center; }

.p-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 4px 0 16px;
  background: var(--field-bg);
  border-radius: var(--radius);
  overflow: hidden;
}

.p-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  background: var(--panel);
  font-size: 14.5px;
}

.p-row > span { color: var(--text-dim); flex: 0 0 auto; }

.p-row > b {
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

/* Аватарка в настройках: большое фото и значок камеры в углу, как в Telegram */
.avatar-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.avatar.big {
  width: 118px;
  height: 118px;
  font-size: 42px;
  cursor: pointer;
}

.av-camera {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--panel);
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}

.av-camera:hover { filter: brightness(1.12); transform: scale(1.06); }
.av-camera:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ─────────────── выбор области аватарки ─────────────── */

.crop-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 8px;
}

/* Круг, в котором видно, что получится. Картинку внутри тянут и приближают. */
.crop-view {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--field-bg);
  box-shadow: inset 0 0 0 2px var(--accent), 0 10px 30px #00000045;
  cursor: grab;
  touch-action: none;      /* палец тянет картинку, а не листает окно */
  user-select: none;
}

.crop-view:active { cursor: grabbing; }

.crop-view img {
  position: absolute;
  max-width: none;
  max-height: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.crop-zoom-label { display: block; }

.crop-zoom-label input[type=range] {
  width: 100%;
  margin-top: 8px;
  accent-color: var(--accent);
}

/* ─────────────────────── настройки профиля ─────────────────────── */

.set-block {
  margin: 16px 0;
  padding-top: 14px;
  border-top: 1px solid var(--field-border);
}

.set-label {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 9px;
}

/* переключатель из двух-трёх вариантов */
.seg {
  display: flex;
  gap: 4px;
  background: var(--field-bg);
  padding: 4px;
  border-radius: 10px;
}

.seg button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13.5px;
  padding: 8px 6px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.seg button:hover { color: var(--text); }
.seg button.active { background: var(--accent); color: #fff; }

/* тумблер «показывать время захода» */
.switch {
  display: inline-flex;
  flex-direction: row;      /* общий стиль label ставит column — перебиваем */
  align-items: center;
  gap: 0;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.switch .slider {
  width: 46px; height: 26px;
  border-radius: 13px;
  background: var(--field-border);
  position: relative;
  transition: background .18s;
}

.switch .slider::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px #00000040;
  transition: transform .18s;
}

.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::after { transform: translateX(20px); }


/* меню действий с чатом */

.act-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

.act {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  transition: background .15s, border-color .15s;
}

.act:hover { background: var(--hover); }
.act:disabled { opacity: .5; cursor: default; }

.act.danger { border-color: #4a2731; }
.act.danger:hover { background: #3a2029; border-color: #6a3340; }
.act.danger b { color: #ff9c9c; }

.act-ico { font-size: 20px; flex: 0 0 auto; line-height: 1; }
.act b { display: block; font-weight: 600; font-size: 14.5px; }
.act small { display: block; color: var(--text-dim); font-size: 12.5px; margin-top: 3px; }

/* список приглашений */

.invite-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

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

.found-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  max-height: 46vh;
  overflow-y: auto;
}

.found-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: var(--field-bg);
  border: 0;
  border-radius: var(--radius);
  padding: 9px 11px;
  color: var(--text);
  transition: background .12s;
}

.found-item:hover:not(:disabled) { background: var(--hover); }
.found-item:disabled { opacity: .55; cursor: default; }

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

.found-name {
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.found-user { font-size: 12.5px; color: var(--text-dim); }

.found-empty {
  padding: 14px 4px;
  font-size: 13.5px;
  color: var(--text-dim);
  text-align: center;
}

.invite-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--field-bg);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.invite-item .code {
  flex: 1;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 14px;
  letter-spacing: .04em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invite-item .state { font-size: 12px; color: var(--text-mute); flex: 0 0 auto; }
.invite-item .state.used { color: var(--ok); }

.mini {
  border: 0; background: transparent; color: var(--accent-2);
  font-size: 13px; padding: 4px 6px; border-radius: 6px;
}
.mini:hover { background: var(--hover); }

/* всплывающее уведомление */

.toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  background: #253444;
  color: var(--text);
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 10px 30px #00000070;
  z-index: 90;
  max-width: 90vw;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast.bad { background: #4a2731; color: #ffc9c9; }

/* Необязательная кнопка внутри всплывающего сообщения, например «Отменить» */
.toast-act {
  flex: 0 0 auto;
  border: 0;
  background: #ffffff26;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s;
}

.toast-act:hover { background: #ffffff3d; }

/* Заглушка в пустой ленте: «история очищена» или «сообщений пока нет» */
.feed-empty {
  margin: auto;
  padding: 18px 22px;
  border-radius: 15px;
  background: var(--chip);
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
  box-shadow: 0 1px 3px #00000018;
}

/* ─────────────── предложение установить приложение ─────────────── */

.install-bar {
  position: fixed;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 95;
  width: calc(100% - 24px);
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 12px 36px #00000066;
}

.install-ico { flex: 0 0 auto; line-height: 0; }

/* Значок на полоске обновления — вместо картинки приложения */
.update-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

/* Такой же значок, но крупнее — в окне предложения обновиться */
.upd-head {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 8px 26px #3390ec3d;
}

.install-ico img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: block;
}

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

.install-text b { font-size: 14px; }
.install-text span { font-size: 12.5px; color: var(--text-dim); }

.install-go {
  width: auto;
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 13.5px;
}

/* ══════════════ выбор чата для пересылки ══════════════ */

.fwd-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 52vh;
  overflow-y: auto;
  margin-top: 4px;
}

.fwd-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 0;
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  padding: 8px 11px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s;
}

.fwd-item:hover { background: var(--hover); }
.fwd-item:disabled { opacity: .5; cursor: default; }
.fwd-item .whose {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════ ширина панели и сворачивание (как в Telegram) ══════════════ */

/* По умолчанию ширина подстраивается под окно. Если пользователь потянул
   за границу, скрипт выставит своё значение прямо на <html>, и оно
   перекроет эти правила. */
@media (max-width: 1180px) { :root { --sidebar-w: 330px; } }
@media (max-width: 1000px) { :root { --sidebar-w: 300px; } }
@media (max-width: 860px)  { :root { --sidebar-w: 270px; } }

/* На узкой панели шапка должна ужиматься, иначе кнопки начинают теснить текст */
@media (max-width: 1000px) {
  .side-header { gap: 6px; padding: 8px 8px; }
  .side-header .icon-btn { width: 34px; height: 34px; font-size: 18px; }
  .side-header .avatar { width: 38px; height: 38px; font-size: 14px; }
  .side-title { font-size: 15px; }
  .side-search { padding: 6px 8px; }
  .chat-item { padding: 8px 9px; gap: 9px; }
}

.side-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* тянущаяся граница между списком чатов и перепиской */
.side-resize {
  position: absolute;
  top: 0;
  right: -3px;
  bottom: 0;
  width: 7px;
  cursor: col-resize;
  z-index: 6;
  touch-action: none;
}

.side-resize::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  background: transparent;
  transition: background .15s;
}

.side-resize:hover::after,
.side-resize.dragging::after { background: var(--accent); }

/* Свёрнутая панель: одни аватары, как в Telegram */
.app.side-collapsed { --sidebar-w: var(--sidebar-rail); }

.app.side-collapsed .side-title,
.app.side-collapsed .side-actions,
.app.side-collapsed #btn-profile,
.app.side-collapsed .side-search,
.app.side-collapsed .chat-item .meta,
.app.side-collapsed .chat-item .unread-dot,
.app.side-collapsed .side-resize { display: none; }

.app.side-collapsed .side-header { justify-content: center; padding: 8px 0; }
.app.side-collapsed .chat-item { justify-content: center; padding: 7px 0; gap: 0; }
.app.side-collapsed .chat-item .avatar { width: 40px; height: 40px; }
.app.side-collapsed .demo-badge { font-size: 9px; padding: 5px 2px; letter-spacing: 0; }

/* ══════════════ меню по правой кнопке на сообщении ══════════════ */

.ctx-menu {
  position: fixed;
  z-index: 120;
  /* Пошире: в ряд быстрых реакций должно поместиться девять эмодзи */
  min-width: 240px;
  background: var(--panel);
  border: 1px solid var(--field-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 18px 50px #00000066;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
}

.ctx-item:hover { background: var(--hover); }
.ctx-item .ico { width: 18px; text-align: center; opacity: .85; flex: 0 0 auto; }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger:hover { background: #e05c5c24; }
.ctx-sep { height: 1px; background: var(--field-border); margin: 5px 8px; }

/* ─────────────── реакции на сообщения ─────────────── */

/* Быстрый ряд в меню по правой кнопке — как в Telegram */
.ctx-react {
  display: flex;
  gap: 2px;
  padding: 4px 5px 6px;
  border-bottom: 1px solid var(--field-border);
  margin-bottom: 4px;
}

.ctx-emoji {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 4px 0;
  font-size: 18px;
  line-height: 1.2;
  transition: background .12s, transform .12s;
}

.ctx-emoji:hover { background: var(--hover); transform: scale(1.18); }

/* Полоска реакций. Заходит на нижний край пузыря — как в Telegram,
   поэтому и выглядит приклеенной к сообщению, а не отдельной строкой. */
.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: -9px;
  padding: 0 5px;
  position: relative;
  z-index: 1;
}

.message.out .reactions { justify-content: flex-end; }

.reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--field-border);
  background: var(--bubble-in);
  border-radius: 11px;
  padding: 1px 7px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
  box-shadow: 0 1px 3px #00000033;
  transition: transform .1s, background .12s, border-color .12s;
}

/* Цвет плашки совпадает с пузырём, чтобы читалось как одно целое */
.message.out .reaction { background: var(--bubble-out); }

.reaction:hover { transform: translateY(-1px); }

/* Моя реакция — залита цветом, как в Telegram */
.reaction.mine,
.message.out .reaction.mine {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.reaction.mine .r-count { color: #fff; }

.reaction .r-emoji { font-size: 14px; line-height: 1; }
.reaction .r-count { font-size: 12px; font-weight: 600; }

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

/* Панель выбора скрыта по умолчанию и включается классом .selecting на .chat.
   Класс .hidden здесь не годится: у него !important, и он не даст показать. */
.sel-bar {
  display: none;
  align-items: center;
  gap: 4px;
  height: 56px;
  padding: 0 10px;
  background: var(--header);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.sel-count { flex: 1; font-weight: 600; font-size: 15px; padding-left: 4px; }

.chat.selecting .chat-header { display: none; }
.chat.selecting .pin-bar { display: none; }
.chat.selecting .sel-bar { display: flex; }
.chat.selecting .reply-bar { display: none; }

.message.selectable .bubble { cursor: pointer; }

.sel-box {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--text-mute);
  margin-right: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: transparent;
  transition: background .12s, border-color .12s, color .12s;
}

.message.selected .sel-box {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.message.selected .bubble { box-shadow: inset 0 0 0 2px var(--accent); }

/* ══════════════ ответ на сообщение ══════════════ */

.reply-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: var(--header);
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}

.reply-stripe {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--accent-2);
  flex: 0 0 auto;
}

.reply-body { flex: 1; min-width: 0; }
.reply-who { font-size: 12.5px; font-weight: 600; color: var(--accent-2); }
.reply-text {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* цитата внутри самого сообщения */
.bubble .quote {
  display: block;
  border-left: 3px solid var(--accent-2);
  padding: 3px 0 3px 8px;
  margin-bottom: 6px;
  border-radius: 2px;
  background: #7f7f7f1f;
  cursor: pointer;
}

.bubble .quote .q-who { font-size: 12.5px; font-weight: 600; color: var(--accent-2); }
.bubble .quote .q-text {
  font-size: 13px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(60vw, 320px);
}

/* пометка «переслано» */
.bubble .fwd {
  display: block;
  font-size: 12.5px;
  font-style: italic;
  opacity: .75;
  margin-bottom: 3px;
}

/* подсветка сообщения, к которому перешли по цитате */
@keyframes msg-flash {
  0%, 100% { background: transparent; }
  25%      { background: #ffd54f55; }
}

.message.flash .bubble { animation: msg-flash 1.1s ease; }

@media (max-width: 760px) {
  .side-resize { display: none; }
  .app.side-collapsed { --sidebar-w: 100%; }
  .app.side-collapsed .side-title,
  .app.side-collapsed .side-actions,
  .app.side-collapsed #btn-profile,
  .app.side-collapsed .side-search,
  .app.side-collapsed .chat-item .meta,
  .app.side-collapsed .chat-item .unread-dot { display: revert; }
  .app.side-collapsed .side-title,
  .app.side-collapsed .side-actions,
  .app.side-collapsed #btn-profile,
  .app.side-collapsed .side-search { display: flex; }
  .app.side-collapsed .chat-item .meta { display: block; }
  .app.side-collapsed .side-header { justify-content: flex-start; padding: 8px 10px; }
}

/* ───────────────────────────── мобильный вид ───────────────────────────── */

@media (max-width: 760px) {
  .sidebar { flex: 1 1 auto; width: 100%; border-right: 0; }
  .main { display: none; }
  .app.chat-open .sidebar { display: none; }
  .app.chat-open .main { display: block; }
  .chat-header .back { display: flex; }
  .bubble { max-width: 84%; }
  .modal { max-width: none; }
  .modal-root { padding: 10px; }

  /* Ничего не должно вылезать за экран телефона: иначе браузер покажет
     страницу уменьшенной, и придётся приближать пальцами. */
  html, body { overflow-x: hidden; }
  .install-bar { max-width: none; }

  /* Экран входа на телефоне: карточка компактнее, чтобы помещалась
     целиком даже с открытой клавиатурой */
  .screen.center { padding: 12px; }
  .card { padding: 20px 16px; }
  .logo { width: 62px; height: 62px; margin-bottom: 10px; border-radius: 16px; }
  .card h1 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ══════════════ правая панель: профиль собеседника и «близость» ══════════════ */

.pp-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: #00000066;
}

.peer-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 71;
  width: min(380px, 100%);
  display: flex; flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -14px 0 40px #00000055;
  transform: translateX(102%);
  transition: transform .24s ease;
}

.peer-panel.open { transform: translateX(0); }

.pp-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.pp-head b { font-size: 16px; }

.pp-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 16px 26px; }

.pp-ava {
  width: 104px; height: 104px; border-radius: 50%;
  margin: 0 auto 12px;
  background: var(--field-bg);
  overflow: hidden;
}

.pp-name { text-align: center; font-size: 21px; font-weight: 600; }

/* Карточка «Близость» */
.close-card {
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: var(--field-bg);
  border: 1px solid var(--border);
}

.close-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.close-top b { font-size: 15px; }
.close-state { color: var(--accent-2); font-size: 13px; font-weight: 600; }

.close-note { color: var(--text-dim); font-size: 13px; margin-top: 6px; line-height: 1.45; }

/* Ползунок с пятью ступенями */
.close-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin-top: 14px;
  background: transparent;
  cursor: pointer;
}

.close-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.close-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px; margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 2px 6px #00000055;
}

.close-slider::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.close-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent);
}

.close-ticks {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
  gap: 2px;
}

.close-ticks span { text-align: center; }
.close-ticks span.on { color: var(--accent-2); font-weight: 600; }

/* Строки сведений */
.pp-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}

.pp-row:last-child { border-bottom: 0; }
.pp-row .v { color: var(--text-dim); text-align: right; }

/* ── «печатает» в шапке чата ── */
.chat-sub .dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }

.chat-sub .dots i {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor;
  opacity: .35;
  animation: typing-bounce 1.1s infinite ease-in-out;
}

.chat-sub .dots i:nth-child(2) { animation-delay: .16s; }
.chat-sub .dots i:nth-child(3) { animation-delay: .32s; }

@keyframes typing-bounce {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* Размытый набросок: видно, что человек печатает, но не разобрать что */
/* ─────────── пузырь набора собеседника (близость) ─────────── */

/* Пузырь набора — обычный текстовый пузырь, как любое сообщение.
   display:flex здесь ломал ширину и рвал слова посреди строки. */
.typing-bubble {
  min-width: 0;
  max-width: min(70%, 560px);
  /* У обычного пузыря overflow-wrap:anywhere — здесь он рвёт слова почём зря */
  overflow-wrap: break-word;
  word-break: normal;
}

/* «печатает» — три бегущие точки, как в Telegram */
.t-dots { display: inline-flex; gap: 4px; padding: 3px 2px; }

.t-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-dim);
  animation: t-bounce 1.2s infinite ease-in-out;
}

.t-dots i:nth-child(2) { animation-delay: .18s; }
.t-dots i:nth-child(3) { animation-delay: .36s; }

@keyframes t-bounce {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ритм — цепочка точек по числу нажатий: видно темп, но не текст */
.t-rhythm { display: inline-flex; flex-wrap: wrap; gap: 3px; max-width: 100%; }

.t-rhythm i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  opacity: .7;
  animation: t-rhythm-in .35s ease-out;
}

@keyframes t-rhythm-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: .7; }
}

/* блюр — живой текст, но размытый. inline-block, иначе filter не сработает */
.t-blur {
  display: inline-block;
  filter: blur(4px);
  opacity: .85;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

/* открыто — текст как есть + мигающий курсор.
   word-break: normal — рвать слова посреди строки нельзя. */
.t-text {
  display: inline;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

.t-caret {
  display: inline;
  color: var(--accent);
  animation: t-blink 1s step-end infinite;
  margin-left: 1px;
}

@keyframes t-blink { 50% { opacity: 0; } }

/* Строка «действует …» под ползунком близости */
.close-eff {
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent-2);
  min-height: 15px;
}
/* ─── строка набора: ширина по тексту, а не по контейнеру ───
   Раньше пузырь наследовал ширину колонки, и короткое слово
   разваливалось на две строки. Теперь ширина = ширине текста
   (но не шире 70% ленты). */
.typing-row .msg-col {
  width: max-content;
  max-width: min(70%, 560px);
}

.typing-bubble {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: pre-wrap;
}
/* ─── строка набора: обычный поток вместо flex ───
   Flex-лента считала ширину пузыря по контейнеру, и короткое слово
   разваливалось на две строки. Здесь убираем flex вовсе:
   блок → ширина по содержимому → слово всегда целиком. */
.typing-row {
  display: block;
  text-align: left;
}

.typing-row .msg-col {
  display: block;
  width: fit-content;
  max-width: min(70%, 560px);
}

.typing-row .bubble.typing-bubble {
  display: inline-block;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}
/* ══════════ полосы прокрутки в стиле мессенджера ══════════
   Тонкие, полупрозрачные, без светлой подложки — не выделяются
   на фоне ленты. Firefox и WebKit настраиваются по-разному. */

:root {
  --scroll-thumb:       #ffffff26;
  --scroll-thumb-hover: #ffffff4d;
}

:root[data-theme="light"] {
  --scroll-thumb:       #00000024;
  --scroll-thumb-hover: #00000042;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 10px;
  /* поля внутри полосы: сама «палочка» тоньше, а область захвата шире */
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-corner { background: transparent; }
/* ══════════ строка ввода как в первой версии ══════════
   Одна скруглённая «пилюля»: смайлик · поле · скрепка.
   Справа отдельно — отправка и кнопка записи. */

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px clamp(8px, 3vw, 24px) 12px;
}

.composer-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 3px 4px;
  border-radius: 22px;
  background: var(--panel-2);
}

.composer-pill textarea {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
  padding: 9px 4px;
  max-height: 140px;
  color: inherit;
  font: inherit;
  line-height: 1.35;
}

.pill-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.pill-btn:hover { background: var(--hover); color: var(--text); }
.pill-btn.active { color: var(--accent-2); background: var(--hover); }

/* Кнопка записи: одна на два режима. Тап — смена, зажатие — запись. */
.composer #btn-rec {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  background: var(--accent);
  color: #fff;
}

.composer #btn-rec:hover { background: var(--accent-2); color: #fff; }
.composer #btn-rec.circle-mode { background: var(--accent-2); }

/* ══════════ карточка эмодзи и стикеров ══════════ */

.emoji-panel {
  margin: 0 8px 6px;
  border: 1px solid var(--field-border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 12px 34px #0000004d;
  overflow: hidden;
}

.emoji-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px 0;
  border-bottom: 1px solid var(--field-border);
}

.emoji-tabs button {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  position: relative;
}

.emoji-tabs button.sel { color: var(--accent-2); }

.emoji-tabs button.sel::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-2);
}
/* ══════════ поиск по переписке ══════════
   Появляется под шапкой по нажатию на лупу. Стрелки листают находки,
   крестик закрывает. */

.msg-search-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--header);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.msg-search-bar input {
  flex: 1;
  min-width: 0;
  background: var(--panel-2);
  border: 0;
  border-radius: 12px;
  padding: 8px 12px;
  color: inherit;
  font: inherit;
  outline: 0;
}

.msg-search-bar input::placeholder { color: var(--text-dim); }

.msg-search-bar .icon-btn {
  width: 30px;
  height: 30px;
  font-size: 15px;
}

.msg-search-count {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  padding: 0 2px;
}
/* ══════════ долгое нажатие не выделяет текст в ленте ══════════
   На телефоне браузер по долгому нажатию начинал выделять слово
   и показывать своё меню — прямо под нашим. У нас есть свой пункт
   «Копировать текст», поэтому системное выделение тут не нужно.
   user-select наследуется, так что достаточно ленты. */

.messages {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* iOS: убирает системную плашку «Скопировать / Найти» */
  -webkit-touch-callout: none;
}

/* Поле ввода и панели остаются выделяемыми: там текст нужен человеку */
.composer-pill textarea,
.msg-search-bar input,
.pp-body,
.modal {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
/* ══════════ календарь: выбор даты в переписке ══════════ */

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 12px;
}

.cal-head b { font-size: 16px; font-weight: 600; }

.cal-nav {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.cal-nav:hover { background: var(--hover); color: var(--text); }

.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-day {
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s;
}

.cal-day:hover { background: var(--hover); }
.cal-day.empty { visibility: hidden; cursor: default; }

/* Дни, в которых есть сообщения */
.cal-day.has { background: var(--field-bg); font-weight: 600; }

/* Сегодня — обводкой, чтобы не спорить с подсветкой дней */
.cal-day.today { box-shadow: inset 0 0 0 2px var(--accent); }

.cal-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

/* Разделитель даты в ленте теперь нажимается */
.day-sep { cursor: pointer; }
.day-sep:hover span { background: var(--hover); color: var(--text); }
/* ══════════ экран звонка ══════════ */

.call-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 28px 20px 40px;
  background: linear-gradient(180deg, #0d1b26 0%, #101f2b 60%, #13222f 100%);
  color: #fff;
}

/* Видео с собеседником — на весь экран, поверх градиента */
.call-remote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: none;
}

.call-screen.video-mode .call-remote { display: block; }

/* Себя показываем поверх, уголком */
.call-self {
  position: absolute;
  right: 16px;
  top: 88px;
  width: 108px;
  height: 152px;
  border-radius: 12px;
  object-fit: cover;
  background: #000;
  box-shadow: 0 8px 24px #00000066;
  display: none;
  transform: scaleX(-1);
}

.call-screen.video-mode .call-self { display: block; }

.call-top {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 24px;
}

.call-name {
  font-size: 22px;
  font-weight: 600;
  text-shadow: 0 2px 8px #00000080;
}

.call-status {
  margin-top: 6px;
  font-size: 14px;
  opacity: .8;
  text-shadow: 0 2px 8px #00000080;
}

.call-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
}

.call-btn {
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 50%;
  background: #ffffff1f;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
}

.call-btn:hover { background: #ffffff33; }
.call-btn:active { transform: scale(.95); }

.call-btn.off { background: #ffffff45; }

.call-btn.accept { background: #2faa4f; }
.call-btn.accept:hover { background: #37c25b; }

.call-btn.hangup { background: #d64545; }
.call-btn.hangup:hover { background: #e25555; }
/* Строка диагностики звонка: какие пути нашли и в каком состоянии связь */
.call-diag {
  margin-top: 8px;
  font-size: 11.5px;
  opacity: .55;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px #00000080;
}
/* ══════════ шапка чата: присутствие в одну строку ══════════
   Кнопок в шапке стало больше, и «был 12 минут назад» переносилось
   на три строки. Теперь имя и присутствие занимают всё свободное место,
   а лишнее аккуратно обрезается многоточием. */

.chat-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.chat-title .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-title .sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Кнопки шапки не сжимаются, но и не растягивают строку */
.chat-header .icon-btn { flex: 0 0 auto; }

/* На узком экране кнопки мельче — иначе титулу не остаётся места */
@media (max-width: 620px) {
  .chat-header { gap: 2px; }
  .chat-header .icon-btn { width: 34px; height: 34px; }
  .chat-header .avatar.sm { width: 34px; height: 34px; }
  .chat-title .name { font-size: 15px; }
  .chat-title .sub  { font-size: 12px; }
}
/* ══════════ запись о звонке в переписке ══════════ */

.call-log {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.call-log-ico { font-size: 15px; line-height: 1; opacity: .9; }

.call-log-text { font-size: 14.5px; }

/* Не взяли трубку — красным, как в Telegram */
.call-log.missed { color: #e05c5c; }
.call-log.missed .call-log-ico { opacity: 1; }
/* Кнопка громкой связи: подсвечена, когда включена */
.call-btn.on {
  background: #3390ec;
}

.call-btn.on:hover { background: #3d9bf0; }
/* ══════════ строка быстрых реакций: прокрутка вбок ══════════
   Реакций стало больше одиннадцати, и в меню они не помещаются.
   Теперь ряд листается пальцем, а полоску прокрутки не показываем —
   в меню она только мешает. */

.ctx-react {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.ctx-react::-webkit-scrollbar {
  height: 0;
  display: none;
}

/* Кнопки не сжимаются: иначе весь ряд влезал бы, но крошечным */
.ctx-react .ctx-emoji {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 4px 2px;
}
/* ══════════ меню сообщения: прежняя ширина, ряд реакций внутри ══════════
   Раньше ширина меню определялась содержимым. Ряд реакций стал длиннее,
   и меню растянулось на весь экран. Теперь ширина задана жёстко,
   а лишние реакции прокручиваются ВНУТРИ ряда. */

.ctx-menu {
  width: 240px;
  max-width: calc(100vw - 16px);
}

/* Ряд не растягивает меню: он живёт в его ширине и листается */
.ctx-react {
  max-width: 100%;
  min-width: 0;
}
/* ══════════ лента: прокрутку держим сами ══════════
   Браузер умеет «привязывать» прокрутку к содержимому и при перерисовке
   сам её подправляет — из-за этого лента прыгала, сколько бы мы ни
   запоминали место. Отключаем: теперь позицией управляет только наш код. */

.messages {
  overflow-anchor: none;
}
/* Журнал ленты — только для поиска прыжков (открывается через #feedlog) */
#feed-log {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  max-height: 42vh;
  overflow: hidden;
  padding: 6px 8px;
  background: #000000e6;
  color: #7dff9b;
  font: 11px/1.5 Consolas, monospace;
  white-space: pre;
  pointer-events: none;
}

#feed-log b { color: #fff; }
/* ══════════ пузырь: не рвать короткие слова ══════════
   overflow-wrap:anywhere разрешал рвать слово в любом месте и позволял
   пузырю сжиматься почти до нуля — отсюда «Приве / т» на телефоне.
   break-word рвёт только длинные слова, которые правда не влезают. */

.bubble {
  overflow-wrap: break-word;
  word-break: normal;
  min-width: 0;
}
/* ══════════ пузырь: ширина определена сразу ══════════
   Раньше ширина вычислялась «по месту», и в первый миг после отправки
   она оказывалась меньше текста — слово рвалось, а через кадр вставало
   на место. Теперь ширина сразу равна содержимому, но не больше строки. */

.bubble:not(.has-photo):not(.has-sticker) {
  width: max-content;
  max-width: 100%;
}
/* ══════════ правка сообщения ══════════ */

.edit-text {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  font: inherit;
  line-height: 1.45;
  font-family: inherit;
}

/* Отметка «изм.» у изменённого сообщения */
.time .edited {
  font-style: normal;
  opacity: .75;
}
/* ══════════ галочки «доставлено/прочитано» ══════════
   Было letter-spacing: -2px — две галочки наезжали друг на друга
   и сливались в одну точку, особенно у только что отправленного
   сообщения, пока время ещё не пришло. */

.ticks {
  letter-spacing: -1px;
  font-size: 10.5px;
}
/* ══════════ пометка «изменено» ══════════ */

.time .edited {
  font-style: normal;
  font-size: 10.5px;
  opacity: .8;
  white-space: nowrap;
}
/* ══════════ подпись изменённого сообщения ══════════
   «изменено · 19:58 ✓» одной строкой: без второго времени и без
   двух строк, которые выглядели неряшливо. */

.time .edited {
  font-style: normal;
  font-size: 10px;
  opacity: .65;
  letter-spacing: .1px;
}

.time .time-dot {
  font-size: 10px;
  opacity: .45;
  margin: 0 3px;
}
/* ══════════ цитата в ответе не вылезает за рамку ══════════
   У текста цитаты стояла ширина min(60vw, 320px) — она больше самого
   пузыря, и длинная цитата выпирала за его край. Теперь потолок —
   ширина пузыря, лишнее аккуратно обрезается многоточием. */

.bubble .quote {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.bubble .quote .q-who,
.bubble .quote .q-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ══════════ цитата: обрезка С МНОГОТОЧИЕМ ══════════
   Прошлый вариант задавал max-width: 100% — а ширина пузыря тогда
   считается по содержимому, и процент разрешался «сам в себя».
   Браузер просто отрезал текст по краю.
   Блочный элемент и так занимает всю ширину контейнера — процент не нужен,
   и многоточие работает как положено. */

.bubble .quote {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.bubble .quote .q-who,
.bubble .quote .q-text {
  display: block;
  min-width: 0;
  max-width: none;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ══════════ ссылки в переписке ══════════ */

.bubble a {
  color: #8ec8ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.bubble a:hover { color: #b3dcff; }

/* ══════════ анимированные эмодзи ══════════ */

.big-emoji {
  width: 44px;
  height: 44px;
  vertical-align: middle;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 620px) {
  .big-emoji { width: 38px; height: 38px; }
}
/* ══════════ крупные эмодзи: сразу нормального размера ══════════
   Пока картинка грузится, браузер показывает вместо неё alt — обычный
   символ обычным шрифтом, и он выглядел мелким, а потом «вырастал».
   Задаём размер шрифта для alt: с первого кадра всё одного размера. */

.big-emoji {
  font-size: 34px;
  line-height: 1;
  display: inline-block;
  object-fit: contain;
}
/* ══════════ плавающая дата при прокрутке ══════════
   Висит над лентой, показывает день, который сейчас на экране,
   и по нажатию открывает календарь. */

.feed-date {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: #000000a6;
  color: #eaf1f8;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  transition: opacity .25s ease;
}

.feed-date:hover { background: #000000c9; }

/* Погасла — не мешает смотреть и не ловит нажатия */
.feed-date.faded {
  opacity: 0;
  pointer-events: none;
}
/* ══════════ плавающая дата: под шапкой и полупрозрачная ══════════ */

.feed-date {
  background: #00000073;
  color: #e6eef7;
  opacity: .92;
  font-size: 12px;
  padding: 3px 11px;
  box-shadow: 0 2px 10px #00000033;
}

.feed-date:hover {
  background: #00000099;
  opacity: 1;
}
/* ══════════ статус в карточке собеседника ══════════ */

.pp-about {
  margin: 2px 18px 12px;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  color: var(--text-dim, #8aa0b4);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Подсказка под полем ввода в настройках */
label .hint {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-dim, #8aa0b4);
}
/* ══════════ статус под аватаркой в просмотрщике ══════════ */

.lb-bar {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.lb-about {
  max-width: min(80vw, 520px);
  font-size: 12.5px;
  line-height: 1.4;
  opacity: .75;
  color: #dfe8f2;
  white-space: pre-wrap;
  word-break: break-word;
}
/* ══════════ статус НАД аватаркой в просмотрщике ══════════ */



/* Подпись внизу снова в одну строку */
.lb-bar {
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
/* ══════════ статус над аватаркой: аккуратная плашка ══════════
   Опустили от верхнего края и дали больше ширины: на телефоне текст
   больше не рвётся на семь коротких строк. */



/* Внизу остался только счётчик — по центру */
.lb-bar {
  justify-content: center;
  align-items: center;
}
/* ══════════ статус над фото: по ширине аватарки ══════════
   Раньше плашка стояла «от середины экрана» — доступная ширина была
   ровно половина, и каждое слово уходило на свою строку.
   Теперь полоса занимает ВСЮ ширину, текст по центру, а ширину плашки
   задаёт скрипт — ровно по ширине фотографии, край в край. */

.lb-top {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: 0 12px;
  text-align: center;
  pointer-events: none;
  transform: none;
  max-width: none;
}

.lb-top .lb-about {
  display: inline-block;
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 12px;
  background: #00000080;
  box-shadow: 0 2px 14px #0000004d;
  backdrop-filter: blur(8px);
  font-size: 13px;
  line-height: 1.45;
  color: #eef4fa;
  opacity: 1;
  white-space: pre-wrap;
  word-break: break-word;
}
/* ══════════ статус над фото: прозрачнее и ближе к аватарке ══════════ */

.lb-top {
  top: 74px;
}

.lb-top .lb-about {
  background: #00000042;
  box-shadow: 0 2px 10px #00000026;
  backdrop-filter: blur(4px);
  padding: 7px 13px;
}
/* ══════════ статус бегущей строкой в шапке ══════════
   Пробегает раз в минуту, неспешно: около 30 секунд на проход,
   дальше пауза до следующего круга. */




/* В шапке статус забирает место у имени — имя пусть ужимается */
.chat-header .chat-title {
  flex: 0 1 auto;
}

@media (max-width: 620px) {
    }
/* ══════════ шапка: статус на уровне имени ══════════
   Раньше бегущая строка стояла по центру шапки и наезжала на «в сети».
   Поднимаем её к первой строке — туда, где имя. */


/* «в сети» и «был …» — того же цвета, что имя: со статусом не путаются */
.chat-title .sub {
  color: inherit;
  opacity: .72;
}

/* Статус — свой цвет, заметно отличающийся от имени и присутствия */

@media (max-width: 620px) {
  }
/* ══════════ статус: точное выравнивание по имени ══════════
   Отступ задаёт скрипт по замеру строки имени — здесь оставляем ноль,
   чтобы не спорить с ним. */


@media (max-width: 620px) {
  }
/* ══════════ шапка: имя снова растягивается, иконки у правого края ══════════
   Я ошибочно отнял у имени «растягивание» — из-за этого кнопки уехали
   влево и справа осталась дырка. Возвращаем: имя занимает свободное место,
   статус идёт за ним своей ширины, кнопки держатся справа. */

.chat-header .chat-title {
  flex: 1 1 auto;
  min-width: 0;
}


@media (max-width: 620px) {
  }
/* ══════════ шапка на телефоне: имя важнее статуса ══════════
   Статус был слишком широким и сжимал имя до «Ар…».
   Теперь он уступает: маленькая ширина и право сжиматься первым. */

@media (max-width: 620px) {
  
  .chat-header .chat-title {
    flex: 1 1 auto;
    min-width: 0;
    /* имя не отдаёт место статусу, пока само не упрётся в свой минимум */
    flex-shrink: 0;
  }
}
/* ══════════ бегущая строка: уезжает ДО КОНЦА ══════════
   Было left: 100% → -140%: проценты считались от ширины полоски,
   а не от длины текста. Длинный статус застывал у края недоехавшим.
   Теперь отступ слева равен ширине полоски, а сдвиг — на полную ширину
   текста вместе с отступом. Уезжает ровно за край, без застываний. */




/* ══════════ шапка: статус занимает всё оставшееся место ══════════
   Раньше у него была ФИКСИРОВАННАЯ ширина — то 220, то 84 точки.
   Из-за этого он был то крошечным, то отнимал место у имени.
   Теперь всё просто: имя — по своей длине, статус — от конца имени
   до кнопок. Длинное имя — статус короче, короткое — длиннее. */

.chat-header .chat-title {
  flex: 0 1 auto;
  min-width: 0;
}


@media (max-width: 620px) {
  .chat-header .chat-title {
    flex: 0 1 auto;
    min-width: 0;
  }

  }


/* ══════════ бегущая строка: слева направо через всю область ══════════
   Область начинается сразу после имени и кончается у кнопок.
   Текст стартует у ЛЕВОГО её края, стоит мгновение, затем едет вправо
   до самого правого края области и скрывается. Повтор раз в минуту. */




/* ══════════ статус в шапке — одна чистая реализация ══════════
   Имя растягивается всегда: кнопки прижаты к правому краю и без статуса.
   Когда статус есть — имя занимает свою длину, а статус добирает остаток
   до кнопок. Строка бежит строго слева направо. */

.chat-status {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  height: 18px;
  overflow: hidden;
  align-self: flex-start;   /* уровень задаёт скрипт — по строке имени */
  margin-left: 8px;
}

.chat-status span {
  position: absolute;
  top: 50%;
  left: 100%;
  margin: 0;
  padding: 0;
  display: block;
  white-space: nowrap;
  font-size: 12px;
  line-height: 18px;
  color: #86b7e6;
  opacity: .95;
  transform: translateY(-50%);
  animation: chatStatusRun 60s linear infinite;   /* один проезд в минуту */
  will-change: left;
}

@keyframes chatStatusRun {
  0%   { left: 100%; transform: translateY(-50%) translateX(0); }
  50%  { left: 0;    transform: translateY(-50%) translateX(-100%); }
  100% { left: 0;    transform: translateY(-50%) translateX(-100%); }
}

/* Без статуса имя растягивается — кнопки держатся правого края */
.chat-header .chat-title {
  flex: 1 1 auto;
  min-width: 0;
}

/* Со статусом имя — по своей длине, статус добирает остальное */
.chat-header.has-status .chat-title {
  flex: 0 1 auto;
  min-width: 0;
}

.chat-header.has-status .chat-status {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 620px) {
  .chat-status { margin-left: 6px; }
  .chat-status span { font-size: 11.5px; }
}


/* ══════════ «в сети»: на месте, но не распирает блок ══════════
   Прошлый раз я вынес строку из потока — и она вылезла за шапку.
   Теперь способ другой: строка ОСТАЁТСЯ в потоке и держит свою высоту,
   но её ширина — ноль. Текст просто выходит за границы вправо, второй
   строкой. Блок при этом меряется ТОЛЬКО по имени, и статус начинается
   ровно там, где кончается имя. */

.chat-header .chat-title .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.chat-header .chat-title .sub {
  display: block;
  width: 0;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* Ширину блока задаёт имя */
.chat-header.has-status .chat-title {
  flex: 0 1 auto;
  min-width: 0;
}

/* Без статуса — как обычно: имя растягивает шапку, кнопки справа */
.chat-header:not(.has-status) .chat-title {
  flex: 1 1 auto;
  min-width: 0;
}


/* ══════════ снимаем обрезку у блока имени ══════════
   У .chat-title осталось overflow: hidden от прежней правки — он подрезал
   «был 2 м…», хотя сама строка выведена за границы. Теперь блок не режет:
   многоточие у имени задаётся отдельно, ему это не мешает. */

.chat-header .chat-title {
  overflow: visible;
}

.chat-header .chat-title .sub {
  display: block;
  width: 0;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}


/* ══════════ логотип на экране входа ══════════
   Иконка снова с прозрачным фоном, поэтому тёмного квадрата вокруг круга
   больше нет. Убираем и скругление с тенью: они обводили квадрат, а не круг. */

.logo {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: visible;
  box-shadow: none;
}

.logo img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

@media (max-width: 620px) {
  .logo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    box-shadow: none;
  }
}


/* ══════════ поиск людей в панели чатов ══════════ */

.people-title {
  margin: 10px 14px 4px;
  font-size: 11.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-dim, #8aa0b4);
}

/* Найденный человек — как обычный чат, но с подсказкой справа */
.found-person .when {
  color: var(--accent, #3390ec);
  font-size: 11.5px;
}

.found-person:hover { background: var(--hover, #202b36); }
.app.side-collapsed .side-header .collapse svg { transform: rotate(180deg); }
.pp-seen { text-align: center; color: var(--text-dim); font-size: 13.5px; margin-top: 4px; }
.chat-sub .draft-blur { filter: blur(3.5px); opacity: .8; }


/* ══════════ видеосообщение в переписке ══════════ */

/* Плашка видео раньше могла схлопнуться в узкую полоску: если постера нет,
   у неё не было ни ширины, ни высоты — только иконка. Теперь у неё всегда
   есть размер по соотношению сторон, а картинка лежит поверх. */
.bubble .video-thumb {
  position: relative;
  display: block;
  border: 0;
  padding: 0;
  min-width: min(240px, 62vw);
  width: 100%;
  max-width: 320px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  background: linear-gradient(135deg, #24313f, #17212b 55%, #0e1621);
  cursor: pointer;
}

.bubble .video-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* Заглушка, пока постера нет: тёмный градиент и знак «видео» */
.bubble .video-blank {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: linear-gradient(135deg, #2a3947, #1b2733 55%, #101820);
}

.bubble .video-blank::before {
  content: '▶';
  font-size: 26px;
  color: #ffffff2e;
}

/* Кнопка воспроизведения: стеклянный кружок по центру */
.bubble .video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: transform .12s, background .12s;
}

.bubble .video-thumb:hover .video-play {
  transform: translate(-50%, -50%) scale(1.07);
  background: rgba(0, 0, 0, .62);
}

/* Длительность — аккуратной пилюлей в углу */
.bubble .video-dur {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: .2px;
}



/* ══════════ свои элементы управления видео в звонке ══════════ */

/* Пока в видео нет картинки, браузер рисует СВОЮ кнопку «плей» посередине
   экрана — она не наша и выглядит как поломка. Прячем все её части. */
#call-remote::-webkit-media-controls,
#call-remote::-webkit-media-controls-enclosure,
#call-remote::-webkit-media-controls-panel,
#call-remote::-webkit-media-controls-start-playback-button,
#call-remote::-webkit-media-controls-overlay-play-button,
#call-remote::-webkit-media-controls-play-button,
#call-self::-webkit-media-controls,
#call-self::-webkit-media-controls-start-playback-button,
#call-self::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Видео собеседника до появления картинки — мягкий тёмный фон, а не чёрный квадрат */
.call-screen.video-mode .call-remote {
  background: radial-gradient(circle at 50% 35%, #1c2b3a, #0d151d 70%);
}


/* ══════════ безопасные зоны iPhone ══════════ */

/* iPhone с «чёлкой» и Dynamic Island не разрешает рисовать под статус-баром
   и под домашней полоской. env(safe-area-inset-*) сообщает их высоту;
   на всех остальных телефонах это ноль, поэтому ничего не меняется.

   Раньше отступов не было вообще — и на iPhone шапка чата с кнопкой звонка
   уезжала под часы и значок сети: по ним было не попасть пальцем. */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Шапки: сверху добавляем высоту «чёлки» */
.side-header,
.chat-header {
  padding-top: var(--safe-top);
  height: calc(56px + var(--safe-top));
}

/* Поле ввода: снизу домашняя полоска */
.composer {
  padding-bottom: calc(8px + var(--safe-bottom));
}

/* Экран звонка: имя не липнет к часам, кнопки — к полоске */
.call-top {
  margin-top: calc(24px + var(--safe-top));
}

.call-actions {
  padding-bottom: calc(18px + var(--safe-bottom));
}

/* Экран входа и модальные окна */
.auth-top,
.modal,
.lb-top {
  padding-top: var(--safe-top);
}

/* Боковая панель и лента: по бокам в горизонтальном положении */
.side { padding-left: var(--safe-left); }
.chat { padding-right: var(--safe-right); }


/* ══════════ кружок видеосообщения ══════════ */

/* Кружок — это круглый ролик 1:1, а не плашка 16:9. Раньше правила
   смешивались, и он съёживался. Здесь всё задано явно и последним,
   поэтому спорить не с чем. */
.bubble .video-thumb.round {
  width: min(220px, 72vw) !important;
  max-width: min(220px, 72vw) !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  margin: 0 auto;
  background: radial-gradient(circle at 30% 30%, #2a3947, #101820);
}

.bubble .video-thumb.round img,
.bubble .video-thumb.round .video-blank {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.bubble .video-thumb.round .video-play {
  width: 46px;
  height: 46px;
  font-size: 16px;
}

.bubble .video-thumb.round .video-dur {
  right: 10px;
  bottom: 10px;
}