/*
  Цвета берём у Телеграма: приложение должно выглядеть частью клиента,
  а не чужой страницей внутри него. Запасные значения — на случай, когда
  переменных темы нет (старый клиент или открыли в обычном браузере).
*/
:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --fg: var(--tg-theme-text-color, #000);
  --mut: var(--tg-theme-hint-color, #8b8e93);
  --card: var(--tg-theme-secondary-bg-color, #f1f1f4);
  --accent: var(--tg-theme-button-color, #3390ec);
  --on-accent: var(--tg-theme-button-text-color, #fff);
  --line: color-mix(in srgb, var(--mut) 25%, transparent);
  --danger: var(--tg-theme-destructive-text-color, #d14836);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.4 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

[hidden] { display: none !important; }

.screen { padding: 8px 16px 16px; max-width: 720px; margin: 0 auto; }

.head { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px; }
.head h1, .head h2 {
  font-size: 22px; font-weight: 700; margin: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.head h2 { font-size: 18px; }

.icon {
  width: 36px; height: 36px; flex: none;
  border: none; border-radius: 50%;
  background: var(--card); color: var(--fg);
  font-size: 19px; line-height: 1; cursor: pointer;
}
.icon:active { opacity: .6; }
#back { font-size: 26px; }

/* Счётчики: удалено, изменено, с медиа */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.cell {
  background: var(--card); border-radius: 12px;
  padding: 14px 10px; text-align: center;
}
.cell b { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }
.cell span { font-size: 13px; color: var(--mut); }

.notice {
  background: var(--card); border-radius: 12px;
  padding: 12px 14px; margin: 12px 0; font-size: 14px; color: var(--mut);
}

.search {
  width: 100%; margin: 4px 0 12px; padding: 11px 14px;
  border: none; border-radius: 10px;
  background: var(--card); color: var(--fg); font: inherit;
}
.search::placeholder { color: var(--mut); }

/* Список переписок */
.list { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid var(--line);
  background: none; border-left: 0; border-right: 0; border-top: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%;
}
.row:active { background: var(--card); }
.avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 16px;
}
.row .who { flex: 1; min-width: 0; }
.row .name {
  font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.row .sub { font-size: 13px; color: var(--mut); }
.row .when { font-size: 13px; color: var(--mut); flex: none; }

.empty { color: var(--mut); text-align: center; padding: 28px 10px; }

/* Переписка */
.messages { display: flex; flex-direction: column; gap: 6px; padding-bottom: 76px; }
.day { align-self: center; font-size: 12px; color: var(--mut); margin: 10px 0 4px; }
.bubble {
  max-width: 82%; padding: 8px 12px; border-radius: 14px;
  background: var(--card); align-self: flex-start;
  overflow-wrap: anywhere;
}
.bubble.mine { align-self: flex-end; background: var(--accent); color: var(--on-accent); }
.bubble .from { font-size: 13px; font-weight: 600; margin-bottom: 2px; opacity: .8; }
/* Удалённое — то, ради чего архив и открывают: видно сразу */
.bubble.deleted { border: 1px solid var(--danger); }
.bubble .mark {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--danger); margin-bottom: 3px;
}
.bubble.mine .mark { color: var(--on-accent); opacity: .9; }
.bubble .time { font-size: 11px; opacity: .65; margin-left: 8px; float: right; margin-top: 4px; }
.bubble .media { font-size: 14px; opacity: .85; }
.bubble .gone { font-size: 13px; opacity: .7; font-style: italic; }
.edits {
  margin-top: 6px; padding-top: 6px; font-size: 14px;
  border-top: 1px solid var(--line); opacity: .8;
}
.edits div { margin-top: 2px; }
.edits .label { font-size: 12px; opacity: .75; }

.more-wrap { text-align: center; padding: 6px 0; }
.more, .primary {
  border: none; border-radius: 10px; font: inherit; cursor: pointer;
}
.more { background: var(--card); color: var(--fg); padding: 9px 16px; font-size: 14px; }
.primary {
  background: var(--accent); color: var(--on-accent);
  padding: 14px; width: 100%; font-weight: 600; font-size: 16px;
}
.primary:disabled { opacity: .6; }

.footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0));
  background: var(--bg); border-top: 1px solid var(--line);
}
.footer > .primary { max-width: 720px; margin: 0 auto; display: block; }

.error {
  margin: 16px; padding: 12px 14px; border-radius: 12px;
  background: var(--card); color: var(--danger); text-align: center;
}

.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#chat-avatar { flex: none; }
#chat-avatar .avatar { width: 36px; height: 36px; font-size: 13px; }