/* p199: people picker for the "Custom" post privacy (<x-people-picker>) */
.zk-pp { --pp-line: rgba(255,255,255,.1); --pp-bg: rgba(255,255,255,.03); --pp-text: #f4f4f5; --pp-muted: #a1a1aa; --pp-hover: rgba(255,255,255,.07); border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-bg); padding: 12px; }
html.light .zk-pp { --pp-line: #e4e4e7; --pp-bg: #fafafa; --pp-text: #18181b; --pp-muted: #71717a; --pp-hover: rgba(0,0,0,.05); }
.zk-pp-head { display: flex; align-items: flex-start; gap: 10px; }
.zk-pp-head > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: #f43f5e; }
.zk-pp-title { font-size: 13px; font-weight: 700; color: var(--pp-text); }
.zk-pp-hint { font-size: 12px; color: var(--pp-muted); }
.zk-pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.zk-pp-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 3px; border-radius: 9999px; background: rgba(244,63,94,.12); color: var(--pp-text); font-size: 12.5px; font-weight: 600; }
.zk-pp-chip img, .zk-pp-chip .zk-pp-letter { width: 22px; height: 22px; }
.zk-pp-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 160px; }
.zk-pp-chip button { display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 9999px; font-size: 15px; line-height: 1; color: var(--pp-muted); }
.zk-pp-chip button:hover { color: #fff; background: #e11d48; }
.zk-pp-search { position: relative; margin-top: 10px; }
.zk-pp-search svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--pp-muted); pointer-events: none; }
.zk-pp-search input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--pp-line); border-radius: 12px; background: transparent; color: var(--pp-text); font-size: 13.5px; outline: none; }
.zk-pp-search input:focus { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124,92,255,.15); }
.zk-pp-results { max-height: 200px; margin-top: 6px; overflow-y: auto; }
.zk-pp-results button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; text-align: left; color: var(--pp-text); }
.zk-pp-results button.is-on, .zk-pp-results button:hover { background: var(--pp-hover); }
.zk-pp-results img, .zk-pp-results .zk-pp-letter { width: 30px; height: 30px; }
.zk-pp-results b { display: block; font-size: 13px; font-weight: 600; }
.zk-pp-results small { display: block; font-size: 11.5px; color: var(--pp-muted); }
.zk-pp img { flex-shrink: 0; border-radius: 9999px; object-fit: cover; }
.zk-pp-letter { display: flex; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: linear-gradient(135deg,#7c5cff,#22d3ee); color: #fff; font-size: 11px; font-weight: 700; }
.zk-pp-empty { margin-top: 8px; font-size: 12px; color: var(--pp-muted); }