:root{
  --bg:#f3f5f8; --ink:#0b1020; --muted:#6b7280; --line:#e6e8ee; --card:#fff;
  --accent:#6c5ce7;            /* 사용자 말풍선 보라 톤 */
  --radius:18px; --safe:env(safe-area-inset-bottom);
  --vh:1vh; /* JS가 갱신 */
}

*{box-sizing:border-box}
.gpt-phone{
  background:linear-gradient(180deg,#f7f9fc 0%,#eef2f7 100%);
  padding:clamp(10px,3vw,24px);
  display:flex; justify-content:center;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans KR',sans-serif;
}
.gpt-screen{
  width:100%; max-width:460px; min-height:calc(var(--vh)*100 - 20px);
  background:var(--card); border:1px solid var(--line); border-radius:28px;
  box-shadow:0 16px 40px rgba(13,22,36,.08);
  display:flex; flex-direction:column; overflow:hidden;
}

/* 메시지 영역 */
.gpt-messages{
  flex:1; overflow:auto; background:#fafbfd;
  padding:16px 14px 8px 14px; display:flex; flex-direction:column; gap:8px;
}

/* 날짜 칩 */
.gpt-datechip{
  align-self:center; margin:6px 0 10px; padding:4px 10px; 
  background:#edf1f6; color:#475569; font-size:12px; border-radius:999px; border:1px solid var(--line);
}

/* 말풍선 공통 */
.msg{ display:flex; gap:8px; align-items:flex-end; }
.msg .avatar{
  width:28px; height:28px; border-radius:50%; background:#e9ecf3; color:#334155; 
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12px; flex:0 0 28px;
}
.bubble{
  max-width:82%; padding:10px 12px; border-radius:16px; border:1px solid var(--line);
  background:#fff; color:var(--ink); line-height:1.6; font-size:15px; white-space:pre-wrap; word-break:break-word;
  box-shadow:0 3px 10px rgba(0,0,0,.03);
}
.meta{ font-size:11px; color:#9aa3af; margin-top:2px; }

/* 봇: 좌측 하얀 말풍선 */
.msg.bot{ align-self:flex-start; }
.msg.bot .bubble{ border-top-left-radius:8px; }

/* 사용자: 우측 보라 말풍선 */
.msg.user{ align-self:flex-end; justify-content:flex-end; }
.msg.user .bubble{
  background:var(--accent); color:#fff; border-color:transparent;
  border-top-right-radius:8px;
}
.msg.user .avatar{ order:2; visibility:hidden; width:0; height:0; border:none; padding:0; }

/* 로딩 스피너 */
.spinner{ width:18px; height:18px; border:2px solid #cbd5e1; border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* 입력부(앱 하단 바) */
.gpt-composer{
  position:sticky; bottom:0; background:var(--card); border-top:1px solid var(--line);
  display:flex; gap:8px; align-items:flex-end; padding:10px 12px calc(10px + var(--safe));
}
.gpt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:12px; cursor:pointer; }
.gpt-btn .ico{ width:18px; height:18px }
.gpt-btn-img{ padding:10px 12px; border:1px dashed #cbd5e1; color:#334155; }
.gpt-inputwrap{
  flex:1; display:flex; background:#f6f7fb; border:1px solid var(--line); border-radius:14px; padding:6px 10px;
}
.gpt-inputwrap textarea{
  flex:1; resize:none; border:none; outline:none; background:transparent; min-height:24px; max-height:140px; font-size:15px; padding:6px 0;
}
.gpt-actions{ display:flex; gap:6px; align-items:center }
.gpt-btn.ghost{ background:transparent; color:#64748b; padding:8px 10px; border:none }
.gpt-btn.primary{ background:var(--accent); color:#fff; padding:10px 12px; border:none }

.gpt-thumb{ padding:0 14px 12px 14px }
.gpt-thumb img{ max-width:120px; border-radius:10px; border:1px solid var(--line) }

/* 모바일 폰트/여백 미세 조정 */
@media (max-width:420px){
  .bubble{ font-size:14.5px; max-width:88%; }
}