/* Чаты: список диалогов и экран переписки. */

/* ==================== СПИСОК ==================== */

.chat-row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  position: relative;
  transition: background var(--t-fast) linear;
}
.chat-row:active { background: var(--surface-2); }
.chat-row + .chat-row::before {
  content: '';
  position: absolute;
  top: 0; left: calc(var(--sp-4) + 44px + var(--sp-3)); right: 0;
  height: 1px;
  background: var(--border);
}
.chat-row__body { flex: 1; min-width: 0; }
.chat-row__name { font-weight: 650; font-size: var(--fs-body); }
.chat-row__time { font-size: var(--fs-xs); color: var(--text-muted); flex: none; }
.chat-row__ctx {
  font-size: var(--fs-xs);
  color: var(--brand-text);
  font-weight: 600;
  margin-top: 1px;
}
.chat-row__last { font-size: var(--fs-sm); color: var(--text-muted); flex: 1; }
.chat-row__badge {
  min-width: 21px; height: 21px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}
.chat-row.is-unread .chat-row__last { color: var(--text-2); font-weight: 550; }

/* ==================== ЭКРАН ПЕРЕПИСКИ ==================== */

/* Переписка занимает высоту экрана целиком и скроллится внутри себя:
   иначе поле ввода уезжает вместе со страницей и до него не дотянуться. */
.chat-screen {
  position: relative;
  /* .screen растягивается flex: 1 и с min-height: auto перебивал высоту —
     длинный чат вырастал в страницу, а поле ввода уезжало вниз. */
  flex: none;
  min-height: 0;
  height: calc(100dvh - var(--header-h) - var(--safe-top));
  padding-bottom: 0;
  overflow: hidden;
}
body.has-nav .chat-screen { height: calc(100dvh - var(--header-h) - var(--safe-top)); }

.chat-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}
.chat-stream { display: flex; flex-direction: column; gap: 3px; }
.chat-top { height: 1px; }

.chat-day {
  align-self: center;
  margin: var(--sp-4) 0 var(--sp-2);
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 650;
}

/* ==================== ПУЗЫРИ ==================== */

.msg {
  max-width: 82%;
  padding: 9px 13px 7px;
  border-radius: var(--r-lg);
  position: relative;
  animation: msg-in var(--t-base) var(--ease-spring);
  word-break: break-word;
  /* Переходы для точечных правок: появление, исчезание и вспышка при
     изменении. Ключевая анимация выше отвечает только за первый показ. */
  transition: opacity var(--t-fast) linear,
              transform var(--t-fast) var(--ease-out),
              max-height .22s var(--ease-out),
              margin .22s var(--ease-out),
              padding .22s var(--ease-out);
}
/* Начальное состояние нового сообщения: класс снимается следующим кадром. */
.msg--enter { opacity: 0; transform: translateY(10px) scale(.97); }
/* Уходящее сообщение схлопывается, а не мигает: так видно, что именно ушло. */
.msg--leave {
  opacity: 0;
  transform: scale(.92);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
}
/* Короткая подсветка: «вот это сообщение изменилось» или «вот оно, закреплённое». */
.msg--flash { animation: msg-flash .7s var(--ease-out); }
@keyframes msg-flash {
  0%   { box-shadow: 0 0 0 0 var(--brand-soft); }
  35%  { box-shadow: 0 0 0 6px var(--brand-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.msg__pin { display: inline-flex; opacity: .75; }
.msg__video { max-width: 100%; border-radius: var(--r-md); display: block; }
.msg__file {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .06);
  color: inherit;
  min-width: 180px;
}
.msg--out .msg__file { background: rgba(255, 255, 255, .18); }
.msg__file-icon { flex: none; display: flex; opacity: .8; }
.msg__file-body { min-width: 0; display: grid; }
.msg__file-name { font-size: var(--fs-sm); font-weight: 600; }

/* ==================== ЗАКРЕПЛЁННОЕ ==================== */

.chat-pins {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.chat-pin {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.chat-pin:active { background: var(--surface-2); }
.chat-pin__icon { flex: none; display: flex; color: var(--brand-text); }
.chat-pin__body { min-width: 0; display: grid; }
.chat-pin__text { font-size: var(--fs-sm); }

/* ==================== ЧЕРНОВИК: ОТВЕТ И ПРАВКА ==================== */

.chat-composer-wrap { display: flex; flex-direction: column; }
.chat-draft {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  animation: draft-in var(--t-fast) var(--ease-out);
}
@keyframes draft-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.chat-draft__icon { flex: none; display: flex; color: var(--brand-text); }
.chat-draft__body { flex: 1; min-width: 0; }

/* Админ, открывший чужую переписку: вместо клавиатуры — честная табличка. */
.chat-observer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-bottom));
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  color: var(--text-2);
}
.msg--in {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--text);
  border-bottom-left-radius: 6px;
}
.msg--out {
  align-self: flex-end;
  background: var(--accent-grad);
  color: #fff;
  border-bottom-right-radius: 6px;
}
/* У склеенных сообщений угол «хвостика» выпрямляется — визуально это
   один блок реплик, а не череда отдельных выкриков. */
