* { box-sizing: border-box; margin: 0; }
:root {
  --bg: #12121a; --panel: #1c1c28; --panel2: #262636;
  --text: #e8e6f0; --dim: #9a96ad; --accent: #b48cf2; --accent-dim: #7e5fc0;
  --me: #3a2f5c; --radius: 14px;
}
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.5 -apple-system, "Apple SD Gothic Neo", "Pretendard", sans-serif;
}
.view { display: flex; flex-direction: column; height: 100dvh; max-width: 760px; margin: 0 auto; }
[hidden] { display: none !important; }

.bar {
  display: flex; align-items: center; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
}
.bar h1 { font-size: 20px; color: var(--accent); flex: 1; }
.bar h2 { font-size: 17px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-size: 11px; color: var(--dim); border: 1px solid var(--panel2); padding: 2px 8px; border-radius: 99px; }

button, .file-btn {
  font: inherit; border: 0; border-radius: 10px; padding: 8px 16px;
  cursor: pointer; color: var(--text); background: var(--panel2);
}
button.primary { background: var(--accent-dim); }
button.primary:disabled { opacity: .5; }
button.ghost, .file-btn.ghost { background: transparent; border: 1px solid var(--panel2); }
button.small { padding: 8px 10px; }

.list { flex: 1; overflow-y: auto; padding: 8px 16px; display: flex; flex-direction: column; gap: 10px; }
.card {
  background: var(--panel); border-radius: var(--radius); padding: 14px 16px;
  cursor: pointer; display: flex; align-items: center; gap: 12px;
}
.card:active { background: var(--panel2); }

/* 데스크톱 포인터 — 터치 기기에는 호버 잔상이 남지 않게 hover:hover로 한정 */
@media (hover: hover) {
  .card:hover { background: var(--panel2); }
  button:hover, .file-btn:hover { filter: brightness(1.15); }
  button.primary:disabled:hover { filter: none; }
  .tab:not(.active):hover { color: var(--text); }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-dim); }
* { scrollbar-width: thin; scrollbar-color: var(--panel2) transparent; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--panel2); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
.card .avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  /* 플랫 원 — 목록은 조용한 틴트+이니셜로 UI에 녹는다 (유저 피드백).
     구체(입체)는 통화 화면의 시각 언어로만 남긴다. 색은 오라(--aura-*). */
  background: color-mix(in srgb, var(--aura-core, var(--accent)) 16%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; color: var(--aura-text, var(--accent));
}
.card .meta { flex: 1; min-width: 0; }
.card .meta .name { font-weight: 600; }
.card .meta .rel { font-size: 13px; color: var(--dim); }
.empty { color: var(--dim); text-align: center; padding: 48px 0; }
.list-actions { display: flex; gap: 10px; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); }
.list-actions .primary { flex: 1; }
.file-btn { display: flex; align-items: center; }

.tabs { display: flex; gap: 6px; padding: 0 16px 10px; }
.tab { flex: 1; background: var(--panel); color: var(--dim); }
.tab.active { background: var(--accent-dim); color: var(--text); }

.pane { flex: 1; overflow-y: auto; padding: 4px 16px max(16px, env(safe-area-inset-bottom)); }
.pane label { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--dim); }
.pane h3 { margin-top: 20px; font-size: 15px; color: var(--accent); }
.pane input[type=text], .pane input:not([type]), .pane select, .pane textarea {
  width: 100%; margin-top: 4px; padding: 10px 12px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--panel2); border-radius: 10px; font: inherit;
}
.pane textarea { resize: vertical; }
.pane input[type=range] { width: 100%; accent-color: var(--accent); }
.row { display: flex; gap: 10px; }
.row label { flex: 1; }
.hint { font-size: 12px; color: var(--dim); }
.trait { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.trait span { width: 64px; font-size: 13px; color: var(--dim); }
.trait input { flex: 1; accent-color: var(--accent); }
.trait b { width: 24px; text-align: right; font-size: 13px; }

.chat-pane { display: flex; flex-direction: column; padding: 0; }
.chat-log { flex: 1; overflow-y: auto; padding: 8px 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 82%; padding: 9px 13px; border-radius: var(--radius); white-space: pre-wrap; word-break: break-word; }
.msg.user { align-self: flex-end; background: var(--me); border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--panel); border-bottom-left-radius: 4px; }
.msg.error { align-self: center; background: #4a2030; font-size: 13px; }
.msg.typing { color: var(--dim); }

.chat-input {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--panel2);
}

