/* «Дані постачальника» — СПІЛЬНІ стилі «Клієнтів» і «Постачальників» (модуль /shared/vendordata.js). Друге коло 24.10:
   вигляд за зразком vendor_audit (рядки-поля з підкресленням, кольорові месенджери, картки служб з логотипами й
   перемикачами, аналітика ТТН), але в кольорах теми чату: фон і текст — змінні господаря (--tw-* у «Постачальників»,
   --bg-* / --text у «Клієнтів»), зелений «увімкнено» і кольори месенджерів — свої, як у сверці. */

/* ширина: у «Постачальників» загальне правило діалогу (.sp-modal .imodal-card.sp-dialog, 560px) сильніше за просте
   .vd-modal — тому селектор того самого рівня + власний клас */
.modal-card.modal-panel.vd-modal { width: min(1160px, 96vw); height: 92vh; height: 92dvh; }
.sp-modal .imodal-card.sp-dialog.vd-modal { width: min(1160px, 96vw); height: 92vh; max-height: 92vh; height: 92dvh; max-height: 92dvh; }
.sp-modal .imodal-card.sp-dialog.vd-modal .sp-modal-body { padding: 0; }

.vd-win {
    --vd-tx: var(--tw-text, var(--text, #e8edf5));
    --vd-dim: var(--tw-dim, var(--text-dim, #8b9bb5));
    --vd-card: color-mix(in srgb, var(--vd-tx) 4.5%, transparent);
    --vd-line: color-mix(in srgb, var(--vd-tx) 13%, transparent);
    --vd-line2: color-mix(in srgb, var(--vd-tx) 22%, transparent);
    --vd-in: color-mix(in srgb, var(--vd-tx) 7%, transparent);
    --vd-ok: #10b981; --vd-mid: #f59e0b; --vd-bad: #ef4444; --vd-acc: #06b6d4;
    --vd-vb: #7360f2; --vd-tg: #2aabee; --vd-wa: #25d366;
    min-height: 100%; display: flex; flex-direction: column;
    color: var(--vd-tx); font-size: 13px; line-height: 1.35;
}
.vd-win input, .vd-win textarea, .vd-win select, .vd-win button { font: inherit; color: inherit; }
.vd-empty { padding: 28px 22px; color: var(--vd-dim); }
.vd-err, .vd-empty.vd-err { color: var(--vd-bad); }
.vd-dim { color: var(--vd-dim); font-size: 12px; }
.vd-pad { padding: 6px 2px; }
.vd-warn { color: var(--vd-bad); font-size: 12px; }
.vd-take { font-size: 12px; margin-left: 4px; }
.vd-svc-h .vd-take { margin-left: 0; }
/* правка контакту не пройшла — поле позначене, Enter шле ще раз */
.vd-win input.vd-unsent { border-bottom: 1px solid var(--vd-mid) !important; background: color-mix(in srgb, var(--vd-mid) 8%, transparent); }
.vd-note { margin: 0 18px 10px; padding: 8px 12px; border-radius: 9px; font-size: 12.5px;
    background: color-mix(in srgb, var(--vd-acc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--vd-acc) 35%, transparent); }

/* ── шапка ── */
.vd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 18px 12px; }
.vd-name { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.vd-name-t { font-size: 19px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-id { color: var(--vd-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.vd-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; align-self: center; }
.vd-dot.ok { background: var(--vd-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-ok) 22%, transparent); }
.vd-dot.wait { background: var(--vd-mid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-mid) 22%, transparent); }
.vd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px;
    background: var(--vd-card); border: 1px solid var(--vd-line); color: var(--vd-dim); white-space: nowrap; }
.vd-chip i { font-size: 11px; }
.vd-chip.vd-age.ok, .vd-chip.vd-tree.ok { color: var(--vd-ok); border-color: color-mix(in srgb, var(--vd-ok) 40%, transparent); }
.vd-chip.vd-age.mid, .vd-chip.vd-tree.wait { color: var(--vd-mid); border-color: color-mix(in srgb, var(--vd-mid) 40%, transparent); }
.vd-chip.vd-age.old { color: var(--vd-bad); border-color: color-mix(in srgb, var(--vd-bad) 40%, transparent); }

/* ── дві колонки карток ── */
.vd-grid { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 12px; padding: 0 18px 14px; align-items: start; }
.vd-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vd-card { background: var(--vd-card); border: 1px solid var(--vd-line); border-radius: 12px; padding: 10px 12px 12px; min-width: 0; }
.vd-card-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--vd-dim); }
.vd-card-h > i { color: var(--vd-acc); font-size: 12px; }
.vd-card-t { flex: 1 1 auto; }
.vd-card-hint { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11.5px; opacity: .8; }

/* поле з підкресленням (як .ftable vendor_audit): прозоре, пунктир при наведенні, зелене при фокусі */
.vd-win .vd-c-num, .vd-win .vd-c-cm, .vd-win .vd-fin, .vd-win .vd-pay-cm, .vd-win .vd-amt-in, .vd-win .vd-city-cm,
.vd-win .vd-add-data, .vd-win .vd-add-cm {
    background: transparent; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 4px 2px; min-width: 0;
    outline: none; transition: border-color .12s ease, background .12s ease;
}
.vd-win .vd-c-num:hover:not(:disabled), .vd-win .vd-c-cm:hover:not(:disabled), .vd-win .vd-fin:hover:not(:disabled),
.vd-win .vd-pay-cm:hover:not(:disabled), .vd-win .vd-amt-in:hover:not(:disabled), .vd-win .vd-city-cm:hover:not(:disabled),
.vd-win .vd-add-data:hover, .vd-win .vd-add-cm:hover { border-bottom: 1px dashed var(--vd-line2); }
.vd-win .vd-c-num:focus, .vd-win .vd-c-cm:focus, .vd-win .vd-fin:focus, .vd-win .vd-pay-cm:focus, .vd-win .vd-amt-in:focus,
.vd-win .vd-city-cm:focus, .vd-win .vd-add-data:focus, .vd-win .vd-add-cm:focus {
    border-bottom: 1px solid var(--vd-ok); background: color-mix(in srgb, var(--vd-ok) 6%, transparent); }
.vd-win input:disabled, .vd-win textarea:disabled { opacity: .7; cursor: default; }
.vd-win ::placeholder { color: color-mix(in srgb, var(--vd-dim) 70%, transparent); }

/* ── контакти ── */
.vd-contacts { display: flex; flex-direction: column; }
/* номер — рівно по ширині «(067) 123 45 67», месенджери — 3 × 34px, решта — підпис (Іван 25.10: «на коммент не хватает
   места… отведи телефону меньше места») */
.vd-c-row { display: grid; grid-template-columns: 26px 128px 112px minmax(0, 1fr) auto; align-items: center; gap: 8px;
    padding: 5px 4px; border-radius: 8px; }
.vd-c-row.vd-c-other, .vd-c-row.vd-c-ro { grid-template-columns: 26px minmax(0, 1.3fr) 64px minmax(0, 1fr) auto; }
.vd-c-row + .vd-c-row { border-top: 1px solid var(--vd-line); border-radius: 0; }
.vd-c-row:hover { background: var(--vd-in); }
.vd-c-ic { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
    background: var(--vd-in); color: var(--vd-dim); font-size: 12px; }
.vd-c-num { font-weight: 600; font-variant-numeric: tabular-nums; width: 100%; }
.vd-c-txt { padding: 4px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-c-val { font-weight: 500; }
.vd-c-cm { width: 100%; color: var(--vd-dim); }
/* підпис переноситься по рядках, висота — по тексту */
.vd-win textarea.vd-c-cm { resize: none; field-sizing: content; min-height: 26px; max-height: 120px; line-height: 1.35;
    white-space: pre-wrap; overflow-wrap: anywhere; box-sizing: border-box; }
.vd-c-cm:focus { color: var(--vd-tx); }
.vd-c-type { font-size: 11.5px; color: var(--vd-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-c-note { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-c-ro { opacity: .78; }
/* месенджери: значок у своєму кольорі; «є» — зелена обвідка й крапка (Іван 24.10: «цветные… только индикатор или
   обводка зеленые»); «немає» — сірий пунктир */
.vd-msgs { display: flex; gap: 5px; }
.vd-msg { position: relative; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center;
    justify-content: center; font-size: 18px; cursor: pointer; background: transparent; border: 1px dashed var(--vd-line2);
    color: color-mix(in srgb, var(--vd-dim) 75%, transparent); transition: transform .1s ease, border-color .1s ease; }
.vd-msg:hover:not(:disabled) { transform: translateY(-1px); border-style: solid; }
.vd-msg.vd-m-vb:hover:not(:disabled) { color: var(--vd-vb); }
.vd-msg.vd-m-tg:hover:not(:disabled) { color: var(--vd-tg); }
.vd-msg.vd-m-wa:hover:not(:disabled) { color: var(--vd-wa); }
.vd-msg.on { border: 1.5px solid var(--vd-ok); background: color-mix(in srgb, var(--vd-tx) 5%, transparent); }
.vd-msg.on.vd-m-vb { color: var(--vd-vb); }
.vd-msg.on.vd-m-tg { color: var(--vd-tg); }
.vd-msg.on.vd-m-wa { color: var(--vd-wa); }
.vd-msg.on::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--vd-ok); box-shadow: 0 0 0 2px var(--tw-bg, var(--bg-thread, #0f172a)); }
.vd-msg:disabled { cursor: default; }
/* швидкі дії рядка: з'являються при наведенні (на дотику — завжди) */
.vd-c-acts { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity .12s ease; }
.vd-c-row:hover .vd-c-acts, .vd-c-row:focus-within .vd-c-acts { opacity: 1; }
@media (hover: none) { .vd-c-acts { opacity: 1; } }
.vd-c-act { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; text-decoration: none; color: #fff; border: 0; cursor: pointer; background: var(--vd-line2); }
.vd-c-act.vd-m-vb { background: var(--vd-vb); }
.vd-c-act.vd-m-tg { background: var(--vd-tg); }
.vd-c-act.vd-m-wa { background: var(--vd-wa); }
.vd-c-act.open { background: var(--vd-acc); }
.vd-c-act.del { background: transparent; color: var(--vd-bad); }
.vd-c-act.del:hover { background: color-mix(in srgb, var(--vd-bad) 16%, transparent); }
.vd-c-act:hover { filter: brightness(1.1); }
/* додати контакт */
.vd-addbar { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center;
    margin-top: 8px; padding: 7px 8px; border-radius: 9px; border: 1px dashed var(--vd-line2); }
.vd-add-type { background: var(--vd-in); border: 1px solid var(--vd-line); border-radius: 7px; padding: 4px 6px; }
.vd-add-type option { color: #111; }
.vd-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--vd-line2); background: transparent; color: var(--vd-dim); font-weight: 600; }
.vd-add-btn.ready { background: var(--vd-ok); border-color: var(--vd-ok); color: #fff; }

/* ── основне (рядки-поля) ── */
.vd-ftable { display: flex; flex-direction: column; }
.vd-frow { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; align-items: start; padding: 3px 0; }
.vd-frow + .vd-frow { border-top: 1px solid var(--vd-line); }
.vd-fl { color: var(--vd-dim); font-size: 12.5px; padding-top: 7px; }
.vd-fv { min-width: 0; }
.vd-fin { width: 100%; box-sizing: border-box; resize: none; field-sizing: content; min-height: 30px; max-height: 160px; }
.vd-frow.dirty .vd-fl::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--vd-mid); margin-right: 6px; vertical-align: middle; }
.vd-ro .vd-ro-v { padding: 7px 2px 5px; color: var(--vd-dim); word-break: break-word; }
.vd-sf .cd-shipfacts { margin: 0; }

/* ── доставка: картки служб ── */
.vd-svcs { display: flex; flex-direction: column; gap: 8px; }
.vd-svc { border: 1px dashed var(--vd-line2); border-radius: 10px; padding: 8px 10px; transition: border-color .12s ease; }
.vd-svc.active { border: 1px solid color-mix(in srgb, var(--vd-ok) 45%, transparent); background: color-mix(in srgb, var(--vd-ok) 4%, transparent); }
.vd-svc.dirty { box-shadow: inset 3px 0 0 var(--vd-mid); }
.vd-svc-h { display: flex; align-items: center; gap: 9px; }
.vd-svc:not(.active) .vd-svc-h { opacity: .62; }
.vd-svc:not(.active):hover .vd-svc-h { opacity: 1; }
.vd-logo { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; overflow: hidden; color: var(--vd-acc); }
.vd-logo img { width: 20px; height: 20px; object-fit: contain; }
.vd-svc-n { font-weight: 650; flex: 1 1 auto; min-width: 0; }
.vd-svc-tag { font-size: 11px; color: var(--vd-mid); }
.vd-svc-b { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
/* перемикач (як .ds-sw vendor_audit) */
.vd-sw { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; cursor: pointer; }
.vd-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.vd-sw-k { position: absolute; inset: 0; border-radius: 999px; background: var(--vd-line2); transition: background .15s ease; }
.vd-sw-k::before { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
    transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.vd-sw input:checked + .vd-sw-k { background: var(--vd-ok); }
.vd-sw input:checked + .vd-sw-k::before { transform: translateX(16px); }
.vd-sw input:disabled + .vd-sw-k { opacity: .55; cursor: default; }
.vd-sw.vd-sw-s { width: 30px; height: 16px; }
.vd-sw.vd-sw-s .vd-sw-k::before { width: 12px; height: 12px; }
.vd-sw.vd-sw-s input:checked + .vd-sw-k::before { transform: translateX(14px); }
/* оплати: «від / до / коментар» */
.vd-pays { display: flex; flex-direction: column; gap: 2px; }
.vd-pay { display: grid; grid-template-columns: 30px minmax(120px, 170px) auto minmax(0, 1fr); gap: 8px; align-items: center;
    padding: 2px 0; opacity: .55; }
.vd-pay.on { opacity: 1; }
.vd-pay-n { font-size: 12.5px; }
.vd-amt { display: inline-flex; align-items: center; gap: 4px; }
.vd-amt-l { color: var(--vd-dim); font-size: 11.5px; }
.vd-win .vd-amt-in { width: 62px; text-align: left; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.vd-amt-in::-webkit-outer-spin-button, .vd-amt-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vd-pay-cm { width: 100%; font-size: 12.5px; }
/* міста самовивозу й курʼєра */
.vd-city { padding: 6px 8px 8px; border-radius: 8px; background: var(--vd-in); }
.vd-city-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.vd-city-h > i { color: var(--vd-acc); font-size: 12px; }
.vd-city-n { font-weight: 600; white-space: nowrap; }
.vd-city-cm { flex: 1 1 auto; font-size: 12.5px; }
.vd-city-rm { border: 0; background: transparent; color: var(--vd-bad); cursor: pointer; width: 24px; height: 24px; border-radius: 6px; }
.vd-city-rm:hover { background: color-mix(in srgb, var(--vd-bad) 16%, transparent); }
.vd-city-add { position: relative; }
.vd-city-q { width: 100%; box-sizing: border-box; background: transparent; border: 1px dashed var(--vd-line2); border-radius: 8px;
    padding: 5px 9px; outline: none; }
.vd-city-q:focus { border-style: solid; border-color: var(--vd-ok); }
.vd-city-dd { position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 5; max-height: 230px; overflow: auto; border-radius: 9px;
    background: var(--tw-bg, var(--bg-thread, #1a2332)); border: 1px solid var(--vd-line2); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.vd-city-dd[hidden] { display: none; }
.vd-city-it { padding: 6px 10px; cursor: pointer; }
.vd-city-it:hover { background: var(--vd-in); }

/* ── аналітика з ТТН ── */
.vd-an { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.vd-an-col { min-width: 0; }
.vd-an-t { font-size: 11.5px; color: var(--vd-dim); margin-bottom: 4px; }
.vd-an-row { display: grid; grid-template-columns: minmax(0, 1fr) 54px 34px 32px; gap: 6px; align-items: center; font-size: 12px; padding: 1px 0; }
.vd-an-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-an-bar { height: 5px; border-radius: 3px; background: var(--vd-line); overflow: hidden; }
.vd-an-fill { display: block; height: 100%; border-radius: 3px; background: var(--vd-acc); }
.vd-an-n { text-align: right; font-variant-numeric: tabular-nums; }
.vd-an-p { text-align: right; color: var(--vd-dim); font-variant-numeric: tabular-nums; }

/* ── історія ── */
.vd-link { border: 0; background: transparent; color: var(--vd-acc); cursor: pointer; padding: 2px 0; display: inline-flex; gap: 6px; align-items: center; }
.vd-hist-list { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.vd-hist-row { font-size: 12px; color: var(--vd-dim); }

/* ── низ: незбережене й кнопки, прилипає до низу вікна ── */
.vd-foot { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 18px; border-top: 1px solid var(--vd-line);
    background: color-mix(in srgb, var(--tw-bg, var(--bg-thread, #0f172a)) 92%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.vd-foot:empty { display: none; }
.vd-foot-l { min-width: 0; font-size: 12.5px; }
.vd-unsaved { color: var(--vd-mid); font-weight: 600; }
.vd-foot-r { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vd-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 9px; cursor: pointer; font-weight: 600;
    border: 1px solid var(--vd-line2); background: transparent; }
.vd-btn:hover:not(:disabled) { background: var(--vd-in); }
.vd-btn.vd-primary { background: var(--vd-acc); border-color: var(--vd-acc); color: #fff; }
.vd-btn.vd-ok { background: var(--vd-ok); border-color: var(--vd-ok); color: #fff; }
.vd-btn.vd-primary:hover:not(:disabled), .vd-btn.vd-ok:hover:not(:disabled) { filter: brightness(1.08); background: var(--vd-ok); }
.vd-btn.vd-primary:hover:not(:disabled) { background: var(--vd-acc); }
.vd-btn:disabled { opacity: .5; cursor: default; }

@media (max-width: 920px) {
    .vd-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .vd-head, .vd-grid, .vd-foot { padding-left: 12px; padding-right: 12px; }
    .vd-c-row, .vd-c-row.vd-c-other, .vd-c-row.vd-c-ro { grid-template-columns: 26px minmax(0, 1fr) auto; }
    .vd-c-row .vd-c-cm { grid-column: 2 / -1; }
    .vd-c-row .vd-c-type { display: none; }
    .vd-c-row .vd-c-acts { grid-column: 1 / -1; justify-content: flex-start; opacity: 1; }
    .vd-addbar { grid-template-columns: 1fr 1fr; }
    .vd-frow { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .vd-pay { grid-template-columns: 30px minmax(0, 1fr); }
    .vd-pay .vd-amt, .vd-pay .vd-pay-cm { grid-column: 2 / -1; }
    .vd-an { grid-template-columns: minmax(0, 1fr); }
    .vd-foot { flex-direction: column; align-items: stretch; }
}

/* ── олівець і дата звірки у виринайці картки постачальника (обидва чати) ── */
/* спокійний, як решта кнопок картки: той самий розмір, без зеленого (Іван 25.10: «слишком заметная… зеленый не надо») */
.cd-vedit { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-width: 30px; padding: 0 10px; border-radius: 9px;
    cursor: pointer; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: transparent;
    color: var(--tw-dim, var(--text-dim, #8b9bb5)); font: inherit; font-size: 12.5px; font-weight: 600; flex: none; }
.cd-vedit i { font-size: 14px; }
.cd-vedit:hover { color: var(--tw-text, var(--text, #e8edf5)); background: color-mix(in srgb, currentColor 10%, transparent); }
html[data-vedit="icon"] .cd-vedit { padding: 0; width: 30px; justify-content: center; }
html[data-vedit="icon"] .cd-vedit .cd-vedit-l { display: none; }
.cd-checked { font-size: 10.5px; white-space: nowrap; opacity: .85; }
.cd-checked.ok { color: #10b981; }
.cd-checked.mid { color: #f59e0b; }
.cd-checked.old { color: #ef4444; }
/* «Постачальники»: у виринайці немає шапки — ряд зверху, олівець праворуч */
/* без власного рядка: дата й олівець стоять праворуч поряд із першим рядком інфо (Іван 25.10: «зачем пустое место сверху») */
/* «Постачальники»: угорі назва постачальника, праворуч у тому ж рядку дата звірки й олівець (Іван 25.10) */
.cd-top { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 0 2px 2px; }   /* без лінії під назвою (Іван 25.10) */
.cd-top .cd-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* назва постачальника вгорі виринайки — крупно, в обох чатах */
.contacts-pop .cd-top .cd-title, .contacts-pop .cd-head .cd-title { font-size: 16px; font-weight: 700; }
.cd-head .cd-checked { margin-left: auto; }
.cd-head .cd-vedit { margin-left: 8px; }

/* картка постачальника відкрита — поза нею слабке розмиття й затемнення, в ОБОХ чатах (Іван 25.10: «в клиентах нет?»).
   Шар — псевдоелемент батька картки: він у тому самому контексті накладання, що й картка (z-index 60), тож лягає одразу
   під неї. Кліки проходять крізь (закриття картки — як було) */
:has(> .contacts-pop.open)::after { content: ''; position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); pointer-events: none; }
/* «Клієнти»: колонки .app — контейнери (container-type), фіксований шар картки не виходить за свою колонку, тож сусідні
   колонки (список діалогів, панель агента) затемнюємо кожну своїм шаром */
.app:has(.contacts-pop.open) > :not(:has(.contacts-pop.open))::after { content: ''; position: absolute; inset: 0; z-index: 100;
    background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); pointer-events: none; }
/* Телефон і дотик (Іван 25.10, Android: «затемняет и само себя»): мобільний Chrome малює шар із backdrop-filter інколи
   ПОВЕРХ елементів з більшим z-index (картка опиняється під затемненням). Тут — той самий шар і той самий порядок, що й
   на комп'ютері, але без розмиття: лише затемнення */
@media (max-width: 720px), (hover: none) {
    :has(> .contacts-pop.open)::after, .app:has(.contacts-pop.open) > :not(:has(.contacts-pop.open))::after {
        -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .38); }
}
/* Телефон (одна колонка, до 720px): сусідніх колонок на екрані немає — шар «для колонок» не потрібен і шкодить. Іван
   25.10, Android, «Клієнти» (Денис Мурза, TORSSEN): цей шар (z 100 у списку діалогів) опинився ПОВЕРХ картки — його
   колонка там не стала окремим контекстом накладання, і він виліз нагору. Лишається шар батька картки, під нею */
@media (max-width: 720px) {
    .app:has(.contacts-pop.open) > :not(:has(.contacts-pop.open))::after { content: none; display: none; }
}