/* Шторки связи ☎ ✉ 💬 (public/js/screens/comm.js), как «Каналы коммуникации» в Битриксе (ios/11, ios2/30). Классы .cm-… */

.cm-who { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 16px; color: var(--text-3); margin: -6px 0 2px; }
.cm-who .l { flex: none; }
/* Имя — ссылка в контакт: цель касания 44 px по высоте, длинное имя — с многоточием */
.cm-who a { display: flex; align-items: center; min-width: 0; min-height: 44px; color: var(--text-2); }
.cm-who .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-list { margin: 0 -16px; }
.cm-row { display: flex; align-items: center; padding: 0 8px 0 16px; border-bottom: 0.5px solid var(--line); }
.cm-row:last-child { border-bottom: 0; }
.cm-row.hl { background: var(--accent-soft); border-bottom-color: transparent; }
.cm-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 6px 8px 6px 0; text-align: left; color: var(--text); font-size: 17px; transition: opacity 100ms; }
.cm-main:active { opacity: 0.6; }
.cm-main .grow { display: flex; flex-direction: column; }
.cm-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-s { font-size: 13px; color: var(--text-3); margin-top: 1px; }
.cm-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; color: var(--text-2); }
.cm-ic.dot { border-radius: 50%; color: var(--dl-on-accent, #fff); }
.cm-chev { color: var(--text-4); display: grid; flex: none; }
.cm-main .counter { flex: none; }
.cm-side { flex: none; color: var(--text-3); }
/* «Позвонить через CRM», пока телефония не подключена: серая, но нажимается — объясняет, кто её подключает */
.cm-row.off .cm-ic { color: var(--text-4); }
.cm-row.off .cm-t { color: var(--text-3); }

.cm-add { padding: 10px 16px 12px; border-bottom: 0.5px solid var(--line); }
.cm-add-row { display: flex; align-items: center; gap: 14px; }
.cm-input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 17px; outline: none; }
.cm-input:focus { border-color: var(--primary); }
.cm-add .err { margin: 6px 0 0 42px; }
.cm-add-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.cm-add-act .btn.sm { height: 44px; }

@media (hover: hover) and (pointer: fine) {
  .cm-main:hover { opacity: 0.75; }
}