/* ===== Base ===== */
:root {
  --bg:#f5f6fa;
  --ink:#111;
  --muted:#6b7280;
  --card:#fff;
  --border:#eceff3;
  --shadow:0 8px 24px rgba(16,24,40,.04);
  --radius:14px;
  --gap:16px;
  --maxw:900px;
  --font:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --pill:#f2f4f7;
  --user:#eef0ff;
  --ai:#f7f7f9;
  --primary:#111;
}

/* 기본 스타일 */
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  padding: 0;
}
h1, h2, h3 {
  text-align: center;
  margin-top: 2rem;
}
.container {
  max-width: var(--maxw);
  margin: 32px auto;
  padding: 16px;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card h3 { margin: 0 0 12px; font-size: 16px; }
label { font-weight: 600; display: block; margin: 8px 0 6px; }
input, button { width: 100%; padding: 10px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 14px; }
button { background: var(--primary); color: #fff; border: none; cursor: pointer; }
button:disabled { opacity: .6; cursor: not-allowed; }
.muted { color: var(--muted); font-size: 12px; }
.chat { white-space: pre-wrap; line-height: 1.6; max-height: 70vh; overflow: auto; word-break: break-word; }
.msg { padding: 12px 14px; border-radius: 12px; margin: 8px 0; }
.user { background: var(--user); }
.ai { background: var(--ai); }
.actions { display:flex; gap:12px; align-items:stretch; }
.actions .btn-ask, .actions .btn-clear { width:auto; }
.actions .btn-ask  { flex:0 0 80%; font-weight:600; }
.actions .btn-clear{ flex:0 0 20%; background:#f0f0f0; color:#444; border:1px solid #ccc; }
.actions .btn-clear:hover{ background:#e2e2e2; }

/* 입력칸 폭 및 포커스 */
#custom {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  background: #fff;
}
#custom:focus {
  outline: none;
  border-color: #5b6cff;
  box-shadow: 0 0 0 2px rgba(91,108,255,0.15);
}

/* 프리셋 체크박스: 한 칸에 모두 표시 */
.qbox { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; padding: 8px; max-height:220px; overflow:auto; }
.qitem { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border: 0; background: transparent; margin: 0; }
.qitem + .qitem { border-top: 1px solid #f0f2f5; }
.qitem input[type=checkbox] { width: auto; margin: 0; }
.pill { display: inline-block; background: var(--pill); border-radius: 999px; padding: 6px 10px; margin: 4px 6px 0 0; font-size: 12px; }
#personaInfo, #templateInfo { display: none !important; }

@media (max-width:560px){
  .actions{ flex-direction:column; }
  .actions .btn-ask, .actions .btn-clear{ flex:1 1 auto; width:100%; }
}

/* ---- 타이핑 인디케이터 ---- */
/* 안정적인 점 애니메이션 (줄바꿈 방지) */
.msg.ai.typing { background: var(--ai); color: var(--muted); }

.typing .dots{
  display: inline-block;
  white-space: nowrap;    /* 줄바꿈 방지 */
  line-height: inherit;
}

.typing .dots span{
  display: inline-block;
  opacity: .2;
  animation: dotBlink 1.2s infinite steps(1, end);
}

.typing .dots span:nth-child(2){ animation-delay: .2s; }
.typing .dots span:nth-child(3){ animation-delay: .4s; }

@keyframes dotBlink{
  0%   { opacity: .2; }
  30%  { opacity: 1; }
  100% { opacity: .2; }
}