/* ============================================================
   후후페이 — 챗봇 팝업 + 실시간 채팅 페이지 스타일
   Ref: docs/02_DESIGN.md §4
   ============================================================ */

/* ── Chatbot Popup ── */
.chatbot-popup {
  position: fixed;
  bottom: 80px;
  right: var(--space-6);
  width: min(400px, 92vw);
  height: 560px;
  background: #F3F7FD;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(28,43,74,0.18), 0 4px 16px rgba(28,43,74,0.08);
  display: flex;
  flex-direction: column;
  z-index: calc(var(--z-fab) - 1);
  overflow: hidden;
  animation: popupIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.chatbot-popup.hidden { display: none; }

@keyframes popupIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); transform-origin: bottom right; }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Mobile: full screen */
@media (max-width: 767px) {
  .chatbot-popup {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    bottom: 0;
    right: 0;
    animation: mobileSlideUp 0.3s ease;
  }

  @keyframes mobileSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .chatbot-header {
    padding-top: max(var(--space-4), env(safe-area-inset-top, 0px));
  }

  .chatbot-input-area {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--space-3));
  }
}

/* ── Chatbot Header ── */
.chatbot-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, #F3F7FD 0%, #EEF4FF 100%);
  border-bottom: 1px solid rgba(56, 131, 255, 0.2);
  flex-shrink: 0;
}

.chatbot-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
  display: block;
}

.chatbot-avatar--fallback {
  background: linear-gradient(135deg, var(--color-primary), #7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.chatbot-info { flex: 1; min-width: 0; }

.chatbot-name {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
  color: #3883FF;
}

.chatbot-status {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatbot-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
  flex-shrink: 0;
}
.chatbot-close:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
.chatbot-close svg { width: 16px; height: 16px; }

/* ── Chatbot Messages Area ── */
.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #F3F7FD;
  /* scroll-behavior: auto (기본값) — iOS Safari에서 JS scrollTop 직접 조작과 충돌 방지 */
  overscroll-behavior: contain;      /* 바운스 스크롤 부모 전파 방지 */
  -webkit-overflow-scrolling: touch; /* iOS 12 이하 관성 스크롤 */
}

/* Scrollbar */
.chatbot-messages::-webkit-scrollbar { width: 4px; }
.chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.chatbot-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Message Bubbles ── */
.msg-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  margin-bottom: var(--space-2, 8px); /* gap fallback for iOS 14- */
}

.msg-row.user { justify-content: flex-end; }

/* 버블+시간 래퍼 — flex-item으로 남은 공간 확보, max-width% 기준점 명확화 */
.msg-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.msg-row.user .msg-body { align-items: flex-end; }
.msg-row.bot  .msg-body { align-items: flex-start; }

.msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 4px;
  display: block;
}

.msg-bubble {
  max-width: 80%;
  padding: 10px 14px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: none;
  min-width: 80px;
  white-space: normal;
}

/* 봇 버블 */
.msg-row.bot .msg-bubble {
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: none;
  background: #FFFFFF;
  border: 1px solid rgba(56, 131, 255, 0.25);
  border-radius: 4px 16px 16px 16px;
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(56, 131, 255, 0.12);
}

/* 봇 버블 내 <p> 태그 기본 margin 제거 */
.msg-row.bot .msg-bubble p {
  margin: 0;
}

.msg-row.user .msg-bubble {
  background: #EEF4FF;
  border-radius: 16px 16px 4px 16px;
  color: #1C2B4A;
  border: 1px solid rgba(56, 131, 255, 0.3);
}

/* 선택지 버블: 텍스트 줄바꿈 허용 */
.msg-row.user .msg-bubble.msg-choice {
  max-width: 90%;
  word-break: break-word;
}

/* 실제 텍스트가 담긴 <p>에 줄바꿈 적용 */
.msg-row.user .msg-bubble.msg-choice p {
  word-break: break-word;
  white-space: normal;
  margin: 0;
}

.msg-time {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: right;
}

.msg-row.user .msg-time { text-align: right; }
.msg-row.bot  .msg-time { text-align: left; margin-left: 36px; }

/* ── Typing Indicator ── */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.typing-dots {
  display: flex;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-radius: 4px 16px 16px 16px;
}

.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3883FF;
  animation: typingDot 1.4s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* ── Choice Buttons (Bot Options) ── */
.choices-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 0 var(--space-2) 36px;
}

.choice-btn {
  border: 1.5px solid rgba(56, 131, 255, 0.5);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: #3883FF;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.choice-btn:hover {
  background: rgba(56, 131, 255, 0.1);
  border-color: #3883FF;
  color: #1C2B4A;
}

.choice-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── OTP Timer ── */
.otp-timer {
  font-size: var(--font-size-xs);
  color: #B45309;
  font-weight: var(--font-weight-semibold);
  font-family: 'Inter', monospace;
  padding: var(--space-2) 0 0 36px;
}

.otp-timer.expired { color: #DC2626; }

/* ── Phone Change Link ── */
.phone-change-wrap {
  padding: var(--space-1) 0 var(--space-2) 36px;
}

.phone-change-link {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color var(--transition);
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.phone-change-link:hover {
  color: var(--text-secondary);
}

.phone-change-link:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 3px;
  border-radius: 2px;
  color: var(--text-secondary);
}

.phone-change-link:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: none;
}

/* ── Chatbot Input Area ── */
.chatbot-input-area {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  flex-shrink: 0;
}

