/* 영업 지원 — 왜 카드 · 시간별 대사 · 예상 문답 · AI 상담 창 */

/* ── AI 상담 — 오른쪽에서 나오는 창 ── */
.chat{
  position:fixed; inset:0; z-index:110;
  background:rgba(23,28,20,.35);
  display:flex; justify-content:flex-end;
}
.chat[hidden]{display:none}
.chat-box{
  width:min(440px, 100%); height:100%;
  background:var(--bg); border-left:1px solid var(--bd);
  display:flex; flex-direction:column;
}
.chat-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px; background:var(--card); border-bottom:1px solid var(--bd);
}
.chat-head h3{font-size:14px; font-weight:700; margin:0}
.chat-model{font-size:10.5px; color:var(--tx3); font-family:var(--font-num)}
.chat-x{
  margin-left:auto; border:0; background:none; cursor:pointer;
  font-size:20px; line-height:1; color:var(--tx2); padding:2px 6px;
}
.chat-msgs{flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px}
.chat-note{
  font-size:12px; color:var(--tx2); line-height:1.7; text-align:center;
  padding:10px 16px;
}
.chat-msg{
  max-width:88%; padding:10px 13px; border-radius:12px;
  font-size:13px; line-height:1.75; white-space:pre-wrap; word-break:keep-all;
}
.chat-msg.me{align-self:flex-end; background:var(--band); color:#fff; border-bottom-right-radius:4px}
.chat-msg.ai{align-self:flex-start; background:var(--card); border:1px solid var(--bd); border-bottom-left-radius:4px}
.chat-msg.sys{align-self:center; background:var(--chip); color:var(--tx2); font-size:12px; text-align:center}
.chat-tail{
  font-size:10.5px; color:var(--tx3); margin-top:8px; padding-top:7px;
  border-top:1px solid var(--bd-soft);
}
.chat-nexts{display:flex; flex-direction:column; gap:6px; margin-top:9px}
.chat-next{
  border:1px solid var(--bd); background:var(--bg); color:var(--tx2);
  border-radius:9px; padding:7px 11px; font-size:12px; text-align:left; cursor:pointer;
  line-height:1.5;
}
.chat-next:hover{border-color:var(--gold); color:var(--tx)}
.chat-foot{
  display:flex; gap:8px; align-items:flex-end;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:var(--card); border-top:1px solid var(--bd);
}
.chat-foot textarea.input{min-height:42px; max-height:110px; flex:1; font-family:var(--font); font-size:13px}


/* 왜 이 약인가 */
.why{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; margin-bottom:6px}
.why-card{
  display:flex; gap:12px; background:var(--card); border:1px solid var(--bd);
  border-radius:var(--r); padding:14px 16px;
}
.why-n{
  flex:0 0 24px; width:24px; height:24px; border-radius:50%;
  background:var(--band); color:#fff; font-family:var(--font-num);
  font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center;
}
.why-body{min-width:0}
.why-who{font-size:13.5px; font-weight:700; line-height:1.5; margin-bottom:8px; word-break:keep-all}
.why-line{font-size:12.5px; line-height:1.65; color:var(--tx2); margin-bottom:5px}
.why-line span{
  display:block; font-size:10px; font-weight:800; letter-spacing:.1em;
  color:var(--gold); margin-bottom:2px;
}
.why-src{
  font-size:11px; color:var(--tx3); margin-top:8px; padding-top:7px;
  border-top:1px solid var(--bd-soft);
}

/* 시간별 대사 — 이 화면의 핵심 */
.talk{
  background:var(--card); border:1px solid var(--bd);
  border-radius:var(--r); overflow:hidden; margin-bottom:8px;
}
.talk-row{
  display:grid; grid-template-columns:58px 1fr 96px auto; gap:14px;
  align-items:center; padding:13px 16px; border-bottom:1px solid var(--bd-soft);
}
.talk-row:last-child{border-bottom:0}
.talk-tag{
  font-family:var(--font-num); font-size:12px; font-weight:600;
  color:#fff; background:var(--band); border-radius:20px;
  padding:4px 0; text-align:center;
}
.talk-say{font-size:14px; line-height:1.75; word-break:keep-all}
.talk-len{text-align:right; line-height:1.35}
.talk-len b{display:block; font-family:var(--font-num); font-size:15px; font-weight:600}
.talk-len span{font-size:10.5px; color:var(--tx3)}
.talk-len em{display:block; font-style:normal; font-size:10px; color:var(--danger); font-weight:700; margin-top:2px}

.talk-row.over{background:var(--danger-bg)}
.talk-row.over .talk-tag{background:var(--danger)}
.talk-row.over .talk-len b{color:var(--danger)}

/* 예상 문답 */
.qa{
  background:var(--card); border:1px solid var(--bd); border-left:3px solid var(--gold);
  border-radius:var(--r); padding:14px 16px; margin-bottom:8px;
}
.qa-q{font-size:13.5px; font-weight:700; margin-bottom:8px; line-height:1.55; word-break:keep-all}
.qa-q::before{content:"원장  "; color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.1em}
.qa-a{font-size:13px; line-height:1.8; color:var(--tx2); white-space:pre-wrap}
.qa-src{font-size:11px; color:var(--tx3); margin-top:9px; padding-top:8px; border-top:1px solid var(--bd-soft)}

/* 목록 */
ul.plain{margin:0 0 6px; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
ul.plain li{
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r-sm);
  padding:11px 14px; font-size:13px; line-height:1.7;
}
ul.plain.warn li{background:var(--warn-bg); border-color:transparent; color:var(--warn)}

@media (max-width:720px){
  .talk-row{grid-template-columns:52px 1fr; gap:10px 12px; padding:12px 14px}
  .talk-len{grid-column:2; text-align:left; display:flex; gap:8px; align-items:baseline}
  .talk-len b{display:inline}
  .talk-len em{display:inline}
  .talk-row .btn-sm{grid-column:2; justify-self:start; margin:4px 0 0}
}