/* ---------- 궁합 풀이 대화 화면(talk.html) ----------
   내손내운 인생 풀이 대화(content/insaeng/result.css의 .talk)에서 옮겼습니다. 결과 화면 이름과 겹치지 않게 .chat 안의 t- 이름만 씁니다.
   두 손 그림(.pair-wrap)과 .app 틀은 result.css, 색과 글꼴은 style.css에 있습니다. */

.chat, .chat *, .chat *::before, .chat *::after { box-sizing: border-box; }
.chat {
  position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(rgba(251, 246, 238, 0.86), rgba(251, 246, 238, 0.92)), url(assets/bg-shelf.webp) center top / cover no-repeat, var(--paper);
}

/* 위 머리: 카톡 대화방처럼 뒤로 가기(궁합 카드 결제 장)와 방 이름만 */
.chat .t-top { flex: none; display: flex; align-items: center; gap: 4px; padding: max(8px, env(safe-area-inset-top)) 12px 8px 6px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-b); }
.chat .t-back { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--meok); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.chat .t-back svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chat .t-brand { display: flex; align-items: center; gap: 4px; }
.chat .t-brand .logo { height: 20px; }

/* 대화 */
.chat .t-chat { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 16px 18px; overscroll-behavior: contain; scrollbar-width: none; }
.chat .t-chat::-webkit-scrollbar { display: none; }
.chat .t-chat > section { padding-bottom: 4px; }

/* 언니 얼굴: 결과 카드 캐릭터 얼굴(.who)과 같은 자리를 둥글게 */
.chat .t-face { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fdf3ec 50% 2px / 155% auto no-repeat; border: 1.5px solid #fff; box-shadow: 0 1px 4px rgba(60, 40, 20, 0.2); }
.chat .t-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 5px; }
.chat .t-row.t-first { margin-top: 12px; }
.chat .t-row .t-face { visibility: hidden; }
.chat .t-row.t-first .t-face { visibility: visible; }
.chat .t-row .t-col { min-width: 0; max-width: calc(100% - 42px); display: flex; flex-direction: column; align-items: flex-start; }
.chat .t-name { font-size: 12.5px; font-weight: 700; color: var(--meok-3); margin: 1px 0 4px 2px; }

.chat .t-msg { animation: t-rise 0.38s var(--ease-out) both; }
.chat .t-instant .t-msg, .chat .t-instant .t-msg * { animation: none !important; transition: none !important; }
@keyframes t-rise { from { opacity: 0; transform: translateY(10px) scale(0.97); } }

.chat .t-bubble {
  background: #fff; color: var(--ink); font-size: 15px; line-height: 1.5; padding: 9px 13px; border-radius: 4px 18px 18px 18px;
  box-shadow: 0 1px 3px rgba(60, 40, 20, 0.07);
  word-break: keep-all; overflow-wrap: anywhere;
  text-wrap: pretty;   /* 마지막 줄에 낱말 하나만 떨어지지 않게 */
}
.chat .t-row:not(.t-first) .t-bubble { border-radius: 18px; }

