/* vault — палитра 9 · Fog. mobile-first, AA-контраст. */
:root {
  --bg: #F5F6F7;
  --panel: #FCFCFD;
  --in: #E9ECEF;
  --out: #3D5A80;
  --acc: #3D5A80;
  --acc-ink: #FCFCFD;
  --text: #252A31;
  --dim: #5C6670;
  --muted: var(--dim);
  --line: #DFE3E8;
  --danger: #A23B32;
  --ok: #2E6B4F;
  --warn: #8A5A12;
  --acc-fill: var(--acc);
  --danger-fill: var(--danger);
  --ok-fill: var(--ok);
  --warn-fill: var(--warn);
  --r: 12px;
  color-scheme: light;
}

/* Тёмная тема: переопределяем палитру — компоненты на токенах переворачиваются целиком.
   Базовые --acc/--danger/--ok/--warn = текст/границы (светлее на тёмном);
   --*-fill = заливка под белый текст (насыщеннее). --acc-ink остаётся светлым. */
[data-theme="dark"] {
  --bg: #12151A;
  --panel: #1A1E25;
  --in: #252B34;
  --out: #33506F;
  --acc: #86ABD8;
  --acc-fill: #3D5A80;
  --acc-ink: #F4F7FA;
  --text: #E7EAEE;
  --dim: #A2ABB6;
  --line: #333B46;
  --danger: #E0776D;
  --danger-fill: #B23A32;
  --ok: #6FBF97;
  --ok-fill: #2E7D5B;
  --warn: #E0B15C;
  --warn-fill: #9A6A1E;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* stylelint-disable-next-line property-no-vendor-prefix -- префикс нужен iOS Safari <16.4 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; overscroll-behavior: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* stylelint-disable-next-line property-no-vendor-prefix -- префикс нужен iOS Safari <16.4 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* long-press по user-select:none зоне Chromium «откатывает» выделение к body → подсвечивается весь экран;
   базовый запрет на body закрывает и этот фолбэк, поля ввода/редактируемое возвращаем явно */
/* stylelint-disable-next-line property-no-vendor-prefix */
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

button, input, textarea { font: inherit; color: inherit; }

/* мобильный «нативный» отклик: убираем задержку двойного тапа и подсветку тапа */
button, .btn, a, .conv-item, .msg, .rail-btn, .mm-item, .search-item, .file-item, .back-btn, .theme-toggle, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* iOS Safari не приближает страницу при фокусе, только если шрифт поля ≥16px */
input, textarea, select { font-size: 16px; }
/* Поля сервисов идут с .small/.pgp-ta (12–13px) → iOS зумит страницу при фокусе (аудит 2026-11-07).
   Держим на контролах ≥16px (правило проекта «поля 16px»), не трогая .small у подписей/подсказок. */
.input.small, .input.pgp-ta, input.small, select.small, textarea.small { font-size: 16px; }

.muted { color: var(--dim); }
.mico { font-size: 13.5px; margin: 0 0 8px; }
.mico-l { margin: 6px 0 10px; padding-left: 22px; }
.mico-l li { margin: 0 0 7px; }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.ok { color: var(--ok); }
.bad { color: var(--danger); margin: 8px 0; }
.pad { padding: 16px; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
code { background: var(--in); padding: 1px 5px; border-radius: 6px; font-size: 12px; }

/* ---------- кнопки ---------- */
.btn {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, border-color 120ms;
}

.btn:hover { background: var(--in); }
.btn:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.btn.primary { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--acc-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: var(--danger-fill); border-color: var(--danger-fill); color: #fff; }
.btn.danger-ghost { color: var(--danger); border-color: currentcolor; background: none; }
.btn.danger-soft { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 34%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn.danger-soft:hover { background: color-mix(in srgb, var(--danger) 17%, transparent); }
.btn.ghost { background: none; }
.btn.wide { display: block; width: 100%; }
.btn.wide + .btn.wide { margin-top: 12px; }
.btn.small-btn { min-height: 36px; padding: 4px 10px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

input, textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}

textarea { min-height: 72px; resize: vertical; }

/* Чекбоксы и переключатели — не текстовые поля: правило выше (44px, padding, width:100%)
   раздувает их до размеров поля ввода. Возвращаем им вид элемента управления. */
input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  accent-color: var(--acc);
  cursor: pointer;
}

input[type="radio"] { border-radius: 50%; }

/* Строка-переключатель: вся строка — зона нажатия (не только квадратик) */
.chk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
  user-select: none;
}

.chk > input[type="checkbox"],
.chk > input[type="radio"] { margin-top: 2px; }

.ai-cfg label.chk { flex-direction: row; }

.file-pick input[type="file"] { display: none; }

select {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 8px 0;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background-color: var(--panel);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6670' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
}

select:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.kv select { margin: 0; max-width: 260px; }

/* ---------- экран входа ---------- */
.lock {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 8px);
}

.lock .page-head { margin: 0 -16px; }
.lock .auth-card { margin-top: 28px; }

.lock.hidden { display: none; }

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
}

.wide-card { max-width: 560px; text-align: left; }
.auth-logo { font-size: 40px; }
.auth-logo-img { border-radius: 18px; margin-bottom: 4px; }
.rail-logo { border-radius: 8px; }
.auth-card .logo-word { margin: 4px 0 8px; font-size: 30px; font-weight: 800; letter-spacing: 0.02em; }
.logo-word em { font-style: normal; color: var(--acc); }
.auth-card h1 { margin: 4px 0 8px; font-size: 26px; }
.auth-card h2 { margin-top: 0; }
.tagline { color: var(--dim); margin: 0 0 18px; }
.demo-note {
  background: var(--in);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--dim);
  margin-bottom: 16px;
}

.pw-meter { display: flex; gap: 6px; margin: 4px 0 12px; }

.pw-meter i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.pw-meter i.on { background: var(--acc-fill); }

 .phrase-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 6px;
   margin: 12px 0;
 }

 @media (min-width: 560px) {
   .phrase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }

 .phrase-w {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
   background: var(--in);
   border-radius: 8px;
   padding: 6px 10px;
   font-size: 14px;
 }

 .phrase-w i { color: var(--dim); font-size: 12px; font-style: normal; min-width: 18px; }
 .phrase-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
 .pw-txt { font-weight: 600; min-width: 0; overflow-wrap: break-word; }
.pw-copy {
  margin-left: auto; flex: 0 0 auto;
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--dim); cursor: pointer;
}
.pw-copy:hover { color: var(--acc); border-color: var(--acc); }
.pw-copy svg { width: 14px; height: 14px; }
.pw-copy.done { color: var(--ok, var(--acc)); border-color: var(--ok, var(--acc)); }
.pv-key-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pv-key-row { display: flex; align-items: stretch; gap: 6px; }
.pv-key-row input { flex: 1 1 auto; min-width: 0; }
.pv-key-row .pw-copy { margin-left: 0; font-size: 16px; line-height: 1; }

.confirm-row { display: flex; align-items: center; gap: 10px; }
.confirm-row span { flex: 0 0 90px; color: var(--dim); font-size: 13px; }
.confirm-row input { margin: 4px 0; }

/* ---------- каркас ---------- */
.app { display: grid; height: 100vh; height: 100dvh; overflow: hidden; grid-template-rows: minmax(0, 1fr); }
.app.hidden { display: none; }

.rail { display: none; }
.rail-ic { display: grid; place-items: center; }
.rail-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pane { background: var(--panel); min-width: 0; }
.pane-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  border-bottom: 1px solid var(--line);
}

.pane-head h2 { margin: 0; font-size: 17px; }
.pane-head p { margin: 2px 0 0; }
/* заголовок после кнопки «Назад» прижимается влево к кнопке, а не уезжает вправо (space-between) */
.pane-head > div:not(.head-actions, .chat-id) { flex: 1 1 auto; min-width: 0; }
.pane-head > div:not(.head-actions, .chat-id) h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-head > h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-head .head-actions { flex: 0 0 auto; min-width: 0; justify-content: flex-end; }
.demo-badge {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--dim);
  background: color-mix(in srgb, var(--dim) 12%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  text-align: center;
}

.demo-badge.wrap { white-space: normal; text-align: center; max-width: 46%; line-height: 1.35; }
.pane-head .demo-badge { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 480px) { .pane-head .demo-badge:not(.wrap) { display: none; } }

.count-badge {
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  border-radius: 999px;
}

.list-foot { padding: 12px; border-top: 1px solid var(--line); }

.fab {
  position: fixed;
  left: 108px;
  bottom: 24px;
  z-index: 35;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--acc-fill);
  color: var(--acc-ink);
  box-shadow: 0 6px 18px rgb(20 24 30 / .28);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  transition: filter 140ms, transform 140ms;
}

.fab:hover { filter: brightness(1.08); }
.fab:active { transform: scale(.94); }
.fab svg { width: 24px; height: 24px; }
.fab input[type="file"] { display: none; }
.fab-cap { position: fixed; left: 136px; transform: translateX(-50%); white-space: nowrap; text-align: center; font-size: 11px; line-height: 1.25; color: var(--dim); z-index: 35; bottom: 6px; pointer-events: none; }
.pane.list.drag-over { outline: 2px dashed var(--acc); outline-offset: -6px; }
.pane.list:has(.fab) .list-scroll { padding-bottom: 88px; }
.pane.list:has(.list-foot) .fab { bottom: 92px; }
.pane.list:has(.list-foot) .fab-cap { bottom: 70px; }

  .back-btn { display: none; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
  .back-btn .ic { display: block; width: 22px; height: 22px; }

@media (max-width: 1099px) {
  body[data-view="main"] .back-btn { display: inline-flex; }
  .pane-head .back-btn.home-btn { display: inline-flex; }
  body[data-view="main"] .pane.list { display: none; }
  body[data-view="list"] .pane.main { display: none; }
}

/* плавные переходы между экранами (как в нативном приложении) */
@keyframes pane-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

.pane-anim { animation: pane-in .2s cubic-bezier(.22, .61, .36, 1); }

@media (prefers-reduced-motion: reduce) { .pane-anim { animation: none; } }

/* список бесед/файлов: колонка с внутренней прокруткой (любое число блоков, любой вьюпорт) */
.pane.list { display: flex; flex-direction: column; min-height: 0; }
.pane.list > .pane-head, .pane.list > .fol-bar, .pane.list > .list-foot, .pane.list > .chat-search { flex: 0 0 auto; }
.conv-list, .list-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.list-sentinel { height: 1px; }

/* поиск по чатам: поле + живые подсказки (как в мессенджерах) */
.chat-search { position: relative; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.search-box { display: flex; align-items: center; gap: 8px; background: var(--in); border-radius: 12px; padding: 8px 12px; min-height: 40px; }
.search-box .ic { width: 18px; height: 18px; color: var(--dim); flex: 0 0 auto; }
.search-box input { flex: 1 1 auto; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); font-size: 16px; outline: none; }
/* stylelint-disable-next-line property-no-vendor-prefix */
.search-box input::-webkit-search-cancel-button, .search-box input::-webkit-search-decoration, .search-box input::-webkit-search-results-button { -webkit-appearance: none; appearance: none; }
.search-clear { flex: 0 0 auto; display: none; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--line); color: var(--dim); cursor: pointer; font-size: 14px; line-height: 1; }
.search-clear.on { display: grid; }
.search-res { position: absolute; left: 12px; right: 12px; top: calc(100% - 4px); max-height: min(60dvh, 420px); overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgb(20 24 30 / .14); z-index: 30; padding: 4px; }
.search-group { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.search-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; cursor: pointer; }
.search-item:hover, .search-item:focus-visible { background: var(--in); }
.search-item .conv-meta { min-width: 0; }
.search-kind { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty, .search-load { padding: 12px; text-align: center; color: var(--dim); font-size: 13px; }
.login-res { position: static; margin-top: 10px; max-height: 46vh; box-shadow: none; }
.peer-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.peer-head > div { min-width: 0; }
.peer-head h2 { margin: 0; overflow-wrap: anywhere; }
.peer-head .muted { margin: 2px 0 0; }
.peer-av { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; font-weight: 700; color: #fff; background: var(--acc-fill); overflow: hidden; }
.peer-av img, .peer-av video { width: 100%; height: 100%; object-fit: cover; }
.keybox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 4px 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--in); }
.key-label { flex: 0 0 100%; color: var(--dim); font-size: 13px; }
.key-code { flex: 1 1 200px; min-width: 0; font-size: 13px; line-height: 1.5; word-break: break-all; overflow-wrap: anywhere; user-select: all; }
.keybox .btn { flex: 0 0 auto; min-height: 40px; }
.ta-toolbar { display: flex; justify-content: flex-end; margin: 0 0 6px; }

.conv-item, .file-item, .log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
}

.conv-item:hover, .file-item:hover, .log-item:hover { background: var(--in); }
.conv-item.on { background: var(--in); box-shadow: inset 3px 0 0 var(--acc); }

/* выделение нескольких диалогов */
.conv-check { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--line-strong, var(--line)); border-radius: 50%; color: #fff; font-size: 13px; line-height: 1; }
.conv-item.sel { background: color-mix(in srgb, var(--acc) 14%, transparent); box-shadow: inset 3px 0 0 var(--acc-fill); }
.conv-item.sel .conv-check { background: var(--acc-fill); border-color: var(--acc-fill); }
.file-item.sel { background: color-mix(in srgb, var(--acc) 14%, transparent); box-shadow: inset 3px 0 0 var(--acc-fill); }
.file-item.sel .conv-check { background: var(--acc-fill); border-color: var(--acc-fill); }
.list-foot.center { text-align: center; }
.list-foot.center .btn { display: inline-flex; align-items: center; justify-content: center; width: auto; }
.list-foot.center .btn + .btn { margin-left: 8px; }
.upload-foot { display: flex; flex-direction: column; gap: 8px; }
.upload-zone { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px dashed color-mix(in srgb, var(--acc) 42%, var(--line)); border-radius: var(--r); background: color-mix(in srgb, var(--acc) 5%, var(--panel)); cursor: pointer; transition: background 140ms, border-color 140ms, box-shadow 140ms; }
.upload-zone:hover, .upload-zone:focus-within { background: color-mix(in srgb, var(--acc) 10%, var(--panel)); border-color: var(--acc); }
.upload-zone:active { background: color-mix(in srgb, var(--acc) 15%, var(--panel)); }
.upload-zone.drag { border-color: var(--acc); border-style: solid; background: color-mix(in srgb, var(--acc) 16%, var(--panel)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.upload-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--acc-fill); color: var(--acc-ink); flex: 0 0 auto; transition: filter 140ms, transform 140ms; }
.upload-ic svg { width: 20px; height: 20px; }
.upload-zone:hover .upload-ic { filter: brightness(1.08); transform: translateY(-1px); }
.upload-txt { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.upload-title { font-weight: 600; font-size: 14px; color: var(--text); }
.upload-sub { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.upload-del { align-self: center; }
.sel-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sel-bar .btn { margin: 0; flex: 0 1 auto; min-width: 0; }
.sel-bar .sel-del { margin-left: auto; }
.file-item.static { cursor: default; }
.log-item { cursor: pointer; }
.log-ev { font-weight: 600; flex: 0 0 auto; }
.log-meta { color: var(--dim); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }

.avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--out);
  color: var(--acc-ink);
  font-weight: 600;
}

