/* ============================================================ */
/* AI 채팅 로그 스타일                                           */
/* 파일명 : css/chat.css                                         */
/* 역할   : #mainContent 맨 아래에 쌓이는 대화창                 */
/*         내용이 늘어날수록 기존 home 콘텐츠가 위로 밀려 보임    */
/* ============================================================ */
 
.chat-log{
    display:flex;
    flex-direction:column;

    padding:var(--spacing-layout-y-20) var(--spacing-layout-x-20);
}
 
.chat-msg{
    max-width:65%;
    min-width:calc(var(--spacing-gap-40) * 2 + var(--spacing-gap-20));
    padding:var(--spacing-component-y-12) var(--spacing-component-x-16);
    border-radius:var(--radius-medium);
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-relaxed);
    white-space:pre-wrap;
}
 
.chat-msg.user{
    align-self:flex-end;
    background:var(--color-container-brand-primary);
    color:var(--color-text-base-on-color);
    border-bottom-right-radius:var(--radius-small);
}
 
.chat-msg.ai.is-typing{
    color:var(--color-text-base-secondary);
}
 
/* ---- AI 메시지 묶음 (캐릭터 이미지 + 이름 + 말풍선) ---- */
.chat-ai-row{
    align-self:flex-start;
    display:flex;
    align-items:flex-start;

    max-width:75%;
}
 
/* 캐릭터 이미지 + 이름 */
.chat-ai-profile{
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    align-items:center;

    width:calc(var(--spacing-gap-40) + var(--spacing-gap-16));
}
.chat-ai-avatar{
    width:calc(var(--spacing-gap-40) + var(--spacing-gap-16));
    height:calc(var(--spacing-gap-40) + var(--spacing-gap-16));
    border-radius:var(--radius-full);
    object-fit:cover;
    background:var(--color-container-base-low);
}
.chat-ai-name{
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-base-primary);
}
 
/* 말풍선 + 시간 */
.chat-ai-bubble-wrap{
    display:flex;
    flex-direction:column;

}
.chat-msg.ai{
    background:var(--color-container-base-low);
    color:var(--color-text-base-primary);
    border-bottom-left-radius:var(--radius-small);
}
.chat-ai-time{
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-body);
    color:var(--color-text-base-secondary);
    padding-left:var(--spacing-component-x-4);
}

/* Chrome 83에서도 적용되는 flex 간격 */
.chat-log > * + *{margin-top:var(--spacing-gap-16);
}
.chat-ai-row > * + *{margin-left:var(--spacing-gap-10);
}
.chat-ai-profile > * + *,
.chat-ai-bubble-wrap > * + *{margin-top:var(--spacing-gap-4);
}