/* Тикеты ЯМ — переписка.
 *
 * 🔴 ЦВЕТ ЗДЕСЬ НЕСЁТ СМЫСЛ, А НЕ УКРАШАЕТ. Просьба юзера 04.09.2026:
 * «переписка нечитабельная, нужно выделять Яндекс их фирменным жёлтым цветом,
 * также нужно выделять, чей ответ мы ждём». В треде на двенадцать писем без
 * этого не видно, кто говорит, — а отвечают по этому экрану в чужую систему.
 *
 * ⚠️ ЖЁЛТЫЙ ЯНДЕКСА (#FFCC00) — ЭТО ПОЛОСА И ПОДЛОЖКА, А НЕ ТЕКСТ. На белом
 * фоне он даёт контраст 1.4 : 1 — текстом его читать нельзя (нужно 4.5).
 * Поэтому фирменный цвет живёт в 4-пиксельной черте слева и в едва заметной
 * заливке, а буквы остаются чернильными.
 */

:root {
  --ya: #ffcc00;              /* фирменный жёлтый Яндекса */
  --ya-soft: #fff9e0;         /* подложка их письма */
  --ya-ink: #7a5c00;          /* 4.7 : white — подпись «Яндекс» на светлом */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ya-soft: #302a12;
    --ya-ink: #ffd633;        /* на тёмном жёлтый читается, там он и текст */
  }
}
:root[data-theme="dark"] {
  --ya-soft: #302a12;
  --ya-ink: #ffd633;
}

/* ── Строка списка ──────────────────────────────────────────────────────
 * Полоска слева повторяет тот же словарь, что и подпись: жёлтая — говорит
 * Яндекс (ждём его), синяя — ход наш, серая — закрыт. */
.ym-row { border-left: 3px solid transparent; }
.ym-row.ours   { border-left-color: var(--accent); }
.ym-row.theirs { border-left-color: var(--ya); }
.ym-row.closed { border-left-color: var(--hairline); }

/* Шапка карточки тикета — тем же цветом, что и строка, из которой пришли. */
.ym-top { border-left: 4px solid var(--hairline); }
.ym-top.ours   { border-left-color: var(--accent); }
.ym-top.theirs { border-left-color: var(--ya); }

/* ── Письмо ────────────────────────────────────────────────────────────── */
.ym-mail { border-left: 4px solid var(--hairline); }
.ym-mail.ya {
  border-left-color: var(--ya);
  background: var(--ya-soft);
}
.ym-mail.us { border-left-color: var(--accent); }

/* 🔴 ПИСЬМО, НА КОТОРОЕ ОТВЕЧАЕМ, — С РАМКОЙ И ПОДПИСЬЮ. Одного цвета мало:
 * он говорит, КТО написал, а не ЧЕЙ ХОД. Это разные вопросы, и второй здесь
 * главный. */
.ym-mail.answering {
  box-shadow: 0 0 0 2px var(--ya);
}

.ym-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s2);
}
.ym-who {
  font-weight: 600;
  font-size: var(--t-subhead);
}
.ym-mail.ya .ym-who { color: var(--ya-ink); }
.ym-mail.us .ym-who { color: var(--accent-text); }
.ym-when, .ym-kind {
  font-size: var(--t-caption);
  color: var(--ink-3);
}
.ym-kind {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--surface-3);
}
/* Подпись «отвечаем на это письмо» — на фирменном жёлтом: тёмные буквы на
 * жёлтом дают 11 : 1, это самый заметный элемент экрана и так и задумано. */
.ym-turn {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ya);
  color: #1c1c1e;
  font-size: var(--t-caption);
  font-weight: 600;
  white-space: nowrap;
}

/* Выжимка модели — одной фразой над письмом. */
.ym-sum {
  font-size: var(--t-subhead);
  color: var(--ink-2);
  font-style: italic;
  margin-bottom: var(--s2);
}

/* ── Тело письма: абзацы вместо стены ──────────────────────────────────── */
.ym-body { font-size: var(--t-subhead); line-height: 1.5; color: var(--ink); }
.ym-p { margin: 0 0 var(--s3); }
.ym-body > :last-child { margin-bottom: 0; }
.ym-body b { font-weight: 650; }

/* 🔴 АБЗАЦ С ТРЕБОВАНИЕМ — С ЧЕРТОЙ СЛЕВА. Там написано, чего от нас хотят и
 * к какому сроку; выделять его целиком жирным нельзя (полстраницы жирного не
 * выделено ничем), а пропустить — дороже всего. */
.ym-p.key {
  border-left: 3px solid var(--warn);
  padding-left: var(--s3);
  background: var(--warn-soft);
  padding-top: 2px;
  padding-bottom: 2px;
  border-radius: 0 6px 6px 0;
}
.ym-li {
  margin: 0 0 var(--s2) var(--s4);
  position: relative;
}
.ym-li::before {
  content: "•";
  position: absolute;
  left: calc(-1 * var(--s3));
  color: var(--ink-3);
}
.ym-h {
  font-weight: 600;
  margin: var(--s3) 0 var(--s2);
}
/* Подпись и служебный хвост письма — гасим: они в каждом письме одинаковы. */
.ym-sig {
  font-size: var(--t-caption);
  color: var(--ink-3);
  margin: 0;
}
.ym-files {
  margin-top: var(--s3);
  font-size: var(--t-caption);
  color: var(--ink-2);
}