/* Контакты (.ct-): список, карточка контакта, «Новый контакт». Образец — мобильный Битрикс24:
   research/screens/ios/14–15, ios2/39–41; десктоп — desktop/07. Цвета — только переменные. */

/* .ct-mg-cols — сравнение в шторке объединения: шторка рисуется в портале, вне .ct, а цвета ей нужны те же */
.ct, .ct-screen, .ct-mg-cols { --ct-ent: #7bd500; --ct-on-accent: #fff; }

/* ---------- список (телефон) ---------- */
.ct-screen .icon-btn .ct-fdot { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); border: 1.5px solid var(--bg); }
.ct-search { display: flex; align-items: center; gap: 4px; padding: 0 0 8px; }
.ct-search .searchbar { flex: 1; margin: 0; height: 40px; }
.ct-search input::-webkit-search-cancel-button, .ct-dsearch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.ct-sclear { width: 40px; height: 40px; margin-right: -10px; display: grid; place-items: center; color: var(--text-3); flex: none; }
.ct-scancel { height: 44px; padding: 0 4px 0 8px; color: var(--link); font-size: 16px; flex: none; }
.ct-scroll { padding: 0 8px; }
.ct-feed { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 96px); }
.ct-skel .skeleton { height: 236px; margin-bottom: 8px; border-radius: var(--radius); }
.ct-end { text-align: center; color: var(--text-4); font-size: 13px; padding: 14px 0 4px; }

/* Фильтр по категории: чип с полной подписью в одну строку, ✕ — сбросить */
.ct-fbar { display: flex; align-items: center; gap: 2px; min-height: 44px; margin: 0 0 6px; }
.ct-fchip { position: relative; flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px; background: var(--primary-soft); color: var(--link); font-size: 15px; }
.ct-fchip::after { content: ''; position: absolute; inset: -4px 0; }
.ct-fchip .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ct-fchip svg.ic { flex: none; }
.ct-fx { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--text-3); border-radius: 50%; }
.ct-fx:active { background: color-mix(in srgb, var(--text) 8%, transparent); }
.ct-fcount { margin-left: auto; flex: none; padding: 0 8px; font-size: 14px; color: var(--text-3); white-space: nowrap; }

/* «Обновите список…» — над первой карточкой, не сдвигая список */
.ct-fresh-wrap { position: sticky; top: 6px; z-index: 6; height: 0; display: flex; justify-content: center; }
.ct-fresh { height: 40px; padding: 0 18px; border-radius: 20px; background: color-mix(in srgb, var(--accent) 92%, transparent); color: var(--ct-on-accent); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); animation: ct-pill-in 240ms var(--ease-out); transition: transform 100ms var(--ease-out); }
.ct-fresh:active { transform: scale(0.96); }

/* Ответственный (UserName) в строке списка и таблицы: длинное имя — с многоточием, а не обрезано посреди буквы */
.ct-screen .dl-fv .row, .ct-table td.us .row { max-width: 100%; min-width: 0; vertical-align: middle; }
.ct-screen .dl-fv .row > span:not(.av), .ct-table td.us .row > span:not(.av) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- карточка контакта ---------- */
/* Чипы вкладок 36 px — зона касания 44 px */
.ct .detail-tabs .chip::after { content: ''; position: absolute; inset: -4px 0; }
.ct .detail-body { overflow-x: hidden; }
/* «•••» в шапке — заметная, как в Битриксе (CP-39) */
.ct .ct-more { color: var(--text-2); }
.ct .ct-more svg.ic { width: 28px; height: 28px; }
.ct-details { padding-bottom: 24px; }
.ct-sec .section-head { gap: 12px; }

