:root {
  /* высота поля ввода в покое = высота кнопок композера (42px / 38px) */
  --composer-h: 42px;
  /* Тёмная палитра — по умолчанию. Светлая включается атрибутом
     data-theme="light" на <html>: его ставит theme.js до первой отрисовки
     (иначе мигнёт тёмный фон) и приложение при выборе темы в настройках. */
  color-scheme: dark;
  --bg: #0e1621;
  --bg2: #16202c;
  --bg3: #1d2935;
  --line: #24313f;
  --fg: #e9eef4;
  --mut: #8fa3b7;
  --t2: #8fa3b7;
  --dim: #9aa3b2;
  --acc: #3aa0ff;
  --acc2: #2b7fd4;
  --out: #2b5278;          /* фон исходящих сообщений */
  --out-fg: #e9eef4;       /* текст в исходящем сообщении */
  --out-ov: rgba(0,0,0,.18);
  --danger: #ff6b6b;
  --bg1: #0e1621;      /* фон экранов (раньше переменная не была объявлена — панели были прозрачными) */
  /* полупрозрачные подложки: в тёмной теме светлые, в светлой — тёмные */
  --ov1: rgba(255,255,255,.08);
  --ov2: rgba(255,255,255,.16);
  --card: #1b1f27;
  --toast-bg: rgba(20,25,32,.95);
  --toast-fg: #ffffff;
  --verbar-bg: #2a4a7a;
  --verbar-fg: #ffffff;
  --switch-off: #3a4750;
  --ring: #dfe3e6;
  --drop-bg: rgba(20,25,32,.55);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg:#f4f7fa;
  --bg2:#ffffff;
  --bg3:#e9eff5;
  --bg1:#f4f7fa;
  --line:#dbe4ec;
  --fg:#12212e;
  --mut:#5d7285;
  --t2:#5d7285;
  --dim:#5d7285;
  --acc:#1f6fd6;
  --acc2:#1858b8;
  --out:#d7ecff;
  --out-fg:#12212e;
  --out-ov: rgba(0,0,0,.07);
  --danger:#c62828;
  --ov1: rgba(0,0,0,.055);
  --ov2: rgba(0,0,0,.10);
  --card:#ffffff;
  --toast-bg: rgba(255,255,255,.97);
  --toast-fg:#12212e;
  --verbar-bg:#d9e6f7;
  --verbar-fg:#12263d;
  --switch-off:#c3ccd6;
  --ring:#cfd6dc;
  --drop-bg: rgba(20,25,32,.35);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  overscroll-behavior: none;
}
#app { height: 100%; }
.screen { height: 100%; display: flex; flex-direction: column; }

/* десктоп: чаты слева, открытый чат справа */
@media (min-width: 880px) {
  #app { display: flex; flex-direction: row; }
  body { background: var(--bg2); }
  #app > .screen { border-right: 1px solid var(--bg3); }
  #s-chats { width: 360px; flex: none; min-width: 300px; max-width: 420px; height: 100vh !important; }
  #s-chat  { flex: 1; min-width: 0; height: 100vh !important; }
  #s-chats .topbar, #s-chat .topbar { border-radius: 0; }
  #s-chats { position: relative !important; }
  #s-chat  { position: relative !important; }
  #btn-back, #btn-back-mobile { display: none !important; }
  #s-chats[hidden], #s-chat[hidden] { display: flex !important; }
  #s-chats.house-hidden, #s-chat.house-hidden { display: none !important; }
}
@media (max-width: 879px) {
  #s-chat, #s-chats, #s-login, #s-setup, #s-qr, #s-pw, #s-profile {
    position: fixed; inset: 0; background: var(--bg1);
    height: 100dvh; /* не 100%: на телефоне адресная строка съедает высоту */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
  }
  #s-chat { z-index: 20; }
  #s-chats, #s-login, #s-setup, #s-qr, #s-pw, #s-profile { z-index: 10; }
  /* внутри чатов свои скролл-контейнеры — внешний скролл там не нужен */
  #s-chat, #s-chats { overflow: hidden; }
  /* список чатов: безопасную зону снизу держит строка сборки, иначе под ней
     остаётся пустой пробел в два safe-area */
  #s-chats { padding-bottom: 0; }
  /* центрируем по вертикали, но когда контент не влезает — начинаем сверху
     и даём прокрутку, иначе верх и низ обрезаются безвозвратно */
  #s-login .center, #s-setup .center, #s-qr .center, #s-pw .center {
    margin: 0 auto; min-height: 100%; justify-content: center;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  }
  /* QR должен влезать вместе с подсказками и формой входа по коду */
  /* QR не должен занимать весь экран: под ним ещё подсказки и форма кода */
  #s-qr .qr img { width: 200px; height: 200px; max-width: 60vw; max-height: 34vh; }
  #s-qr h1 { font-size: 19px; margin: 10px 0 4px; }
  #s-qr .muted { margin-bottom: 10px; font-size: 13px; }
}
[hidden] { display: none !important; }
a { color: var(--acc); }

.center {
  margin: auto; padding: 24px; width: 100%; max-width: 460px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.logo {
  width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--acc), var(--acc2)); color: #fff; font-size: 28px;
  box-shadow: 0 12px 30px rgba(58,160,255,.28);
}
h1 { font-size: 21px; margin: 16px 0 6px; font-weight: 650; letter-spacing: -.01em; }
.muted { color: var(--mut); font-size: 14px; margin: 0 0 20px; max-width: 40ch; }

input, textarea {
  width: 100%; background: var(--bg2); border: 1px solid var(--line); color: var(--fg);
  border-radius: 14px; padding: 13px 14px; font: inherit; outline: none;
}
input:focus, textarea:focus { border-color: var(--acc); }
form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 14px; }
button.primary { background: var(--acc); color: #fff; padding: 14px; font-weight: 600; }
button.primary:active { background: var(--acc2); }
.err { color: var(--danger); font-size: 13px; min-height: 18px; margin: 10px 0 0; }
/* кнопка вставки пароля из буфера — текстовая, не иконочная */
#login-paste {
  background: transparent; color: var(--acc); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 12px; font-size: 13px; align-self: flex-start;
}
/* поле пароля и кнопка «показать» в один ряд */
.pw-row { display: flex; gap: 8px; align-items: stretch; width: 100%; }
.pw-row input { flex: 1 1 auto; min-width: 0; }
.pw-eye {
  background: var(--bg2); border: 1px solid var(--line); color: var(--fg);
  border-radius: 14px; padding: 0 14px; font-size: 17px; line-height: 1;
  flex: 0 0 auto;
}
.pw-eye.on { color: var(--acc); border-color: var(--acc); }
/* счётчик символов: сразу видно, что в поле попало не всё */
.pw-count { margin: 0; font-size: 12px; color: var(--mut); }
.pw-count.warn { color: var(--danger); }
#login-code {
  background: transparent; color: var(--acc); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; font-size: 13px; align-self: flex-start;
}
.hint { color: var(--mut); font-size: 12.5px; margin: 12px 0 0; max-width: 32ch; }
/* быстрый вход по PIN — отдельным блоком под формой: отделён линией,
   чтобы его не путали с полем пароля */
#login-fast {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
  /* .center центрирует элементы по ширине — здесь нужна полная ширина */
  align-items: stretch; width: 100%;
}
#login-fast[hidden] { display: none; }
#login-fast input { width: 100%; }
#login-fast-go, #login-bio-go {
  background: transparent; color: var(--acc); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; font-size: 13px; width: 100%;
}
#login-fast-go:hover, #login-bio-go:hover { border-color: var(--acc); }
#login-bio-go:disabled, #login-fast-go:disabled { opacity: .6; }