.chatbot-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  color: var(--text-primary);
  font-size: 16px; /* iOS 자동줌 방지: 16px 미만이면 포커스 시 페이지 줌 발생 */
  outline: none;
  transition: border-color var(--transition);
  -webkit-appearance: none; /* iOS 기본 스타일 제거 */
  appearance: none;
}
.chatbot-input::placeholder { color: var(--text-muted); }
.chatbot-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(56, 131, 255, 0.15); }
.chatbot-input:disabled { opacity: 0.4; cursor: not-allowed; }

.chatbot-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
  touch-action: manipulation; /* 300ms 탭 지연 제거 */
}
.chatbot-send:hover { background: var(--color-primary-dark); }
.chatbot-send:active { transform: scale(0.9); }
.chatbot-send:disabled { opacity: 0.4; cursor: not-allowed; }
.chatbot-send svg { width: 16px; height: 16px; }

/* ================================================================
   Live Chat Page (chat.html)
   ================================================================ */

.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;          /* fallback */
  height: 100dvh;         /* iOS 15.4+ / interactive-widget=resizes-content 시 키보드 포함 자동 조정 */
  overflow: hidden;       /* flex children이 부모를 넘지 않도록 */
  background: var(--bg-base);
  position: relative;
  top: 0;
  width: 100%;
}

.chat-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  padding-top: max(var(--space-4), env(safe-area-inset-top, 0px));
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.chat-page-back {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition);
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.chat-page-back:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.chat-page-back svg { width: 20px; height: 20px; }

.chat-page-title {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

/* ── Live Chat Messages ── */
.live-chat-messages {
  flex: 1;
  min-height: 0;          /* flex 자식이 content 크기 이하로 줄어들 수 있도록 */
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overscroll-behavior: contain;      /* 바운스 스크롤 부모 전파 방지 */
  touch-action: pan-y;               /* 수직 터치 스크롤만 허용 — 가로 제스처 간섭 방지 */
  scroll-behavior: auto;             /* JS scrollTop 직접 조작과 smooth 충돌 방지 */
}
.live-chat-messages::-webkit-scrollbar { width: 4px; }
.live-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.live-msg {
  display: flex;
  gap: var(--space-3);
}

.live-msg.customer { justify-content: flex-end; }
.live-msg.system   { justify-content: center; }

.live-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
  align-self: flex-start;
  display: block;
}

/* 메시지 버블 래퍼 — flex item으로 올바른 너비 확보 */
.live-msg-body {
  display: flex;
  flex-direction: column;
  min-width: 0;   /* flex shrink 시 overflow 방지 */
  max-width: min(560px, 70%); /* 부모 .live-msg 대비 70%, 최대 560px */
}

@media (max-width: 767px) {
  .live-msg-body { max-width: 75%; }
}

@media (max-width: 480px) {
  .live-msg-body { max-width: 85%; }
}

.live-msg-bubble {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap; /* 줄바꿈·공백 보존 */
  min-width: 60px;       /* 짧은 텍스트가 한 글자씩 세로로 쌓이는 버그 방지 */
}

.live-msg.operator .live-msg-bubble {
  background: var(--color-operator-bubble);
  color: #fff;
  border-radius: 4px 18px 18px 18px;
}

.live-msg.customer .live-msg-bubble {
  background: var(--color-customer-bubble);
  color: var(--color-customer-text);
  border-radius: 18px 18px 4px 18px;
}

.live-msg.system .live-msg-bubble {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-4);
  max-width: 80%;
}

.live-msg-meta {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 4px;
}

.live-msg.customer .live-msg-meta { text-align: right; }
.live-msg.operator .live-msg-meta { margin-left: 8px; }

.live-msg-sender-name {
  font-size: 0.6875rem;
  color: #aaa;
  margin-bottom: 3px;
}
.live-msg.customer .live-msg-sender-name { text-align: right; }

/* ── Live Chat Input ── */
.live-chat-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  padding: var(--space-4) var(--space-6);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--space-4)); /* iOS 홈 인디케이터 영역 확보 */
  flex-shrink: 0;
}

.live-chat-input-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}

.live-chat-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  font-size: 16px; /* iOS 자동줌 방지: 16px 미만이면 포커스 시 페이지 줌 발생 */
  outline: none;
  resize: none;
  max-height: 120px;
  min-height: 44px;
  line-height: 1.5;
  transition: border-color var(--transition);
  -webkit-appearance: none; /* iOS 기본 스타일 제거 */
  appearance: none;
}
.live-chat-input:focus { border-color: var(--color-primary); }
.live-chat-input:disabled { opacity: 0.4; cursor: not-allowed; }
.live-chat-input::placeholder { color: var(--text-muted); }

.live-chat-send {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
  border: none;
  cursor: pointer;
  touch-action: manipulation; /* 300ms 탭 지연 제거 */
}
.live-chat-send:hover { background: var(--color-primary-dark); }
.live-chat-send:active { transform: scale(0.93); }
.live-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.live-chat-send svg { width: 18px; height: 18px; }

/* ── Chat Closed Banner ── */
.chat-closed-banner {
  text-align: center;
  padding: var(--space-6);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin: var(--space-6);
}

.chat-closed-banner h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.chat-closed-banner p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ── Fatal Error Overlay (인증 실패 / 세션 만료 / 채팅방 없음) ── */
.chat-fatal-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--bg-base);
  z-index: 50;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-fatal-card {
  width: 100%;
  max-width: 340px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  border: 1px solid var(--border);
}

