/* People picker (js/components/user-picker.js): group invites and
 * "Add people" in group chats. */

.up-picker { display: flex; flex-direction: column; gap: .6rem; min-width: min(420px, 100%); }
.up-search {
    display: flex; align-items: center; gap: .5rem;
    padding: 0 .75rem; height: 40px; border-radius: 12px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .35));
    background: var(--bg-primary); color: var(--text-secondary);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.up-search:focus-within { border-color: var(--color-primary, #a855f7); box-shadow: 0 0 0 3px rgba(168, 85, 247, .18); }
.up-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; }
.up-hint { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--text-secondary); display: flex; gap: .4rem; align-items: center; }

.up-list {
    list-style: none; margin: 0; padding: .25rem; max-height: min(52vh, 380px); overflow-y: auto;
    border-radius: 12px; border: 1px solid var(--border-color, rgba(148, 163, 184, .25));
    background: var(--bg-secondary, transparent);
    transition: opacity .15s ease;
}
.up-list.is-loading { opacity: .55; }
.up-empty { padding: 1.25rem .75rem; text-align: center; color: var(--text-secondary); font-size: .88rem; }

.up-row { border-radius: 10px; animation: up-in .22s ease-out both; }
.up-row + .up-row { margin-top: 2px; }
.up-label { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .45rem .55rem; cursor: pointer; border-radius: inherit; transition: background-color .15s ease; }
.up-row:hover .up-label { background: rgba(168, 85, 247, .07); }
.up-row.is-picked .up-label { background: rgba(168, 85, 247, .13); }
.up-row.is-member .up-label { cursor: default; opacity: .7; }
.up-check {
    appearance: none; -webkit-appearance: none; margin: 0; flex: none;
    width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
    border: 2px solid var(--border-color, rgba(148, 163, 184, .6)); background: var(--bg-primary, #fff);
    cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.up-check::after { content: ''; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); margin-top: -2px; transition: transform .15s cubic-bezier(.2, .8, .2, 1); }
.up-check:checked { background: var(--color-primary, #a855f7); border-color: var(--color-primary, #a855f7); }
.up-check:checked::after { transform: rotate(45deg) scale(1); }
.up-check:active { transform: scale(.9); }
.up-check:focus-visible { outline: 2px solid var(--color-primary, #a855f7); outline-offset: 2px; }
.up-check:disabled { opacity: .45; cursor: default; }
.up-avatar { position: relative; width: 36px; height: 36px; flex: none; }
.up-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--bg-tertiary, #ddd); display: block; }
.up-avatar .presence-dot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; margin: 0; border: 2px solid var(--bg-secondary, var(--card-bg, #fff)); box-sizing: content-box; }
.up-names { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.up-names b { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.up-names small { font-size: .76rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-state { font-size: .74rem; color: var(--text-secondary); white-space: nowrap; display: inline-flex; gap: .3rem; align-items: center; }
.up-row.is-done .up-state { color: #10b981; font-weight: 600; }
.up-error { color: #ef4444; white-space: normal; max-width: 12rem; text-align: right; }
.up-count { font-size: .78rem; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }

/* A picked / added row: a short ring in the accent colour. */
.up-row.lu-rel-pulse { animation: up-pick .7s ease-out; }
.up-row.is-done.lu-rel-pulse { --ring: 16, 185, 129; }
@keyframes up-pick {
    0% { box-shadow: 0 0 0 0 rgba(var(--ring, 168, 85, 247), .45); }
    100% { box-shadow: 0 0 0 8px rgba(var(--ring, 168, 85, 247), 0); }
}
@keyframes up-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Group chat header: member count and the Add people button. */
.messenger-chat-members { display: inline-flex; align-items: center; gap: .35rem; border-radius: 6px; }

/* Group privacy: a badge, or for admins a badge that opens a menu. */
.group-privacy-wrap { position: relative; display: inline-flex; }
.group-privacy-badge { display: inline-flex; align-items: center; gap: .35rem; }
.group-privacy-badge[data-privacy="public"] i:first-child { color: #10b981; }
.group-privacy-badge[data-privacy="private"] i:first-child { color: #f59e0b; }
.group-privacy-badge[data-privacy="friends"] i:first-child { color: #3b82f6; }
button.group-privacy-badge.is-editable {
    border: 1px solid var(--border-color, rgba(148, 163, 184, .35)); color: inherit; font: inherit; font-size: .75rem;
    cursor: pointer; border-radius: 999px; padding: .2rem .6rem;
    transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}
button.group-privacy-badge.is-editable:hover { border-color: rgba(168, 85, 247, .55); }
button.group-privacy-badge.is-editable:active { transform: scale(.96); }
.group-privacy-badge.lu-rel-pulse { animation: lu-rel-pulse .9s ease-out; }
.group-privacy-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 260px;
    list-style: none; margin: 0; padding: .3rem; border-radius: 12px;
    background: var(--card-bg, var(--bg-secondary, #fff)); color: var(--text-primary);
    border: 1px solid var(--border-color, rgba(148, 163, 184, .3));
    box-shadow: 0 14px 34px rgba(15, 23, 42, .22);
    transform-origin: top left; animation: gp-menu-in .16s ease-out;
}
.group-privacy-menu[hidden] { display: none; }
.group-privacy-menu li { display: grid; grid-template-columns: 1.4em 1fr; gap: .55rem; align-items: start; padding: .5rem .6rem; border-radius: 9px; cursor: pointer; transition: background-color .12s ease; }
.group-privacy-menu li:hover { background: rgba(168, 85, 247, .09); }
.group-privacy-menu li.is-current { background: rgba(168, 85, 247, .15); }
.group-privacy-menu li i { margin-top: .2rem; text-align: center; }
.group-privacy-menu li[data-value="public"] i { color: #10b981; }
.group-privacy-menu li[data-value="private"] i { color: #f59e0b; }
.group-privacy-menu li[data-value="friends"] i { color: #3b82f6; }
.group-privacy-menu b { display: block; font-size: .85rem; }
.group-privacy-menu small { display: block; font-size: .74rem; color: var(--text-secondary); line-height: 1.35; }
@keyframes gp-menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.group-card-privacy { font-size: .75rem; opacity: .75; }
.group-card-privacy[data-privacy="public"] { color: #10b981; }
.group-card-privacy[data-privacy="private"] { color: #f59e0b; }
.group-card-privacy[data-privacy="friends"] { color: #3b82f6; }

/* Post privacy indicator: the 'following' audience. */
.cr-privacy[data-privacy="following"] i { color: #8b5cf6; }

@media (prefers-reduced-motion: reduce) {
    .up-row, .up-row.lu-rel-pulse, .group-privacy-menu, .group-privacy-badge.lu-rel-pulse { animation: none; }
}