/* 내 말(오른쪽): 카톡처럼 노랑(내손내운과 같음) */
.chat .t-me { display: flex; justify-content: flex-end; margin-top: 16px; }
.chat .t-me .t-bubble { background: #fde68a; border-radius: 18px 4px 18px 18px; font-weight: 700; max-width: 82%; }

/* 쓰는 중 */
.chat .t-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.chat .t-typing i { width: 7px; height: 7px; border-radius: 50%; background: #b8aca0; animation: t-dot 1s infinite ease-in-out; }
.chat .t-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat .t-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes t-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* 두 손 그림 말풍선(결과 1장과 같은 그림): 선이 그려지고 붉은 실이 이어진 뒤 하트 매듭이 맺힙니다 */
.chat .t-pic {
  position: relative; width: min(314px, calc(100vw - 74px)); padding: 10px 8px 8px; border-radius: 4px 18px 18px 18px;
  background: #fff; border: 1px solid var(--line-b);
  box-shadow: 0 4px 16px rgba(60, 40, 20, 0.08);
}
.chat .t-row:not(.t-first) .t-pic { border-radius: 18px; }
.chat .t-pairpic .pair-wrap { flex: none; width: 100%; min-height: 0; max-height: none; margin: 0; }
.chat .t-pairpic .art.draw .art-in path { animation: draw 0.45s 0.2s ease-out both; }
.chat .t-pairpic .art.draw .art-in .l-pink path { animation-duration: 0.55s; animation-delay: 0.5s; }
.chat .t-pairpic .pair-thread .thread { stroke-dasharray: 1 1; animation: draw 0.6s var(--ease-in-out) 0.95s both; }
.chat .t-pairpic .pair-thread .knot { animation: pop 0.3s 0.95s both; }
.chat .t-pairpic .pair-thread .knot + .knot { animation-delay: 1.45s; }
.chat .t-pairpic .pair-thread .knot-heart { animation: heart-pop 0.5s var(--ease-spring) 1.5s both; }
.chat .t-pairpic .pair-names .tag { animation: fade-in 0.35s 1.1s both; }

/* 줄 카드: 카드 이름 아래 줄마다 작은 이름(회색)과 값. 값이 여럿이면 체크 줄 */
.chat .t-rcard { width: min(314px, calc(100vw - 74px)); padding: 12px 14px 4px; border-radius: 4px 18px 18px 18px; background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(60, 40, 20, 0.07); }
.chat .t-row:not(.t-first) .t-rcard { border-radius: 18px; }
.chat .t-rcard .t-ch { padding-bottom: 9px; border-bottom: 1px solid rgba(200, 64, 47, 0.16); font: 400 16px/1.3 var(--font-title); letter-spacing: -0.3px; color: var(--acc-text); word-break: keep-all; }
.chat .t-rcard .t-r { padding: 9px 0 10px; }
.chat .t-rcard .t-r + .t-r { border-top: 1px dashed rgba(38, 33, 30, 0.16); }
.chat .t-rcard .t-k { font-size: 12px; font-weight: 800; color: var(--meok-3); word-break: keep-all; }
.chat .t-rcard .t-v { margin: 3px 0 0; font-size: 15px; font-weight: 800; line-height: 1.45; word-break: keep-all; }
.chat .t-rcard ul.t-v { list-style: none; padding: 0; font-size: 14px; font-weight: 700; }
.chat .t-rcard li { display: flex; gap: 7px; align-items: flex-start; }
.chat .t-rcard li + li { margin-top: 5px; }
.chat .t-rcard li::before {
  content: "✓"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px; background: var(--acc); color: #fff;
  font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center;
}

/* 두 분 연애운 그래프(때 이야기, 나이로 읽은 사람이 있을 때): 큰 글씨 · 선 그림(앞사람 금색, 뒷사람 분홍) · 사람마다 칸 */
.chat .t-lg { width: min(314px, calc(100vw - 74px)); padding: 12px 14px; border-radius: 4px 18px 18px 18px; background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(60, 40, 20, 0.07); }
.chat .t-row:not(.t-first) .t-lg { border-radius: 18px; }
.chat .t-lg-h { padding-bottom: 9px; border-bottom: 1px solid rgba(200, 64, 47, 0.16); font: 400 16px/1.3 var(--font-title); letter-spacing: -0.3px; color: var(--acc-text); word-break: keep-all; }
.chat .t-lg-q { margin: 11px 0 6px; text-align: center; }
.chat .t-lg-lab { font-size: 12px; font-weight: 800; color: var(--meok-3); }
.chat .t-lg-big { margin-top: 2px; font: 400 22px/1.3 var(--font-title); letter-spacing: -0.4px; color: var(--meok); word-break: keep-all; }
.chat .t-lg-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chat .t-lg-chart .lg-band { fill: rgba(200, 64, 47, 0.08); animation: fade-in 0.4s 1.2s both; }
.chat .t-lg-chart .lg-base { stroke: rgba(38, 33, 30, 0.16); stroke-width: 1; }
.chat .t-lg-chart .lg-now { stroke: rgba(38, 33, 30, 0.38); stroke-width: 1; stroke-dasharray: 3 3; }
.chat .t-lg-chart .lg-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; animation: draw 0.9s cubic-bezier(0.4, 0, 0.2, 1) both; }
.chat .t-lg-chart .lg-line.lg-a { stroke: var(--pa); }
.chat .t-lg-chart .lg-line.lg-b { stroke: var(--pb); }
.chat .t-lg-chart .lg-dot { stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pop 0.35s both; }
.chat .t-lg-chart .lg-dot.lg-a { fill: var(--pa); }
.chat .t-lg-chart .lg-dot.lg-b { fill: var(--pb); }
.chat .t-lg-axis { position: relative; height: 15px; margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--meok-4); }
.chat .t-lg-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.chat .t-lg-axis span:last-child { transform: translateX(-80%); }
.chat .t-lg-people { display: grid; gap: 6px; margin-top: 10px; }
.chat .t-lg-p { padding: 8px 11px 9px; border-radius: 12px; background: var(--pa-soft); }
.chat .t-lg-p.pb { background: var(--pb-soft); }
.chat .t-lg-n { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--pa-text); }
.chat .t-lg-p.pb .t-lg-n { color: var(--pb-text); }
.chat .t-lg-n i { flex: none; width: 14px; height: 3px; border-radius: 2px; background: var(--pa); }
.chat .t-lg-p.pb .t-lg-n i { background: var(--pb); }
.chat .t-lg-v { margin-top: 2px; font-size: 14.5px; font-weight: 800; line-height: 1.4; word-break: keep-all; }

