/* ═══════════════════════════════════════════════════════════════
   mobileN Chatbot Widget  —  chatbot.css
   ═══════════════════════════════════════════════════════════════ */

/* ── 트리거 버튼 ─────────────────────────────────────────────── */
#cb-trigger {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C4A55A 0%, #a8893e 100%);
  box-shadow: 0 4px 24px rgba(196,165,90,.45), 0 2px 8px rgba(0,0,0,.4);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
#cb-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 32px rgba(196,165,90,.6), 0 2px 8px rgba(0,0,0,.4);
}
#cb-trigger:active { transform: scale(.96); }
#cb-trigger svg { width: 24px; height: 24px; color: #fff; flex-shrink: 0; }

/* 배지 */
#cb-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px;
  background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-bg, #131316);
  opacity: 0; transform: scale(0);
  transition: opacity .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
#cb-badge.show { opacity: 1; transform: scale(1); }

/* 툴팁 */
#cb-trigger::before {
  content: attr(data-tip);
  position: absolute; right: 68px; bottom: 50%;
  transform: translateY(50%);
  background: rgba(20,20,24,.95);
  border: 1px solid rgba(255,255,255,.1);
  color: #f0f0f0; font-size: 12.5px; white-space: nowrap;
  padding: 6px 12px; border-radius: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
#cb-trigger:hover::before { opacity: 1; }

/* ── 챗 윈도우 ───────────────────────────────────────────────── */
#cb-window {
  position: fixed;
  bottom: 96px; right: 28px;
  width: 360px;
  max-height: 560px;
  display: flex; flex-direction: column;
  background: rgba(14, 14, 18, 0.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  box-shadow: 0 16px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  z-index: 8999;
  overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.97);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.2,.64,1);
}
#cb-window.open {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: all;
}

/* ── 헤더 ────────────────────────────────────────────────────── */
#cb-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: rgba(196,165,90,.08);
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.cb-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #C4A55A, #a8893e);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cb-avatar svg { width: 18px; height: 18px; color: #fff; }
.cb-header-info { flex: 1; min-width: 0; }
.cb-header-name {
  font-size: 13.5px; font-weight: 700;
  color: #f0f0f0; letter-spacing: -.01em;
  line-height: 1.2;
}
.cb-header-status {
  font-size: 11px; color: #888;
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px;
}
.cb-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,.6);
  animation: cb-pulse 2s infinite;
}
@keyframes cb-pulse {
  0%,100% { opacity: 1; } 50% { opacity: .5; }
}
#cb-close {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #888; transition: background .15s, color .15s;
  flex-shrink: 0;
}
#cb-close:hover { background: rgba(255,255,255,.12); color: #f0f0f0; }
#cb-close svg { width: 14px; height: 14px; }

/* ── 메시지 영역 ─────────────────────────────────────────────── */
#cb-messages {
  flex: 1; overflow-y: auto;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
#cb-messages::-webkit-scrollbar { width: 4px; }
#cb-messages::-webkit-scrollbar-track { background: transparent; }
#cb-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* 봇 말풍선 */
.cb-bot-row {
  display: flex; gap: 8px; align-items: flex-end;
  animation: cb-msg-in .2s ease;
}
.cb-bot-icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #C4A55A, #a8893e);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 2px;
}
.cb-bot-icon svg { width: 13px; height: 13px; color: #fff; }
.cb-bot-bubble {
  max-width: 82%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px 16px 16px 4px;
  padding: 10px 13px;
  font-size: 13.5px; color: #e0e0e0; line-height: 1.65;
  word-break: break-word;
}

/* 유저 말풍선 */
.cb-user-row {
  display: flex; justify-content: flex-end;
  animation: cb-msg-in .2s ease;
}
.cb-user-bubble {
  max-width: 82%;
  background: rgba(196,165,90,.18);
  border: 1px solid rgba(196,165,90,.25);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 13px;
  font-size: 13.5px; color: #f0e8d0; line-height: 1.65;
  word-break: break-word;
}

/* 버튼 그룹 */
.cb-btn-group {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 4px 0 4px 34px;
  animation: cb-msg-in .2s ease .05s both;
}
.cb-btn {
  padding: 7px 13px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  font-size: 12.5px; color: #d0d0d0;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.cb-btn:hover {
  background: rgba(196,165,90,.15);
  border-color: rgba(196,165,90,.4);
  color: #f0e8d0;
}
.cb-btn:active { transform: scale(.97); }
.cb-btn.cb-btn-link {
  background: rgba(196,165,90,.12);
  border-color: rgba(196,165,90,.3);
  color: #C4A55A;
}
.cb-btn.cb-btn-link:hover {
  background: rgba(196,165,90,.22);
  color: #d4b56a;
}

/* 타이핑 인디케이터 */
.cb-typing {
  display: flex; gap: 8px; align-items: flex-end;
}
.cb-typing-dots {
  display: flex; gap: 4px; align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px 16px 16px 4px;
  padding: 11px 14px;
}
.cb-typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(196,165,90,.6);
  animation: cb-dot 1.2s infinite;
}
.cb-typing-dots span:nth-child(2) { animation-delay: .2s; }
.cb-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes cb-dot {
  0%,60%,100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

@keyframes cb-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Claude 폴백 표시 */
.cb-fallback-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: #C4A55A;
  margin-top: 5px; opacity: .8;
}

