/*
 * 프로필 이미지 (2026-09-14)
 *  - 아바타 공용: 첫 글자 아바타 컨테이너(채팅 목록·참여자 띠·초대/새 대화 카드·헤더)에 이미지가 있으면
 *    .has-avatar + <img class="ord-avatar-img"> 로 그린다. 컨테이너의 크기·원형은 각 화면 CSS 가 그대로 결정.
 *  - 내 계정 > 프로필설정 프로필 이미지 블록(.pfi-*) — A-4 톤(차콜).
 */
.ord-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.has-avatar { padding: 0 !important; overflow: hidden; color: transparent !important; }
.has-avatar > .ord-avatar-img { position: absolute; inset: 0; }
.has-avatar { position: relative; }
.has-avatar .general-chat-new-online-dot { z-index: 1; }

/* 헤더 계정 pill 아바타 — 아이콘(20px)과 같은 자리 */
.shd-me-avatar { width: 22px; height: 22px; flex-shrink: 0; }
/* hidden 토글은 다른 svg/img display 규칙보다 이겨야 한다(헤더 아이콘 중복 노출 실사고, 9/14) */
.shd-me-avatar[hidden], [data-user-avatar-fallback][hidden] { display: none !important; }

/* 내 계정 모달 블록 */
.pfi { display: flex; gap: 16px; align-items: flex-start; padding: 14px 16px; margin-bottom: 20px; background: var(--ord-surface-2); border: 1px solid var(--ord-line); border-radius: 12px; }
.pfi-avatar { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; background: var(--ord-line); color: var(--ord-accent); font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ord-panel); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.pfi-main { flex: 1; min-width: 0; }
.pfi-title { font-size: 13px; font-weight: 700; color: var(--ord-text); margin-bottom: 8px; }
.pfi-hint { margin: 0 0 10px; font-size: 11.5px; color: var(--ord-text-3); line-height: 1.6; }
.pfi-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pfi-btn { padding: 6px 14px; border: 1px solid var(--ord-line-2); border-radius: 20px; background: var(--ord-panel); color: var(--ord-accent); font-size: 12px; font-weight: 700; cursor: pointer; }
.pfi-btn:hover { background: var(--ord-band); }
.pfi-btn-primary { background: var(--ord-head-bg); border-color: var(--ord-head-bg); color: var(--ord-on-solid); box-shadow: 0 1px 2px rgba(62,97,135,.25); }
.pfi-btn-primary:hover { background: var(--ord-accent-strong); }
.pfi-btn[disabled] { opacity: .55; cursor: default; }
.pfi-status { font-size: 11.5px; color: var(--ord-text-3); }
.pfi-status.is-error { color: var(--ord-tint-red-fg); }
@media (max-width: 480px) { .pfi { flex-direction: column; align-items: center; text-align: center; } .pfi-actions { justify-content: center; } }