/* telegram.css — вкладка «Telegram» источников (sources-telegram.js): бот, ссылка подключения группы, группы с ботом,
   импорт экспорта. Владелец — агент `bot` (волна 1). Правила: только var(--…) токены (tests/ui/test_ui_regulation.py),
   см. docs/THEMES.md. Общие блоки форм доступа .acl-block/.acl-checks — в access.css, .src-icon — в sources.css. */

/* ---------- верхний ряд: бот и ссылка ---------- */
.tg-top { align-items: start; }
.tg-top .card h2 { font-size: var(--fs-lg); display: inline-flex; align-items: center; gap: var(--s2); }
.tg-top .card h2 .icon { color: var(--accent); }
.tg-bot .notice { margin-bottom: var(--s3); }
.tg-bot .notice code { overflow-wrap: anywhere; }
.tg-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s4); margin: 0 0 var(--s3);
  font-size: var(--fs-sm); }
.tg-dl dt { color: var(--fg-muted); }
.tg-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.tg-steps { margin: 0 0 var(--s3); padding-left: var(--s5); line-height: var(--lh-body); }
.tg-steps li + li { margin-top: var(--s1); }
.tg-link form { margin-top: var(--s3); }
.tg-link [data-link-error]:empty, .tg-import [data-import-error]:empty { display: none; }
.tg-link-out { margin-top: var(--s4); }
.tg-link-out input[readonly] { background: var(--surface-1); cursor: text; }
.tg-link-out .actions { flex-wrap: wrap; }

/* ---------- группы ---------- */
.tg-section { margin-top: var(--s5); }
.tg-groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.tg-groups .card + .card { margin-top: 0; }
.tg-group { display: flex; gap: var(--s3) var(--s4); align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  --card-pad: var(--s3) var(--s4); }
.tg-group-main { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--s2); }
.tg-group-main p { margin: 0; }
.tg-group-title { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.tg-group-title h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.tg-group-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.tg-group-meta > span { display: inline-flex; align-items: center; gap: var(--s1); min-width: 0; overflow-wrap: anywhere; }
.tg-group-meta .icon { width: 14px; height: 14px; flex: none; }
.tg-group-actions { flex: 0 1 auto; justify-content: flex-end; flex-wrap: wrap; }
.tg-group.is-focus { --card-border: var(--accent); box-shadow: var(--shadow-focus); }
.tg-group.is-focus:focus { outline: var(--focus-w) solid var(--ring); outline-offset: var(--focus-offset); }

/* ---------- импорт ---------- */
.tg-import { margin-top: var(--s5); }
.tg-import h2 { font-size: var(--fs-lg); display: inline-flex; align-items: center; gap: var(--s2); }
.tg-import h2 .icon { color: var(--accent); }
.tg-import p { margin: 0 0 var(--s2); }
.tg-notes { margin: 0 0 var(--s3); padding-left: var(--s5); line-height: var(--lh-body); }
.tg-import input[type="file"] { min-width: 0; max-width: 100%; }
.tg-import [data-import-status]:empty { display: none; }

@media (max-width: 640px) {
  .tg-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tg-dl dd + dt { margin-top: var(--s2); }
  .tg-group-actions { justify-content: flex-start; width: 100%; }
  .tg-group-actions .btn { flex: 1 1 auto; }
}