/* ══ ЧАТЫ v794: ОПРОСЫ, ССЫЛКИ, «СОЗДАНА ЗАДАЧА», ПРАВКА В ПОЛЕ ВВОДА ══
   Код — js/chat-extras.js (общий для чата задачи и группового), сервер —
   chat/extras.py. Файл подключён ПОСЛЕДНИМ: базовые правила чата лежат в
   05-modals.css, и при равном весе селектора здесь побеждает этот файл.

   ЦВЕТА ВНУТРИ ПУЗЫРЯ. Пузыри в ленте (.chat-wrap) всегда светлые в любой
   теме — белый у чужих, салатовый у своих (05-modals.css, правила с
   !important). Поэтому опрос, карточка ссылки и метка задачи берут не токены
   темы, а свои переменные --cx-*, заданные на пузыре: сплошные цвета под
   каждый из двух фонов, без полупрозрачных заливок (правило проекта, v784). */
.chat-msg-main {
  --cx-bg: var(--surface-elev);
  --cx-tint: var(--chip-bg);
  --cx-tint-2: var(--chip-hover);
  --cx-line: var(--border);
  --cx-accent: var(--accent);
  --cx-fill: color-mix(in srgb, var(--accent) 18%, var(--surface-elev));
  --cx-text: var(--text);
  --cx-text-2: var(--text-secondary);
  --cx-muted: var(--text-muted);
}
.chat-wrap .chat-msg-main {
  --cx-bg: #ffffff;
  --cx-tint: #f1f4f8;
  --cx-tint-2: #e6ebf2;
  --cx-line: #d9e0e9;
  --cx-accent: var(--accent);
  --cx-fill: color-mix(in srgb, var(--accent) 17%, #ffffff);
  --cx-text: #1a1d21;
  --cx-text-2: #4b5563;
  --cx-muted: #6b7280;
}
.chat-wrap .chat-msg--mine .chat-msg-main {
  --cx-bg: #dff2bf;
  --cx-tint: #d1e9ac;
  --cx-tint-2: #c6e29b;
  --cx-line: #b3d188;
  --cx-accent: #3b7a1c;
  --cx-fill: #c2df96;
}

/* Пока правится сообщение, вложения и опрос не добавить: скрепку прячем
   (с v812 «Опрос» — пункт её меню, отдельной кнопки нет). */
.chat-composer--editing .chat-attach-btn { display: none !important; }

/* ── Полоса «Редактирование» ── это полоса «Ответ» с карандашом. */
.chat-edit-bar-ico {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent);
}
.gc-edit-bar .chat-edit-bar-ico { margin-right: -2px; }
/* Пузырь, который сейчас правят. */
.chat-wrap .chat-msg.chat-msg--editing .chat-msg-main,
.chat-wrap.chat-has-wallpaper .chat-msg.chat-msg--editing .chat-msg-main {
  box-shadow: 0 0 0 2px var(--accent), 0 2px 8px rgba(20, 28, 40, .11) !important;
}

/* ── Подсветка ссылки прямо в поле ввода ──
   Слой с тем же текстом под прозрачным полем (chatWireInputLinkHighlight).
   Поле поднимается над слоем (position + z-index), кнопки в поле — ещё выше. */