.qr { background: #fff; padding: 12px; border-radius: 20px; box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.qr img { width: 240px; height: 240px; display: block; image-rendering: pixelated; }

/* вход по коду — запасной путь, когда QR не отсканировать */
.code-login { margin: 20px auto 0; max-width: 34ch; text-align: left; }
.code-login summary { cursor: pointer; color: var(--mut); font-size: 13px; padding: 8px 0; }
.code-login summary:hover { color: var(--fg); }
.code-login form { margin-top: 8px; }
.code-login input { width: 100%; }

.topbar {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--bg2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5;
}
.topbar .me { font-weight: 650; font-size: 16px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acts { display: flex; gap: 6px; }
button.ghost { background: transparent; color: var(--mut); font-size: 20px; padding: 4px 10px; border-radius: 10px; }
button.ghost:hover { color: var(--fg); background: var(--bg3); }

/* список чатов: шапка и поиск компактнее — как в Telegram, чтобы
   в экран помещалось больше чатов */
#s-chats .topbar { padding: 6px 8px; padding-top: max(6px, env(safe-area-inset-top)); gap: 6px; }
#s-chats .topbar .me { font-size: 14px; }
#s-chats .topbar .me-btn::after { font-size: 10px; }
#s-chats .acts { gap: 2px; }
#s-chats .acts button.ghost { font-size: 17px; padding: 2px 7px; }
#s-chats .search { padding: 4px 8px; }
#s-chats .search input { padding: 8px 12px; border-radius: 11px; }
#s-chats .chips { padding: 2px 8px 6px; }

.statusbar { padding: 8px 14px; font-size: 13px; background: #7a4d00; color: #ffd591; }
.statusbar.ok { background: #0d5c3f; color: #b8f2d8; }
/* мягкая полоса — «Соединение…» / «Загрузка…», как в Telegram */
.statusbar.soft { background: transparent; color: var(--mut); padding: 4px 14px; font-size: 12px; }
/* Постоянная строка статуса: высота не меняется, поэтому лента чатов
   не прыгает при появлении и исчезновении «Загрузка…» / «Соединение…». */
.statusbar.soft { min-height: 22px; box-sizing: border-box; }
.statusbar.soft.empty { visibility: hidden; }

/* ---------- реакции ---------- */
.rx-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; padding-right: 30px; }
.rx-chip {
  background: var(--ov1); border: 1px solid var(--line); color: var(--fg);
  border-radius: 12px; padding: 1px 7px; font-size: 13px; line-height: 1.5; cursor: pointer;
}
.rx-chip.mine { border-color: var(--acc); background: rgba(88, 166, 255, .16); }
.rx-chip .rx-c { font-size: 11px; color: var(--mut); margin-left: 3px; }
.rx-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--bg2); border-top: 1px solid var(--line);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-start; gap: 6px;
}
#rx-close { flex: 0 0 auto; }
.rx-panel-in { display: flex; flex-wrap: wrap; gap: 6px; max-height: 40vh; overflow-y: auto; }
.rx-cell {
  background: transparent; border: none; font-size: 22px; line-height: 1.2;
  cursor: pointer; padding: 2px 4px; border-radius: 8px;
}
.rx-cell:hover { background: var(--ov1); }

.search { padding: 10px 12px; }
.search input { border-radius: 12px; padding: 11px 13px; }

.chips {
  display: flex; gap: 8px; padding: 2px 12px 10px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none; flex: none;
  /* pan-x: жест по строке папок всегда прокручивает её вбок, а список чатов
     не уезжает. Без этого телефон пытается скроллить страницу и не двигает
     папки — на них попросту нельзя уехать. */
  touch-action: pan-x; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.chips::-webkit-scrollbar { display: none; }
.chips { cursor: grab; }
.chips.strip-drag { cursor: grabbing; user-select: none; }
.chips.strip-drag .chip { cursor: grabbing; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: var(--bg3); color: var(--mut); border-radius: 16px;
  padding: 7px 13px; font-size: 13.5px; font-weight: 550; white-space: nowrap;
  border: 1px solid transparent; scroll-snap-align: start;
}
/* Как в приложении Telegram: папки одной строкой над списком чатов,
   лишние уезжают за край и прокручиваются пальцем вбок. */
@media (max-width: 879px) {
  #folders { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  /* активная папка всегда видна: после переключения домотаем до неё */
  #folders .chip.on { box-shadow: 0 0 0 1px rgba(58,160,255,.35); }
}
.chip .ci { font-size: 13px; opacity: .85; }
.chip.on { background: rgba(58,160,255,.16); color: var(--acc); border-color: rgba(58,160,255,.45); }
.chip .cb {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--acc); color: #fff; font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}
.chip.on .cb { background: var(--acc); }

.chat-tabs {
  display: flex; gap: 0; padding: 0 6px; flex: none;
  border-bottom: 1px solid var(--bg3); background: var(--bg1);
  overflow-x: auto; scrollbar-width: none;
}
.chat-tabs::-webkit-scrollbar { display: none; }
.chat-tab {
  background: transparent; border: 0; padding: 10px 13px;
  font-size: 13.5px; color: var(--mut); cursor: pointer; flex: none;
  border-bottom: 2px solid transparent; transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.chat-tab.on { color: var(--acc); border-bottom-color: var(--acc); font-weight: 500; }

.media-grid {
  flex: 1; overflow-y: auto; padding: 4px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  align-content: start;
}
.media-grid.col { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; }
.media-tile {
  position: relative; aspect-ratio: 1; background: var(--bg3); border-radius: 6px;
  background-size: cover; background-position: center; cursor: pointer; overflow: hidden;
}
.media-tile-doc {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px; background: var(--bg3); border-radius: 12px; cursor: pointer;
}
.media-tile-doc .fn { font-weight: 500; font-size: 14px; word-break: break-all; }
.media-tile-doc .sz { color: var(--mut); font-size: 12px; }
.topics-bar { padding: 8px 10px 4px; background: var(--bg1); border-bottom: 1px solid var(--bg3); }
.topic-chip { max-width: 220px; }
.topic-chip .cb { min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
.topic-chip.closed { opacity: .6; }
.topic-chip .ticon { font-size: 12px; }
.topics-retry { color: #d99a6c; border-color: #d99a6c33; }
.ticon-dot { display:inline-block; width:14px; height:14px; border-radius:50%; vertical-align:-2px; box-shadow:0 0 0 1px rgba(0,0,0,.06) inset; }
.topic-hint { margin:8px 10px 0; padding:8px 12px; border-radius:12px; background:#2f7dd1; color:#fff;
  font-size:13px; line-height:1.35; cursor:pointer; box-shadow:0 2px 10px rgba(47,125,209,.25); }
.topic-hint b { font-weight:600; }
.topic-hint[hidden] { display:none; }

.msg.tp { }
.msg .tp-label {
  display: inline-block; margin-bottom: 3px; font-size: 11.5px; font-weight: 500;
  color: var(--acc); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg .tp-label::before { content: "◆ "; font-size: 9px; opacity: .8; }
.media-empty { padding: 40px 16px; text-align: center; color: var(--mut); }
.media-loading { padding: 18px; text-align: center; color: var(--mut); font-size: 13px; }

.row.pinned .name::before { content: "📌 "; font-size: 11px; opacity: .8; }
.row.archived .name { opacity: .72; }
.row .mute { font-size: 13px; opacity: .7; flex: none; }

.list { overflow-y: auto; flex: 1; padding: 0 8px 2px; }
.row { display: flex; gap: 10px; padding: 6px 8px; border-radius: 14px; cursor: pointer; align-items: center; }
.row:active { background: var(--bg3); }
.av {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, #4b6a88, #2c4257); color: #fff; font-weight: 600; font-size: 16px;
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.av.unread::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--acc);
}
.row .mid { flex: 1; min-width: 0; }
.row .t1 { display: flex; align-items: baseline; gap: 8px; }
.row .name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .time { font-size: 12px; color: var(--mut); flex: none; }
.row .prev { color: var(--mut); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .prev .me-tag { color: var(--acc); }
.badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--acc); color: #fff;
  font-size: 12px; display: grid; place-items: center; margin-left: 6px;
}
/* Чаты без уведомлений (отключены в Telegram или у нас): счётчик новых
   сообщений и обводка аватара — серые, а не синие. */
.row.nonotif .badge { background: var(--mut); }
.row.nonotif .av.unread::after { border-color: var(--mut); }
.empty { text-align: center; color: var(--mut); padding: 30px; font-size: 14px; }

.msgs { flex: 1; overflow-y: auto; padding: 14px 12px 6px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 82%; padding: 9px 12px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); align-self: flex-start; word-break: break-word; }
/* служебное сообщение: звонок, вступление в группу — по центру, без пузыря */
.msg.svc {
  align-self: center; max-width: 90%; background: transparent; border: 0;
  padding: 4px 10px; text-align: center;
}
.msg.svc .svc-txt {
  font-size: 12px; color: var(--mut); background: var(--bg2);
  border-radius: 12px; padding: 5px 12px; display: inline-block;
}
.msg.out { align-self: flex-end; background: var(--out); border-color: transparent; }
.msg .meta { font-size: 11px; color: var(--mut); margin-bottom: 3px; }
/* галочки доставки, как в Telegram: одна — отправлено, две синие — прочитано */
.msg .tick { margin-left: 5px; font-weight: 700; letter-spacing: -1px; }
.msg .tick.sent { color: var(--mut); }
.msg .tick.read { color: #4aa3f0; }
.msg .tick.wait { color: var(--mut); }
.msg .tick.fail { color: #e05a5a; }
.msg.pending { opacity: .75; }
.msg.pending.failed { opacity: 1; border: 1px solid rgba(224,90,90,.6); }
.msg .txt { white-space: normal; }
.msg .txt.md-plain { white-space: pre-wrap; }
/* разметка markdown внутри сообщения */
.md-table { border-collapse: collapse; margin: 6px 0; font-size: 13px; max-width: 100%; display: block; overflow-x: auto; }
.md-table th, .md-table td { border: 1px solid var(--line); padding: 4px 7px; text-align: left; vertical-align: top; }
.md-table th { background: color-mix(in srgb, var(--fg) 8%, transparent); font-weight: 600; white-space: nowrap; }
.md-h { font-weight: 700; font-size: 15px; margin: 6px 0 2px; }
.md-hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.md-ul, .md-ol { margin: 4px 0 4px 18px; padding: 0; }
.md-ul li, .md-ol li { margin: 1px 0; }
.md-quote { border-left: 3px solid var(--acc); padding: 2px 8px; margin: 6px 0; opacity: .9; }
.md-code { background: color-mix(in srgb, var(--fg) 10%, transparent); border-radius: 8px; padding: 6px 8px; margin: 6px 0;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; white-space: pre-wrap; word-break: break-word; }
.md-code-i { background: color-mix(in srgb, var(--fg) 10%, transparent); border-radius: 4px; padding: 0 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.msg .fwd-from { font-size: 12px; color: var(--acc); margin-bottom: 2px; font-weight: 500; }
.msg .media {
  display: inline-flex; align-items: center; gap: 6px; background: var(--ov1);
  border-radius: 12px; padding: 6px 10px; margin-top: 6px; font-size: 13px; color: var(--fg);
}
.msg img.pic { max-width: 100%; border-radius: 12px; margin-top: 6px; display: block; }
.msg .media.doc {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-decoration: none; color: var(--fg); max-width: 100%;
}
.msg .media.doc .ttl { font-size: 13px; word-break: break-all; }
.msg .media.doc .dl { font-size: 12px; color: var(--acc); }
/* Плеер голосового: ширину задаём явно. Раньше было width:100% внутри
   контейнера с неопределённым размером (flex-колонка), и панель
   воспроизведения схлопывалась в ноль — кнопки play не было видно. */
.msg .media.doc .aud-wrap { width: 260px; max-width: 100%; }
.msg .media.doc audio { width: 100%; height: 34px; display: block; }
.aud-wrap { display: inline-flex; align-items: center; gap: 6px; }
.v-speed {
  flex: none; padding: 3px 8px; font-size: 12px; border-radius: 12px;
  background: var(--ov1); color: var(--mut); border: none;
  cursor: pointer; min-width: 38px;
}
.v-speed:active { background: var(--ov2); }
.msg .pic-wrap { position: relative; display: inline-block; margin-top: 6px; }
.msg .vid-wrap { display: block; max-width: 100%; }
.msg video.vid {
  display: block; max-width: 100%; max-height: 60vh; width: auto;
  border-radius: 12px; background: #000; margin-top: 6px;
}
.msg .vid-wrap .pic-dl { bottom: 34px; }
.msg .pic-wrap .pic { margin-top: 0; }
.msg .pic-dl {
  position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  opacity: 0; transition: opacity .15s;
}
.msg .pic-wrap:hover .pic-dl, .msg .pic-dl:active { opacity: 1; }
@media (hover: none) { .msg .pic-dl { opacity: .85; } }
/* заглушка «скачать по мобильному интернету»: до нажатия ничего не грузится */
.msg .dl-guard {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 6px; padding: 10px 12px; border-radius: 12px;
  background: var(--ov1); color: var(--fg); font-size: 13px;
  cursor: pointer; user-select: none;
}
.msg .dl-guard.vid-guard {
  display: block; position: relative; padding: 0; max-width: 100%;
  background: #000; overflow: hidden;
}
.msg .dl-guard.vid-guard .vid-poster {
  display: block; max-width: 100%; max-height: 60vh; width: auto; opacity: .75;
}
.msg .dl-guard.vid-guard .dl-guard-txt {
  position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
  color: #fff; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.msg .reply-quote {
  border-left: 3px solid var(--acc); padding: 4px 8px; background: var(--ov1);
  border-radius: 8px; font-size: 12.5px; color: var(--mut); margin-bottom: 4px;
}
.msg.out .reply-quote { background: var(--out-ov); color: var(--out-fg); }
.msg .reply-quote[data-jump]:not([data-jump="0"]) { cursor: pointer; }
.msg .reply-quote[data-jump]:not([data-jump="0"]):hover { filter: brightness(1.25); }
.msg.jump-flash { animation: jumpFlash 1.8s ease-out; }
@keyframes jumpFlash {
  0%, 30% { box-shadow: 0 0 0 2px var(--acc); }
  100% { box-shadow: 0 0 0 2px transparent; }
}

/* кнопки правки/удаления — появляются при наведении (десктоп) и всегда на тапе */
.msg-acts { display: flex; gap: 4px; justify-content: flex-end; margin: -2px 0 4px; }

/* кнопка реакции в правом нижнем углу сообщения */
.msg { position: relative; }
.msg-rx {
  position: absolute; right: 6px; bottom: 6px;
  width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--fg);
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
}
.msg:hover .msg-rx, .msg:focus-within .msg-rx { opacity: 1; pointer-events: auto; }
@media (hover: none) { .msg .msg-rx { opacity: .55; pointer-events: auto; } }
.msg-act {
  background: transparent; border: 1px solid var(--line); color: var(--mut);
  border-radius: 8px; padding: 1px 6px; font-size: 12px; line-height: 1.5; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.msg:hover .msg-act, .msg.out:focus-within .msg-act { opacity: 1; }
.msg-act:hover { color: var(--fg); border-color: var(--acc); }
@media (hover: none) { .msg-act { opacity: .75; } }
/* кнопки неотправленного сообщения всегда видны: их нужно нажать сразу */
.msg.pending.failed .msg-act { opacity: 1; }

.edit-bar { border-top: none; }
.edit-bar::before { content: "✏️"; color: var(--acc); flex: none; }

.composer {
  /* flex-direction обязателен: общее правило `form { flex-direction: column }`
     иначе перебивает композер и кнопки встают столбиком */
  display: flex; flex-direction: row; gap: 8px; align-items: flex-end; padding: 8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: var(--bg2); border-top: 1px solid var(--line);
}
/* Поле ввода как в Telegram: скрепка слева, текст с кнопкой смайликов
   внутри справа, микрофон и отправка — справа от поля. */
.input-wrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.composer textarea {
  resize: none; border-radius: 21px; flex: 1 1 auto; min-width: 0;
  /* в покое поле той же высоты, что кнопки (42px), текст по центру;
     при вводе растёт до 130px (autoGrow) */
  height: var(--composer-h); min-height: var(--composer-h); max-height: 130px;
  padding: 9px 14px; line-height: 22px;
}
.input-wrap textarea { padding-right: 42px; }
.composer .emoji-btn {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  background: transparent; border: none; color: var(--mut);
  font-size: 20px; padding: 2px 4px; line-height: 1; cursor: pointer;
}
.composer .emoji-btn:active { opacity: .6; }
/* Как в Telegram: пока текст пуст — микрофон, есть текст — стрелка отправки */
.composer.has-text #btn-mic { display: none; }
.composer:not(.has-text) .send-arrow { display: none; }
/* Кнопка вложения: обёртка + иконка + поле файла.
   Поле лежит ПОВЕРХ иконки (position absolute, opacity 0) — тап попадает
   прямо в input, и системный выбор файла открывает сам браузер.
   Это надёжнее, чем input внутри label: в PWA на iOS синтетический
   input.click() из обработчика label пикер не открывает.
   opacity 0 вместо display:none — iOS не открывает пикер у скрытых input'ов. */
.attach-wrap { position: relative; display: inline-flex; flex: none; }
.fileinput {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 2; font-size: inherit;
}
button.attach { background: transparent; color: var(--mut); font-size: 24px; padding: 4px 8px; }
label.attach {
  display: flex; align-items: center; justify-content: center;
  color: var(--mut); font-size: 22px; line-height: 1; padding: 0 2px;
  flex: none; cursor: pointer; user-select: none;
}
label.attach:active { opacity: .6; }
/* --- меню вложений: одна кнопка в композере, выбор во всплывающей панели --- */
.attach-btn { background: transparent; color: var(--mut); font-size: 22px; }
.attach-btn:active { background: var(--ov1); }
button.attach.on { background: var(--ov2); }
.attach-menu {
  display: flex; gap: 10px; padding: 8px 10px; overflow-x: auto;
  background: var(--bg2); border-top: 1px solid var(--line);
  overscroll-behavior-x: contain;
}
.attach-menu[hidden] { display: none; }
.att-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; flex: none; min-width: 66px; padding: 8px 10px;
  border-radius: 14px; background: var(--ov1);
  color: var(--mut); font-size: 11px; line-height: 1.1;
  cursor: pointer; user-select: none; white-space: nowrap;
}
.att-item:active { background: var(--ov2); }
.att-ico { font-size: 21px; line-height: 1; }
/* «Камера» раскрывает выбор фото/видео прямо на месте */
.cam-wrap { position: relative; }
button.att-item { border: none; background: var(--ov1); font-family: inherit; }
.cam-sub {
  display: flex; gap: 10px; flex: none;
  padding-left: 10px; margin-left: 2px;
  border-left: 1px solid var(--line);
}
.cam-sub[hidden] { display: none; }
button.att-item.cam-toggle.on { background: var(--ov2); color: var(--fg); }
@media (max-width: 520px) {
  .composer { gap: 0; padding: 6px 6px; }
  label.attach { font-size: 18px; padding: 0; width: 24px; }
  .composer textarea {
    font-size: 15px; padding: 8px 12px; line-height: 20px;
    padding-right: 40px;
    height: var(--composer-h); min-height: var(--composer-h); border-radius: 19px;
  }
  /* кнопки на телефоне 38px — поле в том же размере */
  :root { --composer-h: 38px; }
  button.send { width: 38px; height: 38px; }
  .attach-menu { gap: 8px; padding: 6px; }
  .att-item { min-width: 58px; padding: 7px 8px; font-size: 10px; }
  .att-ico { font-size: 19px; }
}
button.send { background: var(--acc); color: #fff; width: 42px; height: 42px; border-radius: 50%; flex: none; font-size: 16px; }
button.send.mic { background: transparent; color: var(--mut); font-size: 22px; }
/* Голосовое и кружок — узкой колонкой: две маленькие кнопки одна над другой.
   Так они занимают по ширине одну кнопку, и поле ввода остаётся широким. */
.mic-col {
  display: flex; flex-direction: column; gap: 2px; flex: none;
  align-items: center; justify-content: center;
}
button.send.mic.mini {
  width: 26px; height: 20px; border-radius: 8px; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
button.send.mic.mini.on { width: 26px; height: 20px; }
button.send.mic:active { background: var(--ov1); }
button.send.mic.on { background: #e53935; color: #fff; animation: micPulse 1.2s infinite; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,57,53,.5); } 50% { box-shadow: 0 0 0 7px rgba(229,57,53,0); } }

/* панель записи голосового */
.rec-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--bg2); border-top: 1px solid var(--line);
}
.rec-dot {
  background: transparent; color: var(--mut); font-size: 20px;
  width: 34px; height: 34px; border-radius: 50%; flex: none;
}
.rec-time { color: var(--mut); font-size: 13px; font-variant-numeric: tabular-nums; flex: none; min-width: 34px; }
.rec-wave {
  flex: 1 1 auto; height: 28px; min-width: 0;
  background: linear-gradient(90deg, var(--acc) 0 2px, transparent 2px 5px);
  opacity: .8;
}
.rec-send { background: var(--acc); color: #fff; width: 38px; height: 38px; border-radius: 50%; flex: none; font-size: 15px; }
.rec-send:active { background: var(--acc2); }
@media (max-width: 520px) { button.send.mic { width: 38px; height: 38px; font-size: 19px; } }
/* Видеокружок: превью камеры кругом, как в Telegram */
.note-bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--bg2); border-top: 1px solid var(--line);
}
.note-prev {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  background: #000; flex: none; border: 2px solid var(--acc);
}
.note-side { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Запасной путь записи кружка, когда браузер не даёт доступ к камере */
.note-fallback {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--bg2); border-top: 1px solid var(--line);
}
.note-fallback[hidden] { display: none; }
.note-fb-text { flex: 1 1 160px; font-size: 13px; color: var(--mut); }
.note-fb-go {
  padding: 8px 14px; border-radius: 12px; border: none;
  background: var(--acc); color: #fff; font-size: 14px; font-family: inherit;
}
.note-fb-no {
  padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: transparent; color: var(--mut); font-size: 14px; font-family: inherit;
}
.note-btns { display: flex; gap: 12px; align-items: center; }
button.send:active { background: var(--acc2); }
.att { padding: 6px 14px 10px; font-size: 13px; color: var(--mut); background: var(--bg2); }

/* Ожидающее сообщение с вложением: имена файлов и прогресс загрузки */
.att-pending { margin: 2px 0 4px; }
.att-pending .att-name {
  font-size: 13px; color: var(--mut); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
}
.att-pending .att-prog { font-size: 12px; color: var(--acc); margin-top: 2px; }

/* Превью вложения перед отправкой */
.att-previews {
  display: flex; gap: 8px; flex-wrap: wrap; flex: none;
  padding: 8px 12px; background: var(--bg2);
}
.att-prev {
  position: relative; border-radius: 10px; overflow: hidden;
  max-width: 110px; border: 1px solid var(--line);
}
.att-thumb { width: 110px; height: 110px; object-fit: cover; display: block; }
.att-file {
  font-size: 12px; color: var(--mut); padding: 10px 12px;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.att-x:active { background: rgba(0,0,0,.8); }
.reply-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--bg2); border-top: 1px solid var(--line); font-size: 13px; color: var(--mut);
}
.reply-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar::before { content: "↩"; color: var(--acc); flex: none; }

.av-sm {
  padding: 0; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: linear-gradient(145deg, #4b6a88, #2c4257); color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: 14px;
  background-size: cover; background-position: center;
  overflow: hidden;
}
/* Кнопка-аватар в шапке чата: button.gost сильнее по специфичности, чем
   .av-sm, и его background: transparent сбрасывал background-size — фото
   показывалось не кадрированным, а обрезанным по левому верхнему углу. */
button.av-sm, button.ghost.av-sm {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-head { padding: 22px 18px 18px; text-align: center; background: var(--bg2); border-bottom: 1px solid var(--line); }
.big-avatar {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 12px;
  background: linear-gradient(145deg, #4b6a88, #2c4257); color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: 36px;
  background-size: cover; background-position: center; position: relative;
}
.profile-name { font-size: 19px; font-weight: 600; margin-top: 4px; word-break: break-word; }
.profile-status { font-size: 13.5px; margin-top: 4px; }
.profile-extras { font-size: 12.5px; margin-top: 6px; }

.media-list.col .media-card { padding: 10px 12px; }
.media-card.file { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--bg3); border-radius: 12px; }
.media-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 4px; overflow-y: auto; flex: 1; }
.media-list.col { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; overflow-y: auto; flex: 1; }
.media-card {
  position: relative; aspect-ratio: 1; background: var(--bg3); border-radius: 6px;
  background-size: cover; background-position: center; cursor: pointer; overflow: hidden;
}
.media-card.row { aspect-ratio: auto; padding: 10px 12px; border-radius: 12px; }
.media-card .mc-info {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent); color: #fff; font-size: 12px;
}
.media-card.voice { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg3); color: var(--fg); aspect-ratio: auto; }
.media-card.voice .voice-time { font-size: 13px; color: var(--mut); }
.media-card.voice .voice-name { font-weight: 500; }
.media-card.link { aspect-ratio: auto; padding: 10px 12px; }
/* голосовое в медиа-вкладках: плеер внутри карточки */
.media-tile-doc.voice .aud-wrap,
.media-card.voice .aud-wrap { margin-top: 6px; display: flex; width: 320px; max-width: 100%; }
.media-tile-doc.voice audio,
.media-card.voice audio { width: 100%; height: 34px; display: block; }
.media-tile-doc.voice .dl,
.media-card.voice .dl { font-size: 12px; color: var(--acc); }
/* имя отправителя в общем чате открывает его карточку */
.sender-link { color: var(--acc); cursor: pointer; }
.sender-link:active { opacity: .7; }
.link-title { color: var(--acc); font-weight: 600; word-break: break-word; }
.link-domain { font-size: 12px; color: var(--mut); margin-top: 2px; }
.day-sep {
  align-self: center; margin: 14px auto; padding: 4px 10px; border-radius: 10px;
  background: rgba(58,160,255,.16); color: var(--acc); font-size: 12.5px; font-weight: 600;
}
/* ---------- живой прогресс бота (EphemeralMessage) ---------- */
.eph-bar {
  margin: 0 14px 6px; padding: 8px 12px;
  border-radius: 12px; background: var(--card);
  border: 1px solid var(--line);
  font-size: 13px; line-height: 1.45; color: var(--dim);
  max-height: 34vh; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
}
.eph-bar[hidden] { display: none !important; }
.eph-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; opacity: .85; }
.eph-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ea1ff; animation: ephpulse 1.1s ease-in-out infinite; }
@keyframes ephpulse { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.eph-body { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; }

/* ---------- пересылка: шторка выбора чата ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-panel {
  width: 100%; max-width: 520px; max-height: 82vh;
  background: var(--bg1); border-radius: 16px 16px 0 0;
  opacity: 1;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -8px 30px rgba(0,0,0,.35);
}
.sheet-panel .list { overflow-y: auto; }
.fwd-row .mid { flex: 1; min-width: 0; }
.fwd-row .t1 { display: flex; align-items: baseline; gap: 8px; }
.fwd-row .name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwd-row .fwd-kind { font-size: 12px; color: var(--mut); flex: none; }
.fwd-sec {
  padding: 12px 10px 6px; font-size: 12px; font-weight: 700;
  color: var(--mut); text-transform: uppercase; letter-spacing: .04em;
  position: sticky; top: 0; background: var(--bg1);
}
.fwd-more {
  padding: 12px 14px; text-align: center; color: var(--acc, #4a9eff);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.fwd-more:active { opacity: .6; }
.fwd-row .prev { color: var(--mut); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 880px) {
  .sheet { align-items: center; }
  .sheet-panel { border-radius: 16px; max-height: 76vh; }
}

/* ---------- всплывашка ---------- */
.toast {
  position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%);
  z-index: 90; background: var(--toast-bg); color: var(--toast-fg);
  padding: 10px 16px; border-radius: 12px; font-size: 13.5px;
  max-width: 88vw; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.4);
}

/* ---------- статус загрузки файла ---------- */
.dlstat {
  position: fixed; right: 14px; bottom: 84px; z-index: 95;
  min-width: 190px; max-width: 76vw;
  background: var(--toast-bg); color: var(--toast-fg);
  border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  font-size: 13px;
}
.dlstat-name {
  font-weight: 600; margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dlstat-bar {
  height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(127,127,127,.35);
}
.dlstat-bar i {
  display: block; height: 100%; width: 0%;
  background: #4c9aff; transition: width .18s linear;
}
.dlstat-pct { margin-top: 5px; opacity: .8; font-size: 12px; }

/* ---------- видео: плитки и просмотрщик ---------- */
.media-tile.vid-tile {
  position: relative; cursor: pointer; overflow: hidden;
  background: #111 center/cover no-repeat;
}
.media-tile .vt-thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.media-tile .vt-dur {
  position: absolute; right: 6px; bottom: 6px; font-size: 11px;
  background: rgba(0,0,0,.6); color: #fff; padding: 1px 6px; border-radius: 6px;
}
.media-tile .vt-play {
  position: absolute; inset: 0; margin: auto; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  padding-left: 3px;
}
.viewer {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px;
}
.viewer video { max-width: 96vw; max-height: 82vh; width: auto; background: #000; border-radius: 8px; }
.viewer #viewer-img {
  max-width: 96vw; max-height: 82vh; display: block; border-radius: 8px;
  object-fit: contain; user-select: none; -webkit-user-drag: none;
}
.viewer .v-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 64px; border: 0; border-radius: 10px;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 34px; line-height: 1;
  cursor: pointer; z-index: 2;
}
.viewer .v-nav:hover { background: rgba(0, 0, 0, .7); }
.viewer .v-prev { left: 12px; }
.viewer .v-next { right: 12px; }
.viewer .v-count {
  position: absolute; top: 14px; right: 58px; color: #fff;
  background: rgba(0, 0, 0, .45); padding: 4px 10px; border-radius: 12px;
  font-size: 13px; z-index: 2;
}
.viewer .v-close {
  position: absolute; top: 12px; right: 14px; color: #fff; font-size: 20px;
  background: rgba(255,255,255,.12); border-radius: 50%; width: 36px; height: 36px;
}
.viewer .v-cap { color: #ddd; font-size: 13px; text-align: center; }

/* ---------- версия сборки / обновление ---------- */
.build-line {
  font-size: 9px;
  line-height: 1;
  opacity: .3;
  padding: 0 8px;
  text-align: center;
  border-top: 1px solid var(--bg3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* строка сборки прижата к низу без зазора: снизу только безопасная
     зона телефона, иначе под ней остаётся заметный пустой пробел */
  margin-bottom: env(safe-area-inset-bottom);
}
.verbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--verbar-bg);
  color: var(--verbar-fg);
}
.verbar #ver-text { flex: 1 1 auto; }
.verbar button {
  flex: none;
  color: var(--verbar-fg);
  border-color: currentColor;
}

/* ---------- аккаунты ---------- */
.topbar .me-btn {
  background: transparent; border: 0; color: var(--fg); text-align: left;
  padding: 0; cursor: pointer; font-family: inherit;
}
.topbar .me-btn::after { content: " ▾"; color: var(--mut); font-size: 12px; }
.acc-row .mid { flex: 1; min-width: 0; }
.acc-row .t1 { display: flex; align-items: baseline; gap: 8px; }
.acc-row .name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-row.active { background: var(--bg3); }
.acc-row.active .name { color: var(--acc); }
.acc-add { padding: 10px 12px; border-top: 1px solid var(--line); }
button.wide { width: 100%; }
.acc-new-box { padding: 10px 12px 16px; border-top: 1px solid var(--line); text-align: center; }
.acc-new-box img { width: 220px; max-width: 100%; height: auto; margin: 10px auto; border-radius: 10px; background: #fff; }
.acc-new-box input { width: 100%; margin: 8px 0; }
.acc-del { background: transparent; border: 0; color: var(--mut); font-size: 15px; padding: 4px 8px; flex: none; }
.acc-del:hover { color: #e26a6a; }

/* ---- приватность ---- */
.privacy-box {
  margin: 4px 14px 20px;
  padding: 12px 14px;
  border: 1px solid var(--line, rgba(127, 145, 168, .25));
  border-radius: 12px;
  background: var(--bg1);
}
.privacy-title { font-weight: 600; margin-bottom: 6px; }
.privacy-box .muted { margin: 0 0 8px; font-size: 13px; }
.privacy-box .small { font-size: 12px; opacity: .8; }
button.wide { width: 100%; margin: 4px 0 8px; }

.dev-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.dev-row { display: flex; align-items: center; gap: 8px; justify-content: space-between;
  font-size: 12px; color: var(--t2); }
.dev-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-alert {
  border-left: 3px solid #e53935; background: rgba(229, 57, 53, .09);
  border-radius: 8px; padding: 8px 10px; margin-top: 6px;
}
.sec-alert .dev-name { color: #ff8a80; }
#btn-security { position: relative; }
.sec-badge {
  position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 8px; background: #e53935; color: #fff;
  font-size: 9px; line-height: 15px; text-align: center; font-weight: 700;
}

/* ---- сквозное шифрование переписки ---- */
.txt.enc { opacity: .7; font-style: italic; }
button.ghost.on { color: #4ade80; border-color: rgba(74, 222, 128, .5); }
.enc-panel { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.enc-panel .sheet-head { display: flex; align-items: center; justify-content: space-between; }
.enc-row { display: flex; gap: 8px; flex-wrap: wrap; }
.enc-row input { flex: 1 1 140px; min-width: 0; }
.enc-code .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; padding: 8px; border-radius: 8px; background: color-mix(in srgb, var(--fg) 8%, transparent); margin: 6px 0; }
.enc-panel .small { font-size: 12px; line-height: 1.4; }
button.danger { color: #f87171; }
.media.enc-file { cursor: pointer; }
.media.enc-file .dl { color: var(--acc); }
.enc-pic { max-width: 100%; border-radius: 10px; margin-top: 6px; display: block; }

/* ---------- ожидание подтверждения устройства ---------- */
/* Код подтверждения — крупно: человек переносит его в Telegram руками,
   мелкий моноширинный текст там легко перепутать. */
.code-box { margin: 14px 0; padding: 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 8%, transparent); }
.code-box .muted { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.code-box .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 34px; font-weight: 700; letter-spacing: .18em; margin-top: 6px;
  word-break: break-all; user-select: all; }
#s-approval .center { display: flex; flex-direction: column; gap: 10px; }
#s-approval .center > button { width: 100%; }
/* ввод кода из Telegram — как в веб-версии: крупное поле и кнопка */
#s-approval #appr-form { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
#s-approval #appr-form input {
  width: 100%; text-align: center; font-size: 28px; letter-spacing: .22em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 14px 12px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--fg);
}
#s-approval #appr-form button { width: 100%; }
.enc-vid { max-width: 100%; border-radius: 10px; margin-top: 6px; display: block; }

/* ---------- смайлики ---------- */
.emoji-btn { font-size: 17px; line-height: 1; }
.emoji-panel {
  /* часть потока: сжимает ленту, как клавиатура на телефоне */
  flex: none; background: var(--bg2); border-top: 1px solid var(--line);
  padding: 10px 12px 12px; max-height: 46vh; display: flex; flex-direction: column;
}
.emoji-panel[hidden] { display: none; }
.emoji-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.emoji-head input[type="search"] {
  flex: 1; min-width: 0; padding: 7px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg3); color: var(--fg); font-size: 14px;
}
.emoji-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 2px; overflow-y: auto; align-content: start; min-height: 0;
}
.emoji-cell {
  border: 0; background: transparent; font-size: 22px; line-height: 1;
  padding: 7px 0; border-radius: 8px; cursor: pointer; min-width: 0; color: inherit;
}
.emoji-cell:hover, .emoji-cell:active { background: rgba(127,127,127,.18); }
@media (max-width: 879px) {
  .emoji-panel { max-height: 55vh; }
  .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
}
/* ---------- своё закрепление чата ---------- */
.pin-mark { font-size: 11px; flex: none; }
.row .row-pin {
  flex: none; align-self: center; border: 0; background: transparent;
  font-size: 13px; opacity: 0; cursor: pointer; padding: 6px 2px 6px 6px;
  color: var(--mut); transition: opacity .12s;
}
.row:hover .row-pin { opacity: .55; }
.row .row-pin.on { opacity: 1; }
.row .row-pin:hover { opacity: 1; }
.row.mypin { background: color-mix(in srgb, var(--acc) 8%, transparent); }

