:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #000000;
  color: #f4f7fb;
  --accent: #34d399;
  --accent-soft: #6ee7b7;
  --accent-glow: rgba(52, 211, 153, .12);
  --muted: #7a8a9e;
  --border: rgba(255, 255, 255, .08);
  --surface: rgba(18, 18, 18, .95);
  --surface-hover: rgba(30, 30, 30, .95);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  -webkit-tap-highlight-color: transparent;
  background: #000000;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(52, 211, 153, .06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(34, 180, 120, .04) 0%, transparent 50%);
}

/* ===== Card ===== */
.card {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 36px 36px 40px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .03),
    0 40px 100px rgba(0, 0, 0, .6),
    0 0 80px rgba(52, 211, 153, .03);
  backdrop-filter: blur(24px);
  transition: box-shadow .3s ease;
  animation: card-in .7s cubic-bezier(.22, 1, .36, 1) both;
}
.card:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .05),
    0 40px 100px rgba(0, 0, 0, .6),
    0 0 120px rgba(52, 211, 153, .06);
}

/* ===== Оболочка: карточка + панель сессии под ней ===== */
/* Панель продления сессии должна стоять за пределами карточки, поэтому
   карточка и панель живут в общем flex-столбце. */
.app-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(100%, 540px);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
}
.app-shell > .card {
  width: 100%;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}


/* ===== Background FX: летящие точки (canvas #particles) ===== */
.particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ===== Каскадное появление карточки ===== */
@keyframes card-in {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.card > * { animation: rise .6s cubic-bezier(.22, 1, .36, 1) both; }
.card > .mode-carousel { animation-delay: .08s; }
.card > .title-wrap,
.card > h1 { animation-delay: .14s; }
.card > .subtitle { animation-delay: .18s; }
.card > .qr-view,
.card > .transfer-view { animation-delay: .26s; }
.card > .site-footer { animation-delay: .34s; }

/* ===== Заголовок: в обычном режиме это просто белые буквы ===== */
.card h1 {
  color: #f4f7fb;
}
/* Во время передачи файлов по заголовку ползёт градиентная волна слева
   направо: класс transfer-active на body ставит app.js, пока в чате есть
   карточки «отправка…»/«получение…». Фон двукратной ширины с двумя
   одинаковыми гребнями — сдвиг ровно на половину даёт бесшовный цикл. */
body.transfer-active .title-shine {
  background-image: linear-gradient(90deg,
    #f4f7fb 0%, #f4f7fb 17%,
    var(--accent-soft) 25%,
    #f4f7fb 33%,
    #f4f7fb 67%,
    var(--accent-soft) 75%,
    #f4f7fb 83%,
    #f4f7fb 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-wave 2.4s linear infinite;
}
@keyframes title-wave {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

/* ===== Иконка в зоне загрузки ===== */
/* Без какого-либо движения: ни анимаций, ни сдвига иконки при наведении. */
.dz-ico {
  justify-self: center;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--accent-soft);
}
.dz-ico svg { width: 22px; height: 22px; }

/* ===== Уважение к reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .card,
  .card > * {
    animation: none !important;
  }
  /* Без анимации переезда: метки просто мгновенно меняются местами. */
  .mode-carousel .mode-label { transition: none !important; }
  /* Меню заголовка раскрывается мгновенно, без каскада пунктов. */
  .title-menu,
  .title-menu-item,
  .menu-section,
  .menu-row,
  .switch,
  .switch-knob,
  .seg-btn,
  .radio-option,
  .title-chevron { transition: none !important; }
  /* Без анимации волна не нужна: заголовок остаётся просто белым. */
  body.transfer-active .title-shine {
    animation: none !important;
    background-image: none;
    -webkit-text-fill-color: currentcolor;
  }
}

/* ===== Brand ===== */
.brand {
  text-decoration: none;
  margin-bottom: 16px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.brand span {
  font-size: 18px;
  color: var(--accent-soft);
  opacity: .7;
  line-height: 1;
  transform: translateY(-2px);
}

/* ── Nav: красивая стрелка-разделитель ── */
.about-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.about-nav .brand span {
  font-size: 20px;
  opacity: .8;
  transform: none;
}

/* ── Nav: стрелка-разделитель ── */
.about-nav .brand span {
  display: inline-block;
  font-size: 16px;
  opacity: .55;
  transform: none;
  margin: 0 6px;
}

/* ===== Typography ===== */
h1 {
  margin: 0 0 10px;
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #eef2f7;
}
.subtitle, .hint {
  color: var(--muted);
  line-height: 1.55;
}
.subtitle {
  margin: 0 auto 24px;
  max-width: 380px;
  font-size: 15px;
}

/* ===== QR View ===== */
.qr-view {
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 17px;
  color: var(--muted);
}
.qr-view img {
  width: min(260px, 78vw);
  padding: 14px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, .4),
    0 0 60px rgba(52, 211, 153, .08);
  transition: transform .2s ease;
  /* Белый QR на тёмном фоне появляется плавно — без резкой вспышки. */
  animation: fade-in .35s ease-out;
}
html.light .qr-view img {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.qr-view p { margin: 0; font-size: 14px; }

/* ===== Loader ===== */
.loader {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, .08);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

/* ===== Меню заголовка «Передача файлов» =====
     Клик по заголовку раскрывает меню: «Выйти на главный экран», «Светлая тема»
     и пункт «Сквозное шифрование» с отпечатком ключа — он заменил прежнюю надпись
     у нижнего края экрана. Пункты видны только при активном сеансе (включает
     updateTitleMenu в app.js). Меню выезжает из-под заголовка с пружинным
     масштабированием, пункты появляются каскадом. ===== */
.title-wrap {
  position: relative;
  /* Выше чата и QR-окна: у .transfer-view после каскадной анимации остаётся
     применённый transform, и без явного z-index меню пряталось бы под ним.
     Значение выше z-index нижней панели ввода (.text-compose, 20): на мобильном
     раскрытое меню не должно перекрываться полем сообщения. */
  z-index: 30;
}
.title-menu-btn {
  /* Кнопка во всю строку заголовка: в меню проще попасть и пальцем, и
     мышью — содержимое остаётся по центру строки. */
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.title-menu-btn.menu-available { cursor: pointer; }
.title-menu-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}
.title-chevron {
  width: 20px;
  height: 20px;
  color: var(--muted);
  opacity: .6;
  transition: opacity .2s ease, transform .35s cubic-bezier(.22, 1, .36, 1), color .2s ease;
}
.title-menu-btn.menu-available .title-chevron { opacity: .6; }
.title-menu-btn:hover .title-chevron {
  opacity: 1;
  color: var(--accent-soft);
}
.title-menu-btn.open .title-chevron {
  opacity: 1;
  transform: rotate(180deg);
}
.title-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 40;
  min-width: 280px;
  max-width: min(340px, calc(100vw - 32px));
  max-height: min(78vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Ползунок прокрутки — в акцентном цвете сайта. */
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 211, 153, .4) transparent;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(23, 26, 25, .97);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04),
    0 24px 70px rgba(0, 0, 0, .65);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  text-align: left;
  transform-origin: top center;
  transform: translateX(-50%) translateY(-10px) scale(.9);
  opacity: 0;
  visibility: hidden;
  transition:
    transform .26s cubic-bezier(.22, 1, .36, 1),
    opacity .16s ease,
    visibility 0s linear .26s;
}
.title-menu::-webkit-scrollbar { width: 8px; }
.title-menu::-webkit-scrollbar-track { background: transparent; }
.title-menu::-webkit-scrollbar-thumb {
  background: rgba(52, 211, 153, .35);
  border-radius: 999px;
}
.title-menu::-webkit-scrollbar-thumb:hover { background: rgba(52, 211, 153, .55); }
.title-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  /* Пружинный overshoot: панель слегка «перелетает» и мягко возвращается. */
  transition:
    transform .4s cubic-bezier(.3, 1.36, .44, 1),
    opacity .16s ease,
    visibility 0s;
}

/* Пункты и секции меню появляются каскадом: задержка действует только на
   раскрытие, при закрытии селектор .open уже не матчится — всё гаснет вместе
   с панелью. */
.title-menu-item,
.menu-section {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity .16s ease,
    transform .26s cubic-bezier(.22, 1, .36, 1),
    background .18s ease;
}
.title-menu.open .title-menu-item,
.title-menu.open .menu-section {
  opacity: 1;
  transform: none;
}
.title-menu.open > *:nth-child(1) { transition-delay: .06s, .06s, 0s; }
.title-menu.open > *:nth-child(2) { transition-delay: .09s, .09s, 0s; }
.title-menu.open > *:nth-child(3) { transition-delay: .12s, .12s, 0s; }
.title-menu.open > *:nth-child(4) { transition-delay: .15s, .15s, 0s; }
.title-menu.open > *:nth-child(5) { transition-delay: .18s, .18s, 0s; }
.title-menu.open > *:nth-child(6) { transition-delay: .21s, .21s, 0s; }
.title-menu.open > *:nth-child(7) { transition-delay: .24s, .24s, 0s; }
.title-menu.open > *:nth-child(8) { transition-delay: .27s, .27s, 0s; }

/* Пункт-действие во всю ширину (скачать, выйти, удалить). */
.title-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  border-radius: 11px;
  background: none;
  color: #e8edf4;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.title-menu-item:hover { background: rgba(255, 255, 255, .06); }
.title-menu-item:active { background: rgba(52, 211, 153, .12); }
/* Неактивный пункт (например, «Скачать все файлы», пока идёт загрузка):
   приглушён и не реагирует на наведение. */