.chat-fatal-card--warning {
  border-top: 4px solid #F59E0B;
}

.chat-fatal-card--danger {
  border-top: 4px solid var(--color-danger);
}

.chat-fatal-card--network {
  border-top: 4px solid var(--text-muted);
}

.chat-fatal-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: var(--space-4);
  display: block;
}

.chat-fatal-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.chat-fatal-desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.chat-fatal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition);
}

.chat-fatal-btn:hover,
.chat-fatal-btn:focus-visible {
  background: var(--color-primary-dark);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── 타이핑 인디케이터 (실시간 채팅 / 관리자 공통) ── */
.live-msg.typing-indicator .live-msg-bubble,
.admin-msg.typing-indicator .admin-msg-bubble {
  display: flex;
  align-items: center;
  min-width: 60px;
  padding: var(--space-3) var(--space-4);
}

.typing-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3883FF;
  animation: typingBounce 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* 스크린리더 전용 텍스트 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── 스마트 스크롤: 새 메시지 버튼 ── */
.new-msg-btn {
  position: absolute;
  bottom: calc(var(--space-4) + 80px); /* 입력 영역 위 */
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,0.4));
  z-index: 10;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.new-msg-btn:hover {
  background: var(--color-primary-dark);
  transform: translateX(-50%) translateY(-2px);
}

.new-msg-btn.hidden {
  display: none;
}

/* chat-page는 relative이어야 .new-msg-btn 절대 위치 적용 */
.chat-page {
  position: relative;
}