.chat-input-wrap > textarea.chat-input--hl {
  position: relative;
  z-index: 1;
  background: transparent;
}
.chat-input-hl {
  position: absolute;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  color: transparent;
  pointer-events: none;
  user-select: none;
}
.chat-input-hl-link {
  color: transparent;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-radius: 3px;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ── Карточка ссылки над полем ввода ── в духе полосы «Ответ». */
.chat-lp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 10px;
  border-left: 3px solid var(--accent);
  background: var(--surface-elev);
  border-radius: 4px;
  min-width: 0;
}
.gc-composer .chat-lp-bar { margin-bottom: 8px; }
.chat-lp-bar-thumb {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 4px;
  background: var(--chip-bg);
}
.chat-lp-bar-ico {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.chat-lp-bar-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.chat-lp-bar-site {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-lp-bar-title {
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-lp-bar-title--muted { color: var(--text-muted); }
.chat-lp-bar-x {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--text-muted);
  padding: 4px 6px;
  border-radius: 4px;
}
.chat-lp-bar-x:hover { color: var(--danger); background: var(--danger-soft); }

/* ── Карточка ссылки в сообщении ──
   Ширина задана явно: описание сайта длинное, и по своему содержимому
   карточка растянула бы пузырь до края ленты. Предел в cqw — от ленты
   (container-type у .chat-scroll), как у фото: проценты при расчёте ширины
   пузыря браузер не учитывает (см. 05-modals.css, «ФОТО В ЛЕНТЕ»). */
.chat-lp {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
  width: min(340px, calc(88cqw - 60px));
  max-width: 100%;
  margin: 6px 0 2px;
  padding: 6px 8px 7px 10px;
  border-left: 3px solid var(--cx-accent);
  border-radius: 6px;
  background: var(--cx-tint);
  color: var(--cx-text);
  text-decoration: none;
}
.chat-lp:hover { background: var(--cx-tint-2); }
.chat-lp--big { flex-direction: column; gap: 6px; }
.chat-lp-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-lp-site {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cx-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-lp-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cx-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-lp-desc {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--cx-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-lp-thumb {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 6px;
  background: var(--cx-tint-2);
}
.chat-lp-img {
  display: block;
  width: 100%;
  max-height: 190px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--cx-tint-2);
}

/* ── Метка «Создана задача» ── */
.chat-msg-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 2px;
}
.chat-task-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cx-accent) 40%, var(--cx-bg));
  background: color-mix(in srgb, var(--cx-accent) 11%, var(--cx-bg));
  color: color-mix(in srgb, var(--cx-accent) 80%, #000);
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
}
.chat-task-chip:hover { box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 10%, transparent); }
.chat-task-chip-ico { display: inline-flex; flex-shrink: 0; }
.chat-task-chip-label { font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.chat-task-chip-title {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cx-text);
}
.chat-task-chip.is-done {
  border-color: #86d39b;
  background: #e3f6e8;
  color: #17643a;
}
.chat-task-chip.is-done .chat-task-chip-title { text-decoration: line-through; color: #3f6b50; }

/* В пузыре с фото ширину задаёт снимок (05-modals.css): карточка ссылки и
   метки раскладываются по готовой ширине и пузырь не раздувают. */
.chat-msg--photo .chat-lp {
  width: 0;
  min-width: calc(100% - 16px);
  margin: 6px 8px 2px;
}
.chat-msg--photo .chat-msg-tasks {
  box-sizing: border-box;
  width: 0;
  min-width: 100%;
  padding: 0 8px;
}

/* ── Опрос в пузыре ── */
.chat-poll {
  box-sizing: border-box;
  width: min(330px, calc(88cqw - 60px));
  max-width: 100%;
  padding: 2px 0 0;
  white-space: normal;
}
.chat-poll.is-busy { pointer-events: none; cursor: progress; }
.chat-poll-kind {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--cx-muted);
  margin-bottom: 3px;
}
.chat-poll-q {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cx-text);
  margin-bottom: 9px;
  word-break: break-word;
}
/* Настройки опроса (v813): кто видит голоса, можно ли отменить голос —
   мелкой строкой под вопросом, чтобы голосующий знал это заранее. */
