/* Лента комментариев — ЧАТ-вид (стиль телеграм). Общая для employee-home и «Поручений». Переменные проекта с
   fallback-ами: --fill-accent/--surface-1/--on-accent в проекте не заданы → берётся существующий цвет палитры
   (акцент #4f46e5, surface #f4f6fb, on-accent #fff); --border/--muted/--text/--danger — реальные переменные. */
.tc-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #6b7280); margin: 0 0 8px; }
.tc-feed { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; padding: 2px 2px 4px; }
.tc-empty { color: var(--muted, #6b7280); font-size: 13px; padding: 4px 0; }

/* Ряд сообщения: чужие — слева (аватар+пузырь), свои — справа (row-reverse, без аватара). */
.tc-row { display: flex; align-items: flex-end; gap: 6px; }
.tc-row--own { flex-direction: row-reverse; }
.tc-row--first { margin-top: 10px; }
.tc-row:first-child { margin-top: 0; }
.tc-ava { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; color: #374151; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.tc-row:not(.tc-row--first) .tc-ava { visibility: hidden; } /* группа: аватар только у первого, у остальных — резерв места */

.tc-col { display: flex; flex-direction: column; max-width: 78%; min-width: 0; }
.tc-row--own .tc-col { align-items: flex-end; }
.tc-name { font-size: 12px; font-weight: 600; color: var(--muted, #6b7280); margin: 0 0 2px 6px; } /* имя — над первым пузырём чужого */

/* Пузырь: чужой — surface + хвостик снизу слева; свой — акцент + on-accent + хвостик снизу справа. Время — отдельной строкой под текстом. */
.tc-bubble { padding: 7px 12px 8px; border-radius: 14px; font-size: 14px; line-height: 1.4; background: var(--surface-1, #f4f6fb); color: var(--text, #24292f); }
.tc-row:not(.tc-row--own) .tc-bubble { border-bottom-left-radius: 4px; }
.tc-bubble--own { background: var(--fill-accent, #4f46e5); color: var(--on-accent, #fff); border-bottom-right-radius: 4px; }
.tc-text { white-space: pre-wrap; word-break: break-word; }
.tc-att { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; } /* каждое вложение — ОТДЕЛЬНОЙ строкой под текстом */
.tc-att-item { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; text-decoration: none; color: #0969da; }
.tc-att-item:hover { text-decoration: underline; }
.tc-bubble--own .tc-att-item { color: var(--on-accent, #fff); text-decoration: underline; }
/* Фото в комментарии — миниатюра 84px, тот же квадрат, что у вложений поручения (.por-att--img): единый вид
   и понятная цель для тапа. Клик открывает модалку-просмотрщик (data-att в task-comments.js), а не файл. */
.tc-att-item--img { padding: 0; text-decoration: none; }
.tc-att-item--img:hover { text-decoration: none; }
.tc-att-item--img img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid #eaeef2; display: block; }
.tc-att-fb { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; } /* превью не вышло → строка с именем */
.tc-time { display: block; margin-top: 3px; font-size: 11px; line-height: 1.2; color: #9ca3af; } /* время — отдельной строкой ПОД текстом (в потоке → пузырь растёт по ширине, не накрывает текст) */
.tc-bubble--own .tc-time { color: rgba(255, 255, 255, .75); }

/* Поле ввода — мессенджер-стиль: скрепка слева, растущее поле, круглая кнопка отправки справа. */
.tc-input { margin-top: 12px; }
.tc-fileslist { display: flex; flex-direction: column; gap: 3px; }
.tc-fileslist:not(:empty) { margin-bottom: 6px; }
.tc-fileschip { font-size: 12px; color: #57606a; }
.tc-input-bar { display: flex; align-items: flex-end; gap: 8px; }
.tc-attach-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; color: var(--muted, #6b7280); }
.tc-attach-btn:hover { background: var(--surface-1, #f4f6fb); }
.tc-textarea { flex: 1; box-sizing: border-box; min-width: 0; min-height: 38px; padding: 8px 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 20px; font-size: 14px; font-family: inherit; line-height: 1.4; resize: none; max-height: 120px; }
.tc-send { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--fill-accent, #4f46e5); color: var(--on-accent, #fff); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tc-send:hover { filter: brightness(1.06); }
.tc-send:disabled { opacity: .55; cursor: not-allowed; }
.tc-msg { font-size: 12px; color: var(--danger, #d1242f); margin-top: 4px; }