/* 공용 스타일 — 색 변수 · 기본 요소 · 말풍선 · 왼쪽 메뉴. 채팅 화면은 jink.css, 벡터DB 조회 화면은 vectordb.css 가 이어서 정의한다.
   색은 디자인 시안에서 잰 값이다(흰 배경, 연보라 상대 말풍선, 연회색 내 말풍선) */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --text: #1d1b22;
  --muted: #9b97a4;
  --line: #e7e4ed;
  --accent: #7b62e3;       /* 보라: 아이콘 · 게이지 · 버튼 */
  --accent-text: #6b55c9;  /* 상단 띠 글자 */
  --strip: #eee7fa;        /* 상단 띠 */
  --bot: #e7d8ff;          /* 상대 말풍선 */
  --bot-text: #1d1b22;
  --me: #efedf3;           /* 내 말풍선 */
  --btn: #f1edf9;          /* 둥근 버튼 */
  --ai: #7f6eea;           /* AI 표시 */
  --tension: #f0a23b;      /* 텐션 (감정 · 친밀도와 구분되는 주황) */
  --pos: #3fa57b;
  --neg: #e2656b;
  --neu: #c9a227;
  --track: #ece8f4;
}
* { box-sizing: border-box; }
/* 페이지 자체는 스크롤하지 않고 메시지 목록만 스크롤 (iOS에서 상단바가 밀려 올라가는 문제 방지) */
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
  font-size: 15px;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
  border: 0; border-radius: 12px; padding: 10px 16px; background: var(--accent); color: #fff;
  font-weight: 600; cursor: pointer;
}
button:disabled { opacity: .5; cursor: default; }
/* iOS Safari는 16px 미만 입력창을 누르면 화면을 확대해 버리므로 16px 유지 */
input, select, textarea {
  font-size: 16px;
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
::placeholder { color: #aaa6b3; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--neg); min-height: 1em; margin: 0; font-size: 13px; }
.center { overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 16px; }
.card {
  width: 100%; max-width: 360px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px;
  box-shadow: 0 4px 20px rgba(60, 40, 120, .06); display: flex; flex-direction: column; gap: 12px;
}
.card h1 { font-size: 20px; margin: 0; }
.card label, .label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------------ 채팅: 메시지 목록과 말풍선 */
.di-low { color: var(--pos); } .di-mid { color: #7a7690; } .di-high { color: #d0702a; } .di-vhigh { color: var(--neg); }
.messages {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 16px;
}

/* 메시지 묶음 */
.msg { display: flex; gap: 8px; max-width: min(88%, 600px); }
.msg.user { align-self: flex-end; }
.msg.assistant { align-self: flex-start; }
.msg .col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.msg.user .col { align-items: flex-end; }
.bubble-row { display: flex; align-items: flex-end; gap: 6px; }
.bubble {
  padding: 10px 15px; border-radius: 18px; white-space: pre-wrap; word-break: break-word; line-height: 1.45;
}
.msg.assistant .bubble { background: var(--bot); color: var(--bot-text); }
.msg.user .bubble { background: var(--me); color: var(--text); }
.stamp { display: flex; flex-direction: column; font-size: 11px; color: #a19dab; white-space: nowrap; line-height: 1.3; flex: none; }
.msg.user .stamp { align-items: flex-end; }
/* 상대 프로필 사진 + AI 표시 */
.avatar-sm {
  position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none; margin-top: 2px;
  background: var(--track); color: var(--accent-text); display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
}
.avatar-sm img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar-sm .ai {
  position: absolute; right: -4px; bottom: -2px; background: var(--ai); color: #fff; font-size: 8.5px; font-weight: 800;
  border-radius: 999px; padding: 1px 4px; border: 1.5px solid #fff; line-height: 1.3;
}

/* 답을 기다리는 동안 말풍선 안의 「…」 */
.typing-bubble .bubble { display: inline-flex; align-items: center; gap: 5px; padding: 14px 16px; }
.typing-bubble .bubble span {
  width: 7px; height: 7px; border-radius: 50%; background: #8b74e0; opacity: .5; animation: typing 1.2s infinite ease-in-out;
}
.typing-bubble .bubble span:nth-child(2) { animation-delay: .15s; }
.typing-bubble .bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-3px) } }

/* ------------------------------------------------------------------ 왼쪽 메뉴 (모든 화면 공통) */
.shell { display: flex; height: var(--app-h, 100dvh); }
.side-menu {
  width: 200px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 18px 12px;
  border-right: 1px solid var(--line); background: #fbfaff;
}
.brand { font-weight: 800; font-size: 16px; padding: 4px 10px 14px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--text);
  text-decoration: none; font-weight: 600; font-size: 14.5px;
}
.menu-item:hover { background: #f1edf9; }
.menu-item.on { background: var(--strip); color: var(--accent-text); }
.menu-ico { width: 20px; text-align: center; }
.shell-main { flex: 1; min-width: 0; overflow-y: auto; }
.fill { min-height: 100%; }
/* 좁은 화면: 왼쪽 메뉴를 위쪽 탭 줄로 */
@media (max-width: 699px) {
  .shell { flex-direction: column; }
  .side-menu { width: auto; flex-direction: row; align-items: center; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0 8px 0 4px; font-size: 14px; }
  .menu-item { padding: 7px 11px; font-size: 13.5px; }
}
/* 폰 폭(390px 등): 탭 줄이 가로로 넘치지 않게 이름 · 아이콘을 빼고, 그래도 좁으면 글을 줄인다 */
@media (max-width: 560px) {
  .brand, .menu-ico { display: none; }
  .side-menu { gap: 2px; padding: 6px 8px; }
  .menu-item {
    display: block; flex: 0 1 auto; min-width: 0; padding: 7px 9px; font-size: 13px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* 왼쪽 메뉴 접기 · 펼치기. 접힘(.folded): 아이콘만 있는 좁은 줄 + 펼치기 버튼, 펼침: 위 메뉴 그대로. 화면에 들어올 때마다 접힌 채로 연다(menu.js).
   아이콘 위치는 두 상태에서 같아 여닫는 동안 움직이지 않고, 채팅 영역 · 로그인 카드는 남은 폭의 가운데에 그대로 있다.
   폰(위쪽 탭 줄)은 접힘 = 아이콘만, 펼침 = 이름만 — 아이콘과 이름이 같은 자리를 번갈아 쓴다 */
.foldable .side-menu { overflow: hidden; transition: width .22s ease; }
.menu-top { display: flex; align-items: center; gap: 6px; min-width: 0; padding-bottom: 6px; }
.menu-toggle {
  flex: none; width: 44px; height: 40px; padding: 0; border-radius: 12px; display: grid; place-items: center;
  background: transparent; color: var(--text);
}
.menu-toggle:hover { background: #f1edf9; }
.menu-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.foldable .brand {
  min-width: 0; max-width: 8em; padding: 0 4px; white-space: nowrap; overflow: hidden;
  transition: max-width .22s ease, padding .22s ease, opacity .18s ease;
}
.foldable .menu-item { white-space: nowrap; transition: gap .22s ease; }
.foldable .menu-ico { flex: none; }
.menu-label { min-width: 0; max-width: 10em; overflow: hidden; text-overflow: ellipsis; transition: max-width .22s ease, opacity .18s ease; }
.folded .side-menu { width: 69px; } /* 오른쪽 테두리 1px 빼고 아이콘 칸 44px */
.folded .brand { max-width: 0; padding: 0; opacity: 0; }
.folded .menu-label { max-width: 0; opacity: 0; }
.folded .menu-item { gap: 0; }
@media (max-width: 699px) {
  .folded .side-menu { width: auto; }
  .menu-top { gap: 2px; padding-bottom: 0; }
  .menu-toggle { width: 34px; height: 30px; border-radius: 10px; }
  .foldable .brand { padding: 0 8px 0 4px; }
  .folded .brand { padding: 0; }
}
@media (max-width: 560px) {
  .foldable .menu-item { display: flex; gap: 0; }
  .foldable .menu-ico { display: block; max-width: 0; opacity: 0; overflow: hidden; transition: max-width .22s ease, opacity .18s ease; }
  .folded .menu-ico { max-width: 20px; opacity: 1; }
  /* 펼친 탭 줄은 이름이 잘리지 않게 줄바꿈한다 — 메뉴가 많으면 390px 폭에서 이름이 모두 「…」로 잘린다 */
  .foldable:not(.folded) .side-menu { flex-wrap: wrap; row-gap: 2px; }
  .foldable:not(.folded) .menu-item { flex: 0 0 auto; }
  .foldable:not(.folded) .menu-label { max-width: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .foldable .side-menu, .foldable .side-menu * { transition: none; }
}

/* ------------------------------------------------------------------ 본문 여백 (벡터DB 조회 화면) */
.news-page { padding: 24px 28px 40px; }
@media (max-width: 799px) {
  .news-page { padding: 16px 14px 32px; }
}

/* 좁은 화면에서는 말풍선 묶음을 더 넓게 쓴다 */
@media (max-width: 899px) {
  .msg { max-width: 92%; }
}

/* 사이드 메뉴 맨 아래 「로그아웃」(menu.js 가 모든 화면에 붙인다) — 폰 위쪽 탭 줄에서는 맨 오른쪽. 로그인 카드가 떠 있을 땐 숨긴다 */
.menu-item.menu-logout { margin-top: auto; width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.menu-item.menu-logout:hover { background: #f1edf9; }
.shell[data-auth="no"] .menu-logout { display: none; }
@media (max-width: 699px) {
  .menu-item.menu-logout { margin-top: 0; margin-left: auto; width: auto; }
}

/* ------------------------------------------------------------------ 벡터DB 조회 (한 화면에 한 건 · 읽기 전용) */
.vdb-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; max-width: 920px; margin: 0 auto; }
.vdb-top h1 { margin: 0; font-size: 22px; }
.vdb-tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: #efeef3; }
.vdb-tabs button { padding: 7px 16px; border-radius: 999px; background: transparent; color: #5f5b69; font-size: 14px; font-weight: 700; }
.vdb-tabs button[aria-selected="true"] { background: #fff; color: var(--accent-text); box-shadow: 0 1px 3px rgba(30, 20, 60, .12); }
.vdb-empty { padding: 56px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 18px; }
.vdb-empty.err { color: var(--neg); border-color: #f4cfd1; background: #fff9f9; }