/* 1:1 상담 기본 — 2026-10-31 구조 정리로 index.html <style> 250~285줄에서 옮김. 파일 번호 순서대로 읽어야 함(뒤 규칙이 앞 규칙을 덮음) */
/* ---- 1:1 상담 (카테고리 + 대화창 + 입력창) ---- */
.chat-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chat-pill{all:unset;box-sizing:border-box;cursor:pointer;font-size:.85rem;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:9px 14px}
.chat-pill[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
#chat-pills .chat-pill.is-off{opacity:.38;cursor:default}
.chat-window{border-radius:16px;padding:16px;min-height:240px;max-height:380px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.chat-placeholder{margin:auto;color:var(--muted);font-size:.85rem;text-align:center}
.chat-bubble{max-width:80%;padding:10px 14px;border-radius:14px;font-size:.9rem;line-height:1.5;white-space:pre-wrap;word-break:keep-all;word-wrap:break-word;overflow-wrap:break-word;overflow-wrap:anywhere} /* 2026-10-24: iOS 15.4 미만은 anywhere를 몰라 break-word를 먼저 둠 */ /* AI 답변의 줄바꿈 유지 */
.chat-bubble.bot{align-self:flex-start;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.chat-bubble.user{align-self:flex-end;background:var(--accent);color:var(--on-accent)}
.chat-input-row{display:flex;gap:8px;border-radius:999px;padding:6px 6px 6px 18px}
.chat-input-row input{all:unset;box-sizing:border-box;flex:1;min-width:0;font-size:.95rem;color:var(--ink)}
.chat-input-row input::placeholder{color:var(--muted)}
/* 2026-10-24 사용자 결정: 입력칸은 쓰면 늘어나는 칸, 최대 3줄 — 넘으면 칸 안에서 스크롤 (보내기 버튼은 아래쪽에 붙음) */
.chat-input-row{align-items:flex-end;position:relative} /* relative: 입력칸 스크롤 막대(sh-thumb) 기준 */
.chat-input-row textarea{all:unset;display:block;box-sizing:border-box;flex:1;min-width:0;font-size:.95rem;line-height:22px;padding:8px 0;color:var(--ink);resize:none;overflow-y:hidden;white-space:pre-wrap;word-break:keep-all;word-wrap:break-word;overflow-wrap:break-word;overflow-wrap:anywhere;max-height:82px} /* 2026-10-24: iOS 15에서 긴 글이 옆으로 밀리던 문제 — break-word를 먼저 둠, 최대 높이는 JS가 실제 줄 높이로 다시 잼 */
.chat-input-row textarea::placeholder{color:var(--muted)}
.chat-input-row.is-multi{border-radius:20px} /* 두 줄 이상이면 알약 대신 둥근 네모 (글자가 모서리에 잘리지 않게) */
/* 남은 질문 (2026-10-24 05 확인 뒤 사용자 결정): 입력칸 안, 보내기 버튼 바로 왼쪽에 "2/3"처럼 숫자만 작게 */
.chat-left{flex:none;align-self:flex-end;line-height:38px;padding:0 2px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.chat-left[hidden]{display:none}
/* 답을 기다리는 동안 (2026-10-24): 점 세 개가 움직이는 말풍선, 15초가 지나면 "조금 더 걸리고 있어요" */
.chat-bubble.is-wait .chat-dots{display:inline-flex;gap:5px;align-items:center;height:1.2em}
.chat-bubble.is-wait .chat-dots i{display:block;width:6px;height:6px;border-radius:50%;background:var(--muted);animation:chatDot 1.2s infinite ease-in-out}
.chat-bubble.is-wait .chat-dots i:nth-child(2){animation-delay:.18s}
.chat-bubble.is-wait .chat-dots i:nth-child(3){animation-delay:.36s}
@keyframes chatDot{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
.chat-bubble .chat-wait-more{display:block;margin-top:4px;font-size:.8rem;color:var(--muted)}
/* 답을 기다리는 동안·타자 효과 중에는 주제·풀이 보고서를 바꿀 수 없음 (2026-10-24) */
#chat-pills.is-locked .chat-pill{cursor:default}
#chat-pills.is-locked .chat-pill:not(.is-off){opacity:.5}
#counsel .cb-select.is-locked{opacity:.6}
#counsel .cb-select.is-locked .cb-picked,#counsel .cb-select.is-locked #cb-toggle{cursor:default}
.chat-send{all:unset;box-sizing:border-box;flex:none;width:38px;height:38px;border-radius:50%;color:var(--on-accent);display:grid;place-content:center;cursor:pointer}
.chat-send svg{width:18px;height:18px}
.chat-send:disabled{opacity:.4;cursor:default}