.group-picker { position: relative; }
.group-picker-trigger {
    width: 100%;
    padding: 12px 36px 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow-wrap: anywhere;
}
.group-picker-trigger::after { content: '▾'; position: absolute; right: 14px; top: 12px; }
.group-picker-trigger[aria-expanded="true"]::after { content: '▴'; }
.group-picker-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.group-picker [hidden] { display: none !important; }
.group-picker-choices { max-height: 240px; overflow-y: auto; margin-top: 8px; }
.group-picker-row { cursor: pointer; border-radius: 6px; }
.group-picker-choices label {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 8px;
    margin: 0;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.group-picker-row:hover,
.group-picker-row:has(input:checked) { background: var(--surface-soft); }
.group-picker-choices input { flex-shrink: 0; }
.group-picker-trigger:focus-visible,
.group-picker-panel input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }