/* 톡톡 말풍선 — 고객 1:1 채팅 UI.
   시설정보(reservation) · 예약확인(res) · 톡톡(talk) 세 화면이 같이 쓴다.

   front.css 에 있었는데 그 파일은 $USE_FRONT_CSS 를 켠 화면만 읽는다.
   예약확인은 그것을 안 켜서 **대화 UI 가 통째로 맨몸으로 그려졌다** — 말풍선도
   입력창도 없이 글자만 흘렀다. 로그인이 붙기 전에는 그 자리에 로그인 버튼만
   떠서 아무도 몰랐다.

   쓰는 화면이 셋이고 그중 하나가 front.css 를 안 읽으므로, 여기가 맞는 자리다.
   (같은 이유로 로그인 버튼은 base.css 로 옮겼다.) */

/* ---------- 톡톡 (호스트 1:1 채팅) ---------- */
.talk-head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }

.talk-head__avatar {
  width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 15px; font-weight: 800;
}

.talk-head__name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.3px; }

.talk-head__sub { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; letter-spacing: -0.2px; }

/* 말풍선 기본 규칙. `.talk-msg.host` 같은 변형만 남고 **기본이 통째로 빠져
   있었다** — 그래서 로그인이 붙는 날 말풍선이 16px 검정 글자로, 정렬도 폭
   제한도 없이 열리게 돼 있었다. 값은 목업(talk1.html:390~421) 그대로다. */
.talk-msgs { display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; flex: 1; overflow-y: auto; min-height: 0; background: var(--bg); }
.talk-msg { display: flex; flex-direction: column; max-width: 80%; }
.talk-msg__bubble {
  padding: 10px 13px; font-size: 13.5px; line-height: 1.6;
  letter-spacing: -0.2px; white-space: pre-line; word-break: break-word;
}
.talk-msg__time { font-size: 10.5px; color: var(--text-mute); margin-top: 4px; padding: 0 2px; }
.talk-empty { padding: 28px 14px; text-align: center; font-size: 13px; color: var(--text-mute); }

/* 입력바 */
.talkbar {
  border-top: 1px solid var(--line-soft); background: #fff;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 8px; align-items: center;
}
.talkbar__input {
  flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line);
  color: var(--text); font: inherit; font-size: 14px; padding: 11px 15px;
  border-radius: 999px; outline: none; letter-spacing: -0.2px;
}
.talkbar__input::placeholder { color: var(--text-mute); }
.talkbar__input:focus { border-color: rgba(0,0,0,0.35); }
.talkbar__send {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 999px; border: 0;
  cursor: pointer; background: #1A1C20; color: #fff; display: grid; place-items: center;
  transition: background-color .12s;
}
.talkbar__send:hover { background: #33363E; }
.talkbar__send svg { width: 18px; height: 18px; }
/* 사진 보내기 — 전송 버튼보다 한 단계 약하게. 둘이 같은 무게면 어느 쪽이
   '보내기' 인지 한 번 더 보게 된다. */
.talkbar__photo {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--text-dim);
  cursor: pointer; display: grid; place-items: center; transition: border-color .12s, color .12s;
}
.talkbar__photo:hover { border-color: rgba(0,0,0,0.35); color: var(--text); }
.talkbar__photo:disabled { opacity: .45; cursor: default; }
.talkbar__photo svg { width: 18px; height: 18px; }

/* 사진 말풍선. 세로로 긴 폰 사진이 대화창을 통째로 덮지 않게 높이를 묶는다. */
.talk-msg__img { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-soft); }
.talk-msg__img img { display: block; max-width: 220px; max-height: 280px; width: auto; height: auto; }
.talk-msg__img + .talk-msg__bubble { margin-top: 4px; }

.talk-msg.host { align-self: flex-start; align-items: flex-start; }

.talk-msg.me { align-self: flex-end; align-items: flex-end; }

.talk-msg.host .talk-msg__bubble { background: var(--surface); border: 1px solid var(--line-soft); color: var(--text); border-radius: 4px 14px 14px 14px; }

