/* The record picker (COMMAND-713, public/record-picker; built without a design: POC). The popup on the one shell
   (modal.js, size medium): the title and its cross on top, the search field and its matches in the body, Annuleren at
   the bottom. On a phone it sits at the bottom of the screen, from 900px in the middle (as a conversation's questions). */
.record-picker-back {
  position: fixed; inset: 0; z-index: 21;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.45);
}
@media (min-width: 900px) { .record-picker-back { align-items: center; } }
.record-picker { border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 8px 28px rgb(0 0 0 / 25%); }
.record-picker .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.record-picker h2 { margin: 0; font-size: 1.05rem; }
.record-picker-input { width: 100%; box-sizing: border-box; }
.record-picker-results { margin-top: 8px; }
.record-picker-list { list-style: none; margin: 0; padding: 0; }
.record-picker-option {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 4px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.record-picker-option:disabled { cursor: progress; opacity: 0.6; }
.record-picker-row.active .record-picker-option { background: var(--surface-2); }
@media (hover: hover) { .record-picker-option:hover { background: var(--surface-2); } }
.record-picker-icon { display: inline-flex; flex: none; color: var(--muted); }
.record-picker-icon svg { width: 16px; height: 16px; }
.record-picker-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-picker-key { color: var(--muted); font-weight: 600; }
.record-picker-kind { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-picker-none { margin: 0; padding: 10px; }
.record-picker .actions { display: flex; justify-content: flex-end; gap: 8px; }