/* 두 분 달력('때' 이야기 끝, 두 분 좋은 날이 있을 때): 머리 → 기간 → 12칸(3칸 × 4줄) → 범례(이 달력에 나온 표시만) → 줄(이름 | 값)
   앞사람 금색 점, 뒷사람 분홍 점, 같이 좋은 달은 꽉 채운 칸, 조심할 달은 빈 동그라미 */
.chat .t-cal { width: min(314px, calc(100vw - 74px)); padding: 12px 14px 4px; border-radius: 4px 18px 18px 18px; background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(60, 40, 20, 0.07); }
.chat .t-row:not(.t-first) .t-cal { border-radius: 18px; }
.chat .t-cal-h { padding-bottom: 9px; border-bottom: 1px solid rgba(200, 64, 47, 0.16); font: 400 16px/1.3 var(--font-title); letter-spacing: -0.3px; color: var(--acc-text); word-break: keep-all; }
.chat .t-cal-p { margin: 10px 0 9px; text-align: center; font-size: 12px; font-weight: 800; color: var(--meok-3); }
.chat .t-cal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chat .t-cal-m {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 46px; border-radius: 10px;
  background: var(--paper); border: 1px solid var(--line-b); font-size: 13.5px; font-weight: 500; color: var(--meok-3);
}
.chat .t-cal-m i { flex: none; width: 8px; height: 8px; border-radius: 50%; visibility: hidden; }
.chat .t-cal-m span { line-height: 18px; }   /* 달 이름 줄 높이를 모든 칸에서 같게(굵은 가장 좋은 달 칸도 점이 옆 칸과 같은 높이) */
.chat .t-cal-m.best { font-size: 15px; font-weight: 900; }
.chat .t-cal-m.k-both { background: var(--acc); border-color: var(--acc); color: #fff; }
.chat .t-cal-m.k-both i { visibility: visible; background: #fff; }
.chat .t-cal-m.k-a { background: var(--pa-soft); border-color: var(--pa-line); color: var(--pa-text); }
.chat .t-cal-m.k-a i { visibility: visible; background: var(--pa); }
.chat .t-cal-m.k-b { background: var(--pb-soft); border-color: var(--pb-line); color: var(--pb-text); }
.chat .t-cal-m.k-b i { visibility: visible; background: var(--pb); }
.chat .t-cal-m.k-warn i { visibility: visible; width: 9px; height: 9px; box-shadow: inset 0 0 0 1.8px #a03c78; }
.chat .t-cal-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--meok-3); }
.chat .t-cal-leg span { display: inline-flex; align-items: center; gap: 5px; }
.chat .t-cal-leg i { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.chat .t-cal-leg .k-both { width: 11px; height: 11px; border-radius: 3px; background: var(--acc); }
.chat .t-cal-leg .k-a { background: var(--pa); }
.chat .t-cal-leg .k-b { background: var(--pb); }
.chat .t-cal-leg .k-warn { width: 9px; height: 9px; box-shadow: inset 0 0 0 1.8px #a03c78; }
.chat .t-cal-rows { margin-top: 10px; border-top: 1px solid rgba(200, 64, 47, 0.16); }
.chat .t-cal .t-r { padding: 9px 0 10px; }
.chat .t-cal .t-r + .t-r { border-top: 1px dashed rgba(38, 33, 30, 0.16); }
.chat .t-cal .t-k { font-size: 12px; font-weight: 800; color: var(--meok-3); word-break: keep-all; }
.chat .t-cal .t-v { margin: 3px 0 0; font-size: 15px; font-weight: 800; line-height: 1.45; word-break: keep-all; }
.chat .t-cal .t-nw { white-space: nowrap; }   /* 값이 목록이면 날짜 하나를 한 줄에(요일만 떨어지지 않게) */

/* 대화 끝 궁합 풀이 감정서(결제 뒤): 그림(누르면 크게 보기)과 올리기·저장 단추(인생 풀이 대화 끝 감정서와 같은 틀) */
.chat .t-cert { width: min(250px, calc(100vw - 74px)); padding: 8px 10px 10px; }
.chat .t-cert .t-ttl { padding: 2px 4px 8px; font: 400 18px/1.35 var(--font-title); letter-spacing: -0.3px; color: var(--acc-text); text-align: center; word-break: keep-all; }
.chat .t-cert .card-thumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.chat .t-share { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: 10px; }
.chat .t-share button { font: 800 14px var(--font-ui); color: #fff; background: var(--acc); border: 0; border-radius: 999px; padding: 10px 6px; cursor: pointer; white-space: nowrap; }
.chat .t-share button.t-ghost { background: #fff; color: var(--acc-text); border: 1.5px solid var(--acc-line); }
.chat .t-share button:active { transform: scale(0.96); }
.chat .t-share > :only-child { grid-column: 1 / -1; }   /* 인스타 앱 안에서는 저장 단추 하나만 있어 줄 전체를 씁니다. */

/* 맨 아래: 다음 이야기 답장 단추 하나 · 끝 표시 · 입력칸 */
.chat .t-replies {
  flex: none; min-height: 62px; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.9); border-top: 1px solid var(--line-b);
}
.chat .t-replies button {
  font-family: var(--font-ui); font-size: 15px; font-weight: 800; color: #fff; background: var(--acc); border: 0; border-radius: 999px;
  padding: 10px 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(200, 64, 47, 0.25); animation: t-rise 0.35s var(--ease-spring) both;
}
.chat .t-replies button:active { transform: scale(0.96); }
.chat .t-replies button:disabled { opacity: 0.45; cursor: default; }
/* 다음 이야기 단추: 크림 바탕 + 금빛→분홍 테두리 + 인주색 글씨. 빛이 퍼지며 살짝 커졌다 돌아옴 */
.chat .t-replies button.t-go {
  font-weight: 700; padding: 9px 18px; color: var(--acc-text); border: 2px solid transparent; box-shadow: 0 2px 8px rgba(60, 40, 20, 0.12);
  background: linear-gradient(#fffaf0, #fffaf0) padding-box, linear-gradient(90deg, var(--pa), var(--pb)) border-box;
}
.chat .t-quick { display: flex; justify-content: center; gap: 6px; padding: 2px 0; }
.chat .t-quick button.t-go { flex: none; max-width: 100%; animation: t-rise 0.35s var(--ease-spring) both, t-tap 2.2s ease-out 0.9s infinite; }
.chat .t-quick button.t-go:disabled { animation: none; }
@keyframes t-tap {
  0% { transform: scale(1); box-shadow: 0 2px 8px rgba(60, 40, 20, 0.12), 0 0 0 0 rgba(200, 64, 47, 0.4); }
  35% { transform: scale(1.05); }
  70% { transform: scale(1); box-shadow: 0 2px 8px rgba(60, 40, 20, 0.12), 0 0 0 10px rgba(200, 64, 47, 0); }
  100% { transform: scale(1); box-shadow: 0 2px 8px rgba(60, 40, 20, 0.12), 0 0 0 0 rgba(200, 64, 47, 0); }
}

/* 질문 입력칸 */
.chat .t-input-row { display: flex; align-items: center; gap: 4px; padding: 3px 3px 3px 14px; border-radius: 999px; border: 1px solid var(--line-b); background: #fff; }
.chat .t-input-row:focus-within { border-color: var(--acc); }
.chat .t-input-row input { flex: 1; min-width: 0; font: 600 16px var(--font-ui); color: var(--meok); padding: 7px 0; border: 0; background: none; outline: none; }
.chat .t-input-row input::placeholder { color: var(--meok-4); font-size: 14px; }
/* 이야기를 다 들은 뒤 질문 시간: 입력칸에 다음 이야기 단추와 같은 금빛→분홍 테두리와 퍼지는 빛(적기 시작하면 멈춤) */
.chat .t-input-row.t-hot {
  border: 2px solid transparent; padding: 4px 4px 4px 15px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--pa), var(--pb)) border-box;
  animation: t-glow 2.2s ease-out 0.6s infinite;
}
.chat .t-input-row.t-hot:focus-within { animation: none; box-shadow: 0 0 0 3px rgba(200, 64, 47, 0.15); }
.chat .t-input-row.t-hot input::placeholder { color: var(--meok-2); font-weight: 700; }
@keyframes t-glow {
  0% { box-shadow: 0 0 0 0 rgba(200, 64, 47, 0.35); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(200, 64, 47, 0); }
}
.chat .t-replies .t-input-row .t-send { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; animation: none; }
.chat .t-replies .t-input-row .t-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.chat .t-replies .t-input-row .t-send:disabled { opacity: 1; background: rgba(38, 33, 30, 0.08); color: var(--meok-4); box-shadow: none; }

/* 손금 보기가 끝난 뒤: 끝 표시 */
.chat .t-end { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 2px; }
.chat .t-end-note { font-size: 14px; color: var(--meok-3); letter-spacing: 0.02em; }

/* 아래에 말이 더 있을 때 */
.chat .t-more {
  position: absolute; right: 16px; bottom: 74px; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink); background: #fff;
  box-shadow: 0 4px 14px rgba(60, 40, 20, 0.18); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.25s, transform 0.25s;
}
.chat .t-more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.chat .t-more.t-on { opacity: 1; transform: none; pointer-events: auto; animation: t-nudge 1.4s ease-in-out infinite; }
@keyframes t-nudge { 50% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  .chat *, .chat *::before, .chat *::after { animation: none !important; transition: none !important; }
}