/* 미연시식 스탠딩 포트레이트 — AvatarConfig 닫힌 축 + 팔레트 토큰만 조합한다. */

.company-portrait {
  position: relative;
  display: block;
  inline-size: var(--portrait-inline, 108px);
  margin: 0;
  filter: drop-shadow(0 3px 0 var(--navy-alpha));
}

.company-portrait .portrait-canvas { display: block; inline-size: 100%; block-size: auto; }

.portrait-line { fill: none; stroke: var(--ink-900); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.portrait-ink { fill: var(--ink-900); stroke: none; }
.portrait-blush { fill: var(--local-accent-100); stroke: none; }
.portrait-accent { fill: var(--company-accent-600); stroke: var(--surface-000); stroke-width: 1.4; }
.portrait-paper { fill: var(--surface-000); stroke: var(--ink-900); stroke-width: 2.4; }
.portrait-detail-surface { fill: var(--surface-000); stroke: var(--ink-900); stroke-width: 2; stroke-linejoin: round; }
.portrait-detail-line { fill: none; stroke: var(--ink-900); stroke-width: 2; }

.portrait-skin { fill: var(--avatar-skin-light); stroke: var(--ink-900); stroke-width: 2.4; }
.company-portrait[data-skin-tone="warm"] .portrait-skin { fill: var(--avatar-skin-warm); }
.company-portrait[data-skin-tone="medium"] .portrait-skin { fill: var(--avatar-skin-medium); }
.company-portrait[data-skin-tone="deep"] .portrait-skin { fill: var(--avatar-skin-deep); }

.portrait-hair { fill: var(--avatar-hair-black); stroke: var(--ink-900); stroke-width: 2.4; stroke-linejoin: round; }
.company-portrait[data-hair-color="brown"] .portrait-hair { fill: var(--avatar-hair-brown); }
.company-portrait[data-hair-color="auburn"] .portrait-hair { fill: var(--avatar-hair-auburn); }
.company-portrait[data-hair-color="silver"] .portrait-hair { fill: var(--avatar-hair-silver); }

.portrait-outfit { fill: var(--avatar-outfit-navy); stroke: var(--ink-900); stroke-width: 2.4; stroke-linejoin: round; }
.company-portrait[data-outfit-color="teal"] .portrait-outfit { fill: var(--avatar-outfit-teal); }
.company-portrait[data-outfit-color="coral"] .portrait-outfit { fill: var(--avatar-outfit-coral); }
.company-portrait[data-outfit-color="sand"] .portrait-outfit { fill: var(--avatar-outfit-sand); }

.company-portrait[data-presence="away"] { opacity: .85; }
.company-portrait[data-presence="offline"] { filter: grayscale(1); opacity: .72; }

/* 사용자 제공 아트 에셋(사진형) 포트레이트 */
.portrait-photo {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
  border: var(--line-world) solid var(--ink-900);
  border-radius: var(--radius-md);
  background: var(--neutral-100);
}

.chat-profile .company-portrait[data-kind="photo"] { --portrait-inline: 112px; }

.portrait-mark {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  min-inline-size: 24px;
  block-size: 20px;
  padding-inline: var(--space-1);
  color: var(--surface-000);
  font-size: var(--type-12, 12px);
  font-weight: 800;
  border: 2px solid var(--surface-000);
}

.company-portrait[data-actor="ai"] .portrait-mark { background: var(--company-accent-600); border-radius: var(--radius-sm); }
.company-portrait[data-actor="human"] .portrait-mark { display: none; }

/* 대화 헤더 — 캐릭터가 크게 나와 말을 거는 배치 */
.chat-profile { display: flex; align-items: flex-end; gap: var(--space-4); }
.chat-profile .company-portrait { flex: none; --portrait-inline: 96px; }

/* 환영 패널의 소이 포트레이트 */
.welcome-panel .company-portrait { flex: none; --portrait-inline: 72px; }

@media (max-width: 640px) {
  .chat-profile .company-portrait { --portrait-inline: 72px; }
}