.file-ic { font-size: 22px; }
.conv-meta { flex: 1; min-width: 0; display: grid; }
.conv-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-sub { color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-arrow { color: var(--dim); font-size: 20px; }
.conv-pin { flex: 0 0 auto; font-size: 14px; opacity: 0.75; }
.conv-badge { flex: 0 0 auto; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--acc-fill); color: var(--acc-ink); font-size: 12px; font-weight: 700; line-height: 24px; text-align: center; }

/* ---------- чат ---------- */
.chat-head { flex-wrap: nowrap; }

/* на узких экранах action-кнопки шапки поджаты, чтобы имя собеседника и отпечаток
   ключа не сжимались в нечитаемые огрызки (высота 44px тап-таргета сохранена) */
@media (max-width: 480px) {
  .chat-head .head-actions { gap: 2px; }
  .chat-head .head-actions .btn { padding: 0 9px; min-width: 42px; }
  .chat-head .back-btn { min-width: 36px; padding: 0 6px; }
}
.chat-topbar { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.note-strip {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 16px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}

.note-strip:hover { border-color: var(--acc); }

.note-prev { overflow-wrap: anywhere; }
.head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ic { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }

.msgs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.new-msg-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: 92px; z-index: 40; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 18px; border: 1px solid var(--acc-fill); border-radius: 999px; background: var(--acc-fill); color: var(--acc-ink); font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgb(20 24 30 / .22); }

.msg { max-width: min(85%, 560px); user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.conv-item { user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }

/* AI: markdown, slash-меню, пресеты, действия сообщений */
.msg-text code { padding: 1px 5px; border-radius: 4px; background: var(--in); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.msg-text a { color: var(--acc); text-decoration: underline; }
.md-pre { position: relative; margin: 6px 0; padding: 30px 10px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--in); overflow-x: auto; }
.md-pre code { display: block; padding: 0; background: none; white-space: pre; }
.md-copy { position: absolute; top: 2px; right: 2px; min-width: 28px; min-height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--dim); font-size: 14px; cursor: pointer; }
.md-copy:hover { background: var(--panel); color: var(--text); }
/* markdown-таблицы AI: на узких экранах — горизонтальный скролл обёртки, ячейки переносятся */
.md-tbl-wrap { max-width: 100%; margin: 6px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.md-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.md-tbl th, .md-tbl td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; white-space: normal; overflow-wrap: anywhere; min-width: 88px; }
.md-tbl th { background: var(--in); color: var(--text); font-weight: 600; }
.md-tbl .md-al-c { text-align: center; }
.md-tbl .md-al-r { text-align: right; }
.md-tbl tr:nth-child(even) td { background: color-mix(in srgb, var(--in) 45%, transparent); }
.msg.msg-wide { max-width: min(96%, 760px); }
.msg-act { border: 0; background: transparent; color: var(--dim); font-size: 17px; min-width: 38px; min-height: 38px; padding: 0 6px; cursor: pointer; opacity: 0.8; border-radius: 8px; }
.msg-act:hover { opacity: 1; color: var(--acc); background: var(--in); }
.msg-acts { display: flex; gap: 2px; justify-content: flex-start; margin-top: 2px; }
.msg.out .msg-acts { justify-content: flex-end; }
.ai-slash { display: flex; flex-direction: column; margin: 0 8px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 6px 18px rgb(0 0 0 / 12%); }
.ai-slash[hidden] { display: none; }
.ai-slash button { display: flex; flex-direction: column; gap: 2px; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ai-slash button:hover { background: var(--in); }
.ai-slash-sub { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-chip { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; margin: 0 12px; padding: 4px 10px; border: 1px solid var(--acc); border-radius: 999px; color: var(--acc); font-size: 12px; }
.ai-chip[hidden] { display: none; }
.ai-chip button { border: 0; background: transparent; color: inherit; font-size: 12px; cursor: pointer; padding: 2px; }
.icon-btn.on { border-color: #c0392b; color: #c0392b; }
.md-out { width: 100%; box-sizing: border-box; font-size: 13px; }

/* голосовой режим AI */
.vm-overlay { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; background: var(--bg); }
.vm-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 16px; min-width: 44px; min-height: 44px; }
.vm-orb { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; font-size: 44px; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--acc) 40%, var(--panel)), var(--panel)); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vm-orb.listen { animation: vm-pulse 1.8s ease-out infinite; }
.vm-orb.think { animation: vm-spin 2.2s linear infinite; background: conic-gradient(from 0deg, var(--acc), color-mix(in srgb, var(--acc) 15%, var(--panel)), var(--acc)); }
.vm-orb.speak { animation: vm-pulse 0.7s ease-in-out infinite; }

@keyframes vm-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 45%, transparent); } 100% { box-shadow: 0 0 0 34px rgb(0 0 0 / 0%); } }

@keyframes vm-spin { to { transform: rotate(360deg); } }
.vm-status { margin: 0; font-size: 16px; }
.vm-text { margin: 0; min-height: 24px; max-width: 82%; text-align: center; }
.vm-input { display: flex; gap: 8px; width: min(92%, 420px); }
.vm-input[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .vm-orb { animation: none; } }
.msg.out { align-self: flex-end; }
.msg.in { align-self: flex-start; }

.msg-text {
  padding: 10px 14px;
  border-radius: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: none;
  -webkit-touch-callout: none;
}

/* desktop (мышь): текст сообщений и ответов ИИ обязан выделяться — запрет выше нужен только
   touch-устройствам (long-press); на pointer:fine возвращаем нативное выделение и callout */