.chat-poll-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: -5px 0 9px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--cx-muted);
}
.chat-poll-flag { display: inline-flex; align-items: center; gap: 4px; }
.chat-poll-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-poll-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--cx-line);
  border-radius: 9px;
  background: var(--cx-bg);
  color: var(--cx-text);
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  overflow: hidden;
}
.chat-poll-opt:not(.is-res):hover { background: var(--cx-tint); border-color: var(--cx-accent); }
.chat-poll-opt.is-res { cursor: default; }
.chat-poll-opt.is-picked { border-color: var(--cx-accent); }
.chat-poll-opt.is-mine { border-color: var(--cx-accent); }
.chat-poll-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--cx-fill);
  pointer-events: none;
}
.chat-poll-opt > :not(.chat-poll-fill) { position: relative; }
.chat-poll-mark {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #fff;
}
.chat-poll-mark.is-radio { border: 1.5px solid var(--cx-muted); border-radius: 50%; }
.chat-poll-mark.is-box { border: 1.5px solid var(--cx-muted); border-radius: 5px; }
.chat-poll-mark.is-on { background: var(--cx-accent); border: 0; border-radius: 50%; }
.chat-poll-mark.is-box.is-on { border-radius: 5px; }
.chat-poll-text { flex: 1; min-width: 0; word-break: break-word; }
.chat-poll-pct {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--cx-text);
}
.chat-poll-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 8px;
}
.chat-poll-who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-left: -5px;
  padding: 3px 5px;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--cx-muted);
}
.chat-poll-who:disabled { cursor: default; }
.chat-poll-who:not(:disabled):hover { background: var(--cx-tint); }
.chat-poll-faces { display: inline-flex; align-items: center; }
.chat-poll-faces .chat-poll-face { box-shadow: 0 0 0 1.5px var(--cx-bg); border-radius: 50%; }
.chat-poll-faces .chat-poll-face + .chat-poll-face { margin-left: -6px; }
.chat-poll-who-link { color: var(--cx-accent); font-weight: 600; white-space: nowrap; }
.chat-poll-act {
  margin-left: auto;     /* перенеслась на свою строку — остаётся справа */
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cx-accent);
}
.chat-poll-act:hover { background: var(--cx-tint); }
.chat-poll-submit {
  background: var(--cx-accent);
  color: #fff;
  padding: 5px 12px;
}
.chat-poll-submit:hover { background: color-mix(in srgb, var(--cx-accent) 88%, #000); }
.chat-poll-submit:disabled {
  background: var(--cx-tint-2);
  color: var(--cx-muted);
  cursor: default;
}
/* Опрос — без «наклейки»: у пузыря обычное оформление (стикер-режим не для
   него), а длинный вопрос переносится. */
.chat-msg--poll .chat-msg-body { margin-top: 2px; }

/* ── «Кто проголосовал» ── всплывашка в body: вне контейнеров чата берёт
   корневые (тёмные) токены, поэтому светлые — своим блоком (как у меню
   сообщения, 05-modals.css). */
.chat-poll-pop {
  position: fixed;
  z-index: 10020;
  background: var(--surface-elev);
  border: 1px solid var(--win-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: var(--text);
}
body:not(.theme-dark) .chat-poll-pop {
  --surface-elev:   #ffffff;
  --win-line:       rgba(0, 0, 0, .45);
  --text:           #1a1d21;
  --text-secondary: #4a4f57;
  --text-muted:     #6b7280;
  --border:         #d7dce3;
  --chip-bg:        #f1f5f9;
  --shadow-lg:      0 12px 32px rgba(20, 28, 40, .14);
}
.chat-poll-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.chat-poll-pop-x {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-poll-pop-x:hover { background: var(--chip-bg); color: var(--text); }
.chat-poll-pop-list {
  max-height: 340px;
  overflow-y: auto;
  padding: 2px 0 6px;
}
.chat-poll-pop-group + .chat-poll-pop-group { border-top: 1px solid var(--border); }
.chat-poll-pop-opt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.chat-poll-pop-opt-text { flex: 1; min-width: 0; word-break: break-word; }
.chat-poll-pop-opt-n { flex-shrink: 0; color: var(--text-muted); font-weight: 600; }
.chat-poll-pop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
}
.chat-poll-pop-av { flex-shrink: 0; }
.chat-poll-pop-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-poll-pop-time { flex-shrink: 0; font-size: 11px; color: var(--text-muted); }
.chat-poll-pop-none { padding: 2px 12px 6px; font-size: 12px; color: var(--text-muted); }

/* ── Окно «Новый опрос» ── */
.cpf .form-row + .form-row { margin-top: 12px; }
.cpf-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 1px 2px 1px 1px;
}
.cpf-opt-row { display: flex; align-items: center; gap: 6px; }
.cpf-opt { flex: 1; min-width: 0; }
.cpf-opt-x {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
}
.cpf-opt-x:hover { color: var(--danger); background: var(--danger-soft); }
.cpf-add {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* Настройки опроса столбиком; пояснение — в «?» рядом, а не внутри <label>
   (щелчок по «?» иначе переключал бы галочку). */
.cpf-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.cpf-check-row { display: flex; align-items: center; gap: 6px; }
.cpf-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.cpf-err { margin-top: 10px; font-size: 12.5px; color: var(--danger); }

/* ══ ЧАТЫ v809: «НЕПРОЧИТАННЫЕ», УПОМИНАНИЯ «@», ФАЙЛЫ В ПРОСМОТРЩИКЕ ══════
   Код — js/group-chat.js (список), js/chat-extras.js и js/chat-format.js
   (упоминания), сервер — chat/extras.py. */

/* ── «Все ▾»: фильтр «Непрочитанные» в выпадающем списке (v812) ──
   С v812 «Непрочитанные» — не значок перед «Все» (так было в v809), а пункт
   меню у самой вкладки (js/group-chat.js, _openChatsFilterMenu). Вкладка —
   пара кнопок: подпись (переключает на вкладку) и стрелка (открывает меню).
   Подчёркивание и цвет активной вкладки — у пары целиком, чтобы «Все ▾»
   читалось одной вкладкой. Подпись — само состояние: «Все» или «Непрочитанные». */
.chats-tab-all {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
/* (0,3,0) — сильнее правил узкого списка ниже: подпись вплотную к стрелке. */
.chats-tabs .chats-tab-all > .chats-tab { padding-right: 2px; }
.chats-tab-all > .chats-tab::after { display: none; }
.chats-tab-all::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background .12s;
}
.chats-tab-all.is-active::after { background: var(--accent); }
.chats-tab-drop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 20px;
  height: 22px;
  margin-right: 5px;
  border-radius: 5px;
  color: var(--text-muted);
  background: transparent;
  transition: color .12s, background .12s;
}
.chats-tab-drop:hover,
.chats-tab-drop.is-open { color: var(--text); background: var(--chip-bg); }
.chats-tab-all.is-active .chats-tab-drop { color: var(--accent); }
/* Меню «Все чаты / Непрочитанные» и меню скрепки — общее «меню у кнопки»
   (chatOpenMenu, js/chat-extras.js) на базе меню сообщения (.chat-msg-menu). */
.chat-pop-menu { min-width: 196px; }
.chat-pop-menu .chat-msg-menu-item { padding: 8px 10px; }
.chat-pop-menu-label { flex: 1; min-width: 0; white-space: nowrap; }
.chat-pop-menu-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-pop-menu-check {
  display: inline-flex;
  width: 14px;
  color: var(--accent);
}
.chat-msg-menu-item.is-checked { font-weight: 600; }
/* Ряд вкладок у узкого списка. Ширину списка тянут мышью (260 px и больше),
   и «＋» не должен уезжать за край. Сначала уже поля вкладок, дальше —
   короткие подписи «Группы» / «Задачи»; с длинной подписью «Непрочитанные»
   (класс --unread) — раньше. Контейнер — сама полоса вкладок, а НЕ панель
   списка: контейнер замыкает в себе слои, и ручка ширины списка (вылезает на
   4 px за край панели) ушла бы под соседнюю панель чата. */
.chats-tabs { container-type: inline-size; }
.chats-tab-short { display: none; }
@container (max-width: 300px) {
  .chats-tab { padding-left: 8px; padding-right: 8px; }
  .chats-tab::after, .chats-tab-all::after { left: 4px; right: 4px; }
}
@container (max-width: 280px) {
  .chats-tab-long { display: none; }
  .chats-tab-short { display: inline; }
}
@container (max-width: 360px) {
  .chats-tabs--unread .chats-tab { padding-left: 8px; padding-right: 8px; }
  .chats-tabs--unread .chats-tab::after,
  .chats-tabs--unread .chats-tab-all::after { left: 4px; right: 4px; }
  .chats-tabs--unread .chats-tab-long { display: none; }
  .chats-tabs--unread .chats-tab-short { display: inline; }
}
@container (max-width: 262px) {
  .chats-tabs-row { margin: 0 -4px; }
  .chats-tab { padding-left: 6px; padding-right: 6px; }
}
/* «Непрочитанные» не влезает и с короткими соседями — вместо подписи значок
   того же пункта меню (подпись — в подсказке вкладки). */
.ico.chats-tab-all-ico { display: none; width: 16px; height: 16px; vertical-align: -3px; }
@container (max-width: 300px) {
  .chats-tabs--unread #chats-tab-all-label { display: none; }
  .chats-tabs--unread .ico.chats-tab-all-ico { display: inline-block; }
}

/* ── «@» в строке списка: есть непрочитанное упоминание вас ── */
.chats-list-mention {
  flex-shrink: 0;
  margin-top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chats-list-mention + .chats-list-unread { margin-left: -4px; }
.chats-list-item.active .chats-list-mention { background: #fff; color: var(--accent); }

/* ── Список участников над полем ввода («@») ──
   Лежит в карточке ввода (.chat-composer / .gc-composer — position:relative)
   и открывается вверх, поверх ленты. Токены — светлые чата (05-modals.css). */
.chat-mention-pop {
  position: absolute;
  left: 12px;
  bottom: calc(100% + 6px);
  z-index: 40;
  box-sizing: border-box;
  width: min(330px, calc(100% - 24px));
  max-height: 266px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
.chat-mention-pop[hidden] { display: none; }
.chat-mention-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 7px;
  text-align: left;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.25;
}
.chat-mention-opt:hover { background: var(--chip-bg); }
.chat-mention-opt.is-active { background: color-mix(in srgb, var(--accent) 14%, var(--surface-elev)); }
.chat-mention-opt-ava { flex-shrink: 0; }
.chat-mention-opt-ava--all {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-mention-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-mention-opt-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-mention-opt-sub { font-size: 11.5px; color: var(--text-muted); }

/* ── Упоминание в пузыре ── цвет — из переменных пузыря (--cx-*): пузыри
   светлые в любой теме, у своих — свой акцент. Упоминание вас — на подложке. */
.chat-mention {
  color: var(--cx-accent);
  font-weight: 600;
  border-radius: 3px;
}
.chat-mention[data-mention-uid] { cursor: pointer; }
.chat-mention[data-mention-uid]:hover { text-decoration: underline; }
.chat-mention--me {
  padding: 0 2px;
  background: color-mix(in srgb, var(--cx-accent) 15%, var(--cx-bg));
}

/* ── Упоминание прямо в поле ввода ── как подсветка ссылки, без подчёркивания. */
.chat-input-hl-mention {
  color: transparent;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-radius: 3px;
}

/* ── «Уведомления чата»: строка упоминаний с «?» рядом (не внутри label) ── */
.gc-notify-panel-line {
  display: flex;
  align-items: center;
  gap: 2px;
}
.gc-notify-panel-line > .gc-notify-panel-row { flex: 1; min-width: 0; }
.gc-notify-panel-line > .help-tip { flex-shrink: 0; margin-right: 4px; }

/* ── Уведомление об упоминании: значок «@» ── */
.notif-item--mention .notif-item-icon,
.notif-toast--mention .notif-toast-icon { color: var(--accent); }

/* ══ ЧАТЫ v812: СКРЕПКА С МЕНЮ, ВЛОЖЕНИЯ ДО ОТПРАВКИ ═══════════════════
   Код — js/chat-extras.js (chatWireAttachMenu, chatRenderPendingAtts), один
   на чат задачи и групповой. */

/* Скрепка, пока открыто её меню, — подсвечена, как под курсором. */
.chat-attach-btn.is-open { background: var(--chip-bg); color: var(--text); }
.chat-attach-menu { min-width: 208px; }

/* ── Карточки вложений над полем ввода ──
   Одной формы у фото и у файла: снимок или значок типа, имя, размер и (у
   картинки) как она уйдёт — «Фото» / «Файл». Щелчок по снимку — просмотр,
   перетаскивание — порядок. Цвета — плоские токены панели чатов. */
.chat-pend { gap: 6px; }
.chat-pend-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 204px;
  max-width: 100%;
  height: 54px;
  padding: 5px 26px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-elev);
  color: var(--text);
  user-select: none;
  transition: border-color .12s;
}
.chat-pend-card:hover { border-color: var(--border-strong); }
.chat-pend-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-pend-card img { -webkit-user-drag: none; }
.chat-pend--multi .chat-pend-card { cursor: grab; }
.chat-pend.is-sorting .chat-pend-card { cursor: grabbing; }
.chat-pend-thumb {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 7px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.chat-pend-thumb .file-type-ico { width: 26px; height: 26px; }
.chat-pend-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface);
}
.chat-pend-card.is-viewable .chat-pend-thumb { cursor: zoom-in; }
.chat-pend-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-pend-name {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-pend-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--text-muted);
}
.chat-pend-size { white-space: nowrap; }
.chat-pend-mode {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 7px 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-secondary);
  background: var(--chip-bg);
  cursor: pointer;
}
.chat-pend-mode.is-photo {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.chat-pend-mode:hover { box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 12%, transparent); }
.chat-pend-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}
.chat-pend-x:hover { color: var(--danger); background: var(--chip-hover); }
/* Перетаскивание: под курсором едет сама карточка (снимок браузера), а на её
   месте в списке — пустая рамка пунктиром: туда она и встанет. */
.chat-pend-card.is-dragging {
  border-style: dashed;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.chat-pend-card.is-dragging > * { visibility: hidden; }