.title-menu-item:disabled,
.title-menu-item.disabled {
  opacity: .5;
  cursor: default;
}
.title-menu-item:disabled:hover,
.title-menu-item.disabled:hover,
.title-menu-item:disabled:active,
.title-menu-item.disabled:active { background: none; }
/* Пункт «Отправить текст» во включённом состоянии: поле ввода на экране. */
.title-menu-item.active {
  background: rgba(52, 211, 153, .12);
  color: var(--accent-soft);
}
.title-menu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ── Секции меню ─────────────────────────────────────────────────────────── */
.menu-section {
  padding: 4px 0 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.menu-section:first-of-type { border-top: none; margin-top: 0; }
.menu-section-title {
  margin: 6px 12px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Строка настройки: иконка, подпись и управляющий элемент справа. */
.menu-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: none;
  border-radius: 11px;
  background: none;
  color: #e8edf4;
  font: inherit;
  font-size: 14px;
  text-align: left;
}
.menu-row .mi-text { flex: 1 1 auto; }
/* Строка с сегментированным контролем под подписью (время жизни комнаты). */
.menu-row-col {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.menu-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.menu-ttl-seg {
  display: flex;
  width: 100%;
}
.menu-ttl-seg .seg-btn {
  flex: 1 1 0;
  padding: 6px 4px;
  white-space: nowrap;
}
.menu-row-btn { cursor: pointer; }
.menu-row-btn:hover { background: rgba(255, 255, 255, .06); }
.menu-row-btn:active { background: rgba(52, 211, 153, .12); }
.menu-row-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.row-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

/* ── Переключатель (switch) ──────────────────────────────────────────────── */
.switch {
  flex: 0 0 auto;
  position: relative;
  width: 42px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  /* Ползунок всегда в акцентном цвете сайта. */
  background: var(--accent-soft);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), background .2s ease;
}
.switch[aria-checked="true"] {
  background: rgba(52, 211, 153, .35);
  border-color: rgba(52, 211, 153, .6);
}
.switch[aria-checked="true"] .switch-knob {
  transform: translateX(18px);
}
.switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.switch:disabled { opacity: .5; cursor: default; }

/* ── Сегментированный переключатель ──────────────────────────────────────── */
.segmented {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
}
.seg-btn {
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.seg-btn.active {
  background: rgba(52, 211, 153, .18);
  color: var(--accent-soft);
}
.seg-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* ── Радио-опция режима хранения ─────────────────────────────────────────── */
.radio-option {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border: none;
  border-radius: 11px;
  background: none;
  color: #e8edf4;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease;
}
.radio-option:hover { background: rgba(255, 255, 255, .06); }
.radio-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.radio-option .mi-text { flex: 1 1 auto; }
.radio-option .mi-sub { white-space: normal; }
.radio-dot {
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 8px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  transition: border-color .18s ease;
}
.radio-option[aria-checked="true"] .radio-dot { border-color: var(--accent-soft); }
.radio-option[aria-checked="true"] .radio-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent-soft);
}

