/* Единый инбокс — оформление экрана (этап 5).
 *
 * ⛔ ВЫСОТА СТРОКИ СПИСКА ЖИВЁТ ЗДЕСЬ И ТОЛЬКО ЗДЕСЬ (`--row-h`). Виртуализация
 * читает её из вычисленных стилей (`dialogs.js`), а не хранит своё число:
 * две копии разъезжаются от любой правки отступов, и выглядит это не как
 * ошибка вёрстки, а как пропавшие или наехавшие друг на друга диалоги.
 *
 * ⛔ Фон `--gr-bg` обязан совпадать с инлайновым фоном в `index.html`: тот
 * держит ПЕРВЫЙ кадр, пока этот файл едет по сети. Сторож сверяет оба.
 */

:root {
  --gr-bg: #0f1216;
  --gr-panel: #161b22;
  --gr-panel-2: #1c232c;
  --gr-line: #232a33;
  --gr-text: #e6edf3;
  --gr-muted: #8b98a5;
  --gr-accent: #2f81f7;
  --gr-mine: #1f3a5f;
  --gr-ok: #3fb950;
  --gr-warn: #d29922;
  --gr-bad: #f85149;
  --row-h: 76px;
  --bar-h: 56px;
  /* Место под плавающую панель кнопок. ⛔ Панель лежит НАД списком, поэтому
     запас снизу обязан быть у самого списка: без него последний диалог
     оказывается под кнопками, и это видно только на самом дне прокрутки. */
  --tabs-space: 88px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Светлая тема — не «тот же экран посветлее», а свои значения контраста.
 * ⚠️ Пузырь входящего в ней обязан отличаться от фона переписки: на первой
 * версии оба были почти белыми, и сообщения читались как строки без границ. */
@media (prefers-color-scheme: light) {
  :root {
    --gr-bg: #eceff4;
    --gr-panel: #ffffff;
    --gr-panel-2: #ffffff;
    --gr-line: #dbe0e7;
    --gr-text: #16191d;
    --gr-muted: #5f6a75;
    --gr-mine: #cfe4ff;
  }
  .msg { box-shadow: 0 1px 2px rgb(16 25 35 / 12%); }
}

* { box-sizing: border-box; }

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

body { overflow: hidden; }

/* ── раскладка ──────────────────────────────────────────────────────────── */

.app {
  position: fixed;
  inset: 0;
  display: flex;
  /* dvh, а не vh: в мобильном браузере адресная строка съезжает, и на 100vh
     нижняя часть композера уезжает под неё. */
  height: 100dvh;
}

.pane {
  position: relative; /* к панели кнопок и листу настроек */
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--gr-bg);
}

.pane-list { border-inline-end: 1px solid var(--gr-line); }
.placeholder { display: none; }

/* Телефон: видно РОВНО ОДНО — список или чат. Переключает атрибут на body,
   а не класс на каждой панели: одно состояние, одна точка правды. */
@media (max-width: 899px) {
  .pane { position: absolute; inset: 0; }
  body[data-pane="list"] .pane-chat { display: none; }
  body[data-pane="chat"] .pane-list { display: none; }
}

/* ПК: две колонки рядом. Заставка справа — пока диалог не выбран. */
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: minmax(320px, 380px) 1fr; }
  .back { display: none; }
  body[data-chat="none"] .pane-chat { display: none; }
  body[data-chat="none"] .placeholder { display: flex; }
  .placeholder {
    align-items: center;
    justify-content: center;
    color: var(--gr-muted);
    text-align: center;
  }
  .placeholder-icon { font-size: 34px; margin-bottom: 8px; }
}

/* ── шапки ──────────────────────────────────────────────────────────────── */

.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: var(--bar-h);
  padding: calc(8px + var(--safe-top)) 12px 8px;
  background: var(--gr-panel);
  border-block-end: 1px solid var(--gr-line);
}