/* ---------- 음성 통화 오버레이 ---------- */
.call-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(ellipse at 50% 35%, #1c1630 0%, var(--bg) 70%);
  display: flex; flex-direction: column; align-items: center;
  padding: max(20px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
}
.call-top { text-align: center; margin-top: 8vh; }
.call-top span { display: block; }
#call-name { font-size: 22px; font-weight: 700; }
#call-orb {
  /* 유대감 0~1 (서버 ready.bond) — 관계가 깊어질수록 빛이 따뜻하고 풍성해진다.
     나비의 '변태' 서사를 오브의 시간 변화로 이식한 것. */
  --bond: 0;
  width: 140px; height: 140px; margin: 8vh 0 4vh;
  display: flex; align-items: center; justify-content: center;
}
.orb-core {
  /* 구 형태는 유지, 뒤 발광은 제거 (유저 피드백). 오라(컴패니언 고유 hue)가
     기본색, 유대감(--bond)이 온기를 더한다 — 어떤 오라든 관계가 깊어지면
     같은 따뜻함 쪽으로 기운다. */
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%,
    color-mix(in oklab, var(--aura-core, #cbb0ff), #ffdcec calc(var(--bond) * 55%)),
    color-mix(in oklab, var(--aura-deep, var(--accent-dim)), #b25a8f calc(var(--bond) * 50%)) 70%);
  transition: transform .3s;
}
#call-orb[data-state="listening"] .orb-core { animation: orb-pulse 1.2s ease-in-out infinite; }
#call-orb[data-state="thinking"]  .orb-core { animation: orb-think 1.6s linear infinite; opacity: .8; }
#call-orb[data-state="speaking"]  .orb-core { animation: orb-speak .55s ease-in-out infinite; }
@keyframes orb-pulse { 50% { transform: scale(1.15); } }
@keyframes orb-think { 50% { transform: scale(.92); } }
@keyframes orb-speak { 50% { transform: scale(1.08); } }
/* 긴 답변도 앞부분을 잃지 않게 스크롤 — 새 텍스트는 JS가 아래로 따라간다 */
.call-captions { flex: 1; width: 100%; max-width: 480px; text-align: center; overflow-y: auto; }
.cap-user { color: var(--dim); font-size: 14px; min-height: 20px; }
.cap-char { font-size: 16px; margin-top: 10px; white-space: pre-wrap; }
.call-end {
  background: #4a2030; padding: 12px 32px; border-radius: 99px; font-size: 15px;
}
.chat-input textarea {
  flex: 1; padding: 10px 12px; background: var(--panel); color: var(--text);
  border: 1px solid var(--panel2); border-radius: 12px; font: inherit;
  resize: none; max-height: 120px;
}

/* 기억 열람·정정 */
.memory-card { align-items: flex-start; }
.memory-content { white-space: pre-wrap; word-break: break-word; }
.memory-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ---------- 데스크톱 투페인 (≥1024px) ----------
   다른 뷰가 열려 있으면 컴패니언 목록이 왼쪽 사이드바로 상주하고
   (showView가 hidden을 유지해준다), 메인 뷰가 오른쪽을 채운다. */
@media (min-width: 1024px) {
  body { display: flex; justify-content: center; }
  .view { height: 100vh; }
  body:has(#view-builder:not([hidden]), #view-chat:not([hidden]), #view-memories:not([hidden]))
    #view-list {
    width: 340px; flex-shrink: 0; margin: 0;
    border-right: 1px solid var(--panel2);
  }
  body:has(#view-builder:not([hidden]), #view-chat:not([hidden]), #view-memories:not([hidden]))
    #view-list .list-actions .primary { flex: none; }
  #view-builder, #view-chat, #view-memories { flex: 1; max-width: 900px; margin: 0; }
  .card.active { background: var(--panel2); box-shadow: inset 3px 0 0 var(--accent); }

  /* 넓은 화면 인체공학 — 말풍선이 화면 전체를 가로지르지 않게,
     입력·본문은 읽기 좋은 폭으로 */
  .msg { max-width: 560px; }
  .chat-log { padding: 16px 24px; gap: 10px; }
  .chat-input { padding: 12px 24px 16px; }
  .pane { padding-left: 24px; padding-right: 24px; }
  .bar { padding-left: 24px; padding-right: 24px; }
  #memories-list { padding-left: 24px; padding-right: 24px; }

  /* 통화 오버레이 — 데스크톱에선 오브와 자막을 키운다 */
  #call-orb { width: 200px; height: 200px; }
  .orb-core { width: 130px; height: 130px; }
  .call-captions { max-width: 640px; }
  .cap-char { font-size: 19px; }
  .cap-user { font-size: 15px; }
}

/* 짧은 가로 화면(폰 랜드스케이프) — 통화 오버레이가 넘치지 않게 */
@media (max-height: 480px) {
  .call-top { margin-top: 2vh; }
  #call-orb { width: 90px; height: 90px; margin: 2vh 0; }
  .orb-core { width: 64px; height: 64px; }
}

/* 인증 화면 */
.auth-overlay {
  position: fixed; inset: 0; z-index: 60; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.auth-card { width: 100%; max-width: 360px; }
.auth-card h1 { color: var(--accent); text-align: center; }
.auth-card > .hint { text-align: center; margin: 4px 0 20px; }
.auth-card .tabs { padding: 0 0 14px; }
.auth-card label { display: block; margin: 10px 0 4px; font-size: 13px; color: var(--dim); }
.auth-card input {
  width: 100%; margin-top: 4px; padding: 11px 12px; font: inherit;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--panel2); border-radius: 10px;
}
.auth-card .primary { width: 100%; margin-top: 14px; padding: 12px; }
#auth-error { min-height: 18px; margin-top: 10px; }

/* 온보딩 관계 선택 */
.ob-tpl.active { outline: 2px solid var(--accent); background: var(--panel2); }

/* 오라의 두 번째 슬롯 — 채팅·통화에서 컴패니언의 이름만 그의 빛으로.
   그 외 모든 기능색(버튼·링크·포커스)은 시스템 보라 고정. */
#chat-title, #call-name { color: var(--aura-text, var(--text)); }

/* 이용 현황 게이지 */
.usage-card { display: block; }
.usage-card .row { display: flex; justify-content: space-between; align-items: baseline; }
.usage-track { height: 6px; border-radius: 3px; background: var(--panel2); margin: 8px 0 4px; overflow: hidden; }
.usage-fill { height: 100%; border-radius: 3px; background: var(--accent-dim); }
.usage-fill.high { background: #cf8a5b; }

/* 시스템의 조용한 안내 (쿼터 등) — 컴패니언 말풍선과 구분 */
.msg.system {
  align-self: center; background: transparent; color: var(--dim);
  border: 1px solid var(--panel2); font-size: 13px; text-align: center;
}
.ob-voice.active { outline: 2px solid var(--accent); color: var(--text); }

/* 가입 약관 동의 */
.auth-terms { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--dim); }
.auth-terms input { width: auto; margin-top: 3px; flex-shrink: 0; }
.auth-terms a { color: var(--accent); }

/* 작별하기 (파괴적 액션) */
button.ghost.danger { border-color: #6a2b3a; color: #e88; }
@media (hover: hover) { button.ghost.danger:hover { background: #3a1822; filter: none; } }

/* 추천 컴패니언 카드의 관계 라벨 */
.card .name .rel { font-weight: 400; }