.talk-msg.me .talk-msg__bubble { background: #1A1C20; color: #fff; border-radius: 14px 4px 14px 14px; }

/* ---------- 톡톡 플로팅 위젯 ---------- */
.chatw__launcher {
  position: fixed; right: 20px; bottom: 96px; z-index: 60;
  display: flex; align-items: center; gap: 13px; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 24px 12px 12px; cursor: pointer; font: inherit;
  box-shadow: 0 8px 28px rgba(20,24,31,0.18);
  transition: border-color .12s, box-shadow .12s;
}

.chatw__launcher:hover { border-color: var(--yellow); box-shadow: 0 10px 34px rgba(20,24,31,0.24); }

.chatw__avatar {
  position: relative; width: 52px; height: 52px; border-radius: 999px; flex-shrink: 0;
  background: var(--yellow); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 19px; overflow: hidden;
}

.chatw__greet { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; letter-spacing: -0.2px; color: var(--text-dim); }

.chatw__greet b { font-size: 15px; color: var(--text); letter-spacing: -0.3px; }

.chatw__panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 61;
  width: 384px; max-width: calc(100vw - 24px);
  height: 580px; max-height: calc(100vh - 60px);
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 48px rgba(20,24,31,0.24);
  display: flex; flex-direction: column; overflow: hidden;
}

.chatw__panel[hidden] { display: none; }

/* 대화 UI 를 걷어내 안내 한 줄만 남았다. 고정 높이를 그대로 두면 빈 상자가 된다. */
.chatw__panel:has(.talk-blocked) { height: auto; }

.chatw__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line-soft); }

.chatw__close {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: 0;
  background: transparent; color: var(--text-mute); cursor: pointer; font-size: 14px;
}

.chatw__close:hover { background: var(--surface-2); color: var(--text); }

@media (max-width: 640px) {
  .chatw__panel { right: 10px; left: 10px; width: auto; bottom: 10px; height: 76vh; }
  .chatw__launcher { right: 14px; bottom: 96px; }
}


/* 톡톡 준비 안내 — 대화 UI 자리에 들어간다 */
.talk-blocked {
  margin: 0; padding: 16px 14px; font-size: 13px; line-height: 1.7; letter-spacing: -0.2px;
  color: var(--text-dim); background: var(--surface); border-top: 1px solid var(--line-soft);
}

.talk-blocked__t { margin: 0 0 10px; }

.talk-blocked__t:last-child { margin-bottom: 0; }

.talk-blocked__t--bad { color: var(--red); font-weight: 600; }

.talk-blocked b { color: var(--text); font-weight: 700; }
/* 급한 문의 전화 링크용이다. 버튼까지 잡지 않게 빼 둔다 — `.talk-blocked a`
   는 특이도가 (0,1,1) 이라 `.btn-kakao-login`(0,1,0)을 이긴다. 그래서 카카오
   버튼 글자가 규정색이 아니라 이 초록으로 나오고 있었다. 색을 고쳐도 안 바뀌어
   한참 다른 데를 보게 되는 종류다. */
.talk-blocked a:not(.btn-kakao-login):not(.btn-phone-login) { color: #0E7568; font-weight: 700; }


/* 말풍선 머리말의 '누구로 들어와 있는지 + 나가는 길'.
   로그아웃은 링크가 아니라 **폼**이다 — GET 한 줄로 나가지게 두면 남이 올린
   이미지나 링크 하나로 로그아웃시킬 수 있다(www/kakao-logout.php 주석). */
.talk-head__sub { display: flex; align-items: center; gap: 8px; min-width: 0; }

.talk-head__out { margin: 0; flex-shrink: 0; }

.talk-head__out button {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: transparent; border: 0; padding: 0;
  font: inherit; font-size: inherit; color: var(--text-mute);
  text-decoration: underline; text-underline-offset: 2px;
}

.talk-head__out button:hover { color: var(--text-dim); }

/* 톡톡 안내 — 상담 자동 종료 예고와 종료 알림. 누구의 말도 아니라서 가운데
   한 줄이다. 말풍선 색을 쓰면 호스트가 보낸 것으로 읽힌다. */
.talk-sys { display: flex; justify-content: center; }
.talk-sys span {
  max-width: 86%; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  font-size: 11.5px; line-height: 1.5; color: var(--text-mute); text-align: center;
}