.bar-main { flex: 1 1 auto; min-width: 0; }
.bar-title {
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-sub {
  font-size: 12px;
  color: var(--gr-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-sub.account { color: var(--gr-accent); font-weight: 600; }

.stream { font-size: 20px; color: var(--gr-muted); line-height: 1; }
.stream[data-state="live"] { color: var(--gr-ok); }
.stream[data-state="down"] { color: var(--gr-bad); }

.icon-btn {
  flex: 0 0 auto;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--gr-text);
  font-size: 20px;
  cursor: pointer;
}
.icon-btn:active { background: var(--gr-panel-2); }
.back { font-size: 28px; line-height: 1; }
.claim[data-mine="1"] { color: var(--gr-ok); }
.claim[data-other="1"] { color: var(--gr-warn); }

.notice {
  flex: 0 0 auto;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--gr-warn) 18%, var(--gr-bg));
  border-block-end: 1px solid var(--gr-line);
  font-size: 13px;
}

/* ── список диалогов ────────────────────────────────────────────────────── */

.list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  contain: strict;
  /* См. `--tabs-space`: запас держит сам список, а не общая раскладка. */
  padding-block-end: var(--tabs-space);
}
.list-inner { position: relative; }

.row {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: var(--row-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-block-end: 1px solid var(--gr-line);
  cursor: pointer;
  /* ⚠️ Строки лежат абсолютно: их сдвиг задаёт виртуализация, а не поток. */
  contain: layout paint;
}
.row:active { background: var(--gr-panel-2); }
.row[data-active="1"] { background: var(--gr-panel-2); }
.row[data-skeleton="1"] { opacity: .35; pointer-events: none; }

.ava {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: var(--gr-accent);
}

.row-body { flex: 1 1 auto; min-width: 0; }
.row-top, .row-mid, .row-bot { display: flex; align-items: center; gap: 6px; }
.row-bot { margin-block-start: 2px; }
.row-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-time { flex: 0 0 auto; font-size: 11px; color: var(--gr-muted); }
.row-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--gr-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-tag {
  flex: 0 1 auto;
  max-width: 60%;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--gr-panel-2);
  color: var(--gr-accent);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.badge {
  flex: 0 0 auto;
  /* Счётчик всегда прижат к правому краю строки, где его и ищут взглядом. */
  margin-inline-start: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--gr-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 20px;
}
.row-lock { flex: 0 0 auto; font-size: 12px; }

/* ── поиск ──────────────────────────────────────────────────────────────── */

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 12px;
  background: var(--gr-panel);
  border-block-end: 1px solid var(--gr-line);
}
.search[hidden] { display: none; }
.search-icon { width: 18px; height: 18px; fill: var(--gr-muted); flex: 0 0 auto; }
.search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--gr-line);
  border-radius: 18px;
  background: var(--gr-bg);
  color: var(--gr-text);
  font: inherit;
}
.search input:focus { outline: 1px solid var(--gr-accent); }
.search-cancel {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--gr-accent);
  font: inherit;
  cursor: pointer;
}

.nothing {
  position: absolute;
  inset-block-start: 45%;
  inset-inline: 0;
  text-align: center;
  color: var(--gr-muted);
}
.nothing[hidden] { display: none; }

/* ── нижняя панель: Чаты · Настройки · Поиск ────────────────────────────── */

.tabs {
  position: absolute;
  inset-block-end: calc(10px + var(--safe-bottom));
  inset-inline: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Панель плавает над списком — как в Telegram на iPhone. Сквозь неё видно
     содержимое, поэтому фон полупрозрачный с размытием. */
  pointer-events: none;
  /* ⛔ Выше листа настроек: в Telegram нижние кнопки видны ВСЕГДА, и уйти с
     настроек обязано быть тем же нажатием, каким на них пришли. Лист, накрывший
     панель, оставлял бы человека без выхода — кроме крестика в углу. */
  z-index: 3;
}
.tabs > * { pointer-events: auto; }

