/* ============================================================
   Комментарии под новостью.

   Два уровня и не больше: корневое сообщение и ответы под ним.
   Ответы сдвинуты полосой слева, а не отступом в пустоту, — так
   видно, где ветка начинается и где кончается, даже когда сообщений
   в ней десяток.
   ============================================================ */

.comments {
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

.cm-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  font-size: 22px;
}
.cm-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-mute);
}

/* ---------- Форма ---------- */

.cm-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 14px;
  margin-bottom: 26px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cm-form-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 15px;
}
.cm-reply-note {
  font-size: 13px;
  color: var(--text-dim);
}
.cm-cancel {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

.cm-name-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--text-dim);
  max-width: 320px;
}
.cm-as {
  font-size: 13px;
  color: var(--text-dim);
}
.cm-as b { color: var(--text); }

.cm-body { resize: vertical; min-height: 92px; font: inherit; }

/* Приманка для ботов. Скрываем так, чтобы поле осталось в форме и
   заполнялось автоматикой, но не попадалось ни глазу, ни голосовому
   чтению, ни клавиатуре. */
.cm-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cm-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cm-note { font-size: 13px; color: var(--text-mute); }
.cm-note.ok { color: var(--green); }
.cm-note.bad { color: var(--red); }

/* ---------- Список ---------- */

.cm-list { display: flex; flex-direction: column; gap: 20px; }

.cm-empty {
  color: var(--text-mute);
  font-size: 14.5px;
  margin: 0;
}

.cm-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.cm-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg3);
}
.cm-avatar-letter {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--on-accent);
  background: var(--accent);
}
/* Гость — тот же кружок, но приглушённый: разница видна, а деления
   на «своих и чужих» не возникает. */
.cm-avatar-letter.guest {
  background: var(--bg3);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.cm-main { min-width: 0; flex: 1; }

.cm-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.cm-name { font-size: 14.5px; }
.cm-badge {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.cm-time { font-size: 12.5px; color: var(--text-mute); }

.cm-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
  /* Сплошная строка без пробелов не должна распирать страницу. */
  overflow-wrap: anywhere;
}

.cm-reply-btn {
  margin-top: 5px;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  color: var(--text-mute);
  cursor: pointer;
}
.cm-reply-btn:hover { color: var(--accent); }

/* Ветка ответов: полоса слева вместо голого отступа. */
.cm-replies {
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cm-reply .cm-avatar { width: 32px; height: 32px; font-size: 14px; }

@media (max-width: 560px) {
  .comments { margin-top: 34px; }
  .cm-form { padding: 14px; }
  .cm-item { gap: 10px; }
  .cm-avatar { width: 34px; height: 34px; }
  /* На узком экране каждый пиксель отступа — это слово, ушедшее на
     следующую строку, поэтому ветка сдвигается минимально. */
  .cm-replies { padding-left: 9px; gap: 14px; }
  .cm-reply .cm-avatar { width: 28px; height: 28px; }
}