/* Item N: avatar editor popup -- self-contained (not relying on
   composer.css's .link-insert-* base, which isn't loaded on /author/{username}
   or /admin/settings). */
.avatar-picker-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .4);
    display: flex; align-items: center; justify-content: center; z-index: 90;
}
.avatar-picker-panel {
    background: var(--color-surface-elevated);
    border-radius: var(--radius-lg);
    padding: 20px;
    width: min(360px, 92vw);
}
.avatar-picker-panel h3 { margin: 0 0 14px; font-size: 16px; }
.avatar-picker-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.avatar-picker-tab {
    flex: 1; padding: 8px 6px; border-radius: var(--radius-sm);
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text-secondary); font-size: 12px; cursor: pointer;
}
.avatar-picker-tab.active { background: var(--color-accent); color: var(--color-accent-foreground); border-color: transparent; font-weight: 600; }
.avatar-picker-pane input[type="url"], .avatar-picker-pane input[type="text"] {
    width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit;
}
.avatar-picker-status { font-size: 12px; color: var(--color-text-secondary); min-height: 16px; margin-top: 10px; }
.avatar-picker-backdrop .link-insert-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }

/* Base avatar circle -- duplicated from public.css's own copy (not just a
   reference to it) because /admin/profile loads this stylesheet but not
   public.css, and an <img>/emoji-less placeholder with no size/border here
   rendered as an invisible 0x0 box. */
.author-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--color-surface-muted); object-fit: cover; border: 1px solid var(--color-border); }

/* Edit affordance overlaid on the avatar itself (self-view only). */
.author-avatar-wrap { position: relative; display: inline-block; }
.author-avatar-edit-btn {
    position: absolute; bottom: 0; right: 0;
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--color-background); background: var(--color-surface-elevated);
    color: var(--color-text-secondary); font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.author-avatar-edit-btn:hover { color: var(--color-text); }
/* Item: an emoji avatar fills the same circle an uploaded image would --
   proportional font-size (roughly the box's diameter) + a border so it
   reads as a framed avatar, not a loose character floating in a box. */
.author-avatar-emoji {
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; line-height: 1; border-radius: 50%;
    background: var(--color-surface-muted); border: 1px solid var(--color-border);
}