/* ── Карточка статуса комнаты ────────────────────────────────────────────── */
.room-card {
  margin: 4px 8px 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
}
.room-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.room-card-row + .room-card-row { margin-top: 4px; }
.room-card-meta { color: var(--muted); font-size: 12px; }
.room-card-code { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.room-card-code b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--accent-soft);
}
.room-members {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.room-key {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.room-key-label { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.room-key-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--accent-soft);
}

/* Зашифрованный файл: имя в акцентном цвете; без ключа — карточка кликабельна
   и просит ввести ключ. */
.file-item.enc-file .file-name { color: var(--accent-soft); }
.file-item.enc-locked { cursor: pointer; }
.file-item.enc-locked .file-note { color: var(--accent-soft); }

/* Предупреждение о шифровании в карточке комнаты. */
.room-enc-note {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

/* ── Модальное окно с QR-кодом комнаты ───────────────────────────────────── */
.qr-modal { width: min(100%, 360px); }
.qr-lead {
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
.qr-modal-wrap {
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.qr-modal-img {
  width: min(240px, 66vw);
  height: auto;
  display: block;
  image-rendering: pixelated;
}
.qr-modal-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 16px 0 0;
}
.qr-modal-meta-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.qr-modal-code {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .34em;
  text-indent: .34em; /* ровно по центру: компенсируем хвостовой отступ букв */
  text-align: center;
  color: var(--accent-soft);
}
.qr-hint {
  margin: 16px 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: left;
}
.qr-hint b { color: #dfe6ee; font-weight: 600; }

/* Строка «поле ввода кода + кнопка Перейти в чат»: кнопка-овал стоит справа
   от поля ввода. На узких экранах строка переносится. */
.room-join-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* «Перейти в чат» на экране ожидания канала: тихая второстепенная кнопка-овал
   без значка-стрелки, размер по содержимому. Селектор с .qr-view перебивает
   общий .button (он объявлен ниже и иначе вернул бы прямоугольную форму). */
.qr-view .room-send-now {
  margin-top: 0;
  width: auto;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 11px 22px;
  background: transparent;
  border: 1px solid rgba(52, 211, 153, .22);
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.qr-view .room-send-now:hover {
  background: rgba(52, 211, 153, .08);
  border-color: rgba(52, 211, 153, .38);
  box-shadow: none;
}
/* В увеличенном QR-режиме строка с полем и кнопкой скрыта. */
.qr-view.room-zoomed .room-join-row { display: none; }
html.light .qr-view .room-send-now {
  border-color: rgba(11, 157, 107, .28);
  color: #0b7c56;
}
html.light .qr-view .room-send-now:hover { background: rgba(11, 157, 107, .08); }

/* Иконки меню: без цветной подложки — только сам значок. */
.mi-ico {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--accent-soft);
}
.mi-ico svg { width: 19px; height: 19px; }
.mi-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mi-title { font-weight: 600; line-height: 1.3; }
.mi-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}
/* Иконка пункта «Устройство»: показываем только значок реального типа — телефон
   у телефона, монитор у компьютера, планшет у планшета. */
#menu-device .dev-ico { display: none; }
#menu-device[data-dev="desktop"] .dev-desktop { display: block; }
#menu-device[data-dev="mobile"] .dev-mobile { display: block; }
#menu-device[data-dev="tablet"] .dev-tablet { display: block; }

/* ===== Telegram: поясняющее окно «зачем это нужно» ===== */
.tg-modal { width: min(100%, 360px); }
.tg-lead {
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
}
.tg-qr-wrap {
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  margin: 0 auto 14px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 14px;
  background: #ffffff;
}
.tg-qr { width: 100%; height: 100%; display: block; }
.tg-bot {
  margin: 0 0 4px;
  color: #eef2f7;
  font-size: 14px;
  font-weight: 700;
}
.tg-room {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.tg-warn {
  margin: 0 0 14px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(250, 204, 21, .12);
  color: #fbbf24;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}
html.light .tg-bot { color: #14212a; }
html.light .tg-room { color: #6b7a86; }
html.light .tg-warn { background: rgba(180, 120, 0, .12); color: #a16207; }
/* Кнопка окна, пока переход недоступен (включено прямое соединение). */
.button:disabled,
.button.disabled {
  opacity: .55;
  cursor: default;
}
.button:disabled:hover,
.button.disabled:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, .2), rgba(34, 180, 120, .15));
  border-color: rgba(52, 211, 153, .2);
  box-shadow: none;
}

/* ===== Status ===== */
.status {
  margin: 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.status.connected {
  color: #34d399;
}

/* ===== Drop Zone ===== */
.drop-zone {
  min-height: 180px;
  margin-top: 24px;
  display: grid;
  place-content: center;
  gap: 8px;
  border: 1.5px dashed rgba(255, 255, 255, .12);
  border-radius: 16px;
  color: #e0e0e0;
  cursor: pointer;
  background: rgba(255, 255, 255, .02);
  transition: all .25s ease;
}
.drop-zone:hover,
.drop-zone.over {
  border-color: var(--accent);
  background: var(--accent-glow);
  box-shadow: 0 0 40px rgba(52, 211, 153, .08);
}
.drop-zone:hover strong,
.drop-zone.over strong {
  color: var(--accent);
}
.drop-zone strong {
  font-size: 16px;
  font-weight: 600;
  transition: color .25s ease;
}
/* Нижняя надпись «или нажмите для выбора» приклеена к верхней строке:
   блок остаётся под верхним текстом, но наследует его цвет (включая
   акцент при наведении), размер и жирность. */
.drop-zone strong .sub {
  display: block;
}
.drop-zone input { display: none; }
.drop-zone .hint {
  margin: 2px 0 0;
  font-size: 12px;
  opacity: .5;
}

/* ===== Chat / File List ===== */
.transfer-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat {
  position: relative;
  /* Единая высота всех карточек чата: миниатюра 56px + паддинги 20px + рамка 2px. */
  --chat-card-h: 78px;
  /* Список тянется по фактическому числу файлов: без минимальной высоты окно
     не раздувается «на 3–4 файла», когда файл один. Прокрутка появляется,
     только когда контент упирается в max-height карточки. */
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 18px 0 0;
  text-align: left;
}
/* Плавное растворение списка у краёв: маска делает сами буквы прозрачными
   у границы, поэтому контент не просвечивает через полупрозрачный слой. */
.chat.has-scroll .file-list {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.file-list {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Полоски прокрутки нет: прокрутку показывают растворяющиеся края списка
     (маска в .has-scroll), колесо мыши и перетаскивание зажатой кнопкой. */
  padding: 4px 0;
  scrollbar-width: none;
}
.file-list::-webkit-scrollbar { display: none; }

/* Распорка под панель ввода нужна только на мобильном (см. медиазапрос). */
.chat-spacer { display: none; }

.file-item {
  margin: 8px 0;
  /* min-height вытягивает карточки ошибок (они без миниатюры) до высоты
     обычных карточек. */
  min-height: var(--chat-card-h);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d0d8e4;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  animation: file-in .25s ease-out;
  transition: background .2s ease;
}
.file-item:hover {
  background: rgba(255, 255, 255, .06);
}
/* Файл скачивается кликом по любому месту карточки — курсор-рука. */
.file-item.downloadable {
  cursor: pointer;
}
.file-item::before {
  content: '✓';
  order: 3;
  flex: 0 0 auto;
  margin-left: auto;
  color: #34d399;
  font-weight: 700;
}
/* Файл готов к скачиванию: стрелочка вниз в кружочке. После клика-скачивания
   карточка получает .downloaded — вместо стрелки появляется галочка ✓. */
.file-item.downloadable::before {
  content: '';
  width: 20px;
  height: 20px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v7'/%3E%3Cpath d='m8.5 11.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v7'/%3E%3Cpath d='m8.5 11.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background .2s ease;
}
/* Зелёная заливка стрелочки — только пока файл не скачан. Раньше правило
   цеплялось и к скачанным карточкам: у них ::before — текстовая галочка
   с width:auto, и при наведении вокруг ✓ появлялся зелёный прямоугольник. */
.file-item.downloadable:not(.downloaded):hover::before {
  background: var(--accent);
}
.file-item.pending::before {
  content: '';
  width: 16px;
  height: 16px;
  background: none;
  -webkit-mask: none;
  mask: none;
  border: 2px solid rgba(52, 211, 153, .2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
/* При наведении на карточку значок загрузки становится ярче-зелёным. */
.file-item.pending:hover::before {
  border-top-color: #6ee7b7;
}
.file-item.sending::before {
  content: '';
  width: 14px;
  height: 14px;
  background: none;
  -webkit-mask: none;
  mask: none;
  border: 2px solid rgba(255, 255, 255, .15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
/* Приём файла (из Telegram или напрямую P2P) — такой же вращающийся
   индикатор, как при отправке: сразу видно, что передача идёт. */
.file-item.receiving::before {
  content: '';
  width: 14px;
  height: 14px;
  background: none;
  -webkit-mask: none;
  mask: none;
  border: 2px solid rgba(255, 255, 255, .15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.file-item.downloaded::before {
  content: '✓';
  width: auto;
  height: auto;
  background: none;
  -webkit-mask: none;
  mask: none;
  color: #34d399;
  transition: color .2s ease;
}
.file-item.downloaded:hover::before {
  background: none;
  color: #6ee7b7;
}
@keyframes file-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.file-item.error {
  color: #f87171;
  border-color: rgba(248, 113, 113, .2);
  background: rgba(248, 113, 113, .08);
}
/* Восклицательный знак в треугольнике вместо крестика-«закрыть». */
.file-item.error::before {
  content: '';
  width: 16px;
  height: 16px;
  background: #f87171;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ===== Thumbnails ===== */
.file-thumb {
  order: 1;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.file-thumb.photo img {
  display: block;
  max-width: 56px;
  max-height: 56px;
  width: auto;
  height: auto;
  border-radius: 8px;
}
.file-thumb.icon {
  gap: 2px;
  color: var(--accent-soft);
}
.file-thumb.icon svg {
  width: 32px;
  height: 32px;
  opacity: .85;
}
.file-thumb.icon .ext {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
}
.file-body {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-item a.file-name {
  color: var(--accent-soft);
  text-decoration: none;
  font-weight: 600;
  transition: color .2s ease;
}
.file-item a.file-name:hover {
  color: #ffffff;
  text-decoration: underline;
}
.file-meta {
  display: flex;
  gap: 10px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  /* Одна строка с многоточием: длинные заметки не вытягивают карточку
     в высоту, все карточки чата остаются одного размера. */
  white-space: nowrap;
}
.file-meta .file-size { flex: 0 0 auto; }
.file-meta .file-note {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-item.error .file-meta {
  color: #f87171;
}

/* ===== Button ===== */
.button {
  border: 0;
  border-radius: 12px;
  padding: 12px 20px;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(135deg, rgba(52, 211, 153, .2), rgba(34, 180, 120, .15));
  border: 1px solid rgba(52, 211, 153, .2);
  cursor: pointer;
  transition: all .2s ease;
}
.button:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, .3), rgba(34, 180, 120, .25));
  border-color: rgba(52, 211, 153, .35);
  box-shadow: 0 0 20px rgba(52, 211, 153, .1);
}

/* ===== Hint ===== */
.hint {
  margin: 24px 0 0;
  font-size: 12px;
  opacity: .6;
}

/* ===== Site footer ===== */
.site-footer {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  color: var(--muted);
  font-size: 11px;
}
.site-footer a { color: var(--accent-soft); text-decoration: none; }
.site-footer a:hover { color: #ffffff; }

/* ===== Панель сессии «сайт → Telegram» ===== */
/* Таймер и кнопка продления под основным блоком. Показывается только в
   telegram-режиме, пока сессия жива. */
.session-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.session-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.session-timer {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.session-extend {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-soft);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.session-extend:hover { border-color: var(--accent); color: #ffffff; }
.session-extend:disabled { opacity: .5; cursor: default; }
.session-notice {
  color: var(--accent-soft);
  font-size: 12px;
}
html.light .session-timer { color: #5b6b77; }
html.light .session-extend { color: #0b7c56; border-color: rgba(15, 40, 32, .18); }
html.light .session-extend:hover { color: #06120d; border-color: #0b9d6b; }
html.light .session-notice { color: #0b7c56; }

/* ===== Поясняющая надпись под блоком ===== */
/* Живёт за пределами карточки, поэтому её появление не растягивает и не
   дёргает сам блок. Место зарезервировано (min-height), чтобы карточка не
   меняла высоту, когда надпись появляется и исчезает. */
.app-notice {
  flex: 0 0 auto;
  min-height: 20px;
  max-width: 100%;
  padding: 0 12px;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
}
.app-notice.show { opacity: 1; }
html.light .app-notice { color: #1d2b33; }

/* ===== About page: полноэкранный лендинг без ограничивающей карточки ===== */
body.about-page {
  display: block;
  min-height: 100vh;
  padding: 0;
  background-image:
    radial-gradient(ellipse 60% 45% at 12% -5%, rgba(52, 211, 153, .1) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 92% 12%, rgba(34, 180, 120, .06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 115%, rgba(52, 211, 153, .07) 0%, transparent 60%);
}
html { scroll-behavior: smooth; }
#how { scroll-margin-top: 90px; }

.about-wrap { width: min(100% - 48px, 1100px); margin-inline: auto; }

/* ── Nav ── */
.about-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  min-height: 72px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 18px 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(18px);
}
.about-nav .brand {
  white-space: nowrap;
  justify-content: flex-start;
}
.about-nav .brand { margin: 0; }
.about-nav { min-height: 64px; }
.nav-cta {
  margin-left: auto;
  padding: 11px 18px;
  border-radius: 11px;
  color: #06120d;
  background: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(52, 211, 153, .28);
}
/* Ссылки-разделы в шапке страницы «О сервисе»: заполняют пустую панель. */
.about-nav-links {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}
.about-nav-links a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}
.about-nav-links a:hover { color: #ffffff; }
@media (max-width: 720px) {
  .about-nav-links { display: none; }
}
html.light .about-nav-links a { color: #5b6b77; }
html.light .about-nav-links a:hover { color: #06120d; }

/* ── Hero ── */
.hero { padding: clamp(64px, 11vh, 120px) 0 clamp(40px, 7vh, 80px); max-width: 820px; }
.kicker {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0;
  font-size: clamp(38px, 6.5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.05em;
  color: #eef2f7;
}
.hero h1 em { color: var(--accent-soft); font-style: normal; }
.hero .lead {
  margin: 24px 0 0;
  max-width: 640px;
  color: #a6b3c1;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.65;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 46px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.hero-facts li { flex: 1 1 auto; padding: 20px 24px 0 0; display: grid; gap: 4px; }
.hero-facts li + li { border-left: 1px solid var(--border); padding-left: 24px; }
.hero-facts strong { color: var(--accent-soft); font-size: 22px; letter-spacing: -.02em; }
.hero-facts span { color: var(--muted); font-size: 12px; }

/* ── Sections ── */
.section { padding: clamp(36px, 6vh, 64px) 0; }
.section h2 {
  margin: 0 0 32px;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -.03em;
  color: #eef2f7;
}
/* Подзаголовки внутри секций (например, «Основные режимы» и «Варианты
   хранения»). Без этого браузерный h3 был бы тёмным и невидимым на тёмном фоне. */
.section h3 {
  margin: 40px 0 16px;
  font-size: 20px;
  letter-spacing: -.02em;
  color: #eef2f7;
}
html.light .section h3 { color: #14212a; }

/* ── Steps ── */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
}
.steps li {
  padding: 26px 24px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
}
.step-num {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #06120d;
  background: var(--accent);
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(52, 211, 153, .25);
}
.steps h3 { margin: 20px 0 8px; color: #eef2f7; font-size: 17px; }
.steps p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ── Features ── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-card {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.feature-card:hover {
  border-color: rgba(52, 211, 153, .3);
  background: rgba(52, 211, 153, .05);
  transform: translateY(-3px);
}
.feature-ico {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(52, 211, 153, .25);
  border-radius: 12px;
  background: rgba(52, 211, 153, .08);
  color: var(--accent-soft);
  font-size: 19px;
}
.feature-card h3 { margin: 18px 0 8px; color: #eef2f7; font-size: 16px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ── Privacy checklist ── */
.check-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 32px;
  margin: 0;
  padding: 0;
}
.check-list li {
  position: relative;
  padding-left: 30px;
  color: #a6b3c1;
  font-size: 14px;
  line-height: 1.6;
}
.check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
}

/* ── FAQ ── */
.faq details {
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
.faq details + details { margin-top: 10px; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  cursor: pointer;
  color: #eef2f7;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 22px; font-weight: 700; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* ── Final CTA ── */
.final-cta {
  margin-top: clamp(24px, 5vh, 48px);
  padding: clamp(36px, 6vw, 64px) 24px;
  text-align: center;
  border: 1px solid rgba(52, 211, 153, .25);
  border-radius: 28px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(52, 211, 153, .12) 0%, transparent 70%),
    rgba(255, 255, 255, .02);
  box-shadow: 0 0 90px rgba(52, 211, 153, .06);
}
.final-cta h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: -.03em;
  color: #eef2f7;
}
.final-cta p { margin: 0 auto 28px; max-width: 460px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ── Buttons ── */
.about-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 12px;
  color: #06120d;
  background: var(--accent);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(52, 211, 153, .2);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.about-button span { font-size: 16px; }
.about-button .btn-arrow {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform .2s ease;
}
.about-button:hover .btn-arrow { transform: translateX(3px); }
.about-button.big .btn-arrow { width: 17px; height: 17px; }
.about-button:hover {
  background: var(--accent-soft);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(52, 211, 153, .3);
}
.about-button.big { padding: 16px 30px; font-size: 15px; border-radius: 13px; }
.ghost-button {
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: #d0d8e4;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.ghost-button:hover {
  color: #ffffff;
  border-color: rgba(52, 211, 153, .4);
  background: rgba(52, 211, 153, .06);
}

/* ── Footer ── */
.about-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(40px, 8vh, 72px);
  padding: 26px 0 36px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}
.about-footer a { color: var(--accent-soft); text-decoration: none; }
.about-footer a:hover { color: #ffffff; }
.about-footer-links { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .steps, .feature-grid { grid-template-columns: 1fr; }
  .check-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .about-wrap { width: min(100% - 32px, 1100px); }
  .about-nav {
    padding: 16px 24px;
    min-height: 64px;
  }
  .about-nav .brand { font-size: 10px; letter-spacing: .16em; }
  .about-button span { display: none; }
  .hero-facts { flex-direction: column; }
  .hero-facts li { padding: 14px 0 0; }
  .hero-facts li + li { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; margin-top: 14px; }
}

/* ===== Modal: подтверждение повторного скачивания ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(8px);
  animation: fade-in .18s ease;
}
.modal {
  width: min(100%, 340px);
  padding: 26px 24px 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  text-align: center;
  animation: pop-in .18s ease;
}
.modal-title {
  margin: 0 0 6px;
  color: #eef2f7;
  font-size: 16px;
  font-weight: 700;
}
.modal-file {
  margin: 0 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
}
/* Длинное пояснение подтверждения (например, про удаление комнаты):
   переносим на строки, а не обрезаем многоточием. */
.modal-file.multiline {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.45;
}
.modal-actions {
  display: flex;
  gap: 10px;
}
.modal-actions .button,
.modal-cancel {
  flex: 1;
  padding: 12px 16px;
}
.modal-cancel {
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  cursor: pointer;
  transition: all .2s ease;
}
.modal-cancel:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .04);
}

/* ===== Drag-to-scroll: листание чата зажатой мышью ===== */
body.dragging-scroll,
body.dragging-scroll * {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Шапка-карусель: режимы вместо статичного бренда ===== */
/* Активная метка («WEB SITE ⇄ TG BOT» / «WEB SITE ⇄ WEB SITE») стоит по центру
   карточки и горит акцентом, вторая серым уходит к краю. Маска на контейнере
   растворяет края, поэтому серая метка «тает» у границы ещё до клипа. Сдвиг
   серой метки (--shift) считает app.js: ширины меток разные и зависят от
   шрифта, чистый CSS их заранее не знает. */
.mode-carousel {
  position: relative;
  height: 24px;
  margin-bottom: 16px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.mode-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), color .35s ease;
}
.mode-label .mode-arrow {
  font-size: 18px;
  opacity: .7;
  line-height: 1;
  transform: translateY(-2px);
}
/* Активная метка — акцентная со светлой стрелкой; серая целиком гаснет. */
.mode-label.active { cursor: default; }
.mode-label.active .mode-arrow {
  color: var(--accent-soft);
  opacity: 1;
}
/* Серая метка уезжает в сторону: telegram — влево, room — вправо, чтобы
   «WEB SITE ⇄ TG BOT» всегда читался первым, а «WEB SITE ⇄ WEB SITE» — вторым.
   --side задаёт направление, --shift — расстояние (считает app.js). */
.mode-label[data-mode="room"] { --side: 1; }
.mode-label[data-mode="telegram"] { --side: -1; }
.mode-label:not(.active) {
  color: var(--muted);
  transform: translate(calc(-50% + var(--side, 1) * var(--shift, 200px)), -50%);
}
.mode-label:not(.active):hover {
  color: #b7c2d0;
  transform: translate(calc(-50% + var(--side, 1) * calc(var(--shift, 200px) - 14px)), -50%);
}
.mode-label:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== Room: канал сайт↔сайт ===== */
/* Экран канала по высоте совпадает с QR-экраном Telegram: QR чуть меньше,
   под ним код и поле ввода — всё укладывается в те же 320px. */
.qr-view img.room-qr { width: min(170px, 50vw); }
/* ── Увеличение QR-кода в комнате ──
   При наведении на QR по центру появляется кнопка: она прячет код и поле
   ввода и раздувает QR, чтобы его было проще отсканировать с другого
   устройства. Повторное нажатие возвращает всё обратно. */
.room-qr-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
}
.room-qr-zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.85);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.room-qr-zoom svg { width: 22px; height: 22px; }
/* Наведение работает только там, где мышь есть: на тач-устройствах :hover
   «залипает» после тапа и кнопка не гасла бы. */
@media (hover: hover) {
  .room-qr-wrap:hover .room-qr-zoom {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }
  .room-qr-zoom:hover { background: rgba(0, 0, 0, .72); }
}
.room-qr-zoom:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
/* На тач-устройствах наведения нет: кнопка скрыта, пока пользователь не
   коснётся QR (класс show-zoom ставит app.js). Так она не заслоняет код
   постоянно и появляется именно по нажатию. */
@media (hover: none) {
  .room-qr-wrap.show-zoom .room-qr-zoom {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }
}
/* Увеличенный режим: код и поле ввода скрыты, QR занимает экран. */
.qr-view.room-zoomed .room-code,
.qr-view.room-zoomed .room-code-input { display: none; }
.qr-view.room-zoomed .room-qr { width: min(340px, 82vw); }
html.light .room-qr-zoom { background: rgba(15, 40, 32, .55); }
html.light .room-qr-zoom:hover { background: rgba(15, 40, 32, .72); }
.room-code {
  color: var(--accent-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .3em;
  margin-right: -.3em; /* компенсация трекинга после последней буквы */
}
.room-code-input {
  width: 210px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  color: #f4f7fb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  letter-spacing: .3em;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.room-code-input:focus {
  border-color: rgba(52, 211, 153, .45);
  background: rgba(52, 211, 153, .05);
}
.room-code-input::placeholder {
  color: var(--muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
.room-create { margin-top: 4px; }
.room-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.room-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
}

/* ===== Responsive: удалено — см. блок МОБИЛЬНАЯ ВЕРСИЯ в конце файла ===== */

/* ===== Text compose: текст с сайта уходит сообщением от бота ===== */
.text-compose {
  margin-top: 12px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.text-compose textarea {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .03);
  color: #f4f7fb;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  max-height: 132px;
  outline: none;
  scrollbar-width: none;
  transition: border-color .2s ease, background .2s ease;
}
.text-compose textarea::-webkit-scrollbar { display: none; }
.text-compose textarea:focus {
  border-color: var(--border);
  background: rgba(255, 255, 255, .03);
}
.text-compose textarea::placeholder { color: var(--muted); }
/* Кнопка отправки — «тонированное стекло»: полупрозрачная зелёная заливка и
   размытие фона, как у кнопки увеличения QR. */
.text-send {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(52, 211, 153, .35);
  border-radius: 12px;
  color: var(--accent-soft);
  background: rgba(52, 211, 153, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.text-send:hover {
  color: #ffffff;
  background: rgba(52, 211, 153, .3);
}
.text-send:active { transform: scale(.95); }
.text-send svg { width: 18px; height: 18px; }
/* Десктоп: у кнопки отправки стрелка вверх; «самолётик» остаётся на мобильном */
.text-send .ico-plane { display: none; }

/* ===== Mobile file button: скрыт по умолчанию, виден только на мобильном ===== */
.mobile-file-btn { display: none; }

/* ===== Большая мобильная кнопка файлов: тоже только на мобильном ===== */
.mobile-fab-wrap { display: none; }

/* ===== Переключатель темы: солнце/луна — внутри меню заголовка ===== */
.theme-toggle {
  display: none;
}
/* Иконки солнце/луна внутри строки «Тема».
   Значок показывает ТЕКУЩУЮ тему: в тёмной — луна, в светлой — солнце.
   Раньше было наоборот (солнце в тёмной), из-за чего иконка врала.
   Обе иконки живут в одной ячейке грида и меняютсяopacity + поворотом:
   переключение темы выглядит как вращение, а не как смена картинки. */
#menu-theme-row .mi-ico .ico-sun,
#menu-theme-row .mi-ico .ico-moon {
  grid-area: 1 / 1;
  transition: opacity .28s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
/* Тёмная тема: луна в центре, солнце повёрнуто и спрятано. */
#menu-theme-row .mi-ico .ico-moon { opacity: 1; transform: rotate(0deg) scale(1); }
#menu-theme-row .mi-ico .ico-sun { opacity: 0; transform: rotate(-120deg) scale(.4); }
/* Светлая тема: солнце в центре, луна уезжает поворотом. */
html.light #menu-theme-row .mi-ico .ico-sun { opacity: 1; transform: rotate(0deg) scale(1); }
html.light #menu-theme-row .mi-ico .ico-moon { opacity: 0; transform: rotate(120deg) scale(.4); }
/* Уважаем системную настройку: без вращения, просто смена значка. */
@media (prefers-reduced-motion: reduce) {
  #menu-theme-row .mi-ico .ico-sun,
  #menu-theme-row .mi-ico .ico-moon { transition: opacity .12s linear; transform: none; }
}

/* ===== Text items: текст из чата на сайте, клик копирует ===== */
.text-item {
  margin: 8px 0;
  /* Фиксированная высота — ровно как у карточек файлов: длинный текст
     обрезается по двум строкам, все карточки чата остаются одного размера. */
  height: var(--chat-card-h);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  animation: file-in .25s ease-out;
  transition: background .2s ease;
}
.text-item:hover { background: rgba(255, 255, 255, .06); }
.text-body {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.text-content {
  white-space: pre-wrap;
  word-break: break-word;
  color: #d0d8e4;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  /* Две строки: карточка текста фиксированной высоты, как у файлов. */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Строка заметки карточки текста: заметка + счётчики (глаз/загрузка/реакции)
   в одну линию, поэтому отдельная строка под текстом не появляется. */
.text-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.text-note {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Иконка «копировать» справа; при ошибке — восклицательный знак. */
.text-item::before {
  content: '';
  order: 3;
  flex: 0 0 auto;
  margin-left: auto;
  width: 16px;
  height: 16px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: color .2s ease, transform .15s ease;
}
.text-item:hover::before { background: var(--accent); }
.text-item.sending::before {
  width: 14px;
  height: 14px;
  background: none;
  -webkit-mask: none;
  mask: none;
  border: 2px solid rgba(255, 255, 255, .15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.text-item.error {
  border-color: rgba(248, 113, 113, .2);
  background: rgba(248, 113, 113, .08);
}
.text-item.error .text-content,
.text-item.error .text-meta { color: #f87171; }
.text-item.error::before {
  background: #f87171;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Отзыв после копирования: галочка вместо иконки «копировать». */
.text-item.copied::before {
  content: '✓';
  width: auto;
  height: auto;
  background: none;
  -webkit-mask: none;
  mask: none;
  color: #34d399;
  font-weight: 700;
  transition: none;
}

/* ================================================================
   МОБИЛЬНАЯ ВЕРСИЯ — мессенджер: полноэкранный экран, ввод внизу
   ================================================================ */
@media (max-width: 540px) {
  /* ── Подложка: убираем фон, градиенты, сетку-центрирование ── */
  body {
    display: block;
    background: #000000;
    background-image: none;
    padding: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  /* Страница-«приложение» не скроллится целиком: скролл-рестор Chrome больше
     не уводит шапку под адресную строку. About-страница скроллится как обычно. */
  body:not(.about-page) {
    position: fixed;
    inset: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* Точки-частицы невидимы на мобильном */
  .particles { display: none; }

  /* ── Карточка → полноэкранный flex-контейнер ── */
  .card {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 0;
    /* Верх страницы — заметное зелёное свечение вместо чёрного прямоугольника:
       градиент повторяет радиальные пятна фона на десктопе, но плотнее,
       чтобы читался на экране телефона. */
    background:
      radial-gradient(140% 52% at 50% -8%, rgba(52, 211, 153, .26) 0%, rgba(52, 211, 153, .09) 42%, transparent 78%),
      #000000;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
    text-align: left;
    animation: none;
    overflow: hidden;
  }
  .card:hover { box-shadow: none; }
  .card > * { animation: none !important; }

  /* ── Оболочка: карточка + панель сессии внизу экрана ── */
  .app-shell {
    width: 100%;
    max-height: none;
    /* 100% от content-box body (уже учитывает safe-area padding) */
    height: 100%;
    gap: 0;
  }
  .app-shell > .card {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
  }
  .session-bar {
    flex: 0 0 auto;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: #000000;
    border-top: 1px solid var(--border);
  }

  /* ── Шапка: компактная + отступ от адресной строки Chrome ── */
  .brand {
    margin: 0;
    padding: max(10px, env(safe-area-inset-top)) 16px 10px;
    justify-content: center;
    font-size: 10px;
    letter-spacing: .18em;
  }
  .brand span { font-size: 14px; transform: none; }

  h1 {
    margin: 0;
    padding: 6px 16px 0;
    font-size: 20px;
  }
  /* Шапку страницы передачи центрируем; about-страница (.card там нет)
     остаётся с прежним левым выравниванием. */
  .card h1 { text-align: center; }
  .card .subtitle { text-align: center; }
  .subtitle {
    margin: 0 auto;
    padding: 2px 16px 6px;
    font-size: 13px;
  }

  /* ── Карусель режимов в шапке: активная метка по центру, вторая серым
     уходит к краю экрана и растворяется (маска уже в базовых стилях, здесь
     только компактные размеры и отступ от адресной строки Chrome). ── */
  .mode-carousel {
    height: 22px;
    /* Отступ сверху увеличивает зазор от верхней границы до меток режимов:
       теперь он такой же, как от меток до заголовка под ними. */
    margin: 10px 0 0;
    padding: max(16px, env(safe-area-inset-top)) 0 8px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  }
  .mode-label {
    font-size: 10px;
    letter-spacing: .18em;
  }
  .mode-label .mode-arrow { font-size: 14px; }

  /* ── Меню заголовка: на мобильном почти на всю ширину экрана ── */
  .title-menu {
    top: calc(100% + 10px);
    width: calc(100% - 24px);
    min-width: 0;
    max-width: none;
  }
  .title-menu-item,
  .menu-row,
  .radio-option { padding: 11px 12px; }

  /* ── QR ── */
  .qr-view {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 16px;
  }
  .qr-view img {
    width: min(200px, 65vw);
    padding: 10px;
    border-radius: 14px;
  }

  /* ── Transfer view: растягивается на остаток высоты ── */
  .transfer-view {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .status {
    margin: 6px 16px;
    font-size: 13px;
  }

  /* ── Drop zone: скрыт на мобильном (загрузка через 📎 внизу) ── */
  .drop-zone { display: none !important; }

  /* ── Чат: заполняет пространство над панелью ввода ── */
  .chat {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 0;
    padding: 8px 12px;
    scrollbar-width: none;
  }
  .chat::-webkit-scrollbar { display: none; }

  /* Запас под фиксированную панель ввода делаем отдельным flex-элементом, а
     не padding-bottom: у flex-контейнера с overflow:auto padding-bottom не
     попадает в область прокрутки (известная особенность браузеров), из-за
     чего последняя карточка оставалась наполовину под панелью. Высоту панели
     кладёт app.js в --compose-h (updateComposeHeight). */
  .chat-spacer {
    display: block;
    flex: 0 0 auto;
    /* max() страхует от момента, когда --compose-h ещё 0: запас не меньше
       высоты панели по умолчанию. */
    height: calc(max(var(--compose-h, 0px), 62px) + 20px + env(safe-area-inset-bottom));
  }

  .chat.has-scroll .file-list {
    -webkit-mask-image: none;
    mask-image: none;
    padding-right: 0;
  }

  .file-list {
    scrollbar-width: none;
    overflow-y: visible;
    /* Не даём списку сжиматься под высоту чата: иначе его содержимое
       вылезает за собственную рамку. Список растёт по контенту, а
       прокручивается сам .chat. */
    flex: 0 0 auto;
  }
  .file-list::-webkit-scrollbar { display: none; }

  /* ── Растворение карточек только у ВЕРХНЕГО края чата ──
     На мобильном скроллится сам .chat, поэтому маска вешается на него:
     она стоит на месте, пока карточки прокручиваются под ней. Снизу
     градиента больше нет — карточки уходят под панель ввода чёткой
     границей, без размытого «тумана» над ней. */
  .chat.has-scroll {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 100%);
  }

  .file-item {
    margin: 6px 0;
    min-height: 64px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
  }
  .file-thumb { width: 48px; height: 48px; }
  .file-thumb.photo img { max-width: 48px; max-height: 48px; }
  .file-thumb.icon svg { width: 26px; height: 26px; }

  .text-item {
    height: auto;
    min-height: 64px;
    padding: 8px 12px;
    margin: 6px 0;
    border-radius: 10px;
  }

  /* ══════════════════════════════════════════════════════════════
     НИЖНЯЯ ПАНЕЛЬ ВВОДА — position:fixed, всегда внизу экрана
     ══════════════════════════════════════════════════════════════ */
  .text-compose {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    /* Панель прозрачная: никакого «бокса» снизу — видны только сами поле и
       кнопки, а фон чата просвечивает. */
    border-top: none;
    background: transparent;
    margin: 0;
  }

  /* Кнопка «Прикрепить файл» — слева, широкая «пилюля»: как два круга кнопки
     отправки в ширину; высота — та же, что у кнопки отправки. Оформление —
     «тонированное стекло»: полупрозрачный градиент, размытие и светлая кромка. */
  .mobile-file-btn {
    display: grid !important;
    place-items: center;
    flex: 0 0 84px;
    width: 84px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 21px;
    color: var(--accent-soft);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
  }
  .mobile-file-btn:active {
    background: rgba(52, 211, 153, .24);
    border-color: rgba(52, 211, 153, .4);
    transform: scale(.96);
  }
  .mobile-file-btn svg { width: 22px; height: 22px; }

  /* ── Большая кнопка отправки файлов по центру экрана ──
     Пока в чате нет карточек, файлы выбираются вытянутым баннером;
     после первой отправки он сворачивается (анимация .collapsing) в
     маленькую кнопку 📎 нижней панели ввода. */
  .mobile-fab-wrap {
    flex: 1 1 auto;
    min-height: 150px;
    display: grid;
    place-items: center;
    /* Панель ввода фиксирована внизу: без запаса кнопка центрировалась бы
       по всей высоте transfer-view и визуально уезжала вниз под панель.
       --compose-h кладёт app.js (updateComposeHeight). */
    padding: 6px 0 calc(var(--compose-h, 0px) + 6px);
  }
  /* «Пилюля»: иконка сверху, подпись и лимит под ней — по центру. */
  .mobile-file-fab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 250px;
    max-width: calc(100vw - 48px);
    height: auto;
    min-height: 88px;
    padding: 14px 28px;
    border: 1.5px dashed rgba(52, 211, 153, .45);
    border-radius: 999px;
    color: var(--accent-soft);
    background: rgba(52, 211, 153, .07);
    box-shadow: 0 0 40px rgba(52, 211, 153, .1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .45s cubic-bezier(.55, -.25, .65, 1), opacity .32s ease, background .2s ease;
  }
  .mobile-file-fab:active {
    background: rgba(52, 211, 153, .16);
    transform: scale(.96);
  }
  .mobile-file-fab svg { width: 28px; height: 28px; flex: 0 0 auto; }
  .mobile-fab-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    text-align: center;
  }
  .mobile-fab-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-soft);
    letter-spacing: .01em;
  }
  .mobile-fab-hint {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
  }
  /* Сворачивание в маленькую кнопку внизу: сжимаемся и улетаем к панели */
  .mobile-fab-wrap.collapsing { pointer-events: none; }
  .mobile-fab-wrap.collapsing .mobile-file-fab {
    transform: scale(.26) translateY(48vh);
    opacity: 0;
  }

  /* Текстовое поле: скруглённый «пузырь», растягивается вверх */
  .text-compose textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    max-height: 120px;
    height: 42px;
    padding: 10px 14px;
    border-radius: 21px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #f4f7fb;
    font-size: 16px;
    line-height: 1.4;
    resize: none;
    overflow-y: hidden;
    -webkit-appearance: none;
    appearance: none;
    field-sizing: content;
  }
  .text-compose textarea::-webkit-scrollbar { display: none; }
  .text-compose textarea::placeholder { color: var(--muted); opacity: .7; }
  .text-compose textarea:focus {
    border-color: rgba(52, 211, 153, .4);
    background: rgba(255, 255, 255, .12);
  }

  /* Кнопка «Отправить» — круглая, «тонированное стекло» */
  .text-send {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(52, 211, 153, .4);
    background: rgba(52, 211, 153, .22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--accent-soft);
  }
  .text-send:active {
    background: rgba(52, 211, 153, .34);
    transform: scale(.95);
  }
  .text-send svg { width: 18px; height: 18px; }
  /* На мобильном — прежний «самолётик», стрелка не нужна */
  .text-send .ico-plane { display: block; }
  .text-send .ico-arrow { display: none; }

  /* Footer: скрыт */
  .site-footer { display: none !important; }
}

/* ================================================================
   СВЕТЛАЯ ТЕМА (html.light)
   Летящие зелёные точки в ней не летают вовсе: их гасит и CSS
   (правило ниже), и app.js (backgroundDots.setLight).
   ================================================================ */
html.light {
  color-scheme: light;
}
html.light body {
  background: #eef0f2;
  background-image: none;
  color: #17232b;
}
/* Рой в светлой теме выключен */
html.light .particles { display: none !important; }

/* ── Карточка и типографика ── */
html.light .card {
  border-color: rgba(15, 40, 32, .08);
  background: #ffffff;
  box-shadow: none;
}
html.light .card:hover {
  box-shadow: none;
}
html.light h1,
html.light .card h1 { color: #14212a; }
html.light .subtitle,
html.light .hint { color: #5b6b77; }
html.light .status { color: #5b6b77; }
html.light .status.connected { color: #0b9d6b; }
html.light .brand { color: #0b9d6b; }
html.light .brand span { color: #0b7c56; }

/* ── Карусель режимов ── */
html.light .mode-label { color: #0b9d6b; }
html.light .mode-label.active .mode-arrow { color: #0b7c56; }
html.light .mode-label:not(.active) { color: #93a1ac; }
html.light .mode-label:not(.active):hover { color: #5b6b77; }

/* ── Меню заголовка ── */
html.light .title-menu {
  border-color: rgba(15, 40, 32, .1);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 0 0 1px rgba(15, 40, 32, .03), 0 24px 70px rgba(23, 42, 36, .28);
}
html.light .title-menu-item,
html.light .menu-row,
html.light .radio-option { color: #1d2b33; }
html.light .title-menu-item:hover,
html.light .menu-row-btn:hover,
html.light .radio-option:hover { background: rgba(11, 157, 107, .08); }
html.light .title-menu-item:active,
html.light .menu-row-btn:active { background: rgba(11, 157, 107, .14); }
html.light .title-menu-item.active { background: rgba(11, 157, 107, .14); color: #0b7c56; }
html.light .mi-ico { color: #0b7c56; }
html.light .mi-sub { color: #6b7a86; }
html.light .menu-section { border-top-color: rgba(11, 157, 107, .14); }
html.light .menu-section-title { color: #6b7a86; }
html.light .switch { background: rgba(11, 157, 107, .12); border-color: rgba(11, 157, 107, .25); }
html.light .switch[aria-checked="true"] { background: rgba(11, 157, 107, .3); border-color: rgba(11, 157, 107, .55); }
html.light .switch-knob { background: #0b7c56; }
html.light .segmented { background: rgba(11, 157, 107, .06); border-color: rgba(11, 157, 107, .2); }
html.light .seg-btn.active { background: rgba(11, 157, 107, .16); color: #0b7c56; }
html.light .radio-dot { border-color: #9aa7b1; }
html.light .radio-option[aria-checked="true"] .radio-dot { border-color: #0b7c56; }
html.light .radio-option[aria-checked="true"] .radio-dot::after { background: #0b7c56; }
html.light .room-card { background: rgba(11, 157, 107, .05); border-color: rgba(11, 157, 107, .18); }
html.light .room-enc-note { border-top-color: rgba(11, 157, 107, .14); }
html.light .qr-modal-code { color: #0b7c56; }
html.light .qr-hint { border-color: rgba(15, 40, 32, .12); background: rgba(15, 40, 32, .03); }
html.light .qr-hint b { color: #14212a; }
html.light .room-card-code b,
html.light .room-key-value { color: #0b7c56; }
html.light .room-key { border-top-color: rgba(11, 157, 107, .14); }
html.light .row-chevron { color: #9aa7b1; }

/* ── Зона отправки ── */
html.light .drop-zone {
  border-color: rgba(15, 40, 32, .18);
  color: #33424d;
  background: rgba(11, 157, 107, .03);
}
html.light .drop-zone:hover,
html.light .drop-zone.over {
  border-color: #0b9d6b;
  background: rgba(11, 157, 107, .08);
  box-shadow: 0 0 40px rgba(11, 157, 107, .08);
}
html.light .dz-ico { color: #0b9d6b; }

/* ── Карточки чата ── */
html.light .file-item,
html.light .text-item {
  border-color: rgba(15, 40, 32, .1);
  background: rgba(255, 255, 255, .72);
  color: #1d2b33;
}
html.light .file-item:hover,
html.light .text-item:hover { background: #ffffff; }
html.light .file-item a.file-name { color: #0b7c56; }
html.light .file-item a.file-name:hover { color: #06120d; }
html.light .file-meta { color: #6b7a86; }
html.light .file-thumb.icon { color: #0b7c56; }
html.light .file-thumb.icon .ext { color: #6b7a86; }
html.light .file-item.sending::before,
html.light .file-item.receiving::before,
html.light .text-item.sending::before {
  border-color: rgba(15, 40, 32, .15);
  border-top-color: #0b9d6b;
}
html.light .file-item.pending::before {
  border-color: rgba(11, 157, 107, .3);
  border-top-color: #0b9d6b;
}
html.light .file-item.pending:hover::before { border-top-color: #0b7c56; }
html.light .file-item.downloaded::before { color: #0b9d6b; }
html.light .file-item.downloaded:hover::before { color: #0b7c56; }
html.light .file-item.error {
  color: #c2373c;
  border-color: rgba(194, 55, 60, .25);
  background: rgba(194, 55, 60, .06);
}
html.light .file-item.error .file-meta { color: #c2373c; }
html.light .text-content { color: #1d2b33; }
html.light .text-meta { color: #6b7a86; }
html.light .text-item.error .text-content,
html.light .text-item.error .text-meta { color: #c2373c; }
html.light .text-item.copied::before { color: #0b9d6b; }

/* ── Кнопки, модалка, подвал ── */
html.light .button {
  color: #ffffff;
  background: #10b981;
  border-color: rgba(11, 157, 107, .5);
}
html.light .button:hover {
  background: #0ea974;
  border-color: rgba(11, 157, 107, .65);
  box-shadow: 0 0 20px rgba(11, 157, 107, .18);
}
html.light .modal {
  border-color: rgba(15, 40, 32, .1);
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(23, 42, 36, .3);
}
html.light .modal-title { color: #14212a; }
html.light .modal-cancel {
  color: #5b6b77;
  border-color: rgba(15, 40, 32, .16);
}
html.light .modal-cancel:hover {
  color: #14212a;
  border-color: rgba(15, 40, 32, .3);
  background: rgba(15, 40, 32, .04);
}
html.light .site-footer { color: #6b7a86; }
html.light .site-footer a { color: #0b7c56; }
html.light .site-footer a:hover { color: #06120d; }

/* ── Комната: код и поле ввода ── */
html.light .room-code { color: #0b7c56; }
html.light .room-code-input {
  border-color: rgba(15, 40, 32, .16);
  background: rgba(255, 255, 255, .8);
  color: #14212a;
}
html.light .room-code-input:focus {
  border-color: rgba(11, 157, 107, .55);
  background: #ffffff;
}
html.light .loader {
  border-color: rgba(15, 40, 32, .12);
  border-top-color: #0b9d6b;
}

/* ── Композер текста ── */
html.light .text-compose textarea {
  border: none;
  background: #f1f3f5;
  color: #14212a;
}
html.light .text-compose textarea:focus {
  border: none;
  background: #eceff2;
}
html.light .text-send {
  color: #0b7c56;
  border-color: rgba(11, 157, 107, .3);
  background: rgba(11, 157, 107, .14);
}
html.light .text-send:hover {
  color: #0b7c56;
  background: rgba(11, 157, 107, .24);
}

/* ── Мобильная версия ── */
html.light .card {
  background: #ffffff;
}
html.light .text-compose {
  border-top: none;
  background: rgba(255, 255, 255, .97);
}
html.light .mobile-file-btn {
  border-color: rgba(15, 40, 32, .14);
  color: #0b7c56;
  background: rgba(11, 157, 107, .08);
}
html.light .mobile-file-btn:active {
  background: rgba(11, 157, 107, .18);
  border-color: rgba(11, 157, 107, .35);
}
html.light .mobile-file-fab {
  color: #0b7c56;
  border-color: rgba(11, 157, 107, .5);
  background: rgba(11, 157, 107, .07);
  box-shadow: none;
}
html.light .mobile-file-fab:active { background: rgba(11, 157, 107, .16); }
html.light .mobile-fab-title { color: #0b7c56; }
html.light .mobile-fab-hint { color: #5b6b77; }
/* ── Страницы about / privacy / terms ── */
html.light .about-nav {
  border-bottom-color: rgba(15, 40, 32, .1);
  background: rgba(255, 255, 255, .82);
}
html.light .hero h1,
html.light .section h2,
html.light .final-cta h2 { color: #14212a; }
html.light .hero .lead,
html.light .check-list li { color: #3d4c58; }
html.light .steps li,
html.light .feature-card,
html.light .faq details {
  border-color: rgba(15, 40, 32, .1);
  background: rgba(255, 255, 255, .75);
}
html.light .steps h3,
html.light .feature-card h3,
html.light .faq summary { color: #14212a; }
html.light .feature-card:hover {
  border-color: rgba(11, 157, 107, .35);
  background: rgba(11, 157, 107, .05);
}
html.light .ghost-button { color: #2a3944; }
html.light .ghost-button:hover { color: #06120d; }
html.light .final-cta {
  border-color: rgba(11, 157, 107, .3);
  background: rgba(11, 157, 107, .04);
  box-shadow: none;
}
html.light .about-footer a { color: #0b7c56; }
html.light .about-footer a:hover { color: #06120d; }

/* ===== About page: логотип FileQR в шапке ===== */
.about-nav .brand .logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
}
.about-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
}
.about-nav .brand span {
  font-size: 15px;
  color: var(--accent-soft);
  opacity: 1;
  line-height: 1;
  transform: none;
}

/* ===== About page: сравнение режимов (веб-сайт / Telegram-бот) ===== */
.mode-comparison {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 28px 0 0;
}
.mode-card {
  padding: 26px 24px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.mode-card:hover {
  border-color: rgba(52, 211, 153, .3);
  background: rgba(52, 211, 153, .05);
  transform: translateY(-3px);
}
.mode-ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(52, 211, 153, .25);
  border-radius: 12px;
  background: rgba(52, 211, 153, .08);
  font-size: 22px;
}
.mode-card h3 { margin: 18px 0 8px; color: #eef2f7; font-size: 17px; }
.mode-card > p { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.mode-card .check-list { grid-template-columns: 1fr; gap: 8px; }
.mode-card .check-list li { font-size: 13px; }

/* ===== About page: вкладки безопасности (веб-сайт / Telegram-бот) ===== */
.security-tabs {
  display: flex;
  gap: 8px;
  margin: 24px 0 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}
.tab-button {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.tab-button:hover { color: var(--accent-soft); }
.tab-button.active {
  color: #06120d;
  background: var(--accent);
}
.tab-content {
  display: none;
  margin-top: 16px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
}
.tab-content.active { display: block; animation: pop-in .25s ease; }
.tab-content h3 { margin: 0 0 10px; color: #eef2f7; font-size: 17px; }
.tab-content > p { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.tab-content .check-list { grid-template-columns: 1fr; gap: 10px; }
.tab-content .check-list li strong { color: #eef2f7; }

/* ===== About page: адаптив новых блоков ===== */
@media (max-width: 900px) {
  .mode-comparison { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .about-nav .brand { font-size: 13px; }
  .about-nav .brand .logo { width: 26px; height: 26px; }
  .security-tabs { flex-direction: column; }
  .tab-content { padding: 18px; }
}

/* ===== About page: светлая тема для новых блоков ===== */
html.light .about-nav .brand { color: #0b9d6b; }
html.light .about-nav .brand span { color: #0b7c56; }
html.light .mode-card {
  border-color: rgba(15, 40, 32, .1);
  background: rgba(255, 255, 255, .75);
}
html.light .mode-card:hover {
  border-color: rgba(11, 157, 107, .35);
  background: rgba(11, 157, 107, .05);
}
html.light .mode-card h3 { color: #14212a; }
html.light .mode-card > p { color: #3d4c58; }
html.light .mode-ico {
  border-color: rgba(11, 157, 107, .3);
  background: rgba(11, 157, 107, .08);
}
html.light .security-tabs {
  border-color: rgba(15, 40, 32, .1);
  background: rgba(255, 255, 255, .6);
}
html.light .tab-button { color: #5b6b77; }
html.light .tab-button:hover { color: #0b7c56; }
html.light .tab-button.active { color: #ffffff; background: #0b9d6b; }
html.light .tab-content {
  border-color: rgba(15, 40, 32, .1);
  background: rgba(255, 255, 255, .75);
}
html.light .tab-content h3 { color: #14212a; }
html.light .tab-content > p { color: #3d4c58; }
html.light .tab-content .check-list li strong { color: #14212a; }

/* ===== Комната: вид «сетка» и диалог ввода (меню) ===== */
.file-list.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  align-content: start;
}
.file-list.grid .file-item {
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 12px;
  gap: 8px;
}
.file-list.grid .file-thumb {
  width: 100%;
  height: 92px;
  flex: 0 0 auto;
}
.file-list.grid .file-thumb.photo img { max-width: 100%; max-height: 92px; }
.file-item[data-direct-placeholder] { cursor: default; }

.prompt-input {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 16px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: inherit;
  font: inherit;
  font-size: 15px;
}
.prompt-input:focus {
  outline: none;
  border-color: var(--accent);
}
html.light .prompt-input {
  border-color: rgba(15, 40, 32, .16);
  background: rgba(15, 40, 32, .04);
}

/* ================================================================
   МЕНЮ СООБЩЕНИЯ: правая кнопка / длинное нажатие
   ================================================================ */
/* Карточки чата — позиционирующий контекст для значков (закреп/реакции). */
.file-item,
.text-item { position: relative; }

/* Значки в правом верхнем углу карточки: 📌 и эмодзи-реакции с числом. */
.msg-flags {
  position: absolute;
  top: 6px;
  right: 8px;
  display: flex;
  gap: 3px;
  pointer-events: none;
}
.msg-flag {
  font-size: 11px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .42);
  color: #fff;
}
.msg-flag.reaction.mine { background: rgba(26, 188, 156, .42); }
/* Закреплённое сообщение подсвечиваем рамкой — его всегда видно сверху. */
.file-item.pinned,
.text-item.pinned { border-color: rgba(26, 188, 156, .45); }

/* Счётчики карточки: «глаз» — сколько устройств открыло сообщение, стрелка
   вниз — сколько раз скачали; рядом закрепка и реакции. Живут в строке
   заметки (file-meta / text-meta): отдельная строка растянула бы карточки. */
.msg-stats {
  margin-left: auto;
  padding-left: 8px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}
.msg-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.msg-stat svg { width: 12px; height: 12px; opacity: .8; }
.msg-stat-n { font-variant-numeric: tabular-nums; }
/* Внутри строки счётчиков значки идут без «пилюли» — иначе строка разрастается. */
.msg-stats .msg-flag {
  padding: 0;
  background: none;
  font-size: 11px;
}
.msg-stats .msg-flag.reaction.mine { background: none; color: var(--accent-soft); }

/* Режим «Переместить»: у каждой карточки справа — «три полоски»; держим за них
   и двигаем карточку. Тап вне полосок выходит из режима. */
.msg-drag {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: none;      /* без чёрного квадратика */
  cursor: grab;
  touch-action: none;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}
.msg-drag svg { width: 24px; height: 24px; }
.msg-drag:active { cursor: grabbing; color: var(--accent-soft); }
/* Штатная иконка карточки уступает место полоскам, чтобы не перекрывались. */
body.reorder-mode .file-item,
body.reorder-mode .text-item {
  padding-right: 48px;
  animation: none;                 /* без анимации появления — меньше нагрузки */
  transition: transform .14s ease; /* плавный «зазор» для соседей */
}
body.reorder-mode .file-item::before,
body.reorder-mode .text-item::before { display: none; }
.file-item.dragging,
.text-item.dragging {
  opacity: .92;
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  transition: none;                /* едет строго за пальцем, без инерции */
  will-change: transform;
  z-index: 5;
}
html.light .msg-drag { color: #6b7a86; }

/* Сообщение-ссылка: клик открывает сайт, а не копирует. */
.text-item.is-link .text-content { color: var(--accent-soft); }
.text-item.is-link:hover .text-content { text-decoration: underline; }
.text-item.is-link:not(.sending):not(.error)::before {
  background: var(--accent-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M19 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M19 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.msg-menu {
  position: fixed;
  z-index: 1200;
  min-width: 214px;
  padding: 6px;
  border-radius: 16px;
  /* То же матовое стекло, что и у меню заголовка (.title-menu). */
  border: 1px solid var(--border);
  background: rgba(23, 26, 25, .97);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04),
    0 24px 70px rgba(0, 0, 0, .65);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  animation: msg-menu-in .12s ease-out;
}
.msg-menu.hidden { display: none; }
@keyframes msg-menu-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}
.msg-menu-reactions { display: flex; gap: 4px; padding: 2px; }
.msg-menu-reactions.hidden { display: none; }
/* Реакции не должны «подсвечиваться» при длинном нажатии: гасим системный
   tap-highlight и выделение текста; ховер включаем только на устройствах с
   настоящим курсором (на тач-экране он «залипает» после долгого тапа). */
.msg-menu,
.msg-react,
.msg-menu-item {
  -webkit-tap-highlight-color: transparent;
}
.msg-react,
.msg-menu-item {
  -webkit-user-select: none;
  user-select: none;
}
.msg-react {
  flex: 1 1 0;
  border: 0;
  background: rgba(255, 255, 255, .05);
  border-radius: 10px;
  padding: 8px 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.msg-menu-sep { height: 1px; margin: 6px 4px; background: rgba(255, 255, 255, .08); }
.msg-menu-sep.hidden { display: none; }
.msg-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  color: #d0d8e4;
  font: inherit;
  font-size: 14px;
  text-align: left;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
}
@media (hover: hover) {
  .msg-menu-item:hover { background: rgba(255, 255, 255, .08); }
  .msg-react:hover { background: rgba(255, 255, 255, .12); }
}
.msg-menu-item.hidden { display: none; }
.msg-menu-item[data-act="delete"] { color: #f87171; }
.msg-menu-ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  color: var(--muted);
}
.msg-menu-ico svg { width: 18px; height: 18px; }
.msg-menu-item[data-act="delete"] .msg-menu-ico { color: #f87171; }
.msg-menu-label { flex: 1 1 auto; }

/* Окно «Информация о сообщении». */
.msg-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 18px;
}
.msg-info-row { display: flex; gap: 12px; align-items: baseline; }
.msg-info-key { flex: 0 0 108px; color: var(--muted); font-size: 13px; }
.msg-info-value { flex: 1 1 auto; font-size: 14px; color: #d0d8e4; word-break: break-word; }

/* Светлая тема. */
html.light .msg-menu {
  background: #ffffff;
  border-color: rgba(15, 40, 32, .1);
  box-shadow: 0 18px 48px rgba(15, 40, 32, .18);
}
html.light .msg-menu-item { color: #1d2b33; }
html.light .msg-menu-item:hover { background: rgba(15, 40, 32, .06); }
html.light .msg-react { background: rgba(15, 40, 32, .05); }
html.light .msg-react:hover { background: rgba(15, 40, 32, .1); }
html.light .msg-menu-ico { color: #6b7a86; }
html.light .msg-info-value { color: #1d2b33; }
html.light .msg-info-key { color: #6b7a86; }
html.light .msg-flag { background: rgba(15, 40, 32, .12); color: #1d2b33; }
html.light .msg-flag.reaction.mine { background: rgba(11, 157, 107, .22); }
html.light .text-item.is-link .text-content { color: #0b7c56; }
html.light .file-item.pinned,
html.light .text-item.pinned { border-color: rgba(11, 157, 107, .5); }

/* ── «Мои комнаты»: панель слева от карточки ─────────────────────────────── */
/* Панель вынесена влево от карточки: absolute относительно .card (position:
   relative). На узких экранах (см. медиа-запрос ниже) возвращается в поток. */
.my-rooms {
  position: absolute;
  right: calc(100% + 16px);
  top: 0;
  width: 250px;
  margin-top: 0;
  text-align: left;
  z-index: 3;
  perspective: 1300px;
}
/* Заголовок и лента — один блок под лёгким 3D-наклоном; при наведении плавно
   выпрямляется целиком. Наклон мягкий (11°), без свечения и mask-image — так
   нет артефактов и карточки не выглядят «уже». */
.my-rooms-tilt {
  transform: rotateY(11deg);
  /* Опора — правый край (у самой карточки): при наведении панель
     распрямляется, и опускается именно ЛЕВЫЙ край, а не поднимается правый. */
  transform-origin: right center;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.my-rooms:hover .my-rooms-tilt { transform: rotateY(0deg); }
.my-rooms-title {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 600;
}
/* Обёртка ленты. Растворение краёв — как в чате: маска включается только
   когда комнат больше, чем помещается (класс has-scroll ставит app.js). */
.my-rooms-scroll { position: relative; }
.my-rooms-scroll.has-scroll .my-rooms-list {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.my-rooms-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 4px;
  scrollbar-width: none;
}
.my-rooms-list::-webkit-scrollbar { width: 0; height: 0; }

/* Карточка комнаты: то же «матовое стекло», что у кнопки увеличения QR —
   полупрозрачный тёмный фон и мягкое размытие, без рамок и свечения. */
.my-room,
.my-room-new {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  /* То же матовое стекло, что и у меню заголовка (.title-menu). */
  border: 1px solid var(--border);
  border-radius: 13px;
  color: #ffffff;
  background: rgba(23, 26, 25, .97);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04),
    0 10px 26px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.my-room:hover,
.my-room:focus-visible,
.my-room-new:hover,
.my-room-new:focus-visible { background: rgba(38, 43, 41, .98); }
.my-room:focus-visible,
.my-room-new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.my-room.missing { opacity: .5; }
.my-room-main,
.my-room-new-main { flex: 1 1 auto; min-width: 0; }
.my-room-code,
.my-room-new-title { display: block; font-weight: 600; font-size: 14px; }
.my-room-preview,
.my-room-new-sub {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-room-meta { flex: 0 0 auto; text-align: right; font-size: 11px; color: rgba(255, 255, 255, .6); }
.my-room-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, .6);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.my-room-remove:hover { background: rgba(255, 255, 255, .14); color: #f87171; }
.my-room-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--accent);
  color: #04120c;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
/* Текущая комната — зелёное матовое стекло; остальные — чёрное. */
.my-room.active,
.my-room-new.active { background: rgba(16, 122, 88, .62); }
.my-room-go {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: #c6f7e2;
  white-space: nowrap;
}

html.light .my-room,
html.light .my-room-new {
  background: #ffffff;
  border-color: rgba(15, 40, 32, .1);
  box-shadow: 0 10px 26px rgba(15, 40, 32, .14);
  color: #1d2b33;
}
html.light .my-room:hover,
html.light .my-room:focus-visible,
html.light .my-room-new:hover,
html.light .my-room-new:focus-visible {
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 40, 32, .2);
}
html.light .my-room.active,
html.light .my-room-new.active { background: rgba(11, 157, 107, .38); }
html.light .my-room-preview,
html.light .my-room-new-sub,
html.light .my-room-meta { color: rgba(29, 43, 51, .62); }
html.light .my-room-remove { color: rgba(29, 43, 51, .55); }
html.light .my-room-go { color: #0b7c56; }
html.light .my-room-badge { color: #ffffff; }

/* На узких экранах панель слева не помещается: возвращаем её в поток карточки. */
@media (max-width: 1100px) {
  .my-rooms {
    position: static;
    width: 100%;
    margin-top: 16px;
    perspective: 1100px;
  }
  .my-rooms-tilt { transform: rotateY(8deg); }
  .my-rooms-list { max-height: 320px; }
}

/* ── Круглая кнопка на мобильном (снизу справа) ──────────────────────────── */
/* Переключает главный экран между списком комнат и блоком с QR-кодом. */
.qr-fab { display: none; }
.qr-fab .qr-fab-ico-list { display: none; }
.qr-fab.show-list .qr-fab-ico-qr { display: none; }
.qr-fab.show-list .qr-fab-ico-list { display: block; }
@media (max-width: 540px) {
  .qr-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 40;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(20, 28, 36, .92);
    color: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  }
  .qr-fab svg { width: 26px; height: 26px; }
  /* Главный экран: список комнат сверху; QR показывается кнопкой. */
  body.room-waiting:not(.mobile-qr) #qr-view,
  body.room-waiting:not(.mobile-qr) #subtitle { display: none; }
  body.room-waiting.mobile-qr #my-rooms { display: none; }
}
html.light .qr-fab { background: rgba(255, 255, 255, .95); color: #0b7c56; }

/* ================================================================
   ТЕЛЕФОН: долгое нажатие не выделяет текст
   ================================================================ */
/* На тач-устройствах системное выделение при зажатии мешает: карточка чата
   по долгому нажатию открывает меню, а не подсвечивается текстом. Поля ввода
   оставляем выделяемыми — иначе нельзя было бы поправить набранное. */
@media (hover: none) and (pointer: coarse) {
  .app-shell,
  .card,
  .file-list,
  .file-item,
  .text-item,
  .title-menu,
  .msg-menu,
  .modal,
  .app-notice,
  .site-footer,
  .mode-carousel {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  input,
  textarea,
  [contenteditable] {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
  }
}