@media (hover: hover) and (pointer: fine) {
  /* stylelint-disable-next-line property-no-vendor-prefix -- префикс нужен iOS Safari <16.4 */
  .msg-text { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
}

/* AI-чат: текст ответов обязан выделяться и копироваться и на телефоне (long-press → «Копировать») —
   пользователю нужно выписать фрагмент ответа. В мессенджерских диалогах long-press = меню сообщения,
   поэтому область расширения — строго контейнер AI-переписки .ai-msgs (не трогает .msg в чатах). */
/* stylelint-disable-next-line property-no-vendor-prefix -- префикс нужен iOS Safari <16.4 */
.ai-msgs .msg, .ai-msgs .msg-text { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

.msg.out .msg-text { background: var(--out); color: var(--acc-ink); border-bottom-right-radius: 4px; }
.msg.in .msg-text { background: var(--in); border-bottom-left-radius: 4px; }

.msg-meta { font-size: 12px; color: var(--dim); margin-top: 3px; text-align: right; }
.msg.in .msg-meta { text-align: left; }
.fwd-btn { border: 0; background: none; color: var(--acc); opacity: .75; cursor: pointer; padding: 14px 12px; min-width: 44px; min-height: 44px; margin: -12px -10px -12px 0; vertical-align: middle; }
.fwd-btn .ic { width: 15px; height: 15px; display: block; }
.fwd-btn:hover { opacity: 1; }
.xfer {
  position: fixed;
  right: 14px;
  bottom: 86px;
  z-index: 95;
  width: min(320px, calc(100vw - 28px));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgb(20 24 30 / .18);
  padding: 10px 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.xfer.show { opacity: 1; transform: none; }
.xfer-head { display: flex; align-items: center; gap: 8px; }
.xfer-dir { font-size: 14px; }
.xfer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.xfer-min { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 6px 8px; min-width: 24px; min-height: 24px; border-radius: 6px; }
.xfer-min:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); }
.xfer-bar { margin-top: 8px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.xfer-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--acc); transition: width .2s ease; }
.xfer-sub { margin-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.xfer-hint { margin-top: 4px; font-size: 11px; color: var(--muted); }
.xfer.min .xfer-body { display: none; }
.xfer.min { padding-bottom: 10px; }
.del-btn { border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 12px; padding: 14px 12px; min-width: 44px; min-height: 44px; margin: -12px -10px -12px 0; vertical-align: middle; }
.del-btn:hover { color: #e5484d; }
.ticks { color: var(--acc); }

.msg-lock {
  background: repeating-linear-gradient(45deg, var(--in), var(--in) 8px, var(--panel) 8px, var(--panel) 16px);
  border: 1px dashed var(--dim);
  border-radius: 14px;
  padding: 10px 14px;
  color: var(--dim);
}

.composer {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.composer-tools { flex: 1 1 100%; display: flex; gap: 8px; align-items: center; }
.composer-main { flex: 1 1 100%; display: flex; gap: 8px; align-items: flex-end; }
.composer input, .composer textarea { margin: 0; }
.msg-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 40dvh;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.msg-input.note-input { resize: vertical; max-height: 70vh; }
/* Кнопки НЕ должны выделяться и ловить системное «копировать» долгим тапом: на Android
   долгий тап по кнопке с текстом (в т.ч. по символу «➤») поднимает callout копирования.
   Гасим для ВСЕХ кнопок, а не только для .send-btn — раньше защитные классы были не везде. */
/* MOBILE-GUARD:base */
/* stylelint-disable-next-line property-no-vendor-prefix */
button, .btn, [role="button"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* stylelint-disable-next-line property-no-vendor-prefix */
.send-btn { flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 14px; font-size: 18px; line-height: 1; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.send-btn.rec-on { background: #c0392b; border-color: #c0392b; color: #fff; animation: micpulse 1.2s infinite; }
.rec-preview { flex: 1 1 100%; flex-wrap: wrap; display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px 6px; }
.rec-preview .rec-ic { color: var(--dim); display: inline-flex; flex: 0 0 auto; }
.rec-preview .aplay { flex: 1 1 160px; min-width: 0; }
.rec-preview .btn { flex: 0 0 auto; min-width: 38px; height: 36px; padding: 0 10px; }
.rec-preview .ap-play { width: 32px; height: 32px; }
.rec-preview .ap-wave { height: 22px; flex-basis: 90px; min-width: 60px; }
.rec-preview .ap-rate { height: 26px; min-width: 30px; }
.rec-preview .ap-vol { width: 26px; height: 26px; }
.rec-chip { position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 70; display: flex; align-items: center; gap: 8px; padding: 6px 14px; min-height: 34px; background: var(--out); color: var(--acc-ink); border-radius: 999px; font-size: 13px; box-shadow: 0 6px 24px rgb(0, 0, 0, 0.25); }
.rec-chip .ic { width: 16px; height: 16px; }
.rec-chip .rec-t { font-size: 13px; }
.rec-chip .rec-hint { opacity: 0.7; font-size: 12px; display: none; }

@media (min-width: 481px) { .rec-chip .rec-hint { display: inline; } }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5b52; animation: rec-pulse 1s ease-in-out infinite; }

@keyframes rec-pulse { 50% { opacity: 0.35; } }
.trim-wrap { flex: 1 1 100%; }
.trim-wave { width: 100%; height: 36px; display: block; cursor: pointer; touch-action: none; border-radius: 8px; }
.trim-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.trim-time { font-size: 12px; color: var(--dim); }
.chat-file-audio { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: min(320px, 100%); background: var(--in); border-radius: 12px; padding: 8px 10px; }
.msg.out .chat-file-audio { background: var(--out); }
.cfa-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cfa-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.cfa-size { font-size: 12px; color: var(--dim); flex: 0 0 auto; }
.msg.out .cfa-name { color: var(--acc-ink); }
.msg.out .cfa-size { color: rgb(252 252 253 / 70%); }
.chat-file-dl .ic { width: 16px; height: 16px; }
.chat-file-audio .aplay { min-width: 0; }

@media (max-width: 480px) { .chat-file-audio .chat-file-open { display: none; } }
.chat-file-video { width: 100%; max-width: 420px; }
.chat-thumb-none { background: var(--in) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6670' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6'/%3E%3C/svg%3E") center / 30px no-repeat; }

@media (max-width: 480px) { .msg-audio .ap-vol, .chat-file .ap-vol { display: none; } .rec-preview .ap-rate, .rec-preview .ap-vol, .rec-preview .ap-volr { display: none; } }

.icon-btn { flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; padding: 0; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.attach-wrap { position: relative; flex: 0 0 auto; }
.attach-wrap input[type="file"] { display: none; }
.am-cap { padding: 4px 10px 2px; font-size: 12px; color: var(--muted); text-align: center; }
.attach-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 236px;  max-width: min(80vw, 300px);
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.16);
}
.attach-menu[hidden] { display: none; }
.lang-menu {
  position: fixed;
  z-index: 970;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 176px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.16);
}
.lang-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.lang-menu-item:hover { background: var(--in); }
.lang-menu-item.on { color: var(--acc); font-weight: 600; }
.attach-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.attach-opt:hover:not(:disabled) { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.attach-opt:disabled { opacity: 0.45; cursor: not-allowed; }
.attach-opt .ao-ic { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; background: var(--in); border-radius: 8px; }
.attach-opt .ao-t { display: flex; flex-direction: column; gap: 1px; font-size: 14px; font-weight: 600; }
.attach-opt .ao-sub { font-size: 11px; font-weight: 400; color: var(--dim); }

/* ---------- детали ---------- */
.empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  height: 100%;
  min-height: 240px;
  color: var(--dim);
  text-align: center;
}

.empty-ic { font-size: 44px; }

.detail-body { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.sec { margin: 22px 0 8px; font-size: 15px; }

.kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.kv span { color: var(--dim); }
.kv b { text-align: right; overflow-wrap: anywhere; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }

.limits { display: grid; gap: 8px; }

.limit-row {
  display: grid;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
}

.limit-a { font-weight: 600; }
.limit-b { color: var(--dim); font-size: 13px; }
.limit-c { font-size: 13px; color: var(--warn); }

.settings-nav .set-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
}
.settings-nav .set-item .ic { color: var(--dim); }
.settings-nav .set-item:hover .ic, .settings-nav .set-item.on .ic { color: var(--acc); }

.set-item:hover { background: var(--in); }
.set-item.on { box-shadow: inset 3px 0 0 var(--acc); background: var(--in); }
.set-item.set-admin { display: flex; align-items: center; gap: 10px; color: var(--acc); font-weight: 600; background: color-mix(in srgb, var(--acc) 9%, transparent); box-shadow: inset 3px 0 0 var(--acc); }
.set-item.set-admin:hover { background: color-mix(in srgb, var(--acc) 15%, transparent); }
.set-item.set-admin.on { background: color-mix(in srgb, var(--acc) 17%, transparent); }

/* ---------- модалки / тосты ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgb(37 42 49 / 45%);
}

.modal-x {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.modal-x:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--text); }
.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 85dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 22%);
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* внутри модалки текст недоступен для нативного выделения/«копировать» (long-press),
   НО поля ввода и явные .sel остаются выделяемыми */
.modal input, .modal textarea, .modal select, .modal [contenteditable], .modal .sel { user-select: text; -webkit-touch-callout: default; }

.modal h3 { margin: 0 0 10px; }
.modal-body { overflow-wrap: anywhere; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.modal-actions.stack { flex-direction: column; }
.modal-actions.stack .btn { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; min-height: 48px; padding: 10px 14px; }
.modal-actions.stack .btn.ghost { justify-content: center; }

@media (max-height: 700px) {
  .modal { max-height: calc(100dvh - 20px); }
  .modal-actions.stack .btn { min-height: 44px; padding: 7px 12px; }
}
.share-url { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.sas { font-size: 30px; letter-spacing: 4px; text-align: center; margin: 8px 0; }
.call-timer { text-align: center; color: var(--dim); font-variant-numeric: tabular-nums; font-size: 22px; letter-spacing: 1px; }

#toasts {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--text);
  color: var(--bg);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  visibility: hidden;
  transform: translateY(8px);
  transition: transform 200ms;
}

.toast.show { visibility: visible; transform: none; }
.toast.ok { background: var(--ok-fill); color: #fff; }
.toast.warn { background: var(--warn-fill); color: #fff; }

/* ---------- индикатор соединения + офлайн-баннер (PWA) ---------- */
.conn-dot {
  position: fixed;
  top: 12px;
  left: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--panel);
  z-index: 65;
}

.conn-dot.off { background: var(--danger); }
.conn-dot.slow { background: var(--warn); }
.conn-dot[hidden] { display: none; }

/* ---------- кнопка установки приложения (лендинг) ---------- */
.install-wrap { margin-top: 16px; }

.btn.install-btn.wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 600;
  background: color-mix(in srgb, var(--acc) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--acc) 32%, transparent);
  color: var(--acc);
}

.btn.install-btn.wide:hover { background: color-mix(in srgb, var(--acc) 18%, var(--panel)); }
.btn.install-btn.wide:active { transform: translateY(1px); }
.btn.install-btn.wide .ic { width: 18px; height: 18px; }
.btn.install-btn.wide[hidden] { display: none; }
.install-prog { margin-top: 12px; }
.install-prog[hidden] { display: none; }
.install-prog-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.install-prog-head .install-pct { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.install-prog-track { height: 8px; border-radius: 999px; background: var(--in); overflow: hidden; }
.install-prog-fill { height: 100%; width: 0; border-radius: 999px; background: var(--acc); transition: width .2s ease; }
.install-prog.done .install-prog-fill { background: var(--ok); }
.install-hint { margin-top: 8px; text-align: center; }

/* ---------- адаптив: планшет ---------- */
@media (min-width: 768px) {
  .app { grid-template-columns: 92px minmax(0, 1fr); }

  .pane.list, .pane.main { grid-column: 2; }

  .rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
    background: var(--panel);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .rail-logo { font-size: 26px; margin-bottom: 10px; }
  .rail-spacer { flex: 1; }

  .rail-btn {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 84px;
    min-height: 56px;
    padding: 8px 0;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--dim);
    cursor: pointer;
  }

  .rail-btn span { max-width: 100%; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-btn .ic { width: 22px; height: 22px; }
  .rail-btn:hover { background: var(--in); color: var(--text); }
  .rail-btn.on { background: var(--in); color: var(--acc); }
  .rail .rail-more { display: none; }

  .pane.list { border-right: 1px solid var(--line); }
  .pane.main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  .msgs { grid-row: 2; }
  .phrase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kv { gap: 24px; }
}

/* ---------- адаптив: десктоп ---------- */
@media (min-width: 1100px) {
  .app { grid-template-columns: 92px 320px minmax(0, 1fr); }
  .pane.list { grid-column: 2; grid-row: 1; }
  .pane.main { grid-column: 3; grid-row: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.back-btn { display: none; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
.back-btn .ic { width: 22px; height: 22px; }
.pane-head .back-btn.home-btn { display: inline-flex; }
  .conv-list, .list-scroll { max-height: none; }
  .phrase-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .limit-row { grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: baseline; }
  #toasts { left: auto; width: 360px; bottom: 16px; }
}

/* ---------- мобильный низ ---------- */
@media (max-width: 767px) {
  .app { grid-template-rows: minmax(0, 1fr) 64px; }
  .pane.list { grid-row: 1; }
  .pane.main { grid-row: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  .rail {
    display: flex;
    grid-row: 2;
    grid-column: 1;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    border-right: 0;
    border-top: 1px solid var(--line);
    padding: 2px 4px calc(2px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px rgb(20 24 30 / .05);
    overflow: hidden;
  }
  .rail-logo, .rail-spacer { display: none; }
  .rail-btn:not(.primary, .rail-more) { display: none; }
  .rail-btn {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--dim);
    cursor: pointer;
  }
  .rail-btn .ic { width: 22px; height: 22px; }
  .rail-lbl { font-size: 10px; line-height: 1.15; }
  .rail-ic { width: 52px; height: 30px; border-radius: 15px; transition: background .18s ease; }
  .rail-btn.on { color: var(--acc); }
  .rail-btn.on .rail-ic { background: color-mix(in srgb, var(--acc) 16%, transparent); }
  .rail-btn:not(.on):active .rail-ic { background: var(--in); }
  .rail-badge { top: 4px; right: auto; left: 50%; margin-right: 0; margin-left: 8px; }
  #toasts { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .conn-dot { top: 2px; left: auto; right: 12px; transform: none; }
  .msgs { min-height: 0; }
  .modal { padding: 16px; }
  .modal-overlay { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .kv:not(label) { flex-direction: column; align-items: stretch; gap: 4px; }
  .kv:not(label) b { text-align: left; }
  .kv select, .kv input, .kv textarea { max-width: 100%; width: 100%; }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { flex: 1 1 auto; width: 100%; }
  .fab { left: 16px; bottom: calc(100px + env(safe-area-inset-bottom)); }
  .fab-cap { left: 44px; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .pane.list:has(.fab) .list-scroll { padding-bottom: 168px; }
  .pane.list:has(.list-foot) .fab { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .pane.list:has(.list-foot) .fab-cap { bottom: calc(130px + env(safe-area-inset-bottom)); }
}


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

.call-videos { position: relative; margin-bottom: 12px; }
.call-videos video { width: 100%; border-radius: 8px; background: #000; aspect-ratio: 16 / 10; }
.call-videos video#local-vid { position: absolute; right: 8px; bottom: 8px; width: 28%; aspect-ratio: 4 / 3; border: 1px solid var(--dim); }
.call-ctrl { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.call-tgl.off { opacity: 0.45; text-decoration: line-through; }
.call-net { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--dim); background: var(--in); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.call-net-txt { min-height: 1em; }
.call-link { margin-top: 2px; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dim); }
.call-link-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.call-link-dot.ok { background: var(--ok-fill); }
.call-link-dot.warn { background: var(--warn-fill); }
.call-link-dot.bad { background: var(--danger-fill); }
.call-link-dot.wait { background: var(--dim); animation: calllinkpulse 1.1s ease-in-out infinite; }

@keyframes calllinkpulse { 50% { opacity: 0.35; } }
.call-screen { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 4px 4px; }
.call-peer { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.call-peer .avimg, .call-peer .avatar-fb { border-radius: 50%; box-shadow: 0 4px 18px rgb(0 0 0 / 0.22); }
.call-peer-video { flex-direction: row; justify-content: center; }
.call-name { font-size: 20px; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.call-status { font-size: 14px; color: var(--dim); text-align: center; letter-spacing: 0.3px; }
.call-status.on { color: var(--ok, #2e9e5b); }
.call-pips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.call-dock { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; margin-top: 6px; }
.call-btn { width: 56px; height: 56px; min-height: 56px; border-radius: 50%; border: 1px solid var(--line); background: var(--in); color: var(--text); font-size: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.call-btn:hover { background: var(--panel); }
.call-btn:active { transform: translateY(1px); }
.call-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.call-btn.off { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.call-btn.active { color: var(--acc); border-color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, transparent); box-shadow: inset 0 0 0 1px var(--acc); }
.call-hangup { background: var(--danger-fill); border-color: var(--danger-fill); color: #fff; width: 64px; height: 64px; min-height: 64px; transform: rotate(135deg); box-shadow: 0 6px 16px rgb(0 0 0 / 0.25); }
.call-hangup:hover { filter: brightness(1.08); background: var(--danger-fill); }
/* входящий звонок */
.call-incoming { gap: 18px; padding: 12px 4px 6px; }
.call-avatar-ring { position: relative; display: inline-grid; place-items: center; border-radius: 50%; }
.call-avatar-ring::before, .call-avatar-ring::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ok) 55%, transparent); animation: callring 1.7s ease-out infinite; }
.call-avatar-ring::after { animation-delay: 0.85s; }
.call-status.ringing { color: var(--ok); }
.call-params { font-size: 13px; color: var(--dim); text-align: center; background: var(--in); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; }
.call-accept { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; width: 64px; height: 64px; min-height: 64px; box-shadow: 0 6px 16px rgb(0 0 0 / 0.25); }
.call-accept:hover { filter: brightness(1.08); background: var(--ok-fill); }

/* ===== Полноэкранное окно звонка (Telegram-style): собеседник на весь экран ===== */
.modal-overlay-call { padding: 0; align-items: stretch; justify-content: stretch; }
.modal-call {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-call > h3, .modal-call > .modal-x, .modal-call > .modal-actions { display: none; }
.modal-call > .modal-body { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; }
.modal-call .call-screen { height: 100%; color: #fff; }
.modal-call .call-peer { margin-top: auto; }
.modal-call .call-peer .call-name { color: #fff; }
.modal-call .call-peer .call-status { color: #cfcfcf; }
.modal-call .call-dock { margin-top: auto; margin-bottom: calc(18px + env(safe-area-inset-bottom)); }

/* видеозвонок: удалённая камера — фон на весь экран, без искажений (object-fit cover) */
.call-screen-video { position: absolute; inset: 0; background: #000; }
.call-screen-video .call-videos { position: absolute; inset: 0; margin: 0; }
.call-screen-video #remote-vid { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; background: #000; }

/* плейсхолдер аватара, пока удалённое видео не отдало кадр */
.call-remote-ph { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; background: #0b0f14; }
.call-remote-ph .call-name { font-size: 22px; font-weight: 600; text-align: center; padding: 0 16px; }

/* своё видео — перетаскиваемая плашка (PiP); фронт зеркалим, зад — нет */
.call-screen-video #local-vid {
  position: absolute;
  top: 14px;
  right: 14px;
  left: auto;
  bottom: auto;
  width: 30vw;
  max-width: 128px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 14px;
  background: #111;
  box-shadow: 0 6px 20px rgb(0 0 0 / 45%);
  z-index: 6;
  transform: scaleX(-1);
  touch-action: none;
  cursor: grab;
}
.call-screen-video #local-vid.rear { transform: none; }

/* групповые вставки (если добавлены участники) — лента сверху, не закрывает главное видео */
.call-screen-video #pip-col { position: absolute; top: 64px; left: 12px; right: 12px; z-index: 4; display: flex; gap: 8px; overflow-x: auto; }
.call-screen-video .call-pip { flex: 0 0 auto; width: 84px; }
.call-screen-video .call-pip video { width: 84px; aspect-ratio: 3 / 4; border-radius: 10px; }

/* верхняя панель (имя + статус) и индикаторы — поверх видео */
.call-screen-video .call-peer { position: absolute; top: 0; left: 0; right: 0; z-index: 3; margin: 0; flex-direction: column; align-items: flex-start; padding: 14px 16px 26px; text-align: left; background: linear-gradient(rgb(0 0 0 / 60%), transparent); pointer-events: none; }
.call-screen-video .call-peer .call-name { color: #fff; font-size: 17px; text-align: left; }
.call-screen-video .call-peer .call-status { color: #e6e6e6; font-size: 13px; }
.call-screen-video .call-net { position: absolute; top: 60px; left: 16px; z-index: 3; }
.call-screen-video .call-timer { position: absolute; bottom: 150px; left: 0; right: 0; z-index: 3; text-align: center; color: #fff; }
.call-screen-video .call-link { position: absolute; bottom: 118px; left: 0; right: 0; z-index: 3; justify-content: center; }

/* нижняя панель управления — поверх видео, с учётом safe-area */
.call-screen-video .call-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; margin: 0; padding: 18px 12px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgb(0 0 0 / 60%)); }
.call-decline { background: var(--danger-fill); border-color: var(--danger-fill); color: #fff; width: 64px; height: 64px; min-height: 64px; transform: rotate(135deg); box-shadow: 0 6px 16px rgb(0 0 0 / 0.25); }
.call-decline:hover { filter: brightness(1.08); background: var(--danger-fill); }

@media (prefers-reduced-motion: reduce) { .call-avatar-ring::before, .call-avatar-ring::after { animation: none; } }

@keyframes callring { 0% { transform: scale(0.92); opacity: 0.8; } 100% { transform: scale(1.55); opacity: 0; } }
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.sig i { width: 3px; border-radius: 1px; background: var(--line); }
.sig i:nth-child(1) { height: 5px; }
.sig i:nth-child(2) { height: 8px; }
.sig i:nth-child(3) { height: 11px; }
.sig i:nth-child(4) { height: 14px; }
.sig.g i.on { background: var(--ok-fill); }
.sig.y i.on { background: var(--warn-fill); }
.sig.r i.on { background: var(--danger-fill); }
.blocked-tag { color: #e0a030; }

/* ---------- шапка и подвал страницы входа ---------- */
/* раскладка (flex-колонка, отступы шапки/карточки) — в базовом правиле .lock */

.feat-strip {
  width: min(100%, 640px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  scroll-margin-top: 76px;
}

.feat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 14px;
  text-align: center;
}

.feat span { font-size: 26px; display: block; margin-bottom: 8px; }
.feat b { display: block; margin-bottom: 4px; font-size: 15px; }
.feat p { margin: 0; }

.page-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.page-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font: 700 20px/1 system-ui, sans-serif;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.page-brand img { width: 34px; height: 34px; border-radius: 9px; }
.page-brand em { font-style: normal; color: var(--acc); }
.page-head .btn { margin-left: auto; }
.page-head .btn.primary { box-shadow: 0 2px 10px rgb(0 0 0 / 0.18); font-weight: 600; }
.page-head .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgb(0 0 0 / 0.24); }

.page-head .head-actions { margin-left: auto; align-items: center; }
.page-head .head-actions .btn { margin-left: 0; }
.page-head .small-btn { white-space: nowrap; }
.theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--text); cursor: pointer; }
.theme-toggle:hover { background: var(--in); }
.theme-toggle svg { width: 20px; height: 20px; }

@media (max-width: 480px) {
  .page-head { padding: 10px 12px; gap: 8px; }
  .page-brand span { display: none; }
  .page-brand img { width: 30px; height: 30px; }
  .theme-toggle { width: 44px; height: 44px; min-height: 44px; }
  .page-head .small-btn { padding: 4px 12px; }
}
.more-item .i-moon, .more-item .i-sun { width: 24px; height: 24px; }
.i-moon, .i-sun { width: 22px; height: 22px; }
.i-sun { display: none; }
[data-theme="dark"] .i-moon { display: none; }
[data-theme="dark"] .i-sun { display: block; }

.page-foot {
  width: 100%;
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  display: grid;
  gap: 14px;
  text-align: center;
}

.foot-brand { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--text); }
.foot-brand img { width: 26px; height: 26px; border-radius: 7px; }
.foot-brand em { font-style: normal; color: var(--acc); }

.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }

.foot-links a {
  color: var(--dim);
  font-size: 14px;
  text-decoration: none;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.foot-links a:hover { color: var(--acc); }
.foot-note { color: var(--dim); font-size: 13px; margin: 0; }

/* ---------- сравнение на экране входа ---------- */
.vs-box {
  scroll-margin-top: 76px;
  width: min(100%, 640px);
  margin: 16px auto 32px;
  padding: 0 16px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.enc-box {
  scroll-margin-top: 76px;
  width: min(100%, 640px);
  margin: 8px auto 0;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.enc-title { margin: 0 0 6px; font-size: 20px; }
.enc-lead { margin: 0 0 14px; color: var(--dim); font-size: 14px; }
.enc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.enc-list li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.5; }
.enc-list li::before { content: "🔒"; position: absolute; left: 0; top: 0; font-size: 14px; line-height: 1.5; }

.vs-box summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--acc);
  padding: 14px 0;
  min-height: 24px;
}

.vs-lead {
  color: var(--dim);
  font-size: 14px;
  margin: 0 0 12px;
}

.vs-one {
  padding: 14px 16px 16px;
  background: var(--in);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.vs-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-items: stretch;
}

.vs-h {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 0 6px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid var(--line);
}

.vs-logo {
  flex-shrink: 0;
  border-radius: 4px;
}

.vs-feat {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.45;
}

.vs-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 9px;
  font-size: 12px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.vs-chip b { font-weight: 600; }
.vs-chip i { font-style: normal; }
.vs-y { border-color: transparent; }
.vs-m { border-color: color-mix(in srgb, #f59e0b 50%, var(--line)); background: color-mix(in srgb, #f59e0b 12%, transparent); }
.vs-n { color: #ef4444; border-color: transparent; }

.vs-title { margin: 14px 0 6px; font-size: 18px; }

/* ---------- 3D-логотип (наклон за пальцем) ---------- */
.logo3d {
  width: 72px;
  height: 72px;
  margin: 0 auto 4px;
  perspective: 620px;
  touch-action: none;
  cursor: grab;
}

.logo3d:active { cursor: grabbing; }

.logo3d-stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.logo3d-img {
  display: block;
  border-radius: 18px;
  transform: translateZ(14px);
}

/* ---------- логотип-надпись: спокойный блик у правого края, без пробега по тексту ---------- */
.logo-word.shine { position: relative; perspective: 400px; }

.logo-word.shine > .ch:nth-of-type(1) { --i: 0; }
.logo-word.shine > .ch:nth-of-type(2) { --i: 1; }
.logo-word.shine em > .ch:nth-of-type(1) { --i: 2; }
.logo-word.shine em > .ch:nth-of-type(2) { --i: 3; }
.logo-word.shine em > .ch:nth-of-type(3) { --i: 4; }

.logo-word.shine .ch {
  display: inline-block;
  transform-style: preserve-3d;
  animation: ch-in 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) backwards;
  animation-delay: calc(var(--i) * 0.09s + 0.15s);
  transition: transform 0.3s ease;
  transition-delay: calc(var(--i) * 0.05s);
}

@keyframes ch-in {
  from {
    transform: rotateY(-90deg) translateZ(24px);
    opacity: 0;
    filter: blur(4px);
  }

  to {
    transform: none;
    opacity: 1;
    filter: none;
  }
}

.logo-word.shine em {
  animation: glow-breathe 3.6s ease-in-out infinite alternate;
}

@keyframes glow-breathe {
  from { text-shadow: 0 0 0 rgb(0 0 0 / 0%); }

  to {
    text-shadow:
      0 0 10px color-mix(in srgb, var(--acc) 55%, transparent),
      0 0 26px color-mix(in srgb, var(--acc) 25%, transparent);
  }
}

.logo-word.shine:hover .ch { transform: translateY(-5px) rotateX(14deg); }


@media (prefers-reduced-motion: reduce) {
  .logo-word.shine .ch { animation: none; }
  .logo-word.shine em { animation: none; }
}

/* ---------- конференция ---------- */
#pip-col {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 28%;
}

.call-pip {
  position: relative;
}

.call-pip video {
  width: 100%;
  border-radius: 8px;
  background: #000;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--dim);
}

.call-who {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgb(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
}

.call-videos-audio {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--in);
  border-radius: 8px;
}

.call-who-static {
  font-size: 16px;
}

.call-who-audio {
  position: static;
  display: inline-block;
}

#gov-banner { position: sticky; top: 0; z-index: 60; background: var(--out); color: var(--acc-ink); padding: 8px 16px; font-size: 14px; text-align: center; }
.report-card { border: 1px solid var(--in); border-radius: 10px; padding: 12px; margin: 8px 0; background: var(--panel); }
.report-h { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.report-m { font-size: 14px; color: var(--dim); padding: 2px 0; overflow-wrap: anywhere; }
.gov-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.gov-form input { flex: 1 1 160px; min-width: 0; }
.gov-form label.kv { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; }
.gov-params { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 8px 0; }
.gov-params .pf { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; color: var(--dim); }
.gov-params .pf-in { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.gov-params .pf-in > span { flex: 0 0 auto; min-width: 150px; white-space: nowrap; }
.gov-params .pf input { flex: 0 1 110px; width: auto; min-height: 40px; }
.gov-params .pf input[id="pBanner"] { flex: 1 1 200px; }
.gov-params .pf-desc { flex: 0 0 auto; order: -1; min-width: 0; max-width: 560px; font-size: 12px; line-height: 1.45; font-style: normal; color: var(--muted); }
.gov-params .btn { align-self: flex-start; }
.gov-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 4px; border-bottom: 1px solid var(--line); }
.gov-tab { appearance: none; border: 0; background: none; color: var(--dim); font: inherit; font-size: 14px; padding: 10px 14px; min-height: 44px; cursor: pointer; border-bottom: 2px solid transparent; }
.gov-tab:hover { color: var(--text); }
.gov-tab.on { color: var(--acc); font-weight: 600; border-bottom-color: var(--acc); }
.support-wrap { display: flex; flex-direction: column; gap: 8px; }
.support-thread { flex: 1 1 auto; min-height: 240px; max-height: 55dvh; border: 1px solid var(--line); border-radius: var(--r); }
.gov-support .report-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.btn.sm { min-height: 24px; padding: 2px 10px; font-size: 13px; }

/* аудио/видео и напоминания */
.mic-btn { flex: 0 0 auto; }
.mic-btn.rec-on { background: #c0392b; border-color: #c0392b; color: #fff; animation: micpulse 1.2s infinite; }

@keyframes micpulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.msg-audio { display: flex; align-items: center; gap: 6px; width: min(300px, 100%); background: var(--in); border-radius: 12px; padding: 8px 10px; }
.msg.in .msg-audio { border-bottom-left-radius: 4px; }
.msg.out .msg-audio { background: var(--out); border-bottom-right-radius: 4px; }
.msg.out .ap-mic, .msg.out .ap-time { color: rgb(252 252 253 / 75%); }
.msg.out .ap-play { background: var(--acc-ink); color: var(--acc); }
.msg.out .ap-rate { background: rgb(252 252 253 / 12%); border-color: rgb(252 252 253 / 35%); color: rgb(252 252 253 / 85%); }
.msg.out .ap-rate.on { color: #fff; border-color: #fff; }
.msg.out .ap-vol { color: rgb(252 252 253 / 75%); }
.msg.out .ap-vol:hover { background: rgb(252 252 253 / 12%); color: #fff; }
.msg.out .ap-volr { --vol-fill: #fff; --vol-thumb: #fff; --vol-track: rgb(252 252 253 / 35%); }
.aplay { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ap-row { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.ap-x { display: none; align-items: center; gap: 4px; justify-content: flex-end; width: 100%; }
.aplay.on .ap-x { display: flex; }
.aplay audio { display: none; }
.ap-play { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--acc); color: var(--acc-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; padding: 0; transition: filter .15s; }
.ap-play:hover { filter: brightness(1.12); }
.ap-play:active { transform: translateY(1px); }
.ap-play:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ap-play .ic { width: 18px; height: 18px; }
.ap-wave { flex: 1 1 120px; min-width: 80px; height: 32px; cursor: pointer; touch-action: none; }
.ap-time { font-size: 12px; color: var(--dim); flex: 0 0 auto; min-width: 34px; text-align: right; }
.ap-rate { min-width: 34px; height: 28px; border: 0; border-radius: 999px; background: var(--panel); color: var(--dim); font-size: 11px; cursor: pointer; flex: 0 0 auto; padding: 0 5px; }
.ap-rate:hover { background: var(--line); color: var(--text); }
.ap-rate.on { color: var(--acc); background: var(--line); font-weight: 600; }
.ap-vol { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; }
.ap-vol:hover { color: var(--text); background: var(--in); }
.ap-vol .ic { width: 18px; height: 18px; }
/* stylelint-disable property-no-vendor-prefix -- -webkit-appearance обязателен в слайдер-псевдоэлементах WebKit */
.ap-volr, .vp-volr { -webkit-appearance: none; appearance: none; height: 24px; border: 0; background: none; flex: 0 0 auto; cursor: pointer; --v: 100; }
.ap-volr { width: 64px; }
.ap-volr::-webkit-slider-runnable-track, .vp-volr::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--vol-fill, var(--acc)) calc(var(--v) * 1%), var(--vol-track, rgb(92 102 112 / 30%)) 0); }
.ap-volr::-webkit-slider-thumb, .vp-volr::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--vol-thumb, var(--acc)); box-shadow: 0 1px 3px rgb(0 0 0 / 30%); transition: transform .12s; }
.ap-volr::-moz-range-track, .vp-volr::-moz-range-track { height: 4px; border-radius: 2px; background: var(--vol-track, rgb(92 102 112 / 30%)); }
.ap-volr::-moz-range-progress, .vp-volr::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--vol-fill, var(--acc)); }
.ap-volr::-moz-range-thumb, .vp-volr::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--vol-thumb, var(--acc)); box-shadow: 0 1px 3px rgb(0 0 0 / 30%); }
.ap-volr:active::-webkit-slider-thumb, .vp-volr:active::-webkit-slider-thumb { transform: scale(1.3); }
.ap-volr:focus-visible, .vp-volr:focus-visible { outline: none; }
.ap-volr:focus-visible::-webkit-slider-thumb, .vp-volr:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(61 90 128 / 35%); }
.ap-volr:focus-visible::-moz-range-thumb, .vp-volr:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgb(61 90 128 / 35%); }
/* stylelint-enable property-no-vendor-prefix */
.vp-rate { min-width: 38px; height: 32px; border: 0; border-radius: 8px; background: none; color: #fff; font-size: 12px; cursor: pointer; flex: 0 0 auto; padding: 0 4px; }
.vp-rate:hover { background: rgb(255 255 255 / 18%); }
.vp-rate.on { font-weight: 700; text-decoration: underline; }
.vp-volr { width: 72px; --vol-fill: #fff; --vol-thumb: #fff; --vol-track: rgb(255 255 255 / 35%); }

@media (max-width: 480px) { .ap-volr { width: 48px; } }
.ap-mic { color: var(--dim); display: inline-flex; flex: 0 0 auto; }
.vplay { position: relative; border-radius: var(--r); overflow: hidden; background: #000; width: 100%; }
.vplay video { display: block; width: 100%; max-height: 340px; }
.vp-big { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border: 0; border-radius: 50%; background: rgb(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: opacity .2s; }
.vp-big .ic { width: 26px; height: 26px; }
.vplay.playing .vp-big { opacity: 0; pointer-events: none; }
.vp-ctrl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: linear-gradient(transparent, rgb(0, 0, 0, 0.65)); transition: opacity .25s; }
.vplay.idle .vp-ctrl { opacity: 0; pointer-events: none; }
.vp-pp, .vp-mute, .vp-fs { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; }
.vp-pp:hover, .vp-mute:hover, .vp-fs:hover { background: rgb(255, 255, 255, 0.18); }
.vp-bar { position: relative; flex: 1 1 auto; min-width: 40px; height: 16px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.vp-track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgb(255, 255, 255, 0.35); overflow: hidden; }
.vp-buf { position: absolute; inset: 0 auto 0 0; width: 0; background: rgb(255, 255, 255, 0.45); }
.vp-prog { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; }
.vp-time { color: #fff; font-size: 12px; flex: 0 0 auto; }

@media (max-width: 420px) { .vplay video { max-height: 240px; } }
#media-host audio, #media-host video { display: block; }

/* аватары и заголовок диалога */
.avatar-fb { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--out); color: var(--acc-ink); flex: 0 0 auto; }
.chat-id { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.chat-id > div { min-width: 0; }
.chat-id h2, .chat-id p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* папки напоминаний */
.fol-bar { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.fol-chip { flex: 0 0 auto; max-width: 100%; min-height: 28px; padding: 3px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--in); color: inherit; font-size: 13px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fol-chip.on { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--acc-ink); }
.fol-chip.add { border-style: dashed; }
.fol-toggle { display: inline-flex; align-items: center; gap: 6px; }
.fol-toggle > span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fol-n { font-weight: 600; opacity: .65; }
.fol-caret { font-size: 11px; opacity: .7; }
.fol-list { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.fol-list:not(.open) { display: none; }
.fol-list.open { max-height: min(45dvh, 300px); overflow-y: auto; overscroll-behavior: contain; }
.ffol-bar { display: flex; gap: 8px; }
.ffol-bar .btn { flex: 1 1 auto; }
.rem-row { cursor: default; }
.rem-open { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rem-check { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--line) 30%, var(--dim)); background: var(--panel); color: transparent; font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s, color .15s; }
.rem-check:hover { border-color: var(--ok); color: var(--ok); }
.rem-check:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
.rem-check.on { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.file-ic.dim { opacity: .5; }
.done-txt { text-decoration: line-through; color: var(--dim); }
.overdue { color: var(--danger); }
.fol-pick-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fol-pick { min-height: 34px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--in); color: inherit; font-size: 14px; cursor: pointer; }
.fol-pick:hover { border-color: var(--acc); }
.fol-pick.on { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--acc-ink); }
.frow { cursor: default; }
.frow-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.frow-act { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 18px; line-height: 1; color: var(--dim); }
.frow-act:hover { color: var(--text); border-color: var(--acc); }
.frow-del:hover { color: var(--danger); border-color: var(--danger); }
.rem-desc { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 14px; }
.rem-desc-lbl { color: var(--dim); font-size: 13px; }
.rem-desc-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* AI чат */
.ai-speed { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ai-stop { margin-top: 8px; min-height: 32px; }
.ai-think { display: inline-flex; gap: 4px; align-items: center; margin-right: 6px; vertical-align: middle; }
.ai-think i { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); animation: ai-think-b 1s ease-in-out infinite; }
.ai-think i:nth-child(2) { animation-delay: .15s; }
.ai-think i:nth-child(3) { animation-delay: .3s; }
.ai-think-sec { font-variant-numeric: tabular-nums; }
.ai-think-lbl, .ai-think-unit { color: var(--muted); }

@keyframes ai-think-b { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .ai-think i { animation: none; opacity: .8; } }
.ai-msg-reason { font-size: 13px; color: var(--muted); border-left: 2px solid var(--line); padding: 4px 8px; margin: 4px 0; white-space: pre-wrap; }
.ai-reason-live { font-size: 13px; color: var(--muted); margin: 4px 0; }
.ai-reason-live summary { cursor: pointer; user-select: none; }
.ai-reason-live-txt { white-space: pre-wrap; overflow-wrap: break-word; border-left: 2px solid var(--acc); padding: 4px 8px; margin: 4px 0 0; max-height: 160px; overflow-y: auto; font-style: italic; }
.ai-attach { display: inline-flex; align-items: center; gap: 6px; background: var(--in); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; margin: 4px 4px 0 0; font-size: 13px; }
button.ai-attach { font: inherit; color: inherit; cursor: pointer; }
.ai-att-img { display: inline-block; margin: 4px 4px 0 0; }
.ai-att-img img { max-width: 240px; max-height: 240px; border-radius: 8px; border: 1px solid var(--line); display: block; }
.ai-prov-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ai-prov-item > span { min-width: 0; overflow-wrap: anywhere; }
.ai-prov-item .btn { flex: 0 0 auto; }
.ai-cfg { display: flex; flex-direction: column; gap: 8px; }
.ai-cfg label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ai-mlist { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r); padding: 4px; }
.ai-mrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ai-mrow b { font-weight: 600; overflow-wrap: anywhere; }
.ai-mrow span { flex: none; color: var(--muted); font-size: 12px; }
.ai-mrow:hover { background: var(--in); }
.ai-mrow.on { background: var(--acc-fill); color: var(--acc-ink); }
.ai-mrow.on span { color: var(--acc-ink); opacity: 0.8; }
.ai-mrow[hidden] { display: none; }

/* аватары и медиа — классы вместо inline-стилей (CSP style-src 'self') */
.avimg { border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: block; }
.cav-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.pres-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok, #2e9e5b); border: 2px solid var(--panel); display: none; }
.cav-wrap.pres-on .pres-dot { display: block; animation: pres-pulse 2.2s ease-out infinite; }
.pres-txt { display: none; font-size: 12px; font-weight: 500; color: #1e7e45; margin-left: 6px; white-space: nowrap; }
.pres-txt.pres-on { display: inline; }
.pres-txt.pres-on::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #2e9e5b); margin-right: 5px; vertical-align: 1px; animation: pres-pulse 2.2s ease-out infinite; }
.pres-txt.pres-recent { display: inline; color: var(--dim); font-weight: 400; }

@keyframes pres-pulse {
  0% { box-shadow: 0 0 0 0 rgb(46 158 91 / 0.45); }
  70% { box-shadow: 0 0 0 7px rgb(46 158 91 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(46 158 91 / 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cav-wrap.pres-on .pres-dot, .pres-txt.pres-on::before { animation: none; }
}
.av-38 { width: 38px; height: 38px; font-size: 19px; }
.av-36 { width: 36px; height: 36px; font-size: 18px; }
.av-40 { width: 40px; height: 40px; font-size: 20px; }
.av-120 { width: 120px; height: 120px; font-size: 60px; }
.av-prev { border: 2px solid var(--acc); }
.media-el { display: block; width: 100%; margin-top: 10px; border-radius: 8px; }
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto 1fr; grid-template-columns: auto minmax(0, 1fr) auto; background: rgb(10 12 15 / 92%); }
.lb-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #fff; }
.lb-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.lb-count { flex: 0 0 auto; color: #cfd4da; font-size: 13px; }
.lb-act { flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid rgb(255 255 255 / 30%); background: transparent; color: #fff; font-size: 14px; cursor: pointer; }
.lb-act:hover { background: rgb(255 255 255 / 16%); }
.lb-nav { grid-row: 2; align-self: center; width: 48px; height: 68px; border: 0; background: rgb(255 255 255 / 8%); color: #fff; font-size: 40px; line-height: 1; cursor: pointer; border-radius: 8px; }
.lb-nav:hover { background: rgb(255 255 255 / 20%); }
.lb-prev { grid-column: 1; margin-left: 8px; }
.lb-next { grid-column: 3; margin-right: 8px; }
.lb-stage { position: relative; grid-column: 2; grid-row: 2; display: grid; place-items: center; overflow: hidden; padding: 8px; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 82dvh; border-radius: 8px; background: #000; }
.lb-loading { display: flex; align-items: center; gap: 10px; color: #cfd4da; font-size: 14px; }
.lb-loading::before { content: ""; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 2px solid rgb(255 255 255 / 30%); border-top-color: #fff; animation: vm-spin .8s linear infinite; }
.lb-lqip { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(26px) saturate(1.08); opacity: .5; transform: scale(1.12); pointer-events: none; }
.lb-load { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #cfd4da; font-size: 14px; }
.lb-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgb(255 255 255 / 22%); border-top-color: #fff; animation: vm-spin .8s linear infinite; }
.lb-prog { width: min(280px, 70vw); height: 4px; border-radius: 4px; background: rgb(255 255 255 / 18%); overflow: hidden; }
.lb-prog > i { display: block; width: 0; height: 100%; border-radius: 4px; background: #fff; transition: width .18s ease; }
.lb-pct { font-size: 13px; font-variant-numeric: tabular-nums; }
.lb-ph { font-size: 13px; color: #cfd4da; }

/* компактное уведомление о подгрузке медиа (фаза + проценты) */
.media-busy {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 960;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(360px, 88vw);
  padding: 9px 14px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
  font-size: 13px;
  pointer-events: none;
}

.media-busy[hidden] { display: none; }
.mb-spin { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--acc); animation: vm-spin .8s linear infinite; }
.mb-body { flex: 1 1 auto; min-width: 0; }
.mb-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.mb-phase { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-pct { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.mb-bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.mb-fill { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--acc); transition: width .18s ease; }

/* ---------- анонимный чат ---------- */
.anon-panel { display: flex; flex-direction: column; gap: 14px; padding: 16px; overflow-y: auto; }
.anon-head { display: flex; align-items: center; gap: 8px; }
.anon-head .back-btn { display: inline-flex; }
.anon-title { font-size: 17px; font-weight: 700; }
.anon-online { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.anon-online i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.anon-online.on { color: var(--ok); }
.anon-online.on i { background: var(--ok); box-shadow: 0 0 0 3px rgb(46 160 67 / 22%); }
.anon-entry { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); min-height: 60px; margin: 8px 12px; padding: 9px 14px; text-align: left; cursor: pointer; color: var(--text); border: 1px solid color-mix(in srgb, var(--acc) 24%, var(--line)); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 12%, var(--panel)), var(--panel)); box-shadow: 0 1px 2px rgb(0 0 0 / 6%); transition: box-shadow .15s, border-color .15s, transform .05s; -webkit-tap-highlight-color: transparent; }
.anon-entry:hover { border-color: color-mix(in srgb, var(--acc) 48%, var(--line)); box-shadow: 0 3px 14px rgb(0 0 0 / 11%); }
.anon-entry:active { transform: translateY(1px); }
.ae-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--acc-ink); background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 78%, #000 14%)); }
.ae-ic svg { width: 24px; height: 24px; }
.ae-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ae-t { font-weight: 650; font-size: 15px; }
.ae-sub { font-size: 12.5px; color: var(--muted); }
.ae-on { display: inline-flex; align-items: center; gap: 5px; }
.ae-on i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.ae-on.on { color: var(--ok); font-weight: 600; }
.ae-on.on i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 26%, transparent); }
.ae-go { flex: 0 0 auto; color: var(--muted); font-size: 22px; line-height: 1; }
.anon-entry-wrap { position: relative; margin: 8px 12px; }
.anon-entry-wrap .anon-entry { width: 100%; margin: 0; }
.anon-entry-collapse { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; z-index: 1; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.anon-entry-collapse:hover { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc-ink); }
.anon-entry-collapse svg { width: 18px; height: 18px; }
.anon-entry-collapsed { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); margin: 8px 12px; padding: 8px 14px; text-align: left; cursor: pointer; color: var(--muted); border: 1px dashed color-mix(in srgb, var(--acc) 32%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--acc) 5%, var(--panel)); font-size: 13px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.anon-entry-collapsed:hover { color: var(--text); border-color: color-mix(in srgb, var(--acc) 52%, var(--line)); }
.aec-ic { font-size: 16px; line-height: 1; }
.aec-t { font-weight: 600; }
.aec-chev { margin-left: auto; color: var(--muted); }
.aec-on { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; font-size: 12px; color: var(--muted); }
.aec-on i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.aec-on.on { color: var(--ok); }
.aec-on.on i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.anon-media { max-width: min(320px, 72%); }
.anon-thumb { display: block; max-width: 100%; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--in); }
.anon-thumb img, .anon-thumb > video { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.anon-video { position: relative; }
.anon-video video { pointer-events: none; }
.anon-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 34px; background: rgb(0 0 0 / 28%); pointer-events: none; }
.msg-media { max-width: min(320px, 78%); }
.anon-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.anon-form { display: flex; flex-direction: column; gap: 10px; }
.anon-f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.anon-f select { font-size: 16px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.anon-btn { width: 100%; }
.anon-load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; min-height: 240px; padding: 24px; text-align: center; }
.anon-load h3 { margin: 0; font-size: 18px; }
.anon-load p { margin: 0; }
.anon-spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--acc); animation: vm-spin .9s linear infinite; }
.anon-end-ic { font-size: 40px; }
.anon-end-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.anon-end-acts .btn { min-width: 140px; }
.anon-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--in); display: grid; place-items: center; font-size: 20px; }
.anon-msgs { min-height: 0; }
.anon-attach { position: relative; overflow: hidden; }
.anon-attach input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.anon-file { display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 8px 10px; border-radius: 12px; background: var(--in); }
.anon-file-ic { flex: 0 0 auto; }
.anon-file-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anon-file-s { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.anon-file-d { flex: 0 0 auto; text-decoration: none; padding: 2px 6px; border-radius: 8px; background: var(--panel); color: var(--acc); }
.lb-audio { padding: 24px; }
.ext-link { color: var(--acc); text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }
.ext-link:hover { color: var(--text); }
.owrap { overflow-wrap: anywhere; }
.shared-panel { position: fixed; inset: 0; z-index: 39; display: grid; place-items: center; padding: 16px; background: rgb(37 42 49 / 45%); }
.shared-card { width: 100%; max-width: 560px; max-height: 85dvh; display: flex; flex-direction: column; background: var(--panel); border-radius: 16px; overflow: hidden; }
.shared-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.shared-h { margin: 0; font-size: 16px; }
.shared-body { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
.shared-body .sec { margin: 14px 16px 6px; }
.shared-body > p.muted { margin: 0 16px 12px; }
.shared-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.shared-row:hover { background: var(--in); }
.shared-row .conv-meta { min-width: 0; }
.mt12 { margin-top: 12px; }
.center { text-align: center; }
.center-m12 { text-align: center; margin: 12px 0; }
.sel { user-select: all; }
.noscript { max-width: 640px; margin: 24px auto; padding: 0 16px; font: 16px system-ui, sans-serif; color: #ddd; }

/* счётчик-бейдж в боковом меню */
.rail-badge { position: absolute; top: 2px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger-fill); color: #fff; font: 700 11px/18px system-ui, sans-serif; text-align: center; pointer-events: none; }

/* шторка «Ещё» (моб. меню) */
.more-wrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; }
.more-back { position: absolute; inset: 0; background: rgb(20 24 30 / .42); opacity: 0; transition: opacity .2s ease; }
.more-sheet { position: relative; width: 100%; background: var(--panel); border-radius: 18px 18px 0 0; padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .24s cubic-bezier(.22, .61, .36, 1); box-shadow: 0 -10px 34px rgb(20 24 30 / .22); }
.more-wrap.open .more-back { opacity: 1; }
.more-wrap.open .more-sheet { transform: translateY(0); }
.more-grabber { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 2px auto 14px; }
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.more-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 72px; padding: 8px 3px; border: 0; border-radius: 14px; background: none; color: var(--dim); cursor: pointer; }
.more-item .ic { width: 24px; height: 24px; }
.more-item .rail-lbl { font-size: 11px; }
.more-item.on { color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); }
.more-item:not(.on):active { background: var(--in); }

/* заметки */
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 10px 16px; background: var(--panel); }
.note-card .note-meta { display: block; color: var(--dim); font-size: 12px; margin-top: 6px; }
.note-card .note-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* аватар: клик по превью = выбор файла, кнопка поворота */
.av-wrap { position: relative; display: inline-block; cursor: pointer; }
.av-edit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgb(0 0 0 / 0.45); color: #fff; font-size: 22px; opacity: 0; transition: opacity 120ms; }
.av-wrap:hover .av-edit, .av-wrap:focus-visible .av-edit { opacity: 1; }
.av-rot { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; background: var(--acc-fill); border: 2px solid var(--panel); color: var(--acc-ink); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* превью изображений в файлах */
.file-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: var(--in); }
.img-prev { display: block; max-width: 100%; max-height: 60dvh; margin-top: 10px; border-radius: 8px; }

/* строка чата с кнопкой удаления (AI-чаты в списке) */
.conv-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.conv-row .conv-item { border-bottom: 0; flex: 1 1 auto; min-width: 0; width: auto; }
.conv-del { flex: 0 0 auto; width: 40px; border: 0; background: none; color: var(--dim); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 0; }
.conv-del:hover { color: var(--danger); background: var(--in); }

/* медиа-вложения прямо в чате */
.chat-file { display: flex; flex-direction: column; gap: 6px; max-width: 300px; }
.chat-file-img { max-width: 280px; max-height: 320px; border-radius: 10px; cursor: zoom-in; display: block; }
.chat-file-img.is-loading { opacity: .45; cursor: progress; }
.boot-splash { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg); color: var(--muted); font: 14px system-ui, sans-serif; }
.lang-list { display: flex; flex-direction: column; gap: 8px; }
.lang-row { min-height: 44px; text-align: left; }
.boot-spin { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--acc); border-radius: 50%; animation: boot-rot .9s linear infinite; }

@media (prefers-reduced-motion: reduce) { .boot-spin { animation-duration: 2.6s; } }

@keyframes boot-rot { to { transform: rotate(360deg); } }
.boot-sub { font-size: 12px; color: var(--muted); }
.auth-overlay { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgb(18, 21, 26, .55); }
.auth-overlay[hidden] { display: none; }
.auth-overlay-card { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 340px; padding: 28px 24px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgb(0, 0, 0, .28); text-align: center; }
.auth-overlay-msg { font-size: 16px; font-weight: 600; }
.auth-overlay-sub { font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .auth-overlay .boot-spin { animation-duration: 2.6s; } }
.chat-thumb-wrap { position: relative; display: inline-block; align-self: flex-start; }
.chat-thumb-ph { min-width: 160px; min-height: 110px; cursor: zoom-in; background: linear-gradient(100deg, var(--in) 30%, var(--line) 50%, var(--in) 70%); background-size: 240% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.chat-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; text-shadow: 0 1px 8px rgb(0 0 0 / 65%); pointer-events: none; }
.chat-thumb-dl { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; min-width: 32px; padding: 0; border: 0; border-radius: 8px; background: rgb(0 0 0 / 55%); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background-color .15s; }
.chat-thumb-dl:hover { background: rgb(0 0 0 / 78%); }
.chat-thumb-dl .ic { width: 18px; height: 18px; }
.chat-file video, .chat-file audio { width: 260px; max-width: 100%; display: block; }
.chat-file-doc { display: flex; align-items: center; gap: 8px; background: var(--in); border-radius: 10px; padding: 10px 12px; text-decoration: none; color: inherit; }
.chat-file-doc:hover { background: var(--line); }
.chat-file-meta { color: var(--dim); font-size: 12px; }
.chat-file-dl { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 16px; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--in); color: var(--text); font-size: 13px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s; }
.chat-file-dl:hover { border-color: var(--acc); background: var(--line); text-decoration: none; }
.chat-file-dl:active { transform: translateY(1px); }
.chat-file-dl:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

@media (max-width: 480px) {
  .chat-file-dl { padding: 3px 10px; min-height: 24px; gap: 4px; font-size: 11px; }
  .chat-file-dl .ic { width: 12px; height: 12px; }
  .vp-rate { display: none; }
  .vp-ctrl { gap: 2px; padding: 6px; flex-wrap: wrap; }
  .vp-bar { order: -1; flex: 1 1 100%; }
  .vp-fs { order: 9; }
  .vp-volr { width: 84px; height: 32px; }
  .vp-volr::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; }
  .vp-volr::-moz-range-thumb { width: 24px; height: 24px; }
  .lb-stage .vplay { width: 100%; }
  .lb-stage video { width: 100%; }
  .lightbox { grid-template-columns: minmax(0, 1fr); }
  .lb-stage { grid-column: 1; }
  .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; background: rgb(0 0 0 / 45%); }
  .lb-prev { left: 4px; }
  .lb-next { right: 4px; }
}
.chat-file-open { align-self: flex-start; background: var(--in); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 13px; cursor: pointer; color: var(--text); min-height: 32px; }
.chat-file-open:hover { border-color: var(--acc); }
.chat-file-img:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* выбор диалога при пересылке */
.fwd-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; padding: 4px; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; }
.fwd-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; color: var(--text); min-height: 48px; }
.fwd-opt:hover { background: var(--in); }
.fwd-opt.on { background: color-mix(in srgb, var(--acc) 14%, transparent); }
.fwd-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwd-radio { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); }
.fwd-opt.on .fwd-radio { border-color: var(--acc-fill); background: radial-gradient(circle, var(--acc-fill) 0 45%, transparent 50%); }

/* отступы между действиями на экране блокировки */
.auth-card form + .btn { margin-top: 12px; }

/* полоса загрузки (прикрепление файла в чат и загрузка в разделе «Файлы») */
.up-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 6px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.up-ic { flex: 0 0 auto; }
.up-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.up-name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-track { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.up-fill { display: block; height: 100%; width: 0; background: var(--ok-fill); border-radius: 999px; transition: width .15s ease; }
.up-pct { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--dim); min-width: 40px; text-align: right; }

/* баннер исчезающих сообщений */
.ttl-banner { align-self: center; margin: 4px 16px 2px; padding: 3px 10px; border-radius: 999px; background: transparent; color: var(--acc); font-size: 12px; line-height: 1.4; white-space: nowrap; }

/* кнопки очистки звонков */
.calls-tools { display: flex; justify-content: flex-end; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.call-del { flex: 0 0 auto; width: 36px; border: 0; background: none; color: var(--dim); font-size: 18px; cursor: pointer; border-radius: 8px; }
.call-del:hover { color: var(--danger); background: var(--in); }
.file-item .call-meta { flex: 1; min-width: 0; }

/* раздел «Заметки»: чат-подобный тред на всю ширину */
body.notes-thread .pane.list { display: none; }
.note-ava { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--in); font-size: 20px; }
.note-empty { text-align: center; padding: 28px 16px; }

@media (min-width: 768px) {
  body.notes-thread .app { grid-template-columns: 92px minmax(0, 1fr); }
  body.notes-thread .pane.main { grid-column: 2; }
}

/* статусы передачи файлов в чате (обрыв/повтор) */
.tx-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--warn); }
.tx-warn .btn { padding: 4px 12px; font-size: 13px; min-height: 28px; }

/* AI-перевод сообщений в чате */
.ai-tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 6px; padding: 6px 10px; border: 1px dashed var(--acc); border-radius: 10px; font-size: 14px; }
.ai-badge { font-size: 12px; opacity: .8; white-space: nowrap; }
.tr-x { border: 0; background: none; color: inherit; opacity: .5; cursor: pointer; padding: 4px 8px; min-width: 24px; min-height: 24px; }
.tr-x:hover { opacity: 1; }
.tr-btn { border: 0; background: none; color: var(--acc); opacity: .75; cursor: pointer; padding: 14px 12px; min-width: 44px; min-height: 44px; margin: -12px -10px -12px 0; vertical-align: middle; }

.tr-ic { vertical-align: -3px; flex: none; }
.ai-tr .ai-badge { display: inline-flex; align-items: center; gap: 4px; }

.cp-ic { vertical-align: -3px; flex: none; }
.md-copy .cp-ic, .msg-act .cp-ic, .fwd-btn .cp-ic, .frow-act .cp-ic { width: 18px; height: 18px; }

/* контекстное меню сообщения + ответ/правка/пин/выделение */
.msg-menu-bd { position: fixed; inset: 0; z-index: 950; background: rgb(0 0 0 / 6%); }
.msg-menu { position: fixed; z-index: 951; min-width: 208px; max-width: 264px; background: var(--panel, #fff); border: 1px solid var(--in); border-radius: 14px; box-shadow: 0 12px 34px rgb(20 30 50 / 22%); padding: 6px; animation: mmpop .14s ease; }

@keyframes mmpop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mm-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--text); text-align: left; cursor: pointer; min-height: 44px; }
.mm-item:hover { background: var(--in); }
.mm-item.danger { color: var(--danger); }
.mm-ic { display: inline-flex; width: 20px; justify-content: center; flex: none; opacity: .85; }
.mm-ic svg { width: 18px; height: 18px; }
.msg-quote { border-left: 3px solid var(--acc); background: var(--in); border-radius: 8px; padding: 5px 9px; margin: 2px 0 6px; font-size: 13px; color: var(--dim); display: flex; flex-direction: column; gap: 1px; }
.msg-quote b { font-size: 12.5px; color: var(--acc); }
.edited-tag { opacity: .55; font-size: 12px; font-style: italic; }
.pin-bar { display: flex; align-items: center; gap: 9px; padding: 8px 14px; background: var(--in); border-bottom: 1px solid var(--in); cursor: pointer; }
.pin-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pin-txt b { font-size: 12.5px; color: var(--acc); }
.pin-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.pin-bar button { border: 0; background: none; color: var(--dim); cursor: pointer; padding: 6px 10px; min-width: 24px; min-height: 24px; }
.ctx-chip { display: flex; align-items: center; gap: 9px; margin: 6px 14px 0; padding: 7px 11px; border-left: 3px solid var(--acc); background: var(--in); border-radius: 10px; font-size: 13.5px; }
.ctx-chip.editing { border-left-color: var(--warn, #b58a2c); }
.ctx-chip-ic { flex: none; }
.ctx-chip-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ctx-chip-t b { font-size: 12.5px; color: var(--acc); }
.ctx-chip-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.ctx-chip button { border: 0; background: none; color: var(--dim); cursor: pointer; padding: 6px 10px; min-width: 24px; min-height: 24px; }
.msgs + .sel-bar, .sel-bar.msgs-sel { gap: 8px; padding: 8px 14px; border-top: 1px solid var(--in); flex-wrap: wrap; }
.msgs.selecting .msg { cursor: pointer; }
.msg-check { display: none; }
.msgs.selecting .msg-check { display: inline-flex; width: 22px; height: 22px; border: 2px solid var(--dim); border-radius: 50%; color: transparent; align-items: center; justify-content: center; font-size: 13px; margin-right: 8px; flex: none; align-self: center; }
.msg.sel .msg-check { background: var(--acc); border-color: var(--acc); color: #fff; }
.msg.sel { border-radius: 12px; outline: 2px solid var(--acc); outline-offset: 2px; }
.msg.flash { animation: msgflash .55s 3; }

@keyframes msgflash { 50% { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: 12px; } }

/* разделители дней в ленте + плавающая дата при прокрутке */
.day-sep { display: flex; justify-content: center; margin: 12px 0 8px; }
.day-sep span { background: var(--in); color: var(--dim); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; text-transform: capitalize; }
.day-float { position: sticky; top: 6px; z-index: 6; align-self: center; justify-self: center; height: 0; pointer-events: none; }
.day-float span { display: block; width: max-content; margin: 0 auto; background: rgb(61 90 128 / 88%); color: #fff; border-radius: 999px; padding: 4px 14px; font-size: 12.5px; font-weight: 600; text-transform: capitalize; opacity: 0; transition: opacity .25s; }
.day-float.on span { opacity: 1; }

/* панель «Файлы и ссылки диалога»: вкладки, сетка медиа, чипы фильтров, иконки форматов */
.sp-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--line, var(--in)); background: var(--panel); overflow-x: auto; scrollbar-width: none; }
.sp-tab { border: 0; background: none; padding: 11px 12px; font: inherit; font-size: 14px; color: var(--dim); cursor: pointer; border-bottom: 2px solid transparent; min-height: 44px; white-space: nowrap; flex: 0 0 auto; }
.sp-tab.on { color: var(--acc); border-bottom-color: var(--acc); font-weight: 600; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; padding: 12px 14px 4px; }
.sp-tile { position: relative; aspect-ratio: 1; border: 0; border-radius: 10px; overflow: hidden; padding: 0; background: var(--in); cursor: pointer; }
.sp-tile img, .sp-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 22px; text-shadow: 0 1px 6px rgb(0 0 0 / 60%); pointer-events: none; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 14px 10px; }
.sp-chip { border: 1px solid var(--in); background: none; border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 13.5px; color: var(--dim); cursor: pointer; min-height: 32px; }
.sp-chip.on { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--acc-ink); }
.ft-wrap { flex: none; width: 40px; height: 40px; display: inline-flex; }
.ft-ic { width: 40px; height: 40px; }

.sp-tile.sp-audio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; background: linear-gradient(160deg, var(--in), var(--panel)); }
.sp-note { font-size: 30px; }
.sp-aname { font-size: 12px; color: var(--dim); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sp-tile.loading { background-image: linear-gradient(100deg, var(--in) 40%, var(--panel) 50%, var(--in) 60%); background-size: 200% 100%; animation: spshim 1.1s linear infinite; }

@keyframes spshim { to { background-position-x: -200%; } }
.sp-tile.miss { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--dim); font-size: 12px; padding: 8px; text-align: center; }
.sp-tile.miss::before { content: "🖼"; font-size: 24px; opacity: .5; }
.sp-tile img { visibility: hidden; }
.sp-tile img[src] { visibility: visible; }

/* пустые состояния панели — по центру; адаптив вкладки/сетки */
.sp-empty { display: block; text-align: center; padding: 34px 18px; margin: 0 !important; font-size: 14px !important; }

@media (max-width: 420px) {
  .shared-panel { padding: 10px; }
  .shared-card { max-height: 92dvh; border-radius: 14px; }
  .shared-head { padding: 12px 14px; }
  .sp-tab { padding: 10px 9px; font-size: 13px; }
  .sp-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 5px; padding: 10px 10px 4px; }
  .sp-chips { margin: 10px 10px 0; }
  .sp-chip { padding: 6px 11px; }
  .shared-row { padding: 8px 12px; }
}

/* лоадер диалога (нет «прыжка» между экранами): скелетон в форме реальных пузырей */
.chat-loading { display: flex; flex-direction: column; gap: 14px; padding: 24px 16px; }
.chat-loading span {
  position: relative;
  overflow: hidden;
  height: 40px;
  border-radius: 16px 16px 16px 4px;
  max-width: 72%;
  background: var(--in);
}
.chat-loading span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--line) 50%, transparent 70%); background-size: 240% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.chat-loading span:nth-child(2) { width: 48%; align-self: flex-end; border-radius: 16px 16px 4px; background: var(--acc); opacity: .35; }
.chat-loading span:nth-child(3) { width: 34%; }
.chat-loading span:nth-child(4) { width: 55%; align-self: flex-end; border-radius: 16px 16px 4px; background: var(--acc); opacity: .35; }
.chat-loading span:nth-child(2)::after { animation-delay: .18s; }
.chat-loading span:nth-child(3)::after { animation-delay: .36s; }
.chat-loading span:nth-child(4)::after { animation-delay: .54s; }

/* скелетон списка при смене раздела: повторы карточек диалогов (аватар + строки) */
.list-skel { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; }
.list-skel span {
  position: relative;
  overflow: hidden;
  height: 58px;
  border-radius: 14px;
  background:
    radial-gradient(21px 21px at 35px 29px, var(--in) 99%, transparent 100%),
    linear-gradient(var(--in) 0 0) 70px 18px / 46% 11px no-repeat,
    linear-gradient(var(--in) 0 0) 70px 39px / 26% 9px no-repeat;
}
.list-skel span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--line) 50%, transparent 70%); background-size: 240% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.list-skel span:nth-child(2n)::after { animation-delay: .22s; }
.list-skel span:nth-child(3n)::after { animation-delay: .44s; }

