/* Contact groups and contact photos (contact-groups.js). */

.avatar.photo { background: var(--surface-2); overflow: hidden; padding: 0; }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The contact dialog's photo: click to change. */
.photo-edit { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.photo-btn { position: relative; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; }
.photo-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.photo-cam { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; }
.photo-cam svg { width: 16px; height: 16px; fill: var(--text-2); }
.photo-btn:hover .photo-cam svg { fill: var(--accent-ink); }
.photo-edit .link-btn { font-size: 12px; }

/* Cropping a new photo. */
.crop-dlg { width: 340px; }
.crop-frame { display: flex; justify-content: center; margin: 8px 0; }
.crop-canvas { width: 280px; height: 280px; border-radius: 50%; cursor: grab; touch-action: none; box-shadow: 0 0 0 1px var(--line); }
.crop-canvas:active { cursor: grabbing; }
.crop-zoom { display: flex; align-items: center; gap: 8px; }
.crop-zoom svg { width: 18px; height: 18px; fill: var(--text-2); flex: none; }
.crop-zoom input { flex: 1; }

/* Groups in the contact dialog. */
.group-field { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gchip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); border-radius: 16px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.gchip:hover:not(:disabled) { background: var(--hover); }
.gchip.on { background: var(--selected); border-color: transparent; color: var(--accent-ink); font-weight: 500; padding-left: 8px; }
.gchip svg { width: 16px; height: 16px; fill: currentColor; }
.gchip:disabled { cursor: default; }
.group-field input { flex: 1; min-width: 120px; }

/* Groups in the contacts list. */
.crow .cname .group-chip { margin-left: 6px; }

/* Adding and removing a group's members. */
.members-dlg { width: 440px; }
.member-list { max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.member { display: flex; align-items: center; gap: 10px; padding: 6px 10px; cursor: pointer; }
.member:hover { background: var(--hover); }
.member .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-list .empty { padding: 16px; }