/* One visible avatar surface for the chat header, sidebar, and profile. */
body :is(.tg-avatar-wrap, .ai-profile-hero__avatar).ai-chat-avatar,
body[data-chat-kind="ai"] .chat-header-avatar .chat-header-avatar-letter.ai-chat-avatar {
    box-sizing: border-box;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--brand);
    overflow: hidden;
}

/* Keep the 44px header hit target around the same 40px icon as the sidebar. */
body[data-chat-kind="ai"] .chat-header-avatar:has(> .chat-header-avatar-letter.ai-chat-avatar) {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body[data-chat-kind="ai"] .chat-header-avatar > .chat-header-avatar-letter.ai-chat-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}

.ai-chat-avatar__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    font-family: var(--font);
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.ai-chat-avatar__glyph > .ui-icon {
    width: 100%;
    height: 100%;
}