/* Категория клиента — одной строкой с многоточием (CP-36); ⌄ всегда видна */
.ct-cat .frow { border-bottom: 0.5px solid var(--line); }
.ct-cat .fvalue { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.ct-ell { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-cat .caret { flex: none; }
.ct-cat.bad .frow { box-shadow: inset 0 -2px 0 var(--danger); }
.ct-cat .ct-err { margin: 0 0 8px; }
.ct-user .box { margin: 10px 0; }
.ct-utm { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 15px; margin-top: 4px; }
.ct-utm span { overflow-wrap: anywhere; }

/* Телефон, почта, мессенджер: флаг · номер ссылкой · тип · ✏️ (ios2/40).
   Просмотр, правка и «Добавить …» — одна сетка, поэтому ничего не прыгает при переходе в правку:
   значок по центру колонки 24 px, значение и поле — с одной линии (+32 px от подписи), тип прижат к своей колонке,
   ✏️/✕ — в постоянной колонке 34 px (у новой строки она пустая, и тип не уезжает вправо). */
.ct-chg { align-items: flex-start; padding-bottom: 4px; }
/* Строка 44 px центрирует текст: без −8 px первое значение стояло бы на 14 px под подписью, а у обычных строк — 6 px */
.ct-chg .flabel { margin-bottom: -8px; }
.ct-chg .flabel + .ct-ch:has(.ct-chs) { padding-top: 9px; }
.ct-ch { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 34px; column-gap: 8px; align-items: center; min-height: 44px; min-width: 0; }
.ct-ch > :is(.ct-flag, .ct-lead, .ct-flagbtn) { grid-column: 1; justify-self: center; }
.ct-ch > :is(.ct-chm, .ct-chin) { grid-column: 2; }
.ct-ch > :is(.ct-cht, .ct-typebtn) { grid-column: 3; justify-self: end; max-width: 136px; }
.ct-ch > :is(.ct-pen, .ct-del) { grid-column: 4; justify-self: end; }
.ct-flag { width: 24px; font-size: 20px; line-height: 1; text-align: center; }
.ct-flag.none { display: grid; place-items: center; color: var(--text-4); }
.ct-lead { width: 24px; display: grid; place-items: center; color: var(--text-3); }
.ct-lead .ch-ic { position: static; border: 0; }
.ct-chm { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ct-chv { max-width: 100%; color: var(--link); font-size: 17px; line-height: 1.3; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 11px 0; margin: -11px 0; }
.ct-chs { max-width: 100%; margin-top: 1px; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-cht { font-size: 15px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Кнопка 44 px, значок — у правого края текста раздела */
.ct-pen, .ct-del { margin-right: -10px; color: var(--text-4); }
.ct-add { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; align-items: center; justify-items: start; width: 100%; min-height: 44px; color: var(--text-3); font-size: 17px; text-align: left; }
.ct-add svg.ic { justify-self: center; color: var(--text-4); }
.ct-add:active { opacity: 0.6; }

/* Правка строки на месте (ios2/41): флаг · номер · тип ⌄ · ✕, ниже «Отмена · Сохранить» */
.ct-ched { padding: 0 0 8px; scroll-margin: 12px 0 20px; }
/* Пока строка канала в правке, капсула связи и «+» убраны: у нижнего края они закрывали «Отмена · Сохранить»,
   и касание «Отмены» открывало письмо (R1). Вернутся, когда правку закроют. */
.ct.detail > .float-comm { transition: opacity 160ms var(--ease-out), visibility 0s; }
.ct.detail > .fab { transition: transform 200ms var(--ease-out), opacity 160ms var(--ease-out), visibility 0s; }
.ct.detail[data-ched] > :is(.float-comm, .fab) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms var(--ease-out), visibility 0s 160ms; }
/* Флаг — кнопка 44 px, но в колонке 24 px: отрицательные поля держат флаг там же, где он стоит при просмотре */
.ct-flagbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 -10px; color: var(--text-3); }
.ct-flagbtn:active, .ct-typebtn:active { opacity: 0.6; }
.ct-chin { width: 100%; min-width: 0; height: 44px; padding: 0; border: 0; border-bottom: 1.5px solid var(--primary); border-radius: 0; outline: none; background: transparent; color: var(--text); font-size: 17px; }
.ct-chin::placeholder, .ct-in::placeholder { color: var(--text-3); }
.ct-chin[aria-invalid='true'], .ct-ch.bad .ct-chin { border-bottom-color: var(--danger); }
.ct-typebtn { display: inline-flex; align-items: center; gap: 3px; height: 44px; padding: 0 0 0 8px; color: var(--text-2); font-size: 15px; }
.ct-typebtn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ct-typebtn svg.ic { flex: none; color: var(--text-3); }
.ct-err { margin: 6px 0 0; }
.ct-ched > .ct-err { margin-left: 32px; }
.ct-dup { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--warning-soft); color: var(--warning-text); font-size: 14px; line-height: 1.3; }
.ct-dup .btn.sm { flex: none; height: 44px; background: var(--surface); color: var(--text); }
.ct-edact { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ct-edact .btn.sm { height: 44px; min-width: 104px; }

/* ---------- «Сделки» контакта: строки как компактный список сделок, без синего текста (CP-35) ---------- */
.ct-deals { padding: 10px 8px 24px; }
.ct-rows { background: var(--surface); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.ct-dsum { color: var(--text); }
.ct-newdeal { margin-top: 4px; }

/* ---------- «Новый контакт» ---------- */
.ct-create-btn { flex: none; min-height: 44px; padding: 0 10px; color: var(--link); font-size: 17px; font-weight: 600; }
.ct-create-btn:disabled { color: var(--text-4); }
.ct-new-body { padding-bottom: 32px; }
.ct-inrow { cursor: text; }
.ct-inrow.bad { box-shadow: inset 0 -2px 0 var(--danger); }
/* Поле 44 px высотой, в строке занимает 28 px — касание не промахивается, строка не растёт */
.ct-in { display: block; width: 100%; min-height: 44px; margin: -8px 0; padding: 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: 17px; }
.ct-ta { resize: none; min-height: 76px; margin: -4px 0; padding: 8px 0; line-height: 1.4; }
.ct-new-foot { padding: 16px 8px 0; }
.ct-dup-note { margin: 0 0 12px; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.ct-duprow { display: flex; align-items: center; gap: 12px; min-height: 64px; border-bottom: 0.5px solid var(--line); }
.ct-duprow .grow { font-size: 14px; }
.ct-dup-name { font-size: 17px; color: var(--text); }
.ct-duprow .btn.sm { flex: none; height: 44px; }
.ct-dup-create { margin-top: 16px; }

/* ---------- «Похожие контакты», объединение, удаление ---------- */
/* Подсказка о дубле — над разделами карточки, той же плашкой, что раздел; жёлтый значок — заметно, но не тревога */
.ct-sim { background: var(--surface); border-radius: var(--radius); margin: 10px 8px 0; padding: 0 16px 2px; }
.ct-sim-head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0 10px; border-bottom: 0.5px solid var(--line); }
.ct-sim-ic { flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--warning-soft); color: var(--warning-text); }
.ct-sim-head .grow { min-width: 0; }
.ct-sim-title { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text); }
.ct-sim-note { margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--text-3); }
/* ✕ — кнопка 44 px, значок у правого края текста раздела */
.ct-sim-x { margin: -6px -10px 0 0; color: var(--text-4); }
.ct-sim-row { display: flex; align-items: center; gap: 10px; min-height: 60px; }
.ct-sim-row + .ct-sim-row { border-top: 0.5px solid var(--line); }
.ct-sim-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--text); }
.ct-sim-open .grow { min-width: 0; display: flex; flex-direction: column; }
.ct-sim-name { font-size: 17px; line-height: 1.3; color: var(--link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-sim-val { font-size: 14px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-sim-row .btn.sm { flex: none; height: 44px; }
.ct-sim-open:active { opacity: 0.6; }

/* Сравнение двух контактов: две колонки даже на 390 px — так видно разницу; выбранная — «Останется» */
.ct-mg-note { margin: 0 0 12px; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.ct-mg-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding-bottom: 12px; }
.ct-mg-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; padding: 12px; border-radius: var(--radius); border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--text); text-align: left; transition: border-color 120ms, background 120ms, transform 100ms var(--ease-out); }
.ct-mg-card:active { transform: scale(0.98); }
.ct-mg-card.on { border-color: var(--primary); background: var(--primary-soft); }
.ct-mg-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 13px; font-weight: 600; background: var(--surface-3); color: var(--text-3); }
.ct-mg-card.on .ct-mg-badge { background: var(--primary); color: var(--ct-on-accent); }
.ct-mg-who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ct-mg-name { max-width: 100%; font-size: 17px; font-weight: 600; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ct-mg-row { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ct-mg-l { font-size: 12px; color: var(--text-3); }
.ct-mg-v { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.ct-del-force, .ct-del-cancel { margin-top: 8px; }

@keyframes ct-pill-in { from { opacity: 0; transform: translateY(-6px) scale(0.96); } }

@media (hover: hover) and (pointer: fine) {
  .ct-add:hover { color: var(--text-2); }
  .ct-chv:hover { text-decoration: underline; }
  .ct-pen:hover, .ct-del:hover { color: var(--text-2); }
  .ct-del:hover { color: var(--danger-text); }
  .ct-fx:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
  .ct-table tbody tr:hover { background: var(--surface-2); }
  .ct-dcat:hover, .ct-dsearch:hover { border-color: var(--text-4); }
  .ct-tl:hover { background: var(--surface-3); }
  .ct-sim-x:hover { color: var(--text-2); }
  .ct-sim-name:hover { text-decoration: underline; }
  .ct-mg-card:not(.on):hover { border-color: var(--text-4); }
}

/* ======================= десктоп: таблица (как список контактов в Битриксе), слайдер карточки ======================= */
@media (min-width: 1024px) {
  .ct-desk .ct-dtop { flex: none; padding: 16px 24px 8px; }
  .ct-dtop-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
  .ct-dtop-row .topbar-title { flex: none; }
  .ct-create { flex: none; background: var(--success); color: var(--ct-on-accent); }
  .ct-dsearch { flex: 1 1 280px; min-width: 240px; max-width: 520px; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 4px 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-3); }
  .ct-dsearch:focus-within { border-color: var(--primary); }
  .ct-dsearch input { flex: 1; min-width: 60px; height: 36px; border: 0; outline: none; background: transparent; text-overflow: ellipsis; }
  .ct-dsearch .ct-sclear { width: 32px; height: 32px; margin: 0; border-radius: 8px; }
  .ct-dcat { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 8px; height: 38px; max-width: 340px; min-width: 0; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font-size: 15px; }
  .ct-dcat .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ct-dcat svg.ic { flex: none; }
  .ct-dcat.on { border-color: var(--primary); background: var(--primary-soft); color: var(--link); }
  .ct-dtotal { margin-left: auto; font-size: 14px; color: var(--text-3); white-space: nowrap; }
  .ct-dfresh { display: flex; justify-content: center; padding: 0 0 6px; }
  .ct-dscroll { padding: 4px 24px 24px; }
  .ct-table-box { background: var(--surface); border-radius: 12px; overflow: hidden; }
  .ct-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
  .ct-table th { padding: 10px 12px; text-align: left; font-weight: 500; color: var(--text-3); background: var(--surface-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Телефон, «Изменён» и кнопки — по содержимому; категория, почта и ответственный делят остаток поровну */
  .ct-table th:nth-child(1) { width: 16%; }
  .ct-table th:nth-child(3) { width: 152px; }
  /* «Изменён»: «29 минут назад», «сегодня, 00:45», «12 сентября 2025» целиком (R7) */
  .ct-table th:nth-child(6) { width: 156px; }
  .ct-table th:nth-child(7) { width: 190px; }
  .ct-table td { padding: 8px 12px; border-top: 0.5px solid var(--line); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
  .ct-table tbody tr { cursor: pointer; }
  .ct-table td.nm a { color: var(--link); font-weight: 500; font-size: 15px; }
  .ct-table td .sub { margin-top: 2px; font-size: 12px; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; }
  .ct-tools { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
  .ct-tl { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 8px; border-radius: 8px; color: var(--text-3); font-size: 13px; }
  .ct-tl.on { color: var(--success); font-weight: 600; }
  .ct-table .comm-pill.h { padding: 0; gap: 0; background: transparent; }
  .ct-table .comm-pill.h button { width: 34px; height: 34px; }

  /* Карточка: поля слева, лента справа (как «Общие» в Битриксе) */
  .ct-cols { display: grid; grid-template-columns: minmax(380px, 470px) minmax(0, 1fr); gap: 16px; padding: 0 16px; align-items: start; }
  .ct-left .section, .ct-left .ct-sim { margin: 0 0 12px; }
  .ct-left .ct-details { padding-bottom: 0; }
  .ct-right { min-width: 0; }
  .ct-right .tl { padding: 0 0 24px; }
  .ct-deals { max-width: 900px; padding: 0 16px 24px; }
  /* «Новый контакт» — одна колонка по центру слайдера */
  .ct-new .detail-body > .ct-new-body { max-width: 760px; margin: 0 auto; }
}