.tabs-group {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--gr-panel) 82%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--gr-line);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 84px;
  padding: 6px 14px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--gr-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.tab[data-active="1"] { background: var(--gr-panel-2); color: var(--gr-accent); }
.tab-icon { position: relative; display: block; width: 24px; height: 24px; }
.tab-icon svg { width: 24px; height: 24px; fill: currentColor; display: block; }
.tab-label { line-height: 1; }

.tab-badge {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-start: 12px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--gr-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.tab-badge[hidden] { display: none; }

.tab-round {
  min-width: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 0;
  justify-content: center;
  background: color-mix(in srgb, var(--gr-panel) 82%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--gr-line);
  color: var(--gr-text);
}
.tab-round svg { width: 24px; height: 24px; fill: currentColor; }

/* ── лист настроек ──────────────────────────────────────────────────────── */

.sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--gr-bg);
  z-index: 2;
}
.sheet[hidden] { display: none; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px var(--tabs-space); }
.pair {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-block-end: 1px solid var(--gr-line);
}
.pair span { color: var(--gr-muted); font-size: 13px; }
.pair b { text-align: end; overflow-wrap: anywhere; }
.wide {
  width: 100%;
  margin-block-start: 16px;
  padding: 11px;
  border: 1px solid var(--gr-line);
  border-radius: 12px;
  background: var(--gr-panel);
  color: var(--gr-text);
  font: inherit;
  cursor: pointer;
}
.note { color: var(--gr-muted); font-size: 12px; line-height: 1.4; }

/* ── свои аккаунты в настройках (этап 7) ── */

.s-head { margin: 22px 0 6px; font-size: 15px; }
.accounts { margin-block-start: 10px; }
.acc {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 2px;
  border: 0;
  border-block-end: 1px solid var(--gr-line);
  background: none;
  color: var(--gr-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.acc[disabled] { opacity: .5; cursor: default; }
.acc-main { flex: 1 1 auto; min-width: 0; }
.acc-tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-sub { color: var(--gr-muted); font-size: 12px; }
/* Аккаунт без единого подписчика: его диалоги не видит НИКТО, и молчать об
   этом нельзя — иначе продавцу не отвечает никто, и заметить это неоткуда. */
.acc-sub[data-nobody="1"] { color: var(--gr-warn); }
/* Тумблер. ⛔ Своего состояния он не хранит: его задаёт поле `mine` от сервера
   (RULES §4а.15) — экран здесь ничего не решает. */
.acc-box {
  flex: 0 0 auto;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: var(--gr-panel-2);
  border: 1px solid var(--gr-line);
  position: relative;
  transition: background .15s;
}
.acc-box::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gr-muted);
  transition: transform .15s, background .15s;
}
.acc[data-on="1"] .acc-box { background: color-mix(in srgb, var(--gr-ok) 45%, var(--gr-bg)); }
.acc[data-on="1"] .acc-box::after { background: #fff; transform: translateX(16px); }
.acc[data-busy="1"] .acc-box { opacity: .5; }

/* ── история ────────────────────────────────────────────────────────────── */

.history {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px;
}
.history-top { min-height: 1px; text-align: center; color: var(--gr-muted); font-size: 12px; }
.history-inner { display: flex; flex-direction: column; gap: 4px; }

.day {
  align-self: center;
  margin: 10px 0 6px;
  padding: 2px 10px;
  border-radius: 10px;
  background: var(--gr-panel);
  color: var(--gr-muted);
  font-size: 12px;
}

.msg {
  max-width: min(78%, 620px);
  padding: 7px 10px 5px;
  border-radius: 14px;
  background: var(--gr-panel-2);
  align-self: flex-start;
  overflow-wrap: anywhere;
}
.msg[data-mine="1"] { background: var(--gr-mine); align-self: flex-end; }
.msg-text { white-space: pre-wrap; }
.msg-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-block-start: 2px;
  font-size: 11px;
  color: var(--gr-muted);
}
.msg-state[data-kind="unknown"] { color: var(--gr-warn); }
.msg-state[data-kind="failed"] { color: var(--gr-bad); }
.msg-state[data-kind="sent"] { color: var(--gr-ok); }
.msg-warn {
  margin-block-start: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--gr-warn) 22%, var(--gr-bg));
  font-size: 12px;
}
.msg-retry {
  margin-block-start: 4px;
  padding: 4px 10px;
  border: 1px solid var(--gr-bad);
  border-radius: 8px;
  background: transparent;
  color: var(--gr-bad);
  font-size: 12px;
  cursor: pointer;
}

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