@keyframes shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

.txt-sk { color: transparent; border-radius: 4px; background: linear-gradient(100deg, var(--in) 30%, var(--line) 50%, var(--in) 70%); background-size: 240% 100%; animation: shimmer 1.3s ease-in-out infinite; }

@keyframes chatload { 50% { opacity: .45; } }

/* список «Файлы»: иконки форматов, превью фото, фильтр по типам */
.file-ic.ftc { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.fth { position: relative; overflow: hidden; display: inline-flex; width: 40px; height: 40px; border-radius: 8px; background: var(--in); align-items: center; justify-content: center; }
.fth:not(.fth-done)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--line) 50%, transparent 70%); background-size: 240% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.fth-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; display: block; }
.fcat-chips { margin: 10px 14px 2px; }
.sto-bar { padding: 4px 14px 8px; font-size: 13px; color: var(--muted); }
.sto-bar b { color: var(--text); font-weight: 600; }

/* план AI-сортировки */
.ais-list { max-height: 46dvh; overflow-y: auto; overscroll-behavior: contain; margin-top: 6px; }
.ais-gr { margin-bottom: 10px; }
.ais-gr-h { font-weight: 600; font-size: 14px; padding: 6px 4px; }
.ais-new { font-size: 11.5px; background: var(--warn, #b58a2c); color: #fff; border-radius: 999px; padding: 2px 8px; vertical-align: 1px; }
.ais-it { display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 14px; font-size: 13.5px; cursor: pointer; border-radius: 8px; }
.ais-it:hover { background: var(--in); }
.ais-it input { width: 16px; height: 16px; flex: none; }
.ais-real { margin-left: auto; color: var(--dim); max-width: 40%; text-align: right; }
.fol-chip.up { border-style: dashed; }

.loc-tag { color: #c99700; font-weight: 600; white-space: nowrap; }
.srv-tag { color: #2f6fed; font-weight: 600; white-space: nowrap; }

.sp-loc { position: absolute; top: 4px; right: 4px; z-index: 1; background: rgb(0 0 0 / 62%); border-radius: 6px; padding: 1px 4px; font-size: 11px; line-height: 1.4; cursor: help; }

@media (prefers-color-scheme: dark) { .loc-tag { color: #e3b341; } .srv-tag { color: #7ea2f5; } }

.prov-acts { display: inline-flex; gap: 6px; flex: 0 0 auto; }

.msg-cap { margin-top: 6px; }

@media (max-width: 420px) { .btn-label { display: none; } }

.call-local-pip { position: absolute; top: 12px; right: 12px; width: 110px; border-radius: 10px; border: 1px solid rgb(255 255 255 / 35%); z-index: 2; background: #000; }

.fol-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; }
.crumb { border: 0; background: none; padding: 4px 6px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; color: var(--muted, #666); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb:hover { background: rgb(128 128 128 / 12%); }
.crumb.on { color: var(--acc); font-weight: 600; }
.crumb-sep { color: var(--muted, #999); font-size: 12px; }
.fol-stat { font-size: 13px; color: var(--muted, #666); margin-right: auto; }

/* руководство по установке PWA */
.ig-wrap { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--panel); }
details.ig-wrap { padding: 0; }
details.ig-wrap > summary { cursor: pointer; padding: 12px; font-weight: 600; font-size: 14px; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 24px; }
details.ig-wrap > summary .ic { width: 17px; height: 17px; flex: 0 0 auto; }
details.ig-wrap > summary::after { content: "▾"; margin-left: auto; transition: transform .15s; }
details.ig-wrap[open] > summary::after { transform: rotate(180deg); }
details.ig-wrap > summary::-webkit-details-marker { display: none; }
details.ig-wrap > :not(summary) { margin-inline: 12px; }
details.ig-wrap > .ig-tabs { margin-block: 4px 8px; }
.ig-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ig-tab { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; min-width: 0; padding: 4px 6px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }

.ig-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-tab.on { background: var(--acc-fill); border-color: var(--acc-fill); color: #fff; }
.ig-panel[hidden] { display: none; }
.ig-steps { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 8px; }
.ig-step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 14px; line-height: 1.4; background: var(--in); border: 1px solid var(--line); border-radius: 12px; }
.ig-ic { position: relative; flex: 0 0 38px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); font-size: 19px; }
.ig-n { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--acc-fill); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--in); }
.ig-t { flex: 1; min-width: 0; }

.crumb .ic { width: 15px; height: 15px; vertical-align: -2px; }
.mf-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 55vh; overflow: auto; }
.mf-item { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--in); }
.mf-item[hidden] { display: none; }
.mf-openable { cursor: zoom-in; }
.mf-openable:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.mf-play { position: absolute; top: 45px; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: rgb(0 0 0 / 55%); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mf-item img, .mf-item video { width: 100%; height: 90px; object-fit: cover; display: block; background: #000; }
.mf-ic { display: flex; align-items: center; justify-content: center; height: 90px; font-size: 14px; }
.mf-meta { padding: 6px 8px; min-width: 0; }
.mf-name { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-size { display: block; font-size: 13px; color: var(--muted); }
.mf-x { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 62%); color: #fff; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mf-x::after { content: ""; position: absolute; inset: -7px; }
.mf-x:hover { background: var(--danger, #c33); }
.mf-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.fol-chip .ic, .crumb .ic { width: 14px; height: 14px; vertical-align: -2px; }
/* stylelint-disable-next-line selector-id-pattern */
#fselMove .ic { width: 15px; height: 15px; vertical-align: -2px; }

/* ---------- пакеты файлов ---------- */
.pack-card { display: flex; flex-direction: column; gap: 8px; min-width: min(280px, 100%); }
.pack-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pack-prog { color: var(--warn); font-size: 12px; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.pack-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--in); color: var(--text); cursor: pointer; min-height: 44px; text-align: center; }
.pack-tile:hover { border-color: var(--acc); }
.pack-tile .ft-ic { width: 30px; height: 30px; }
.pack-thumb { position: relative; width: 46px; height: 46px; border-radius: 8px; background: var(--in) center / cover no-repeat; flex: none; overflow: hidden; }
.pack-thumb:not(.filled)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--line) 50%, transparent 70%); background-size: 240% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.pack-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; color: #fff; text-shadow: 0 1px 4px rgb(0 0 0 / 80%); pointer-events: none; }
.pack-tname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.pack-tsize { font-size: 11px; color: var(--muted); }
.pack-wait { opacity: 0.55; }

/* ---------- плавающий виджет передач ---------- */
.xfer-fab { position: fixed; left: 0; top: 0; z-index: 960; width: 56px; height: 56px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 28px rgb(20 30 50 / 26%); display: grid; place-items: center; cursor: grab; touch-action: none; user-select: none; will-change: transform; }
.xfer-fab[hidden], .xfer-panel[hidden] { display: none; }
.xfer-fab:active { cursor: grabbing; }
.xfer-fab svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.xfer-fab .xf-bg { fill: none; stroke: var(--in); stroke-width: 4; }
.xfer-fab .xf-arc { fill: none; stroke: var(--acc); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: 126; transition: stroke-dashoffset 0.25s; }
.xfer-fab .xf-pct { font-size: 11px; font-weight: 700; color: var(--text); }
.xfer-fab .xf-stack { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 2px; }
.xfer-fab .xf-mini { font-size: 13px; font-weight: 700; color: var(--acc); }
.xfer-fab .xf-mini.xf-warn { color: var(--danger); }
.xfer-fab .xf-spin { animation: xfspin 1.1s ease-in-out infinite; }

@keyframes xfspin { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .xfer-fab .xf-spin { animation: none; opacity: 1; } }
.xfer-panel { position: fixed; z-index: 959; width: min(312px, calc(100vw - 16px)); max-height: 224px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 38px rgb(20 30 50 / 26%); padding: 10px 12px; }
.xf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.xf-sum { color: var(--muted); font-size: 12px; }
.xf-hr { display: inline-flex; align-items: center; gap: 8px; }
.xf-stop { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; min-height: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--in); color: var(--text); font-size: 12px; cursor: pointer; }
.xf-stop[hidden] { display: none; }
.xf-stop:hover { border-color: var(--danger); color: var(--danger); }
.xf-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 13px; border-top: 1px solid var(--in); }
.xf-dir { flex: none; }
.xf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xf-st { flex: none; color: var(--ok); font-variant-numeric: tabular-nums; }
.xf-err { color: var(--danger); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xf-acts { display: inline-flex; flex: none; gap: 4px; margin-left: 2px; }
.xf-retry, .xf-x { display: inline-grid; place-items: center; min-width: 26px; min-height: 26px; padding: 0 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--in); color: var(--text); font-size: 14px; line-height: 1; cursor: pointer; }
.xf-retry:hover { border-color: var(--acc); color: var(--acc); }
.xf-x:hover { border-color: var(--danger); color: var(--danger); }

/* ══ Единое уведомление об обновлениях и целостности (роль: js/update-ui.js) ══
   Карточка в дизайн-системе приложения (как .media-busy/.toast): панель, линия, радиус --r,
   акцентная грань по типу события, чип версии; тап-таргеты ≥40, адаптив от 375px. */
.vn { position: fixed; z-index: 9999; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.vn-bar {
  top: 12px;
  right: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  width: min(680px, calc(100% - 24px));
  padding: 10px 12px 10px 14px;
  margin: 0 auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: var(--r);
  box-shadow: 0 10px 32px rgb(0 0 0 / 18%);
  animation: vn-in 0.22s ease-out;
}
.vn-update {
  background: var(--acc-fill);
  border-color: var(--acc-fill);
  border-left-color: rgb(255 255 255 / 55%);
  color: var(--acc-ink);
}
.vn-update .vn-dot { background: var(--acc-ink); box-shadow: 0 0 0 3px rgb(255 255 255 / 25%); }
.vn-update .vn-ver { background: color-mix(in srgb, var(--acc-fill) 88%, white); color: var(--acc-ink); } /* солидный цвет (не полупрозрачный): контраст с белым текстом ≥5:1 и вычислим */
.vn-update .vn-btn { border-color: rgb(255 255 255 / 45%); background: transparent; color: var(--acc-ink); }
.vn-update .vn-btn:hover { background: rgb(255 255 255 / 12%); }
.vn-update .vn-primary { border-color: var(--acc-ink); background: var(--acc-ink); color: var(--acc-fill); }
.vn-update .vn-primary:hover { background: var(--acc-ink); filter: brightness(0.94); }
.vn-update .vn-track { background: rgb(255 255 255 / 25%); }
.vn-update .vn-fill { background: var(--acc-ink); }
.vn-update .vn-plbl { color: var(--acc-ink); }
.vn-update .vn-hint { color: var(--acc-ink); opacity: 0.8; }
.vn-problem, .vn-integrity { border-left-color: var(--danger); }
.vn-info { border-left-color: var(--dim); }
.vn-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 16%, transparent); }
.vn-problem .vn-dot, .vn-integrity .vn-dot { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); }
.vn-info .vn-dot { background: var(--dim); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dim) 16%, transparent); }
.vn-text { flex: 1 1 220px; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.vn-ver { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--in); color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.vn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.vn-btn { min-height: 40px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; touch-action: manipulation; }
.vn-btn:hover { background: var(--in); }
.vn-primary { border-color: var(--acc-fill); background: var(--acc-fill); color: var(--acc-ink); font-weight: 600; }
.vn-primary:hover { background: var(--acc-fill); filter: brightness(1.08); }
.vn-problem .vn-primary, .vn-integrity .vn-primary { border-color: var(--danger-fill); background: var(--danger-fill); color: #fff; }
.vn-prog { flex: 1 1 100%; display: flex; gap: 10px; align-items: center; }
.vn-prog[hidden] { display: none; }
.vn-track { flex: 1; height: 5px; overflow: hidden; border-radius: 4px; background: var(--in); }
.vc-track { width: 100%; margin-top: 6px; }
.rn-form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.rn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; }
.rn-row > span { min-width: 110px; color: var(--mut, inherit); }
.rn-row > input[type="text"] { flex: 1; min-width: 120px; }
.rn-w { width: 64px; flex: 0 0 auto; }
.rn-item .rn-ic { font-size: 22px; flex: 0 0 auto; }
.rn-item[data-off="1"] .svc-meta { opacity: 0.45; }
.rn-old { display: block; font-weight: 400; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.rn-name { width: 100%; max-width: 320px; }
.rn-off-l { display: inline-flex; align-items: center; flex: 0 0 auto; }
.rn-off { width: 24px; height: 24px; }
.svc-acts { display: flex; align-items: center; gap: 8px; }
.svc-chk { display: flex; align-items: center; gap: 8px; margin: 4px 0; min-height: 44px; touch-action: manipulation; }
.svc-exif .svc-drop.has { border-color: var(--acc); }
.svc-sep { margin: 20px 0; border: 0; border-top: 1px solid var(--line); }
.pg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pg-code { font-family: ui-monospace, monospace; font-size: 15px; word-break: break-all; }
.pg-crack { padding: 8px 0 4px; line-height: 1.5; }
.hc-al { flex: none; width: 64px; font-weight: 600; }
.hc-line { font-size: 12px; }
.totp-code { font-family: ui-monospace, monospace; font-size: 26px; letter-spacing: 3px; }
.svc-field { display: block; margin: 12px 0; }
.svc-field .input { margin-top: 6px; }
.svc-label { display: block; font-weight: 600; font-size: 14px; }
.svc-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0; }
.qr-img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 8px; image-rendering: pixelated; }
.qr-video { display: block; width: 100%; max-width: 360px; margin: 8px auto; border-radius: 10px; background: #000; }
.f-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.idp-stage { position: sticky; top: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; padding: 6px 0; background: var(--panel); box-shadow: 0 8px 12px -10px rgb(0 0 0 / 22%); }
.idp-stage canvas { display: block; max-width: 100%; max-height: 32vh; width: auto; height: auto; border-radius: 10px; border: 1px solid var(--line); touch-action: none; cursor: grab; background-color: #fff; background-image: linear-gradient(45deg, #e4e4e4 25%, transparent 25%), linear-gradient(-45deg, #e4e4e4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e4e4e4 75%), linear-gradient(-45deg, transparent 75%, #e4e4e4 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.idp-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); text-align: center; }
.idp-spin { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentcolor; border-right-color: transparent; border-radius: 50%; animation: idp-spin 0.7s linear infinite; }

@keyframes idp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .idp-spin { animation-duration: 2s; } }
.idp-bgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.idp-bg { min-height: 44px; min-width: 64px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 14px; touch-action: manipulation; cursor: pointer; }
.idp-bg.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; }
.idp-mm { display: inline-flex; align-items: center; gap: 6px; }
.idp-mm input { width: 64px; }
.stg-prev { margin: 8px 0; }
.stg-img { max-width: 100%; border-radius: 8px; }
.fav-src { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.fav-src[hidden] { display: none; }
.fav-srcimg { width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; background: var(--panel); }
.pgp-ta { min-height: 120px; font-family: ui-monospace, monospace; font-size: 12px; }
.svc-rm { flex: none; min-width: 24px; min-height: 24px; border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; touch-action: manipulation; }
.tr-item { align-items: flex-start; }
.tr-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; width: 100%; }
.tr-player { width: 100%; max-height: 220px; border-radius: 8px; background: #000; }
audio.tr-player { max-height: none; }
.tr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-t { width: 80px; flex: 0 0 auto; }
.vn-fill { width: 0; height: 100%; border-radius: 4px; background: var(--acc); transition: width 0.18s ease; }
.vn-problem .vn-fill, .vn-integrity .vn-fill { background: var(--danger); }
/* Единый индикатор загрузки локальных компонентов сервиса (детерминированный по байтам или индетерминированный) */
.svc-load { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.svc-load[hidden] { display: none; }
.svc-load-top { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.svc-load-pct { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.svc-load-track { height: 6px; overflow: hidden; border-radius: 4px; background: var(--in); }
.svc-load-fill { width: 0; height: 100%; border-radius: 4px; background: var(--acc); transition: width 0.15s ease; }
.svc-load.indet .svc-load-fill { width: 30%; margin-left: -30%; animation: svc-load-slide 1.1s ease-in-out infinite; }
.svc-load-note { font-size: 12px; color: var(--muted); }

@keyframes svc-load-slide { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }

@media (prefers-reduced-motion: reduce) { .svc-load.indet .svc-load-fill { animation-duration: 2.5s; } .svc-load-fill { transition: none; } }
.vn-plbl { min-width: 96px; font-size: 12px; color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
.vn-fatal { inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.vn-card { width: 100%; max-width: 560px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: 0 10px 32px rgb(0 0 0 / 18%); }
.vn-ic { font-size: 34px; line-height: 1; }
.vn-title { margin: 10px 0 6px; font-size: 19px; }
.vn-lead { margin: 0 0 10px; color: var(--dim); }
.vn-lines { max-height: 200px; margin: 0 0 12px; padding: 10px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--in); color: var(--danger); font: 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.vn-fatal .vn-actions { margin-top: 6px; margin-left: 0; }
.vn-fatal .vn-primary { border-color: transparent; background: var(--acc-fill); color: var(--acc-ink); }
.vn-hint { margin: 14px 0 0; color: var(--dim); font-size: 12px; }

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

@media (max-width: 520px) {
  .vn-bar { top: 8px; width: calc(100% - 16px); }
  .vn-actions { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vn-bar { animation: none; }
  .vn-fill { transition: none; }
}

/* Журнал рукопожатий (Настройки → Диагностика, js/diag.js) */
.diag-log { max-height: 60vh; margin: 12px 0 0; padding: 12px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--in); color: var(--text); font: 12px/1.6 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

/* На время удержания кнопки записи: нативное выделение текста пальцем гасим по всему документу */
/* stylelint-disable-next-line property-no-vendor-prefix */
html.vault-noselect, html.vault-noselect * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Отдельный блок «Поддержка» в списке диалогов: обращения пользователей к администрации */
.sup-head { display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); min-height: 40px; margin: 4px 12px 0; padding: 10px 14px; text-align: left; color: var(--muted); background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; font: inherit; font-size: 14px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sup-head:hover { color: var(--text); }
.sup-chev { display: inline-block; transition: transform .15s ease; }
.sup-chev.off { transform: rotate(-90deg); }
.sup-t { font-weight: 600; color: var(--text); }

@media (prefers-reduced-motion: reduce) { .sup-chev { transition: none; } }

/* --- Сервисы: очистка метаданных (локальная утилита) --- */
.svc-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 14px; margin: 8px 0; text-align: left; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); cursor: pointer; touch-action: manipulation; }
.svc-card:hover { border-color: var(--acc); }
.svc-ic { flex: none; font-size: 24px; }
.svc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.svc-tx small { color: var(--muted); }
.svc-arrow { flex: none; font-size: 22px; color: var(--muted); }
.svc-exif .svc-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 88px; padding: 24px 16px; margin: 8px 0; text-align: center; border: 2px dashed var(--line); border-radius: var(--r); cursor: pointer; touch-action: manipulation; }
/* file-input визуально скрыт, но НЕ display:none: на iOS click() по скрытому input молча fails */
.svc-exif .svc-drop input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.svc-exif .svc-drop:hover, .svc-exif .svc-drop.on { border-color: var(--acc); background: var(--in); }
.svc-exif .svc-drop small { color: var(--muted); }
.svc-guest-note { margin: 8px 0; padding: 8px 12px; font-size: 14px; color: var(--acc); background: var(--in); border: 1px solid var(--line); border-radius: var(--r); }
.svc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.svc-target { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.svc-target-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.svc-target-row label { font-size: 16px; }
.svc-target input[type="range"] { width: 100%; min-height: 24px; accent-color: var(--acc); touch-action: manipulation; }
.svc-item { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.svc-prev { flex: none; width: 88px; height: 88px; object-fit: cover; border-radius: 8px; background: var(--in); }
.svc-prev-na { display: flex; align-items: center; justify-content: center; font-size: 28px; }
.svc-meta { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.svc-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.svc-tag { max-width: 100%; padding: 2px 8px; font-size: 12px; border-radius: 999px; background: var(--in); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-tag.hot { color: var(--warn); border: 1px solid var(--warn); }
.svc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.svc-ok { color: var(--ok); font-size: 13px; }

/* Гостевой режим: полноэкранный оверлей с инструментами без аккаунта */
.guest-root { position: fixed; inset: 0; z-index: 5; background: var(--bg); color: var(--text); display: flex; flex-direction: column; overflow: hidden; }
.guest-root.hidden { display: none; }
.guest-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--line); background: var(--panel); flex: 0 0 auto; }
.guest-logo { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.guest-logo em { color: var(--acc); font-style: normal; }
.guest-note { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--muted); }
.guest-note b { color: var(--text); }
.guest-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.guest-main { min-height: 100%; }

/* Лендинг: бесплатные инструменты (без регистрации) */
.free-tools { max-width: 960px; margin: 0 auto; padding: 32px 16px 8px; }
.freet-title { margin: 0 0 8px; font-size: 24px; text-align: center; }
.freet-lead { max-width: 62ch; margin: 0 auto 20px; color: var(--muted); font-size: 15px; line-height: 1.55; text-align: center; }
.freet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.freet-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.freet-card:hover, .freet-card:focus-visible { border-color: var(--acc); transform: translateY(-2px); }
.freet-ic { font-size: 26px; line-height: 1; }
.freet-card b { font-size: 15px; }
.freet-card small { color: var(--muted); font-size: 12.5px; }
.key-advice { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--acc) 8%, transparent); text-align: left; }
.key-advice p { margin: 0 0 8px; line-height: 1.45; }
.key-advice-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Сервис «Обрезка фото» */
.crop-stage { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 6px 0; background: var(--panel); box-shadow: 0 8px 12px -10px rgb(0 0 0 / 22%); }
.crop-stage canvas { display: block; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); touch-action: none; cursor: crosshair; background-color: #fff; background-image: linear-gradient(45deg, #e4e4e4 25%, transparent 25%), linear-gradient(-45deg, #e4e4e4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e4e4e4 75%), linear-gradient(-45deg, transparent 75%, #e4e4e4 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.crop-ratios { display: flex; flex-wrap: wrap; gap: 8px; }
.crop-chip { min-height: 44px; min-width: 44px; padding: 6px 12px; font-size: 15px; line-height: 1.2; border: 1px solid var(--line); border-radius: 999px; background: var(--in); color: inherit; cursor: pointer; touch-action: manipulation; }
.crop-chip.on { border-color: var(--acc); box-shadow: inset 0 0 0 1.5px var(--acc); font-weight: 600; }

/* ---------- Сервис «Логотип и баннер» (послойный канвас‑редактор) ---------- */
.svc-logo .crop-stage canvas { cursor: grab; }
.lg-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.lg-al { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lg-al-b { min-width: 44px; min-height: 44px; padding: 6px 12px; font: inherit; font-size: 16px; color: var(--text); background: var(--panel); border: 0; cursor: pointer; touch-action: manipulation; }
.lg-al-b.on { background: var(--acc-fill); color: var(--acc-ink); }
.lg-layers { display: flex; flex-direction: column; gap: 6px; }
.lg-layer { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; touch-action: manipulation; }
.lg-layer.on { border-color: var(--acc); box-shadow: inset 0 0 0 1.5px var(--acc); }
.lg-layer-ic { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--in); font-size: 16px; overflow: hidden; }
.lg-layer-ic img { width: 100%; height: 100%; object-fit: cover; }
.lg-layer-tx { flex: 1 1 auto; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-ib { flex: 0 0 auto; min-width: 40px; min-height: 40px; padding: 4px 6px; font: inherit; font-size: 15px; color: var(--dim); background: none; border: 0; border-radius: 8px; cursor: pointer; touch-action: manipulation; }
.lg-ib:hover { background: var(--in); }
.lg-ib.off { opacity: 0.4; }
.lg-num { display: inline-flex; align-items: center; gap: 6px; }
.lg-num input { width: 72px; }
.svc-logo input[type="color"] { width: 56px; height: 44px; min-height: 44px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
.svc-logo textarea.input { width: 100%; min-height: 64px; font-size: 16px; }
.svc-logo input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }