:root {
  /* высота поля ввода в покое = высота кнопок композера (42px / 38px) */
  --composer-h: 42px;
  --bg: #0e1621;
  --bg2: #16202c;
  --bg3: #1d2935;
  --line: #24313f;
  --fg: #e9eef4;
  --mut: #8fa3b7;
  --acc: #3aa0ff;
  --acc2: #2b7fd4;
  --out: #2b5278;
  --danger: #ff6b6b;
  --bg1: #0e1621;      /* фон экранов (раньше переменная не была объявлена — панели были прозрачными) */
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f4f7fa; --bg2:#ffffff; --bg3:#e9eff5; --line:#dbe4ec; --fg:#12212e; --mut:#5d7285; --out:#d7ecff; --bg1:#f4f7fa; }
}
* { 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; }
  /* центрируем по вертикали, но когда контент не влезает — начинаем сверху
     и даём прокрутку, иначе верх и низ обрезаются безвозвратно */
  #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; }
.hint { color: var(--mut); font-size: 12.5px; margin: 12px 0 0; max-width: 32ch; }

.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); }

.statusbar { padding: 8px 14px; font-size: 13px; background: #7a4d00; color: #ffd591; }
.statusbar.ok { background: #0d5c3f; color: #b8f2d8; }

.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; }
.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 20px; }
.row { display: flex; gap: 12px; padding: 10px; border-radius: 14px; cursor: pointer; align-items: center; }
.row:active { background: var(--bg3); }
.av {
  width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, #4b6a88, #2c4257); color: #fff; font-weight: 600; font-size: 17px;
  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;
}
.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.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: rgba(127,127,127,.12); 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: rgba(127,127,127,.16); 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: rgba(127,127,127,.16); 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: rgba(255,255,255,.08);
  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: #4a9eff; }
.msg .media.doc audio { width: 100%; max-width: 260px; height: 34px; }
.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: rgba(255,255,255,.08); 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: rgba(255,255,255,.06);
  border-radius: 8px; font-size: 12.5px; color: var(--mut); margin-bottom: 4px;
}
.msg.out .reply-quote { background: rgba(0,0,0,.18); color: rgba(255,255,255,.85); }
.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-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; } }

.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);
}
.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;
}
/* Кнопка вложения: обёртка + иконка + поле файла.
   Поле лежит ПОВЕРХ иконки (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: rgba(255,255,255,.08); }
button.attach.on { background: rgba(255,255,255,.12); }
.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: rgba(255,255,255,.05);
  color: var(--mut); font-size: 11px; line-height: 1.1;
  cursor: pointer; user-select: none; white-space: nowrap;
}
.att-item:active { background: rgba(255,255,255,.14); }
.att-ico { font-size: 21px; line-height: 1; }
@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;
    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; }
button.send.mic:active { background: rgba(255,255,255,.08); }
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; } }
button.send:active { background: var(--acc2); }
.att { padding: 6px 14px 10px; font-size: 13px; color: var(--mut); background: var(--bg2); }

/* Превью вложения перед отправкой */
.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 rgba(255,255,255,.08);
}
.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;
}

.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; }
.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, #1b1f27);
  border: 1px solid var(--line, #2b3140);
  font-size: 13px; line-height: 1.45; color: var(--dim, #9aa3b2);
  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: rgba(20,25,32,.95); color: #fff;
  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);
}

/* ---------- видео: плитки и просмотрщик ---------- */
.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: 11px;
  opacity: .45;
  padding: 6px 12px 10px;
  text-align: center;
}
.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: #2a4a7a;
  color: #fff;
}
.verbar #ver-text { flex: 1 1 auto; }
.verbar button {
  flex: none;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
@media (prefers-color-scheme: light) {
  .verbar { background: #d9e6f7; color: #12263d; }
  .verbar button { color: #12263d; border-color: rgba(18,38,61,.4); }
}

/* ---------- аккаунты ---------- */
.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: rgba(127,127,127,.14); 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: #60a5fa; }
.enc-pic { max-width: 100%; border-radius: 10px; margin-top: 6px; display: block; }
.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); }
#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:10px;overflow-x:auto;padding:8px 12px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.stories[hidden]{display:none}
.st-item{flex:0 0 auto;width:64px;text-align:center;cursor:pointer}
.st-ring{width:60px;height:60px;border-radius:50%;padding:2.5px;margin:0 auto 3px;
  background:#dfe3e6;box-sizing:border-box}
.st-item.unread .st-ring{background:linear-gradient(135deg,#37b7f0,#8a5cf0)}
.st-item.viewed .st-ring{background:#dfe3e6}
.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:11px;line-height:1.25;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:58px}
  .st-ring{width:54px;height:54px}
}

/* переключатель настроек */
.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}
.switch{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:12px;
  background:#3a4750;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:#2f7fd4}
.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);
}