/* emp-picker.css — стили ОБЩЕГО пикера (emp-picker.js, классы .empp-*).
 *
 * ⚠️ СВОЙ ФАЙЛ И БЕЗ СКОУПА — ЭТО ПОЧИНКА ПРИЧИНЫ, А НЕ ТРЕТЬЕГО СЛУЧАЯ. Правила жили в zay-panel.css,
 *    заскоупленные под #tab-requests и #zayTplRoot: каждый селектор шёл парой, потому что пикер монтируется
 *    в двух разных поддеревьях. Появился третий потребитель — справочник клиентов, — и пикер там оказался
 *    БЕЗ стилей: выпадашка теряла position:absolute, рамку и тень, .empp-item оставался inline-block, отчего
 *    имя и подпись слипались в одну строку («Тест ТестООО «Ромашка»»), а поле в карточке компании съезжало
 *    до 147px. Замерено рендером до правки, не на глаз.
 *    Дописать третий скоуп значило бы поставить ту же ловушку четвёртому потребителю: стили компонента
 *    обязан приносить компонент, а не каждая панель — помнить о нём в своём файле. Скоуп у панелей нужен,
 *    чтобы их правила не растекались; у компонента с собственной приставкой классов (.empp-*) растекаться
 *    нечему.
 *
 * ⚠️ ПАНЕЛЬ МОЖЕТ ПЕРЕБИТЬ КОМПОНЕНТ, и одного выноса мало. Правило вида «#tab-clients .crm-fld input»
 *    (1,1,1) сильнее «.empp-input» (0,1,0) и подменило бы поле пикера. Лечится на стороне ПАНЕЛИ — сужением
 *    до прямого потомка (.crm-fld > input): панель одевает СВОЙ контрол, а не всё, что попало внутрь.
 *    Значения ниже совпадают с полями обеих панелей (padding 9px 11px, радиус 10, 14px), поэтому пикер
 *    встаёт в один ряд с соседними полями и в заявках, и в конструкторе, и у клиентов.
 *
 * ⚠️ ЧИПЫ ЗЕРКАЛИТ ЧАТ (chat-panel.css: участники диалога) — там про это написано отдельно. Теперь у него
 *    есть возможность не зеркалить, а подключить этот файл; менять чат заодно не стали — это его решение.
 */

.empp { margin-top: 2px; }
.empp-field { position: relative; }
.empp-input { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-family: inherit; background: #fff; color: var(--text); }
.empp-drop { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(15,23,42,.16); }
.empp-drop.is-open { display: block; }
.empp-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; cursor: pointer; font-family: inherit; }
.empp-item + .empp-item { border-top: 1px solid #f0f2f7; }
.empp-item:hover { background: #f3f4f6; }
.empp-name { font-size: 14px; color: var(--text); }
.empp-sub { font-size: 12px; color: var(--muted); }
.empp-empty { padding: 10px 12px; font-size: 13px; color: var(--muted); }
.empp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.empp-chip { display: inline-flex; align-items: center; gap: 6px; background: #eef2ff; color: #3730a3; border-radius: 20px; padding: 3px 10px; font-size: 13px; }
.empp-chip-x { width: auto; border: 0; background: none; color: #6366f1; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }