/*
  에코114 고객 웹 — 채팅 상담 화면 전용 스타일 — 디자인 v2 (2026-10-19)
  기준: 시안 v2 `_design/04_리디자인_시안/index.html` 의 상담(사장님 "너무 마음에 들어") — 에코114 마크가 있는 머리 · 미색 대화 칸 ·
  흰 말풍선(손님은 초록) · 둥근 빠른 답 · 둥근 입력줄. 옛 시안(S-030~S-032)과 생성기(tools/dev/build_chat_css.py)는 v2 부터 쓰지 않는다.

  지키는 것
  - 치수·색은 tokens.css 의 변수만 쓴다. 여기에 숫자나 색을 새로 적지 않는다(채팅 시험이 색 코드·px 를 막는다).
  - site.css 에 같은 줄이 이미 있는 규칙은 넣지 않는다. form.css · my.css 는 불러오지 않는다
    (.icon-button · .dock 처럼 같은 이름이 화면마다 값이 다르다).
  - 화면 틀(.app-shell · .app-scroll)은 그대로 — 머리와 아래 입력줄은 고정이고 대화만 가운데에서 스크롤한다(개발문서 §8-4 "채팅 화면").
  - 말풍선 폭 줄(.msg · .msg.wide)과 9번(좁은 폭 + 큰 글씨) · 7번(AI 고지 띠 — AI 기본법 제31조) · 8번(입력줄 덮개)은 동작 규칙이라 그대로다.
*/


/* ── 1. 입력칸 · 꺼진 단추 · 안내창 ──────────────────────── */
.svg-defs { position: absolute; width: var(--zero); height: var(--zero); overflow: hidden; }
.button:disabled,.button.secondary:disabled { background: var(--color-surface); color: var(--color-text-weak); border-color: var(--color-border); box-shadow: none; }
.input { display: block; width: var(--full); min-width: var(--zero); min-height: var(--input-height); padding: var(--space-3) var(--space-5); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-text-strong); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.input::placeholder { color: var(--color-text-weak); opacity: var(--one); }
.input:focus,.input.is-focused { outline: var(--border-width-strong) solid var(--color-primary-strong); outline-offset: var(--zero); border-color: var(--color-primary-strong); }
/* 안내창 네 줄은 옛 시안 줄 그대로(시험) — v2 토큰으로 모서리 16 · 초록 회색 테두리가 된다 */
.static-note { width: calc(var(--full) - var(--space-6)); max-width: var(--dialog-max); max-height: calc(var(--viewport-block) - var(--space-7)); margin: auto; padding: var(--space-5); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-2); background: var(--color-bg); color: var(--color-text); font: inherit; word-break: keep-all; overflow-wrap: anywhere; }
.static-note::backdrop { background: var(--color-backdrop); }
.static-note h2 { font-size: var(--font-size-section); line-height: var(--line-height-section); }
.static-note p { margin-block: var(--space-4) var(--space-5); }

/* ── 2. 화면 틀 — 머리 · 대화 · 아래 입력줄을 서로 다른 행으로 ──────────────────────── */
.app-shell { height: var(--viewport-block); display: grid; grid-template-rows: minmax(var(--zero),var(--grid-flex)) auto; overflow: hidden; }
.app-shell { grid-template-rows: auto minmax(var(--zero),var(--grid-flex)) auto; background: var(--color-surface); }
.app-scroll { min-height: var(--zero); min-width: var(--zero); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; background: var(--color-surface); }
.app-scroll::-webkit-scrollbar { display: none; }
.app-scroll:focus-visible { outline: var(--border-width-strong) solid var(--color-primary-strong); outline-offset: calc(var(--zero) - var(--border-width-strong)); }

