/*
 * Переписка с поддержкой — общий вид для окна и кабинета.
 *
 * Тот же расчёт, что и у chat.js: разговор один, мест два, и рисовать его
 * дважды разными правилами нельзя — они разъедутся на первой же правке.
 * Здесь только внутренность: лента, пузыри, поле, смайлики. Оболочку —
 * выдвижную панель в окне и карточку во вкладке кабинета — каждая страница
 * держит у себя, потому что они и правда разные.
 *
 * Цвета берутся из переменных страницы: --card, --field, --line, --text,
 * --dim, --talk. Обе страницы их объявляют, светлую тему включая.
 */

/* ------------------------------------------------------------- лента */

.chatStream {
  flex: 1 1 0; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}

.chatDay { align-self: center; font-size: 10.5px; color: var(--dim); }

.chatMsg {
  max-width: 78%; padding: 8px 11px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.45;

  /* Чужой текст переносим по словам и не даём длинной ссылке рвать окно. */
  overflow-wrap: anywhere;
}

/* Свои — справа и синим, поддержка — слева и серым. Как во всякой переписке. */
.chatMine { align-self: flex-end; background: var(--talk); color: #fff; border-bottom-right-radius: 4px; }
.chatTheirs { align-self: flex-start; background: var(--field); border-bottom-left-radius: 4px; }

.chatBy { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 600; color: var(--talk); }
.chatAt { display: block; margin-top: 3px; font-size: 10px; opacity: .6; }

/*
 * Галочки состояния у своих сообщений: одна — ушло, две — прочитано.
 *
 * Прочитанные ярче отправленных, но не кричат цветом: это подтверждение, а не
 * событие. Две галочки стоят вплотную и читаются как одна пара — так же, как
 * в переписках, к которым все привыкли.
 */
.chatTick { margin-inline-start: 5px; letter-spacing: -3px; }
.chatTick.read { opacity: 1; letter-spacing: -4px; }

/* Снимок — превью; во весь размер открывается нажатием. */
.chatShot {
  display: block; max-width: 100%; width: 190px; margin-bottom: 5px;
  border-radius: 8px; border: 1px solid rgba(127, 127, 127, .35); cursor: zoom-in;
}

/* Снимок, стёртый по сроку: сообщение осталось, картинки уже нет. */
.chatGone {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 5px; padding: 7px 10px;
  border: 1px dashed var(--line); border-radius: 8px;
  font-size: 10.5px; color: var(--dim);
}

/* Пустая переписка объясняет себя сама. */
.chatHello { margin: auto 0; padding: 0 18px; text-align: center; font-size: 12px; color: var(--dim); }
.chatHello b { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text); }

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

.chatSay { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }

.chatField {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 10px;
  border: 1px solid var(--talk); border-radius: 10px;
  background: var(--talk-soft, rgba(47, 109, 246, .12));
}

.chatSmile { flex: none; font-size: 17px; line-height: 1; cursor: pointer; }

.chatField textarea {
  flex: 1; min-width: 0; height: 22px; max-height: 72px;
  padding: 0; border: 0; outline: none; resize: none;
  background: transparent; color: var(--text); font: inherit; font-size: 12.5px; line-height: 1.5;
}

.chatField textarea::placeholder { color: var(--dim); }

/*
 * Отправка — стрелкой ввода. Слово рядом заняло бы место, которого в окне
 * шириной 420 нет, а стрелка в переписке понятна и без подписи.
 */
.chatSend {
  flex: none; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 9px; background: var(--talk); color: #fff;
  font-size: 15px; cursor: pointer;
}

.chatSend::before { content: "⏎"; }
.chatSend.off { background: var(--field); color: var(--dim); cursor: default; }

/* ------------------------------------------------------------ снимки */

.chatPasted {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 12px 8px; padding: 6px 8px;
  border: 1px dashed var(--talk); border-radius: 9px;
  background: var(--talk-soft, rgba(47, 109, 246, .12));
}

.chatOnePasted { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); }
.chatMini { width: 44px; height: 26px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); }
.chatDrop { cursor: pointer; padding: 0 2px; }
.chatDrop:hover { color: var(--text); }

/* --------------------------------------------------------- смайлики */

.chatSmiles {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  padding: 8px 10px; border-top: 1px solid var(--line);
}

.chatSmiles span { display: grid; place-items: center; height: 28px; border-radius: 7px; font-size: 17px; cursor: pointer; }
.chatSmiles span:hover { background: var(--field); }