:root {
  --bg: #0a0a0f;
  --bg2: #14101a;
  --card: #1b1622;
  --line: #2a2333;
  --text: #f4f2f7;
  --muted: #9a93a6;
  --pink: #ff2d78;
  --violet: #b14bff;
  --gold: #ffd56b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  font-family: 'Pretendard', system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #1d1426 0%, var(--bg) 60%);
  color: var(--text);
}

body {
  display: flex; flex-direction: column;
  height: 100dvh; overflow: hidden;
}

/* ── 이름 게이트 ── */
.gate {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(900px 500px at 50% 0%, #251733 0%, #0a0a0f 65%);
  padding: 24px;
}
.gate.hidden { display: none; }
.gate-inner { width: 100%; max-width: 360px; text-align: center; }
.gate-emoji { font-size: 56px; }
.gate-inner h1 {
  margin: 10px 0 6px; font-size: 34px; font-weight: 800; letter-spacing: -1px;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gate-sub { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 26px; }
#gate-form { display: flex; flex-direction: column; gap: 12px; }
#name-input {
  padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line);
  background: #120e18; color: var(--text); font-size: 17px; text-align: center;
}
#name-input:focus { outline: none; border-color: var(--pink); }
#gate-form button {
  padding: 16px; border: none; border-radius: 14px; cursor: pointer;
  font-size: 17px; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, var(--pink), var(--violet));
}
.gate-hint { margin-top: 18px; color: #6c6478; font-size: 12.5px; }

/* ── 헤더 ── */
.chat-header {
  padding: 14px 18px calc(14px); border-bottom: 1px solid var(--line);
  background: rgba(10,10,15,.7); backdrop-filter: blur(8px);
  padding-top: max(14px, env(safe-area-inset-top));
}
.ch-title { font-weight: 800; font-size: 18px; }
.ch-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ── 메시지 ── */
.messages {
  flex: 1; overflow-y: auto; padding: 18px 14px 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.msg { max-width: 84%; padding: 12px 15px; border-radius: 18px; font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--pink), var(--violet)); color: #fff; border-bottom-right-radius: 6px; }
.msg.bot { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg.bot .who { color: var(--gold); font-size: 12px; font-weight: 700; margin-bottom: 4px; }

.typing { align-self: flex-start; display: flex; gap: 5px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; border-bottom-left-radius: 6px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite both; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{opacity:.3} 40%{opacity:1} }

/* ── 추천 칩 ── */
.suggestions { display: flex; gap: 8px; overflow-x: auto; padding: 6px 14px 10px; scrollbar-width: none; }
.suggestions::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: #181320; border: 1px solid var(--line); color: var(--text);
  font-size: 13px; white-space: nowrap;
}
.chip:active { border-color: var(--pink); }

/* ── 입력창 ── */
.composer {
  display: flex; gap: 10px; padding: 12px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: rgba(10,10,15,.85); backdrop-filter: blur(8px);
}
#q-input {
  flex: 1; padding: 14px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: #120e18; color: var(--text); font-size: 16px;
}
#q-input:focus { outline: none; border-color: var(--violet); }
#send-btn {
  width: 50px; border: none; border-radius: 50%; cursor: pointer; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--violet));
}
#send-btn:disabled { opacity: .5; }