.msg--in.msg--grouped { border-bottom-left-radius: var(--r-lg); border-top-left-radius: 6px; }
.msg--out.msg--grouped { border-bottom-right-radius: var(--r-lg); border-top-right-radius: 6px; }

.msg--system {
  align-self: center;
  max-width: 90%;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--sp-2) var(--sp-3);
}

.msg__text { font-size: var(--fs-body); line-height: 1.4; white-space: pre-wrap; }
.msg__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 3px;
  font-size: 10px;
  opacity: .7;
}
.msg--out .msg__meta { color: rgba(255, 255, 255, .9); }
.msg--in .msg__meta { color: var(--text-muted); }
/* Метка правки живёт в строке времени и обязана брать её цвет: класс
   .muted тут давал тёмно-серое по фиолетовому — нечитаемо. */
.msg__edited { font-style: italic; }
.msg__ticks { display: inline-flex; }
.msg__ticks.is-read { color: #7DDCFF; }
.msg__pending .spinner { width: 11px; height: 11px; border-width: 1.5px; }
.msg__retry {
  color: #FFD9D9;
  font-size: 10px;
  font-weight: 700;
  text-decoration: underline;
}

.msg__reply {
  padding: 5px 9px;
  margin-bottom: 5px;
  border-radius: var(--r-xs);
  border-left: 2.5px solid currentColor;
  background: rgba(255, 255, 255, .16);
}
.msg--in .msg__reply { background: var(--surface-3); }

.msg__atts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 3px;
  margin-bottom: 5px;
}
.msg__atts .img-box { border-radius: var(--r-sm); cursor: pointer; }

.msg__offer {
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .18);
  margin-bottom: 5px;
}
.msg--in .msg__offer { background: var(--surface-3); }
.msg__offer-price {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 2px;
}

/* ==================== ИНДИКАТОРЫ ==================== */

.chat-typing {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 var(--sp-4) var(--sp-2);
  color: var(--brand-text);
}

.chat-jump {
  position: absolute;
  right: var(--sp-4);
  bottom: 84px;
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  box-shadow: var(--shadow-md);
  animation: pop-in var(--t-base) var(--ease-spring);
}
.chat-jump[data-count]:not([data-count="0"])::after {
  content: attr(data-count);
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ==================== ПОЛЕ ВВОДА ==================== */

.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + var(--safe-bottom));
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--border);
  flex: none;
}
body.has-nav .chat-composer { padding-bottom: var(--sp-2); }

.chat-input {
  flex: 1;
  min-height: 44px;
  max-height: 118px;
  padding: 11px var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1.5px solid transparent;
  color: var(--text);
  font-size: 16px;  /* ниже 16px Safari зумит страницу при фокусе */
  line-height: 1.35;
  resize: none;
  overflow-y: auto;
  transition: border-color var(--t-fast) var(--ease-out);
}
.chat-input:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.chat-input::placeholder { color: var(--text-muted); }

.chat-attach, .chat-send {
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  flex: none;
  transition: transform var(--t-fast) var(--ease-spring);
}
.chat-attach { color: var(--text-muted); }
.chat-send { background: var(--accent-grad); color: #fff; box-shadow: var(--shadow-brand); }
.chat-attach:active, .chat-send:active { transform: scale(.88); }

/* На экране переписки нижняя навигация мешает: она отнимает место
   у поля ввода и провоцирует промахи. */
body.in-chat .tabbar { display: none; }