.composer {
  flex: 0 0 auto;
  padding: 8px 10px calc(8px + var(--safe-bottom));
  background: var(--gr-panel);
  border-block-start: 1px solid var(--gr-line);
}
.composer-account {
  margin-block-end: 4px;
  font-size: 12px;
  color: var(--gr-accent);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-row { display: flex; align-items: flex-end; gap: 8px; }
.composer textarea {
  flex: 1 1 auto;
  min-height: 38px;
  max-height: 40vh;
  padding: 9px 12px;
  border: 1px solid var(--gr-line);
  border-radius: 18px;
  background: var(--gr-bg);
  color: var(--gr-text);
  font: inherit;
  resize: none;
}
.composer textarea:focus { outline: 1px solid var(--gr-accent); }
.send {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--gr-accent);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.send:disabled { opacity: .45; cursor: default; }
/* Скрепка того же размера, что кнопка отправки, но неприметная: текстом
   отвечают в разы чаще, и вторая яркая круглая кнопка спорила бы с главной. */
.attach {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--gr-line);
  border-radius: 50%;
  background: var(--gr-bg);
  color: var(--gr-text);
  font-size: 16px;
  cursor: pointer;
}
.attach:disabled { opacity: .45; cursor: default; }

/* ── дверь ──────────────────────────────────────────────────────────────── */

.gate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--gr-bg);
  text-align: center;
}
.gate[hidden] { display: none; }
.gate-icon { font-size: 34px; margin-bottom: 10px; }
.gate-text { color: var(--gr-muted); white-space: pre-line; }
.gate-retry {
  margin-top: 14px;
  padding: 8px 16px;
  border: 1px solid var(--gr-line);
  border-radius: 10px;
  background: var(--gr-panel);
  color: var(--gr-text);
  cursor: pointer;
}

/* Ввод кода из бота (этап 6). ⛔ Поле моноширинное и по центру: код читают с
   экрана телефона и набирают на другом устройстве. Похожие символы из
   алфавита уже исключены (`login.АЛФАВИТ`) — остаётся не мешать глазу. */
.gate-box { display: flex; flex-direction: column; align-items: center; }
.gate-code {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  inline-size: min(320px, 100%);
}
.gate-code[hidden] { display: none; }
.gate-code input {
  flex: 1;
  min-inline-size: 0;
  padding: 11px 12px;
  border: 1px solid var(--gr-line);
  border-radius: 12px;
  background: var(--gr-panel);
  color: var(--gr-text);
  /* 16px — не вкусовщина: Safari на iPhone увеличивает страницу, если поле
     мельче, и экран остаётся зумленным уже после входа. */
  font: 16px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}
.gate-enter {
  padding: 11px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--gr-accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.gate-enter[disabled] { opacity: .6; cursor: default; }
.gate-note {
  margin-top: 10px;
  color: var(--gr-bad);
  font-size: 13px;
  white-space: pre-line;
}
.gate-note[hidden] { display: none; }

/* Выход с устройства необратим (следующий вход — только новым кодом из бота),
   поэтому кнопка выделена цветом отказа, а не «как все». */
.wide.danger { color: var(--gr-bad); }