/* ── 날짜 구분선 ── */
.date-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.date-separator::before,
.date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* ── 전송 실패 ── */
.live-msg.failed .live-msg-bubble { border: 1px solid var(--color-danger, #ef4444); opacity: 0.8; }
.msg-retry-btn {
  display: block;
  margin-top: 4px;
  font-size: 0.6875rem;
  color: var(--color-danger, #ef4444);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ── 읽음 표시 ── */
.read-receipt {
  display: block;
  font-size: 0.625rem;
  color: var(--color-primary-light);
  text-align: right;
  margin-top: 2px;
}

/* ================================================================
   Phase 7.1 — 파일 첨부 UI
   ================================================================ */

/* ── 파일 첨부 버튼 ── */
.attach-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #94a3b8);
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
  flex-shrink: 0;
  position: relative; /* tap target pseudo-element 기준 */
}
.attach-btn:hover:not(:disabled) { color: var(--color-primary, #6366f1); }
.attach-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* tap target 확장 — 시각 크기 유지, 터치 영역만 44px로 확장 */
.attach-btn::after {
  content: '';
  position: absolute;
  inset: -3px; /* 38px → 44px */
}
@media (any-pointer: coarse) {
  .attach-btn::after { inset: -5px; } /* 터치 디바이스: 48px */
}

/* 드래그 오버 표시 */
.live-chat-messages.drag-over {
  outline: 2px dashed var(--color-primary, #6366f1);
  outline-offset: -4px;
  background: rgba(99, 102, 241, 0.05);
}

/* ── 첨부 미리보기 ── */
.attach-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-top: 1px solid var(--border-subtle, #2d2d3f);
  background: var(--bg-surface, #1e1e2e);
}

.preview-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-base, #0f0f1a);
  border: 1px solid var(--border-subtle, #2d2d3f);
  border-radius: 8px;
  padding: 6px 8px;
  max-width: 200px;
}

.preview-item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.preview-doc-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}

.preview-name {
  font-size: 0.75rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

.preview-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 1rem;
  line-height: 1;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.preview-remove:hover { color: var(--color-danger, #ef4444); }

/* ── 메시지 버블 내 파일 렌더링 ── */
.msg-file {
  margin-top: 4px;
}

.msg-image-wrap {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  max-width: 240px;
  display: block;
}
.msg-image-wrap img {
  width: 100%;
  display: block;
  border-radius: 8px;
}

.msg-doc-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle, #2d2d3f);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-width: 180px;
  max-width: 260px;
  transition: background 0.15s;
}
.msg-doc-wrap:hover { background: rgba(255,255,255,0.09); }

.msg-doc-icon { font-size: 1.5rem; flex-shrink: 0; }
.msg-doc-info { flex: 1; overflow: hidden; }

.msg-doc-name {
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.msg-doc-size {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.msg-video-wrap {
  max-width: 300px;
  border-radius: 8px;
  overflow: hidden;
}
.msg-video-wrap video {
  width: 100%;
  border-radius: 8px;
  max-height: 200px;
  display: block;
}

/* ── 라이트박스 ── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lightboxIn 0.15s ease;
}

@keyframes lightboxIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.35); }

/* ── 비활성 경고 ── */
.inactivity-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--warning-bg, #fef9c3);
  border: 1px solid var(--warning-border, #fde047);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 8px 16px;
  font-size: 0.8125rem;
  color: #1a1a2e; /* 노란 배경 위 가독성을 위해 어두운 색 고정 (--text-primary는 #F1F5F9로 흰색이라 안 보임) */
}
.inactivity-warning button {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid var(--warning-border, #fde047);
  border-radius: var(--radius-sm);
  background: white;
  color: #1a1a2e; /* 흰 버튼 위 텍스트도 어두운 색 고정 */
  cursor: pointer;
  font-size: 0.75rem;
}

/* ── 사기방지 경고 카드 ── */
.warning-card {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md, 8px);
  padding: 12px 16px;
  margin-left: 36px;
  margin-bottom: 8px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #ef4444;
}
.warning-card-title {
  font-weight: 700;
  margin-bottom: 4px;
}

/* ── 수수료 카드 ── */
.fee-card {
  background: var(--bg-elevated, #1e2337);
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: var(--radius-md, 8px);
  padding: 12px 16px;
  margin-left: 36px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fee-card-title {
  font-weight: 700;
  font-size: 0.8125rem;
  margin-bottom: 6px;
  color: var(--text-primary, #f1f5f9);
}
.fee-card-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
  font-size: 0.75rem;
}
.fee-card-row:last-of-type { border-bottom: none; }
.fee-label { color: var(--text-secondary, #94a3b8); }
.fee-rate  { color: #818cf8; font-weight: 700; font-family: 'Inter', monospace; }
.fee-card-note { font-size: 0.625rem; color: var(--text-muted, #64748b); margin-top: 8px; }

/* ── 양식 템플릿 카드 ── */
.form-template {
  background: var(--bg-elevated, #1e2337);
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: var(--radius-md, 8px);
  padding: 12px 16px;
  margin-left: 36px;
  margin-bottom: 8px;
}
.form-template-text {
  font-family: 'Inter', monospace;
  font-size: 0.75rem;
  color: var(--text-primary, #f1f5f9);
  white-space: pre-wrap;
  margin: 0 0 8px 0;
  line-height: 1.6;
}
.form-copy-btn {
  background: var(--color-primary, #4f46e5);
  border: none;
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
}
.form-copy-btn:hover { background: #4338ca; }

/* ── 챗봇 textarea (다중줄) ── */
.chatbot-input {
  resize: none;
  max-height: 120px;
  min-height: 36px;
  line-height: 1.4;
  overflow-y: auto;
  font-family: inherit;
}

/* ── Chatbot Tabs ── */
.chatbot-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-primary);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.chatbot-tab {
  flex: 1;
  padding: var(--space-2) var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.chatbot-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}
.chatbot-tab:hover:not(.active) {
  color: var(--text-primary);
}

/* ── History Panel ── */
.chatbot-history {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.chatbot-history.hidden { display: none; }

/* chatbot-messages 탭 전환 시 숨김 처리 */
.chatbot-messages.hidden { display: none; }
.chatbot-input-area.hidden { display: none; }

.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.history-item {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid var(--border-primary);
  transition: border-color 0.15s;
}
.history-item:hover {
  border-color: var(--color-primary);
}
.history-item-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}
.history-item-meta {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
.history-item-preview {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.history-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  padding: var(--space-6);
}
.history-back-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-2);
}
.history-room-header {
  font-weight: 600;
  font-size: var(--font-size-sm);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-primary);
  margin-bottom: var(--space-3);
}
.history-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  flex: 1;
  max-height: 340px; /* closed 뷰어 무한스크롤 — IntersectionObserver root 동작 필수 */
}
.history-bubble {
  max-width: 80%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.history-bubble-op {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.history-bubble-cust {
  align-self: flex-start;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-radius: 4px 16px 16px 16px;
}
.history-bubble-system {
  align-self: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-4);
  max-width: 80%;
  text-align: center;
}

/* ── 이어서 대화하기 버튼 ── */
.history-resume-btn {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  margin-bottom: var(--space-3);
  transition: opacity 0.15s;
}
.history-resume-btn:hover { opacity: 0.85; }

/* ── 진행중 배지 (룸 목록) ── */
.history-active-badge {
  font-size: 0.625rem;
  background: var(--color-primary, #3883FF);
  color: #fff;
  padding: 2px 6px;
  border-radius: var(--radius-full, 9999px);
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* ================================================================
   FEAT-10: 챗봇 팝업 모바일 최적화 — 480px 이하
   ================================================================ */

@media (max-width: 480px) {
  /* ── 메시지 시간: 11px 고정 ── */
  .msg-time {
    font-size: 0.6875rem;
  }

  /* ── 챗봇 입력창 padding 축소 ── */
  .chatbot-input-area {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }

  .chatbot-input {
    padding: var(--space-2) var(--space-3);
    font-size: 16px; /* iOS 자동줌 방지 유지 */
  }

  /* ── 챗봇 말풍선 모바일 최적화 ── */
  .msg-bubble {
    max-width: 90%;
    min-width: 80px;
  }

  /* ── 채팅 메시지 영역 padding 축소 ── */
  .chatbot-messages {
    padding: var(--space-3) var(--space-3);
  }

  /* ── live-chat 입력창 padding 축소 ── */
  .live-chat-footer {
    padding: var(--space-3) var(--space-4);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--space-3));
  }

  /* ── live-chat 메시지 영역 padding 축소 ── */
  .live-chat-messages {
    padding: var(--space-4);
  }

  .phone-change-wrap {
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
  }

  .phone-change-link {
    min-height: 44px;
    font-size: var(--font-size-sm);
  }
}

/* ── 무한스크롤 sentinel / 마커 ── */
.chat-history-sentinel {
  height: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
.chat-history-sentinel.loading {
  height: 32px;
  color: var(--text-muted, #9ca3af);
  font-size: 0.75rem;
}
.chat-history-sentinel.loading::after {
  content: '이전 메시지 불러오는 중...';
}
.chat-history-retry {
  margin: 8px auto;
  display: block;
  padding: 6px 16px;
  font-size: 0.75rem;
  color: var(--color-primary, #7c3aed);
  background: transparent;
  border: 1px solid var(--color-primary, #7c3aed);
  border-radius: 16px;
  cursor: pointer;
}
.chat-history-retry:hover { opacity: 0.8; }
.chat-history-start {
  text-align: center;
  color: var(--text-muted, #9ca3af);
  font-size: 0.75rem;
  padding: 8px 0;
  margin: 4px 0;
}

/* ── FEAT-11: 이전 대화 재진입 카드 UI ── */
.room-card {
  position: relative;
  padding-left: 12px;
  transition: background 0.15s;
}
.room-card--active .room-card__indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-primary, #7c3aed);
  border-radius: 2px;
}
.room-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.room-card__badge {
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.room-card__badge--active  { background: #ede9fe; color: #6d28d9; }
.room-card__badge--waiting { background: #fef3c7; color: #92400e; }
.room-card__badge--closed  { background: #e5e7eb; color: #4b5563; }

/* ── 종료된 상담 배너 ── */
.history-closed-banner {
  background: #f3f4f6;
  color: #4b5563;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.8125rem;
  margin: 8px 0 12px;
  text-align: center;
}

/* ================================================================
   Chatbot Reselect & Reset
   ================================================================ */

/* ── 다시 선택 버튼 ── */
.reselect-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-weight: 400;
  margin-top: 4px;
}
.reselect-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.8);
}

/* ── 초기화 버튼 (헤더) ── */
.chatbot-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.chatbot-reset-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
}

/* ── 초기화 확인 오버레이 ── */
.reset-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: lightboxIn 0.15s ease;
}

.reset-confirm-box {
  background: var(--bg-surface, #1e1e2e);
  border: 1px solid var(--border-primary, #2d2d3f);
  border-radius: 12px;
  padding: 24px 20px 20px;
  max-width: 280px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.reset-confirm-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #f1f5f9);
  margin: 0 0 8px;
}

.reset-confirm-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary, #94a3b8);
  margin: 0 0 20px;
}

.reset-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.reset-confirm-cancel,
.reset-confirm-ok {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}

.reset-confirm-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #94a3b8);
}
.reset-confirm-cancel:hover { opacity: 0.8; }

.reset-confirm-ok {
  background: #ef4444;
  color: #fff;
}
.reset-confirm-ok:hover { background: #dc2626; }

.chat-link {
  color: #22d3ee;
  text-decoration: underline;
  cursor: pointer;
  word-break: break-all;
}
.chat-link:hover { color: #67e8f9; }

/* 회색 고객 버블 위에서는 딥 블루 링크 */
.live-msg.customer .live-msg-bubble .chat-link { color: #1d4ed8; }
.live-msg.customer .live-msg-bubble .chat-link:hover { color: #1e40af; }

/* 그린 운영자 버블 위에서는 밝은 링크 */
.live-msg.operator .live-msg-bubble .chat-link { color: #d1fae5; }
.live-msg.operator .live-msg-bubble .chat-link:hover { color: #fff; }

/* ─────────────────────────────────────────────
   Phone Auth Card — 이전 대화 OTP 인증 폼
   ───────────────────────────────────────────── */
.phone-auth-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: phoneAuthIn 0.2s ease;
}

@keyframes phoneAuthIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.phone-auth-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.phone-auth-card__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.phone-auth-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0;
}

.phone-auth-card__desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.phone-auth-card__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-1) 0;
}

.phone-auth-card__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.phone-auth-card__input-row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.phone-auth-card__input-row .input {
  flex: 1;
  min-height: 44px;
}

.phone-auth-card__input-row .btn {
  white-space: nowrap;
  min-height: 44px;
}

.phone-auth-card__timer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-1);
}

/* otp-timer 패딩 override — 카드 내에서는 indent 불필요 */
.phone-auth-card .otp-timer {
  padding: 0;
}

.phone-auth-card__error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  padding: var(--space-2) var(--space-3);
  line-height: 1.4;
}

/* shake 애니메이션 — 에러 강조 */
.phone-auth-card__error.shake {
  animation: phoneAuthShake 0.32s ease;
}
@keyframes phoneAuthShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  50%      { transform: translateX(4px); }
  75%      { transform: translateX(-2px); }
}

/* 빈 상태 (NO_HISTORY) */
.phone-auth-card--empty {
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.phone-auth-card__big-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: var(--space-2);
}

/* 모바일 — 입력+버튼 세로 스택 */
@media (max-width: 480px) {
  .phone-auth-card__input-row {
    flex-direction: column;
  }
  .phone-auth-card__input-row .btn {
    width: 100%;
  }
}

/* 접근성 — reduced motion */
@media (prefers-reduced-motion: reduce) {
  .phone-auth-card,
  .phone-auth-card__error.shake {
    animation-duration: 0.01s !important;
  }
}

/* ── 이전 룸 구분선 ── */
.prev-room-sep {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  margin: 0.75rem 0;
}

.prev-room-sep::before,
.prev-room-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(148, 163, 184, 0.3);
}

.prev-room-sep span {
  font-size: 0.7rem;
  color: #64748b;
  white-space: nowrap;
  background: #0f1117;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

/* ── 이전 룸 메시지 (약간 흐리게) ── */
.live-msg.historical {
  opacity: 0.7;
}

/* ── 이어서 채팅하기 (offline 방 CTA) ── */
.chat-history-reopen-footer {
  padding: 16px;
  text-align: center;
  border-top: 1px solid var(--color-border, #e5e7eb);
}

.btn-reopen {
  display: inline-block;
  padding: 12px 32px;
  background: var(--color-primary, #2563eb);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-reopen:hover {
  background: var(--color-primary-dark, #1d4ed8);
}

.btn-reopen:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── 태블릿 최적화 (iPad, 768~1024px) ─── */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 챗봇 팝업: 태블릿에서 너무 좁거나 넓지 않게 */
  .chatbot-popup {
    width: min(520px, 90vw);
    right: 24px;
    bottom: 24px;
  }

  /* 라이브 채팅 메시지 버블: 태블릿에서 60% 제한 */
  .live-msg-body {
    max-width: 60%;
  }

  /* 입력창 영역: 태블릿에서 좌우 여백 추가 */
  .live-chat-footer {
    padding-left: var(--space-8, 32px);
    padding-right: var(--space-8, 32px);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--space-4));
  }

  /* 채팅 헤더: 태블릿 여백 */
  .chat-page-header {
    padding-left: var(--space-8, 32px);
    padding-right: var(--space-8, 32px);
  }
}

/* iOS/터치 기기: hover 상태 stuck 방지 */
@media (hover: none) {
  button:hover,
  .choice-btn:hover,
  .chatbot-close:hover,
  .live-chat-send:hover,
  .chatbot-send:hover {
    background: revert;
    color: revert;
    opacity: revert;
    transform: revert;
  }
}

/* ================================================================
   갤러리 버튼 (헤더)
   ================================================================ */

.gallery-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  flex-shrink: 0;
  position: relative; /* tap target pseudo-element 기준 */
}
.gallery-btn:hover { color: var(--color-primary); background: rgba(56, 131, 255, 0.08); }

/* tap target 확장 — 34px → 44px */
.gallery-btn::after {
  content: '';
  position: absolute;
  inset: -5px;
}
@media (any-pointer: coarse) {
  .gallery-btn::after { inset: -7px; } /* 터치 디바이스: 48px */
}

/* iOS Safari format-detection 자동 감지 방어선 */
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
}

/* ================================================================
   갤러리 모달
   ================================================================ */

.gallery-modal {
  position: fixed;
  inset: 0;
  background: var(--bg-surface);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  animation: gallerySlideUp 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes gallerySlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gallery-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.gallery-header-title {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.gallery-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 6px;
  border-radius: var(--radius-sm);
  font-size: 1.375rem;
  line-height: 1;
  transition: color var(--transition);
}
.gallery-close-btn:hover { color: var(--text-primary); }

.gallery-grid {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
  overscroll-behavior: contain;
}
.gallery-grid::-webkit-scrollbar { width: 4px; }
.gallery-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

.gallery-date-header {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 12px 4px 6px;
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  z-index: 1;
}

.gallery-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}

.gallery-item {
  aspect-ratio: 1;
  cursor: pointer;
  overflow: hidden;
  background: var(--bg-elevated);
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.15s;
  display: block;
}

.gallery-item:hover img { opacity: 0.85; }

.gallery-item-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 4px 5px;
  background: linear-gradient(transparent, rgba(0,0,0,0.45));
  z-index: 2;
}

.gallery-item-action-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.15s;
  flex-shrink: 0;
}
.gallery-item-action-btn:hover { background: rgba(0,0,0,0.75); }
.gallery-item-action-btn--del:hover { background: rgba(220,38,38,0.8); }

.gallery-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.gallery-loading-spinner {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* ================================================================
   이미지 삭제 UX — img-bubble-wrapper + Undo Toast
   ================================================================ */

.img-bubble-wrapper {
  position: relative;
  display: inline-block;
}

.img-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1;
  transition: background 0.15s;
  z-index: 2;
}

.img-bubble-wrapper:hover .img-delete-btn { display: flex; }
.img-delete-btn:hover { background: rgba(220, 38, 38, 0.8); }

/* 삭제된 이미지 placeholder */
.img-deleted-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 80px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  border: 1px dashed var(--border-subtle);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Undo Toast */
.undo-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: #1C2B4A;
  color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9997;
  font-size: 0.875rem;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  animation: toastIn 0.2s ease;
}

.undo-toast-cancel {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.8125rem;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.undo-toast-cancel:hover { border-color: rgba(255, 255, 255, 0.8); }

.undo-toast-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  min-width: 14px;
  text-align: right;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ================================================================
   연속 메시지 그루핑 (Consecutive Message Grouping)
   ================================================================ */

/* 연속 메시지: 위 간격 축소 */
.msg-continuation {
  margin-top: 2px !important;
}

/* 연속 메시지: 아바타 자리만 차지하고 숨김 (레이아웃 유지) */
.msg-continuation .live-msg-avatar {
  visibility: hidden;
}

/* 연속 운영자 버블: 상단 좌측 코너 평탄화 (꼬리 없음) */
.msg-continuation.operator .live-msg-bubble {
  border-radius: 4px 18px 18px 4px;
}

/* 연속 고객 버블: 상단 우측 코너 평탄화 (꼬리 없음) */
.msg-continuation.customer .live-msg-bubble {
  border-radius: 18px 4px 4px 18px;
}

/* ── AnonymousBanner (익명 채팅 인증 안내) ── */
.anon-verify-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(245, 158, 11, 0.1);
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  font-size: var(--font-size-xs);
  color: #F59E0B;
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}

/* ── Auth Card (인증 카드 인라인) ── */
.auth-card {
  background: var(--surface-primary, #fff);
  border: 1.5px solid #6366f1;
  border-radius: 14px;
  padding: 14px 16px;
  max-width: 300px;
  box-shadow: 0 2px 8px rgba(99,102,241,0.10);
}
.auth-card__desc {
  font-size: 0.8125rem;
  color: var(--text-primary, #1a1a1a);
  line-height: 1.5;
  margin: 0 0 12px;
}
.auth-card__name-row {
  margin-bottom: 8px;
}
.auth-card__name-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--text-primary, #1a1a1a);
  background: var(--surface-primary, #fff);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.auth-card__name-input:focus { border-color: #6366f1; }
.auth-card__phone-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.auth-card__country {
  flex-shrink: 0;
  width: 64px;
  padding: 7px 4px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.8125rem;
  background: var(--surface-secondary, #f9f9f9);
  color: var(--text-primary, #1a1a1a);
  cursor: pointer;
}
.auth-card__phone-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--text-primary, #1a1a1a);
  background: var(--surface-primary, #fff);
  outline: none;
  transition: border-color 0.15s;
}
.auth-card__phone-input:focus { border-color: #6366f1; }
.auth-card__otp-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.auth-card__otp-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9375rem;
  letter-spacing: 3px;
  text-align: center;
  color: var(--text-primary, #1a1a1a);
  background: var(--surface-primary, #fff);
  outline: none;
  transition: border-color 0.15s;
}
.auth-card__otp-input:focus { border-color: #6366f1; }
.auth-card__hint {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0 0 8px;
}
.auth-card__save-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.auth-card__save-btn:hover:not(:disabled) { background: #4f46e5; }
.auth-card__save-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.auth-card__error {
  font-size: 0.75rem;
  color: #ef4444;
  margin: 0 0 6px;
}
.auth-card__done-msg {
  font-size: 0.8125rem;
  color: #3883FF;
  font-weight: 600;
  text-align: center;
  padding: 4px 0;
  margin: 0;
}
.auth-card--done { border-color: #3883FF; }

/* ================================================================
   디자인 개선 v2 — 그린 브랜드 현대화
   ================================================================ */

/* ── 채팅 헤더: 홈페이지와 동일한 따뜻한 아이보리+그린 그라디언트 ── */
.chat-page-header {
  background: linear-gradient(135deg, #F3F7FD 0%, #EEF4FF 100%);
  border-bottom: 1px solid rgba(56, 131, 255, 0.12);
}

.chat-page-title {
  color: #3883FF;
  letter-spacing: -0.02em;
}

/* ── 버블 텍스트 현대화 ── */
.live-msg-bubble {
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ── 운영자 버블: 미세 테두리 + shadow ── */
.live-msg.operator .live-msg-bubble {
  box-shadow: 0 1px 4px rgba(56, 131, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ── 고객 버블: 그린 hue + 미세 테두리 ── */
.live-msg.customer .live-msg-bubble {
  border: 1px solid rgba(56, 131, 255, 0.2);
}

/* ── 입력창 포커스: 그린 링 ── */
.live-chat-input:focus {
  border-color: #3883FF;
  box-shadow: 0 0 0 3px rgba(56, 131, 255, 0.15);
}

/* ── 전송 버튼: 텍스트 없을 때 회색 (JS와 연동) ── */
.live-chat-send.inactive {
  background: #D1D5DB;
}
.live-chat-send.inactive:hover {
  background: #D1D5DB;
  transform: none;
}

/* ── 대기 상태 카드 ── */
.waiting-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(56, 131, 255, 0.06);
  border-left: 3px solid #3883FF;
  border-radius: 0 12px 12px 0;
  padding: 14px 16px;
  margin: 8px 0 4px 0;
  animation: waitingFadeIn 0.3s ease;
}

@keyframes waitingFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.waiting-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #3883FF;
}

.waiting-card__dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.waiting-card__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3883FF;
  animation: waitingDot 1.4s infinite ease-in-out;
}
.waiting-card__dot:nth-child(2) { animation-delay: 0.2s; }
.waiting-card__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes waitingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.waiting-card__desc {
  font-size: 0.8125rem;
  color: #4A7A3D;
  margin: 0;
}

.waiting-card__sub {
  font-size: 0.75rem;
  color: #6B7280;
  margin: 0;
}

/* ── 보안 배지 ── */
.chat-security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.6875rem;
  color: #9CA3AF;
  padding: 4px 0 0;
  user-select: none;
}

.chat-security-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ================================================================
   디자인 개선 v3 — 온라인 도트 + 팝업 닫기 애니메이션 + 접근성
   ================================================================ */

/* 온라인 도트 애니메이션 */
@keyframes onlinePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.85); }
}
.chatbot-online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #3883FF;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  animation: onlinePulse 2s ease-in-out infinite;
}

/* 팝업 닫기 애니메이션 */
@keyframes popupOut {
  from { opacity: 1; transform: scale(1) translateY(0); transform-origin: bottom right; }
  to   { opacity: 0; transform: scale(0.92) translateY(12px); }
}
.chatbot-popup.closing {
  animation: popupOut 0.2s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

/* 모바일 safe-area */
@media (max-width: 767px) {
  .chatbot-input-area {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .chat-fab, .chatbot-popup, .msg-row, .choice-btn, .chatbot-online-dot, .typing-dot {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================================
   자동 안내 메시지 — 웰컴 버블
   ================================================================ */

.welcome-msg-wrap {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.welcome-msg-header {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}

.welcome-msg-sub {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  margin-bottom: 8px;
}

.welcome-msg-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 6px 0 10px;
}

.welcome-msg-intro {
  font-size: 0.875rem;
  color: #fff;
  line-height: 1.55;
  margin-bottom: 10px;
}

.welcome-msg-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.welcome-msg-item {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
}

.welcome-msg-note {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* === 디자인 개선 v3 (2026-05) === */
.chat-page-header {
  background: #FFFFFF;
  border-bottom: 1px solid #EBEBEB;
}
.chat-page {
  background: #F7F8FA;
}
.live-msg.operator .live-msg-bubble {
  background: #FFFFFF;
  color: #1A1A1A;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  border: none;
}
.live-msg.customer .live-msg-bubble {
  background: #EEF4FF;
  color: #1A1A1A;
  border: none;
}
.live-chat-input {
  background: #F0F0F0;
  border-radius: 24px;
  border: none;
}
.live-chat-input:focus {
  border: none;
  box-shadow: none;
}
/* 운영자 버블 흰 배경 → 텍스트 다크 오버라이드 */
.welcome-msg-header {
  color: #1A1A1A;
}
.welcome-msg-sub {
  color: rgba(0, 0, 0, 0.55);
}
.welcome-msg-divider {
  background: rgba(0, 0, 0, 0.10);
}
.welcome-msg-intro {
  color: #1A1A1A;
}
.welcome-msg-item {
  color: rgba(0, 0, 0, 0.80);
}
.welcome-msg-note {
  color: rgba(0, 0, 0, 0.55);
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}

/* ================================================================
   이탈 경고 모달 — 신규(익명) 유저 전용
   인증 유저는 SMS 재진입 가능 → 팝업 없음
   ================================================================ */
.leave-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.leave-modal-overlay[hidden] { display: none; }

.leave-modal {
  background: var(--bg-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-4) var(--space-6) max(var(--space-8), env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-modal);
  animation: gallerySlideUp 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.leave-modal__handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-5);
}

.leave-modal__icon {
  font-size: 2rem;
  text-align: center;
  margin-bottom: var(--space-2);
}

.leave-modal__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 var(--space-2);
}

.leave-modal__desc {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 var(--space-5);
}

.leave-modal__benefits {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

.leave-modal__benefits-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-3);
}

.leave-modal__benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.leave-modal__benefit-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.leave-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.leave-modal-btn {
  width: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: var(--transition);
}

.leave-modal-btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.leave-modal-btn--primary:hover { background: var(--color-primary-dark); }
.leave-modal-btn--primary:active { transform: scale(0.98); }

.leave-modal-btn--ghost {
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  padding: var(--space-2);
}
.leave-modal-btn--ghost:hover { color: var(--text-secondary); }

@media (min-width: 480px) {
  .leave-modal-overlay { align-items: center; }
  .leave-modal { border-radius: var(--radius-lg); }
}

/* ── 운영자 아바타 이미지 로드 실패 폴백 ── */
.live-msg-avatar--fallback {
  background: linear-gradient(135deg, #3b4890, #5a68b0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}
.live-msg-avatar--fallback::after {
  content: '상';
}

/* ── 320px/375px 소형 디바이스 대응 ── */
@media (max-width: 375px) {
  .live-msg-body { max-width: calc(100vw - 48px); }
  .live-msg.customer .live-msg-body { max-width: calc(100vw - 48px); }
}

/* ================================================================
   480px~540px 갭 보완 — 중간 소형 기기
   ================================================================ */
@media (max-width: 540px) {
  /* 챗봇 팝업 메시지 영역 padding 축소 */
  .chatbot-messages {
    padding: var(--space-3) var(--space-3);
    gap: 10px;
  }

  /* 말풍선 최대폭 확대 */
  .msg-bubble { max-width: 88%; }

  /* 라이브 채팅 메시지 영역 */
  .live-chat-messages {
    padding: var(--space-4) var(--space-4);
    gap: var(--space-3);
  }

  /* 챗봇 입력창 */
  .chatbot-input-area {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }

  /* 선택지 버튼 wrap */
  .choices-wrap {
    padding-left: 28px;
    gap: var(--space-1);
  }
  .choice-btn {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-3);
  }
}

/* ================================================================
   360px 이하 초소형 기기 (갤럭시 미니 등)
   ================================================================ */
@media (max-width: 360px) {
  /* 챗봇 메시지 영역 */
  .chatbot-messages {
    padding: var(--space-2) var(--space-2);
  }

  /* 말풍선 최대폭 */
  .msg-bubble {
    max-width: 92%;
    font-size: var(--font-size-xs);
    padding: 8px 10px;
  }

  /* 챗봇 헤더 */
  .chatbot-name    { font-size: 0.875rem; }
  .chatbot-status  { font-size: 0.6875rem; }

  /* 선택지 버튼 */
  .choices-wrap  { padding-left: 24px; }
  .choice-btn    { font-size: 0.6875rem; padding: 5px 10px; }

  /* 라이브 채팅 */
  .live-chat-messages {
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .live-msg-bubble {
    font-size: 0.875rem;
    padding: 8px 12px;
  }

  /* 라이브 채팅 헤더 */
  .chat-page-header {
    padding: var(--space-3) var(--space-3);
  }
}