/* ручка перетаскивания у закреплённых чатов */
.row-grip {
  flex: none; width: 14px; align-self: stretch;
  display: grid; place-items: center;
  color: var(--mut); font-size: 13px; line-height: 1;
  cursor: grab; touch-action: none; user-select: none;
  opacity: .55;
}
.row-grip:active { cursor: grabbing; opacity: 1; }
.row.dragging {
  background: color-mix(in srgb, var(--acc) 16%, var(--bg2));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  border-radius: 14px;
}
body.pin-dragging { user-select: none; -webkit-user-select: none; }
body.pin-dragging .row { transition: none; }
#btn-pin.on { color: var(--acc); border-color: var(--acc); }
@media (hover: none) { .row .row-pin { opacity: .5; } }
.me-wrap { min-width: 0; flex: 1; }
.me-sub {
  font-size: 11.5px; color: var(--mut); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.me-wrap .me { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- расшифровка голосовых ---------- */
.v-tbtn {
  align-self: flex-start; margin-top: 6px; padding: 5px 11px; font-size: 13px;
  border: 1px solid var(--acc); background: transparent; color: var(--acc);
  border-radius: 12px; cursor: pointer;
}
.v-tbtn:disabled { opacity: .55; cursor: default; }
.v-transcript {
  margin-top: 6px; padding: 8px 11px; font-size: 13.5px; line-height: 1.42;
  background: var(--bg3); border-radius: 11px; white-space: pre-wrap; word-break: break-word;
  border-left: 2px solid var(--acc);
}
/* ---------- истории (Stories) ---------- */
.stories{display:flex;gap:6px;overflow-x:auto;padding:4px 10px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.stories[hidden]{display:none}
.st-item{flex:0 0 auto;width:48px;text-align:center;cursor:pointer}
.st-ring{width:44px;height:44px;border-radius:50%;padding:2px;margin:0 auto 2px;
  background:var(--ring);box-sizing:border-box}
.st-item.unread .st-ring{background:linear-gradient(135deg,#37b7f0,#8a5cf0)}
.st-item.viewed .st-ring{background:var(--ring)}
.st-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  background:#cfd6dc;border:2px solid var(--bg,#111)}
.st-ava-f{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:#2b3540;color:#fff;font-size:22px;
  border:2px solid var(--bg,#111);box-sizing:border-box}
.st-item span{display:block;font-size:10px;line-height:1.2;color:var(--muted,#93a1ad);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.st-viewer{position:fixed;inset:0;z-index:120;background:#0b0d10;
  display:flex;align-items:center;justify-content:center}
.st-viewer[hidden]{display:none}
.st-top{position:absolute;top:0;left:0;right:0;z-index:3;padding:10px 12px;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0))}
.st-bars{display:flex;gap:4px;margin-bottom:8px}
.st-bars i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.28)}
.st-bars i.on{background:#fff}
.st-who{display:flex;align-items:center;gap:8px;color:#fff;font-size:14px}
.st-ava{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#2b3540}
.st-time{color:rgba(255,255,255,.6);font-size:12px}
.st-close{margin-left:auto;color:#fff;font-size:18px;background:none;border:0;padding:4px 8px}
.st-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.st-stage img,.st-stage video{max-width:100%;max-height:100%;object-fit:contain;display:block}
.st-stage img[hidden],.st-stage video[hidden]{display:none}
.st-cap{position:absolute;left:0;right:0;bottom:12%;padding:0 16px;color:#fff;
  text-align:center;font-size:14px;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:pre-wrap}
.st-cap[hidden]{display:none}
.st-nav{position:absolute;top:0;bottom:0;width:22%;max-width:96px;border:0;
  background:transparent;color:rgba(255,255,255,.55);font-size:34px;z-index:2;
  display:flex;align-items:center;justify-content:center}
.st-prev{left:0}
.st-next{right:0}
.st-nav:active{background:rgba(255,255,255,.07)}
.st-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:5px;
  justify-content:center;z-index:3}
.st-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}
.st-dots i.on{background:#fff}
@media (max-width:879px){
  .st-item{width:44px}
  .st-ring{width:40px;height:40px}
}

/* переключатель настроек */
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;margin:6px 0 2px}
.opt-row label{font-size:14px;cursor:pointer;flex:1}
/* выпадающий список в настройках: как кнопка, но со стрелкой */
.sel{
  appearance:none;-webkit-appearance:none;
  background:var(--bg3);border:1px solid var(--line);color:var(--fg);
  border-radius:12px;padding:9px 30px 9px 12px;font:inherit;font-size:14px;
  cursor:pointer;flex:0 0 auto;max-width:60%;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.sel:focus{border-color:var(--acc);outline:none}
.switch{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:12px;
  background:var(--switch-off);position:relative;cursor:pointer;transition:background .18s;flex:0 0 auto}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .18s}
.switch:checked{background:var(--acc)}
.switch:checked::after{transform:translateX(18px)}

/* --- истории: перемотка и архив --- */
.st-video::-webkit-media-controls-panel { background: rgba(0,0,0,.35); }
#st-video { width:100%; height:100%; object-fit:contain; background:#000; }
#st-video:fullscreen, #st-video:-webkit-full-screen { object-fit:contain; }
.st-arc {
  background: rgba(255,255,255,.14); color:#fff; border:0; border-radius:14px;
  padding:5px 11px; font-size:12.5px; font-weight:600; cursor:pointer;
}
.st-arc:hover { background: rgba(255,255,255,.24); }
.st-arcview {
  position:absolute; inset:0; background:rgba(0,0,0,.94); z-index:5;
  overflow-y:auto; padding:14px; -webkit-overflow-scrolling:touch;
}
.st-arcview[hidden]{ display:none; }
.st-arctitle { color:#fff; font-size:14px; font-weight:600; margin-bottom:12px; opacity:.9; }
.st-arcgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.st-arcgrid .arc {
  position:relative; aspect-ratio:9/16; border-radius:8px; overflow:hidden;
  background:#222; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px;
}
.st-arcgrid .arc img { width:100%; height:100%; object-fit:cover; }
.st-arcgrid .arc .arc-play { position:absolute; inset:auto 0 0 0; padding:3px 6px;
  font-size:10.5px; background:linear-gradient(transparent,rgba(0,0,0,.75)); color:#fff; }
.st-arcgrid .arc .arc-vid { position:absolute; top:4px; right:5px; font-size:11px; }
.st-arcempty { grid-column:1/-1; color:#9aa0a6; font-size:13px; text-align:center; padding:28px 0; }

.st-seekbar {
  position:absolute; left:0; right:0; bottom:0; z-index:6;
  display:flex; align-items:center; gap:9px; padding:10px 14px 14px;
  background:linear-gradient(transparent, rgba(0,0,0,.55));
}
.st-seekbar[hidden]{ display:none; }
.st-seekbar .st-time { color:#fff; font-size:11.5px; min-width:34px; text-align:center;
  opacity:.85; font-variant-numeric:tabular-nums; }
.st-seek {
  position:relative; flex:1; height:22px; display:flex; align-items:center; cursor:pointer;
  touch-action:none;
}
.st-seek::before {
  content:""; position:absolute; left:0; right:0; height:3px; border-radius:3px;
  background:rgba(255,255,255,.32);
}
.st-seekfill { position:absolute; left:0; height:3px; border-radius:3px;
  background:#fff; width:0; pointer-events:none; }
.st-seekdot {
  position:absolute; width:11px; height:11px; border-radius:50%; background:#fff;
  left:0; margin-left:-5.5px; pointer-events:none;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* ---------- слои шторок ----------
   Окна подтверждения (пароль/код) должны быть ВЫШЕ шторки аккаунтов.
   Иначе при добавлении второго аккаунта сервер просит подтверждение,
   а окно ввода кода оказывается под списком аккаунтов — человек видит
   «ничего не происходит» и добавляние зависает. */
#acc-sheet { z-index: 60; }
#reauth-sheet, #code-sheet { z-index: 82; }
.viewer { z-index: 84; }

/* подсказка при перетаскивании файла в чат с рабочего стола */
#s-chat.drop-file::after {
  content: "Отпустите файл — он прикрепится к сообщению";
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: var(--drop-bg); color: #fff; font-size: 15px;
  border: 2px dashed rgba(255, 255, 255, .5); border-radius: 12px;
  pointer-events: none; text-align: center; padding: 24px;
}

/* ---------- галерея фотографий профиля ---------- */
.prof-gal {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.92);
  display: flex; flex-direction: column; padding: 14px 12px 18px;
}
.prof-gal .v-close { position: absolute; top: 10px; right: 10px; font-size: 22px; }
.prof-gal-title { text-align: center; color: #fff; opacity: .85; margin-bottom: 10px; }
.prof-gal-grid {
  flex: 1; overflow-y: auto; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  align-content: start;
}
.prof-gal-item { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: pointer; }

/* ---------- звонок ---------- */
/* Экран звонка — на весь телефон, как блокировка телефона: имя,
   крупные кнопки ответа и отбоя. Раньше это был маленький оверлей
   посреди чата, и телефон не «уходил в режим звонка». */
.call-in,.call-on{position:fixed;inset:0;z-index:140;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:24px;color:#fff;text-align:center;
  background:linear-gradient(180deg,#0f1419 0%,#141c25 60%,#0b1014 100%)}
.call-in[hidden],.call-on[hidden],.call-toast[hidden]{display:none}
.call-name{font-size:22px;font-weight:600}
.call-sub{margin-top:4px;font-size:14px;color:rgba(255,255,255,.65)}
.call-btns{display:flex;gap:22px;justify-content:center;margin-top:28px}
.call-btn{width:66px;height:66px;border-radius:50%;border:0;font-size:26px;
  background:#2a3541;color:#fff;cursor:pointer}
.call-btn:active{filter:brightness(1.25)}
.call-btn.end{background:#d64545}
.call-btn.acc{background:#2ea86b}
.call-btn.mute{background:#3a4652}
.call-btn.spk{background:#2b6ea8}
.call-btn.spk.off{background:#3a4652}
.call-ico{font-size:64px;margin-bottom:6px;opacity:.9}
.call-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:150;padding:10px 16px;border-radius:12px;background:#232c36;color:#fff;
  font-size:13px;max-width:88vw;text-align:center}

/* ---------- индикатор загрузки ---------- */
/* Пока приложение грузится, человек видел пустой экран и не понимал,
   грузится оно или зависло. Плашка поверх экрана снимает вопрос. */
.boot-load {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--bg); color: var(--mut); font-size: 14px;
}
.boot-load[hidden] { display: none; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--acc);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* ---------- контекстное меню сообщения (как в Telegram) ---------- */
.msg-menu-panel { max-height: 78vh; display: flex; flex-direction: column; }
.msg-menu-list { overflow-y: auto; padding: 6px 0 2px; }
.msg-menu-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; font-size: 15px; color: var(--fg);
  background: none; border: 0; width: 100%; text-align: left;
  cursor: pointer;
}
.msg-menu-item:active { background: var(--bg2); }
.msg-menu-item.danger { color: #e05a5a; }
.msg-menu-item .mi-ico { width: 22px; text-align: center; font-size: 17px; flex: none; }
.msg-menu-cancel { margin: 4px 10px 10px; width: auto; }

/* Выделение текста в сообщении должно работать как в Telegram:
   текст выделяется, а ответ ставится свайпом влево по сообщению. */
.msg { -webkit-user-select: text; user-select: text; }
.msg .txt { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.msg .meta, .msg .fwd-from, .msg .tp-label {
  -webkit-user-select: none; user-select: none;
}
/* Перевод сообщения показывается под текстом. */
.msg-translated {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--dim); white-space: pre-wrap; word-break: break-word;
}

/* ---------- выбор участников из контактов (как в Telegram) ----------
   Список виртуальный: в DOM только видимые строки, поэтому подписи
   позиционируются внутри контейнера фиксированной высоты. */
.contpick { display: flex; flex-direction: column; gap: 8px; }
.contpick-label {
  font-size: 12px; color: var(--dim); text-transform: uppercase;
  letter-spacing: .04em; margin-top: 2px;
}
.contpick-list {
  position: relative; overflow-y: auto; max-height: 240px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);
}
.contpick-list[hidden] { display: none; }
.contpick-inner { position: relative; width: 100%; }
.ct-row {
  position: absolute; left: 0; right: 0; height: 44px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; cursor: pointer;
}
.ct-row:active { background: var(--line); }
.ct-check {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--dim); color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.ct-row.on .ct-check { background: var(--acc); border-color: var(--acc); }
.ct-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-sub { flex: none; color: var(--dim); font-size: 12px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 14px; font-size: 13px;
  background: var(--bg2); border: 1px solid var(--line);
}
.ct-chip b { cursor: pointer; color: var(--dim); font-weight: 400; }
.form-hint { color: var(--dim); font-size: 12px; min-height: 14px; }

/* ---------- режим выбора сообщений (как в Telegram) ---------- */
/* Шапка режима выбора: крестик, счётчик выбранных и «Все». */
.sel-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; background: var(--bg2); border-bottom: 1px solid var(--line);
}
.sel-count { flex: 1; font-size: 14px; font-weight: 600; color: var(--fg); }
/* Панель действий снизу вместо поля ввода. */
.sel-panel {
  display: flex; align-items: stretch; gap: 4px; padding: 6px 8px;
  background: var(--bg2); border-top: 1px solid var(--line);
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}
.sel-act {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: none; color: var(--mut);
  font-size: 18px; padding: 6px 2px; cursor: pointer; border-radius: 10px;
}
.sel-act span { font-size: 11px; }
.sel-act:disabled { opacity: .35; }
.sel-act.danger { color: var(--danger); }
.sel-act:not(:disabled):active { background: var(--ov1); }
/* Отметка выбора — кружок слева от текста внутри сообщения. */
.msg.selmode { position: relative; padding-left: 36px; }
.msg .sel-mark {
  position: absolute; left: 9px; top: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--dim); color: transparent;
  font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.msg.sel .sel-mark { background: var(--acc); border-color: var(--acc); color: #fff; }
/* Выбранное сообщение подсвечивается, как в Telegram. */
.msg.sel { border-color: var(--acc); background: var(--bg3); }
.msg.out.sel { background: var(--acc2); border-color: var(--acc); }

/* ---------- поиск по сообщениям внутри чата ---------- */
.chat-search {
  flex: none;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  max-height: 55%;
  display: flex;
  flex-direction: column;
}
.chat-search[hidden] { display: none; }
.chat-search-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 4px 12px;
}
.chat-search-head input {
  flex: 1;
  padding: 9px 12px;
  border-radius: 12px;
}
.chat-search-status { padding: 2px 14px 4px; }
.chat-search-list { overflow-y: auto; flex: 1; min-height: 0; }
.chat-search-list .row { cursor: pointer; }
.chat-search-list .row.on { background: var(--bg2); }
.chat-search-list .prev { white-space: pre-wrap; word-break: break-word; }
.chat-search-list mark { background: var(--acc); color: #fff; border-radius: 3px; }

/* Панель «Добавить участников» в групповом чате (как в Telegram) */
.addmem-bar { padding: 0 10px 8px; }
.addmem-bar[hidden] { display: none; }
.addmem-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.addmem-btn:active { opacity: .85; }