/* ── 입력창 ──────────────────────────────────────────────────── */
#cb-input-area {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
#cb-text {
  flex: 1 !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 20px !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  color: #e0e0e0 !important;
  outline: none !important;
  transition: border-color .15s;
  font-family: inherit !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#cb-text::placeholder { color: #666 !important; }
#cb-text:focus { border-color: rgba(196,165,90,.6) !important; outline: none !important; box-shadow: none !important; }
#cb-send {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #C4A55A, #a8893e);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .15s, box-shadow .15s;
}
#cb-send:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 12px rgba(196,165,90,.4);
}
#cb-send:active { transform: scale(.95); }
#cb-send svg { width: 15px; height: 15px; color: #fff; }

/* ── 모바일 ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #cb-window {
    bottom: 0; right: 0; left: 0;
    width: 100%; max-height: 75dvh;
    border-radius: 20px 20px 0 0;
    border-left: none; border-right: none; border-bottom: none;
  }
  #cb-trigger {
    bottom: 20px; right: 20px;
    width: 52px; height: 52px;
  }
  #cb-trigger::before { display: none; }
}

/* ── 라이트모드 오버라이드 ─────────────────────────────────── */
[data-theme="light"] #cb-window {
  background: rgba(255, 255, 255, 0.97);
  border-color: #dedad0;
  box-shadow: 0 16px 60px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] #cb-header {
  background: rgba(196,165,90,.07);
  border-bottom-color: #e8e4dc;
}
[data-theme="light"] .cb-header-name { color: #18181a; }
[data-theme="light"] .cb-header-status { color: #5a5a62; }
[data-theme="light"] #cb-close {
  background: rgba(0,0,0,.05);
  color: #5a5a62;
}
[data-theme="light"] #cb-close:hover {
  background: rgba(0,0,0,.10);
  color: #18181a;
}
[data-theme="light"] #cb-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); }
[data-theme="light"] .cb-bot-bubble {
  background: #f4f3ef;
  border-color: #dedad0;
  color: #18181a;
}
[data-theme="light"] .cb-user-bubble { color: #4a3510; }
[data-theme="light"] .cb-btn {
  background: #f4f3ef;
  border-color: #dedad0;
  color: #333340;
}
[data-theme="light"] .cb-btn:hover {
  background: rgba(196,165,90,.12);
  border-color: rgba(196,165,90,.4);
  color: #7a5a1a;
}
[data-theme="light"] .cb-typing-dots {
  background: #f4f3ef;
  border-color: #dedad0;
}
[data-theme="light"] #cb-input-area { border-top-color: #e8e4dc; }
[data-theme="light"] #cb-text {
  background: #f4f3ef;
  border-color: #dedad0;
  color: #18181a;
}
[data-theme="light"] #cb-text::placeholder { color: #aaa; }
[data-theme="light"] #cb-trigger::before {
  background: rgba(30,30,34,.92);
  border-color: rgba(0,0,0,.15);
  color: #f0f0f0;
}
[data-theme="light"] #cb-badge { border-color: #f4f3ef; }