/* ── 3. 머리 · 말풍선 · 입력 중 · 빠른 답 · 아래 입력줄 ──────────────────────── */
.icon-button { display: flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); flex-shrink: var(--zero); padding: var(--zero); border: none; border-radius: var(--radius-pill); background: var(--color-clear); color: var(--color-text-strong); text-decoration: none; }
.chat-header { display: flex; align-items: center; gap: var(--space-2); min-height: var(--header-height); padding-block: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); background: color-mix(in srgb, var(--color-bg) var(--glass-mix), transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
/* 이름 앞 둥근 에코114 마크(시안 v2) — 그림은 머리띠 로고와 같은 마크 파일 */
.chat-title { position: relative; flex: var(--one); min-width: var(--zero); padding-left: calc(var(--icon-box-size) + var(--space-3)); }
.chat-title::before { content: ""; position: absolute; left: var(--zero); top: var(--half); width: var(--icon-box-size); height: var(--icon-box-size); transform: translateY(var(--translate-center)); border-radius: var(--radius-pill); background: var(--color-bg) url("/assets/img/eco114_mark.svg") center / auto var(--icon-size) no-repeat; box-shadow: var(--shadow-1); }
.chat-title strong { display: block; font-size: var(--font-size-body); line-height: var(--line-height-section); font-weight: var(--font-weight-heavy); letter-spacing: var(--letter-spacing); }
.chat-title span { display: block; margin-top: var(--space-1); }
.chat-log { padding-block: var(--space-5) var(--space-6); }
.chat-day { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-weak); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.chat-day::before,.chat-day::after { content: ''; flex: var(--one); height: var(--border-width); background: var(--color-border); }
.msg { margin-top: var(--space-4); max-width: calc(var(--full) - var(--space-6)); }
.msg.me { margin-left: auto; }
.msg.wide { max-width: var(--full); }
/* 말풍선 — 에코114 쪽은 흰 바탕 + 옅은 그림자, 손님 쪽은 초록 바탕 + 흰 글씨(6.5:1). 말한 쪽 아래 모서리만 덜 둥글게 */
.bubble { padding: var(--space-3) var(--space-4); border-radius: var(--radius-4); border-bottom-left-radius: var(--space-1); background: var(--color-bg); color: var(--color-text-strong); box-shadow: var(--shadow-1); }
.msg.me .bubble { border-bottom-left-radius: var(--radius-4); border-bottom-right-radius: var(--space-1); background: var(--color-primary); color: var(--color-on-primary); box-shadow: none; }
.time { display: block; margin-top: var(--space-1); color: var(--color-text-weak); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.msg.me .time { text-align: right; }
.chat-note { margin-top: var(--space-5); text-align: center; color: var(--color-text-weak); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.typing { display: flex; align-items: center; gap: var(--space-2); width: max-content; padding: var(--space-4); border-radius: var(--radius-4); border-bottom-left-radius: var(--space-1); background: var(--color-bg); box-shadow: var(--shadow-1); }
.typing span { width: var(--space-2); height: var(--space-2); border-radius: var(--full); background: var(--color-text-weak); }
.quick-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
/* 빠른 답 — 초록 테두리 알약(시안 v2) */
.quick { width: auto; max-width: var(--full); padding-inline: var(--space-4); border-color: var(--color-primary); border-radius: var(--radius-pill); color: var(--color-primary-strong); font-size: var(--font-size-label); box-shadow: none; }
.msg .button { margin-top: var(--space-5); }
.dock { padding: var(--space-2) var(--page-gutter) calc(var(--space-3) + env(safe-area-inset-bottom)); border-top: var(--border-width) solid var(--color-border); background: color-mix(in srgb, var(--color-bg) var(--glass-mix), transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.dock > * + * { margin-top: var(--space-2); }
.call-button { width: var(--full); justify-content: center; }
.send-row { display: flex; gap: var(--space-2); }
.send-row .input { flex: var(--one); min-width: var(--zero); }
.send-row .button { width: auto; flex-shrink: var(--zero); padding-inline: var(--space-5); border-radius: var(--radius-pill); }

/* ── 5. reCAPTCHA 안내의 작은 글 여백 — 접수 3단계의 도움말 한 줄 그대로(접수·내 요청과 같다) ──────────────────────── */
.sms-note { margin-top: var(--space-3); }

/* ── 6. 이 화면에서 더한 것 (기존 부품의 자리만) ─────────────── */
/*
  [hidden]           부품(.button 은 display:flex)이 hidden 을 이기지 않게 — 접수 폼(form.css)과 같은 줄.
  dialog:not([open]) 머리의 "안내" 창(<dialog class="static-note">)을 모르는 옛 브라우저에서 창 내용이 본문에 드러나지 않게.
  .jump-row          위로 올려 보는 중에 새 말이 오면 대화 아래쪽에 붙는 "새 메시지" 단추 줄(개발문서 §8-4).
  .retry-row         보내지 못한 내 말풍선 아래 "다시 시도"(글자 버튼)를 내 말 쪽(오른쪽)에 둔다.
  html.in-app .chat-close  앱 안(웹뷰)에서는 머리의 "닫기"(홈으로)를 숨긴다 — 앱 하단 탭 "상담"의 첫 화면이다(개발문서 §9-2).
*/
[hidden] { display: none !important; }
dialog:not([open]) { display: none; }
.jump-row { position: sticky; bottom: var(--space-3); display: flex; justify-content: center; padding-inline: var(--page-gutter); pointer-events: none; }
.jump-row .button { pointer-events: auto; box-shadow: var(--shadow-2); }
.retry-row { display: flex; justify-content: flex-end; }
html.in-app .chat-close { display: none; }

/* ── 7. AI 고지 띠 · AI 답변 표시 (2026-09-27 · AI 기본법 제31조) ─────────────── */
/*
  .ai-band    ① 사전 고지 — 대화 칸 첫머리의 띠. 평소에는 대화 칸 맨 위에 붙어 있어(sticky) 머리 바로 아래에 늘 보이고,
              대화는 그 밑으로 흐른다. 글씨는 본문 크기 · 가장 진한 글자색 · 옅은 바탕(밑으로 흐르는 말풍선을 가린다) · 아래 가는 선.
              글은 줄이지 않는다(말줄임 없음 · 팀장 지시 2026-09-27).
  html.chat-tight .ai-band  대화 칸이 모자랄 때만 대화와 함께 흐른다(chat.mjs placeBand · chatView.mjs bandPlacement).
  .ai-mark    ② AI 가 만든 답의 말풍선 아래 시각 줄 앞 "AI 답변"(사장님 확정 2026-09-27 저녁판 라-1).
*/
.ai-band { position: sticky; top: var(--zero); z-index: var(--one); padding-block: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-text-strong); font-size: var(--font-size-body); line-height: var(--line-height-section); }
html.chat-tight .ai-band { position: static; }
.ai-mark { color: var(--color-text); font-weight: var(--font-weight-medium); }

/* ── 8. 처음 열었을 때 입력줄에 반쯤 걸린 것 덮기 (실기 점검 W-7 · 2026-09-27) ─────────────── */
/* dockGuard.mjs 가 그때만 입력줄 바로 위를 흰 바탕으로 덮어 통째로 감춘다(--dock-veil · 덮은 자리를 누르면 아무 일도 없다). */
.dock { position: relative; }
.dock::before { content: ""; position: absolute; left: var(--zero); right: var(--zero); bottom: calc(var(--full) + var(--border-width)); height: var(--dock-veil, var(--zero)); background: var(--color-bg); }

/* ── 9. 좁은 폭 + 큰 글씨 — 말풍선을 줄 끝까지 (2026-10-01 W48 · 사장님 절대 규칙 — 상위 CLAUDE.md §6-1 어절) ─────────────── */
/*
  대화 칸(.chat-log 의 안쪽 폭)이 본문 글자 8자(8em)보다 좁을 때만 말풍선을 줄 끝까지 넓힌다 — 320px 글자 200% 에서
  확정 첫 인사 "에코114입니다."가 갈리지 않게. 기준 8em 은 조건이라 변수(var)를 쓸 수 없다(앱 상담 기록 상세 말풍선과 같은 기준 · 개발문서 §8-4).
*/
.chat-log { container-type: inline-size; }
@container (max-width: 8em) { .msg { max-width: var(--full); } }