.client-avatar { position: relative; display: inline-grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--brand-soft); color: var(--brand-dark); vertical-align: middle; }
button.client-avatar { cursor: zoom-in; }
button.client-avatar:hover { border-color: var(--brand); }
button.client-avatar:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.client-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.client-avatar-initials { font-size: 12px; font-weight: 750; line-height: 1; }
.client-avatar.photo-unavailable { cursor: default; opacity: 1; }
.client-avatar-large { flex-basis: 52px; width: 52px; height: 52px; }
.client-avatar-large .client-avatar-initials { font-size: 16px; }
.client-name-with-avatar, .action-item-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-app .action-item-main { flex-direction: row; }
.client-mobile-card-heading > .client-name-with-avatar { display: flex; gap: 12px; }
.client-name-with-avatar > div { min-width: 0; }
.client-name-with-avatar .client-name-button { text-align: left; }
.client-mobile-card-heading .client-name-with-avatar > .client-avatar { display: inline-grid; }
.client-photo-viewer { padding: 20px; width: min(94vw, 850px); max-width: 100vw; max-height: 94dvh; border: 0; background: transparent; color: var(--text); }
.client-photo-viewer::backdrop { background: rgba(0,0,0,.78); }
.client-photo-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 20px 80px rgba(0,0,0,.35); }
.client-photo-panel header, .client-photo-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.client-photo-panel h2 { margin: 0; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.client-photo-panel header { border-bottom: 1px solid var(--line); }
.client-photo-panel footer { border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.client-photo-canvas { display: grid; place-items: center; overflow: auto; max-height: 65dvh; min-height: 180px; padding: 16px; background: var(--surface-muted); }
.client-photo-canvas img { display: block; width: auto; max-width: 100%; height: auto; max-height: 60dvh; object-fit: contain; }
.client-photo-canvas [hidden] { display: none; }
.is-zoomed .client-photo-canvas { display: block; }
.is-zoomed .client-photo-canvas img { width: 200%; max-width: none; max-height: none; }
@media (pointer: coarse) { .client-avatar { min-width: 44px; min-height: 44px; } }
@media (max-width: 575.98px) { .client-photo-viewer { padding: 8px; width: 100vw; } .client-photo-panel header, .client-photo-panel footer { padding: 14px; } }